/* ===================================================================
   THE NIGHT OF THE TWENTY-FIVE RIDDLES
   One continuous forest. It exists first; the dialogue is simply
   displayed inside it. The environment never rearranges itself —
   the visitor pans through one place, like a camera moving forward.
=================================================================== */

/* Marcellus has the calm, carved quality of an old inscription: ancient
   without becoming decorative or reading like a printed book page. */
@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Marcellus+SC&display=swap');

.tnotr-page{
  background:#0B0B0B;
  color:#b58b49;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

.tnotr-page .site-nav{
  position:fixed;
  background:linear-gradient(to bottom, rgba(6,6,5,0.7), transparent);
  border-bottom:none;
  backdrop-filter:none;
  z-index:80;
}
.tnotr-page .site-nav .brand,
.tnotr-page .site-nav .links a{ color:#8a8074; }
.tnotr-page .site-nav .links a.active,
.tnotr-page .site-nav .links a:hover{ color:#ECE5D8; }

.tnotr-page section{ padding:0; border-bottom:none; }

/* ---------- the forest: one fixed window onto one huge world ----------
   Each layer is a flat plane of the same environment. Branches inside
   a layer are positioned far apart across a tall virtual canvas — the
   layer itself is panned upward as the page scrolls, at its own
   fraction of scroll speed. Slower layers = farther away = depth. */
.tnotr-forest{
  position:fixed;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
  background:#0B0B0B;
}
.tnotr-forest .layer{
  position:absolute;
  inset:0;
  will-change:transform;
}

.tnotr-layer-bg{ z-index:1; }
.tnotr-layer-roots-back{ z-index:2; }
.tnotr-layer-mid{ z-index:3; }
.tnotr-layer-mist{ z-index:4; }
.tnotr-layer-ash{ z-index:5; }
/* content sits at z-index:10, defined below */
.tnotr-layer-fg{ z-index:20; }
.tnotr-layer-roots-front{ z-index:21; }

.branch{
  position:absolute;
  height:auto;
  max-width:none;
  opacity:0;
  transition:opacity 2.2s ease;
}
.tnotr-forest.is-in .branch{ opacity:1; }

.tnotr-layer-bg .branch{ opacity:0; }
.tnotr-forest.is-in .tnotr-layer-bg .branch{ opacity:.16; }
.tnotr-layer-mid .branch{ opacity:0; }
.tnotr-forest.is-in .tnotr-layer-mid .branch{ opacity:.34; }
.tnotr-layer-fg .branch{ opacity:0; filter:blur(.8px) brightness(.8); }
.tnotr-forest.is-in .tnotr-layer-fg .branch{ opacity:.5; }

.tnotr-layer-bg .branch{ filter:brightness(1.1); }

/* roots: same continuous system, not scoped to the hero — they simply
   live near the top of the world and pan out of view as you walk on */
.root{
  position:absolute;
  height:auto;
  max-width:none;
  opacity:0;
  transition:opacity 2s ease;
}
.tnotr-forest.is-in .tnotr-layer-roots-back .root{ opacity:.28; filter:brightness(.55) saturate(.55); }
.tnotr-forest.is-in .tnotr-layer-roots-front .root{ opacity:.5; filter:brightness(.7) saturate(.65); }

/* mist: broad, slow, near-invisible */
.tnotr-layer-mist .mist-drift{
  position:absolute;
  top:-20vh;
  left:-40vw;
  width:220vw;
  height:160vh;
  opacity:.09;
  background-image:url('images/night-of-riddles/mist.webp');
  background-repeat:no-repeat;
  background-size:cover;
  animation:tnotr-mist-drift 28s linear infinite alternate;
}
@keyframes tnotr-mist-drift{
  0%{ transform:translateX(-2.5%); }
  100%{ transform:translateX(2.5%); }
}

/* ash: extremely sparse, scattered across the whole canvas, never snowfall */
.tnotr-layer-ash .ash-tile{
  position:absolute;
  width:900px;
  height:600px;
  opacity:.14;
  background-image:url('images/night-of-riddles/ash.webp');
  background-repeat:no-repeat;
  background-size:contain;
  animation:tnotr-ash-drift 46s ease-in-out infinite;
}
@keyframes tnotr-ash-drift{
  0%{ transform:translate(0,0); }
  50%{ transform:translate(-1%, 1.6%); }
  100%{ transform:translate(0,0); }
}

/* vignette — barely visible, focuses the eye toward center */
.tnotr-vignette{
  position:fixed;
  inset:0;
  z-index:6;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 58%, rgba(0,0,0,.24) 100%);
}

/* ---------- content: the dialogue, the actual focus ---------- */
.tnotr-content{
  position:relative;
  z-index:10;
}

.tnotr-hero,
.tnotr-scene,
.tnotr-final{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:10vh 8vw;
}

.tnotr-hero{
  opacity:0;
  transition:opacity .95s ease;
}
.tnotr-hero.is-in{ opacity:1; }

.tnotr-hero .hero-title{
  font-family:'Marcellus SC', serif;
  font-weight:400;
  font-size:clamp(1.7rem, 4.5vw, 3.75rem);
  line-height:1.24;
  letter-spacing:.055em;
  color:#d2ad6a;
  margin:0;
  max-width:24ch;
  white-space:normal;
  text-wrap:balance;
}
.tnotr-hero .hero-sep{
  width:52px;
  height:1px;
  background:#8F7A52;
  margin:2.6rem 0;
  opacity:.8;
}
.tnotr-hero .hero-sub{
  font-family:'Marcellus', serif;
  font-style:normal;
  font-weight:400;
  font-size:clamp(.95rem, 1.5vw, 1.14rem);
  line-height:1.55;
  color:#a98245;
  letter-spacing:.085em;
  margin:0;
}

/* ---------- dialogue scenes ---------- */
.tnotr-scene{
  opacity:0;
  transition:opacity .95s ease;
}
.tnotr-scene.is-in{ opacity:1; }

.tnotr-scene p{
  font-family:'Marcellus', serif;
  font-weight:400;
  font-size:clamp(1.48rem, 2.6vw, 2.22rem);
  line-height:1.45;
  color:#bc9556;
  letter-spacing:.035em;
  max-width:34ch;
  margin:0 auto;
  text-wrap:balance;
}
.tnotr-scene p + p{ margin-top:1.85em; }

/* ---------- final section ---------- */
.tnotr-final{
  opacity:0;
  transition:opacity .95s ease;
}
.tnotr-final.is-in{ opacity:1; }
.tnotr-final .final-title{
  font-family:'Marcellus SC', serif;
  font-weight:400;
  font-size:clamp(1.65rem, 3.8vw, 3rem);
  line-height:1.24;
  letter-spacing:.055em;
  color:#d2ad6a;
  margin:0 0 1.6rem;
  max-width:16ch;
  text-wrap:balance;
}
.tnotr-final .coming-soon{
  font-family:'Marcellus SC', serif;
  font-weight:400;
  font-size:.72rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:#a98245;
}

/* ---------- mobile forest composition ----------
   Desktop uses a wide camera travelling through the forest. On a portrait
   screen that crop is too narrow, so the same artwork is re-composed into
   a vertical passage: fixed roots frame the sides while smaller branch
   layers move through the open centre behind the dialogue. */
@media (max-width:760px){
  .tnotr-forest::before,
  .tnotr-forest::after{
    content:"";
    position:absolute;
    z-index:7;
    width:62vw;
    height:100svh;
    pointer-events:none;
    background-repeat:no-repeat;
    background-size:auto 92svh;
    opacity:.32;
    filter:brightness(.62) saturate(.6);
  }
  .tnotr-forest::before{
    top:0;
    left:-18vw;
    background-image:url('images/night-of-riddles/root-02.webp');
    background-position:center top;
  }
  .tnotr-forest::after{
    top:7svh;
    right:-18vw;
    background-image:url('images/night-of-riddles/root-05.webp');
    background-position:center top;
  }

  /* The fixed side roots replace the desktop-only root cluster. */
  .tnotr-layer-roots-back,
  .tnotr-layer-roots-front{ display:none; }

  /* Scale the wide desktop paintings to the phone viewport, then centre
     their strongest forms so branches frame rather than fill the screen. */
  .tnotr-layer-bg .branch{ width:245vw !important; }
  .tnotr-layer-mid .branch{ width:270vw !important; }
  .tnotr-layer-fg .branch{ width:285vw !important; }

  .tnotr-layer-bg .branch:nth-child(1),
  .tnotr-layer-bg .branch:nth-child(3),
  .tnotr-layer-mid .branch:nth-child(2),
  .tnotr-layer-mid .branch:nth-child(4),
  .tnotr-layer-fg .branch:nth-child(1),
  .tnotr-layer-fg .branch:nth-child(3){ left:-78vw !important; }
  .tnotr-layer-bg .branch:nth-child(2),
  .tnotr-layer-bg .branch:nth-child(4),
  .tnotr-layer-mid .branch:nth-child(1),
  .tnotr-layer-mid .branch:nth-child(3),
  .tnotr-layer-fg .branch:nth-child(2),
  .tnotr-layer-fg .branch:nth-child(4){ right:-78vw !important; }

  .tnotr-forest.is-in .tnotr-layer-bg .branch{ opacity:.13; }
  .tnotr-forest.is-in .tnotr-layer-mid .branch{ opacity:.27; }
  .tnotr-forest.is-in .tnotr-layer-fg .branch{ opacity:.36; }

  .tnotr-layer-mist .mist-drift{
    left:-65vw;
    width:230vw;
    opacity:.07;
  }
  .tnotr-layer-ash .ash-tile{
    width:170vw;
    height:110vw;
    opacity:.09;
  }

  .tnotr-hero,
  .tnotr-scene,
  .tnotr-final{ padding:12svh 7vw; }
  .tnotr-scene p{ font-size:clamp(1.2rem, 5vw, 1.65rem); max-width:24ch; }
}

@media (prefers-reduced-motion: reduce){
  .tnotr-scene, .tnotr-final, .root, .branch{ transition:opacity .5s ease; }
  .mist-drift, .ash-tile{ animation:none; }
}