/* Chaplain TIG's Story ... presentation page
   Dark, cinematic. Palette pulled from the film itself: tar black, cracked earth,
   and the warm light that arrives with her. */

:root{
  --tar:      #07070a;
  --tar-2:    #0d0e13;
  --earth:    #7a5c42;
  --earth-lt: #b08e6f;
  --light:    #f6ead6;
  --glow:     #f0c98a;
  --muted:    #9a9188;
  --font-display: "Georgia", "Iowan Old Style", "Times New Roman", serif;
  --font-body: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--tar); color:var(--light); }
body{ font-family:var(--font-body); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img{ max-width:100%; display:block; }

/* ---------- loader ---------- */
#loader{
  position:fixed; inset:0; z-index:9999; background:var(--tar);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.4rem;
  transition:opacity .8s ease;
}
#loader.done{ opacity:0; pointer-events:none; }
.loader-brand{ font-family:var(--font-display); font-size:1.1rem; letter-spacing:.42em;
  text-transform:uppercase; color:var(--muted); }
#loader-track{ width:min(320px,60vw); height:1px; background:rgba(246,234,214,.18); overflow:hidden; }
#loader-bar{ height:100%; width:0%; background:var(--glow); transition:width .25s ease; }
#loader-percent{ font-size:.72rem; letter-spacing:.3em; color:var(--muted); }

/* ---------- hero ---------- */
.hero{
  position:relative; z-index:20; height:100vh; width:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 6vw; background:var(--tar);
}
.eyebrow{
  display:block; font-size:.72rem; letter-spacing:.45em; text-transform:uppercase;
  color:var(--muted); margin-bottom:2.2rem;
}
.hero-heading{
  font-family:var(--font-display); font-weight:400; margin:0;
  font-size:clamp(3rem, 11vw, 10.5rem); line-height:.94; letter-spacing:-.02em;
}
.hero-heading .w{ display:inline-block; }
.hero-tagline{
  margin:2.6rem auto 0; max-width:44ch; color:var(--muted);
  font-size:clamp(.9rem,1.5vw,1.05rem); line-height:1.8;
}
.scroll-cue{
  position:absolute; bottom:3.5rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.9rem;
  font-size:.62rem; letter-spacing:.4em; text-transform:uppercase; color:var(--muted);
}
.scroll-cue i{ width:1px; height:46px; background:linear-gradient(var(--muted),transparent); }

/* ---------- the film ---------- */
.canvas-wrap{
  position:fixed; inset:0; z-index:5;
}
#canvas{ width:100%; height:100%; display:block; }
#film-vignette{
  position:fixed; inset:0; z-index:6; pointer-events:none; opacity:0;
  background:radial-gradient(ellipse at center, transparent 42%, rgba(3,3,5,.82) 100%);
}

#scroll-container{ position:relative; z-index:10; height:800vh; }

/* ---------- act 2 : the turn ---------- */
.act-turn{
  position:absolute; top:0; left:0; width:100%;
  transform:translateY(-50%); text-align:center; padding:0 5vw;
}
.turn-heading{
  font-family:var(--font-display); font-weight:400; margin:0;
  font-size:clamp(2.4rem,8.5vw,8rem); line-height:1.02; letter-spacing:-.02em;
  text-shadow:0 6px 60px rgba(0,0,0,.9);
}
.turn-heading .l{ display:inline-block; }
.accent{ color:var(--glow); }

/* ---------- act 3 : annie ---------- */
.act-annie{
  position:absolute; top:0; left:0; width:100%;
  transform:translateY(-50%); padding:0 6vw;
}
.triptych{
  display:flex; gap:clamp(.8rem,2.4vw,2.4rem); align-items:center; justify-content:center;
}
.tri-item{ position:relative; flex:0 1 auto; width:clamp(140px,21vw,300px); }
.tri-item img{
  width:100%; height:auto; border-radius:2px;
  box-shadow:0 40px 90px rgba(0,0,0,.75);
}
.tri-item figcaption{
  margin-top:1rem; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); text-align:center;
}
.tri-item:nth-child(2){ width:clamp(170px,26vw,370px); }

/* ---------- act 4 : the wall of days ---------- */
.act-wall{
  position:relative; z-index:20; background:var(--tar);
  padding:22vh 0 18vh;
}
.wall-intro{ text-align:center; margin-bottom:11vh; padding:0 6vw; }
.wall-heading{
  font-family:var(--font-display); font-weight:400; margin:0;
  font-size:clamp(2rem,5.5vw,4.6rem); line-height:1.05; letter-spacing:-.02em;
}
.wall{
  display:flex; gap:clamp(.5rem,1.1vw,1.1rem);
  padding:0 clamp(.5rem,1.1vw,1.1rem); align-items:flex-start;
}
.wall-col{ flex:1 1 0; display:flex; flex-direction:column; gap:clamp(.5rem,1.1vw,1.1rem); will-change:transform; }
.wall-item{
  position:relative; overflow:hidden; border-radius:2px; background:var(--tar-2);
  opacity:0; will-change:transform,opacity;
}
.wall-item img{ width:100%; height:auto; }
.wall-item figcaption{
  position:absolute; inset:auto 0 0 0; padding:1.4rem 1rem .9rem;
  font-size:.74rem; line-height:1.45; color:var(--light);
  background:linear-gradient(transparent, rgba(4,4,6,.92));
  opacity:0; transform:translateY(8px); transition:opacity .45s ease, transform .45s ease;
}
.wall-item:hover figcaption{ opacity:1; transform:translateY(0); }

/* ---------- act 5 : close ---------- */
.act-close{
  position:relative; z-index:20; background:var(--tar);
  min-height:88vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:0 6vw; gap:.2rem;
}
.close-line{
  font-family:var(--font-display); margin:0;
  font-size:clamp(1.5rem,4.4vw,3.6rem); line-height:1.25; letter-spacing:-.01em;
}
.close-sig{
  margin-top:5rem; display:flex; flex-direction:column; gap:.7rem;
  font-size:.72rem; letter-spacing:.34em; text-transform:uppercase; color:var(--muted);
}
.close-sig strong{ color:var(--light); font-weight:500; letter-spacing:.28em; }

/* ---------- mobile ---------- */
@media (max-width:820px){
  #scroll-container{ height:620vh; }
  .triptych{ flex-wrap:wrap; }
  .tri-item, .tri-item:nth-child(2){ width:44vw; }
  .wall-item figcaption{ opacity:1; transform:none; font-size:.66rem; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  .canvas-wrap{ clip-path:none !important; }
  .wall-item{ opacity:1 !important; }
}

/* ---------- presentation control hint ---------- */
.key-hint{
  position:fixed; left:50%; bottom:1.6rem; transform:translateX(-50%);
  z-index:60; font-size:.6rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--muted); opacity:.55; pointer-events:none; transition:opacity .6s ease;
}
.key-hint.hide{ opacity:0; }
.key-hint kbd{
  font:inherit; letter-spacing:.18em; border:1px solid rgba(246,234,214,.28);
  border-radius:3px; padding:.2em .55em; margin:0 .25em;
}