body {
  font-family: Arial, sans-serif;
  margin: 20px;
}

.hero-wide {
  width: 100%;
  height: auto;
  margin: 12px 0;
}
.confession-wrap {
  display: grid;
  grid-template-columns: 200px 1fr 200px; /* bigger side columns on desktop */
  gap: 20px;
  align-items: start;
}

.site-bg {
  position: fixed;
  inset: 0;
  z-index: -1; /* stays behind all content */
  background-image:
    linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,0.6)), /* transparent veil */
    url("assets/bodmer_papyrus_66.jpg");
  background-repeat: repeat;
  background-size: 400px auto;  /* adjust tile size (smaller = more repetition) */
  background-position: top left;
}


.side-gif {
  width: 100%;
  height: 400px;     /* tall gifs on desktop */
  object-fit: fill;  /* allow stretching */
}

/* mobile override */
@media (max-width: 600px) {
  .confession-wrap {
    grid-template-columns: 90px 1fr 90px; /* narrower columns for small screens */
    gap: 10px;
  }

  .side-gif {
    width: 90px;
    height: 250px;
    object-fit: fill;
  }
}

/* Smaller width but taller textarea */
#sin-form {
  max-width: 300px;
  margin: 0 auto;
}

textarea {
  width: 100%;
  min-height: 200px;   /* taller */
  resize: vertical;
}

button {
  margin-top: 10px;
}

.judgement-box {
  background-color: #f5e8c8; /* Papyrus-like yellow */
  border: 2px solid #c4a484; /* A slightly darker, aged border */
  border-radius: 5px;       /* Softly rounded corners */
  padding: 25px;            /* Generous space inside the box */
  margin: 20px auto;        /* Centering the box and adding vertical space */
  max-width: 80%;           /* Ensures the box doesn't stretch too wide */
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); /* A shadow for depth */
  text-align: center;       /* Center the text inside */
  font-family: 'Georgia', serif; /* A classic, readable serif font */
  color: #4a3c2a;           /* Dark brown text for a vintage feel */
  min-height: 50px;         /* Ensures the box has a minimum size */
}

section { display: none; }
section.active { display: block; }

/* The main overlay that takes over the screen */
#absolution-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #0d0d0d;
  overflow: hidden;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease-in-out;
}

#absolution-overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* Style for the dark, jagged shards of sin */
.shard {
  position: absolute;
  background-color: #2a0a0a;
  /* Using clip-path to create jagged, random shapes */
  clip-path: polygon(
      50% 0%, 61% 35%, 98% 35%, 68% 57%,
      79% 91%, 50% 70%, 21% 91%, 32% 57%,
      2% 35%, 39% 35%
  );
  transform-origin: center;
}

/* The central point of divine light */
#divine-light {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 60px 30px white, 0 0 100px 60px #f0e68c, 0 0 140px 90px #ff4500;
}

/* The final "ABSOLVED" text */
#absolution-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Times New Roman', serif;
  font-size: 5rem;
  color: #b8860b; /* A dark gold color */
  opacity: 0;
  text-shadow: 0 0 15px gold;
}

/* Ethereal golden motes of light */
.mote {
  position: absolute;
  bottom: -20px;
  background-color: gold;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  opacity: 0.7;
  box-shadow: 0 0 10px 2px gold;
}

/* --- ANIMATIONS --- */

/* Animation for the shards to shatter and fly away */
@keyframes shatter {
  from {
      transform: scale(1) rotate(0deg);
      opacity: 1;
  }
  to {
      transform: scale(0) rotate(720deg) translate(var(--translateX), var(--translateY));
      opacity: 0;
  }
}

/* Animation for the divine light to burst outwards */
@keyframes light-burst {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0.5; }
  50% { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(300); opacity: 0; }
}

/* Animation for the main overlay to transition from dark to pure white */
@keyframes cleanse-background {
  0%, 40% { background-color: #0d0d0d; }
  100% { background-color: #ffffff; }
}

/* Animation for the "ABSOLVED" text to fade in */
@keyframes fade-in-text {
  0%, 50% { opacity: 0; letter-spacing: 20px; }
  100% { opacity: 1; letter-spacing: 5px; }
}

/* Animation for the golden motes to float upwards */
@keyframes float-up {
  from {
      transform: translateY(0);
      opacity: 0.7;
  }
  to {
      transform: translateY(-100vh);
      opacity: 0;
  }
}