:root{
  --bg:#05060a;
  --ink:#fff6e8;
  --ink-dim:rgba(255,246,232,.62);
  --ink-faint:rgba(255,246,232,.34);
  --gold:#ffd27f;
  --gold-soft:#ffe9c2;
  --accent:#ffd27f;               /* recolored per-day by JS */
  --serif:'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --display:'Cinzel', 'Cormorant Garamond', serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --slow:cubic-bezier(.65,.02,.16,1);
  --safe: env(safe-area-inset-bottom, 0px);
  /* Layered legibility shadows: a tight dark edge for contrast + a wide dark halo
     that darkens the immediate background so cream text reads on ANY scene. */
  --sh-title: 0 1px 3px rgba(0,0,0,.85), 0 2px 14px rgba(0,0,0,.62), 0 0 46px rgba(0,0,0,.5);
  --sh-text: 0 1px 2px rgba(0,0,0,.92), 0 1px 10px rgba(0,0,0,.64), 0 0 26px rgba(0,0,0,.42);
  --sh-ui: 0 1px 2px rgba(0,0,0,.88), 0 0 12px rgba(0,0,0,.6);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);overflow:hidden;}
body{
  font-family:var(--serif);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  cursor:default;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}

#stage{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:0;}

/* ---------- Cinematic overlays ---------- */
#vignette{
  position:fixed;inset:0;z-index:5;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 44%, transparent 42%, rgba(0,0,0,.28) 74%, rgba(0,0,0,.62) 100%);
  mix-blend-mode:multiply;
}
#grain{
  position:fixed;inset:-50%;z-index:6;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;will-change:transform;
}
@keyframes grain{
  0%{transform:translate(0,0)}10%{transform:translate(-3%,-4%)}20%{transform:translate(-8%,3%)}
  30%{transform:translate(5%,-6%)}40%{transform:translate(-4%,7%)}50%{transform:translate(-8%,4%)}
  60%{transform:translate(6%,0)}70%{transform:translate(-5%,5%)}80%{transform:translate(3%,8%)}
  90%{transform:translate(-2%,-5%)}100%{transform:translate(0,0)}
}
/* ---------- Legibility scrims (keep text readable over busy scenes) ---------- */
#scrim-bottom,#scrim-rail{position:fixed;pointer-events:none;z-index:8;opacity:0;transition:opacity 1.4s var(--ease);}
body.begun #scrim-bottom,body.begun #scrim-rail{opacity:1;}
#scrim-bottom{
  left:0;right:0;bottom:0;height:60vh;
  background:linear-gradient(to top,
    rgba(3,4,8,.60) 0%,
    rgba(3,4,8,.40) 20%,
    rgba(3,4,8,.16) 45%,
    transparent 72%);
}
#scrim-rail{
  top:0;bottom:0;right:0;width:clamp(130px,17vw,320px);
  background:linear-gradient(to left,
    rgba(3,4,8,.44) 0%,
    rgba(3,4,8,.22) 42%,
    transparent 100%);
}

#letterbox .bar{position:fixed;left:0;right:0;height:8vh;background:#000;z-index:7;pointer-events:none;transition:height 1.2s var(--slow);}
#letterbox .bar.top{top:0}
#letterbox .bar.bottom{bottom:0}
body.cinema #letterbox .bar{height:11vh;}

/* ---------- Scripture ---------- */
#scripture{
  position:fixed;z-index:10;left:0;right:0;bottom:0;
  padding: 0 clamp(1.5rem,6vw,7rem) calc(13vh + var(--safe));
  pointer-events:none;
  display:flex;justify-content:flex-start;
}
.scripture-inner{max-width:46rem;}
.day-eyebrow{
  display:flex;align-items:center;gap:.9rem;margin-bottom:.9rem;
  font-family:var(--display);letter-spacing:.42em;text-transform:uppercase;
  font-size:clamp(.6rem,1.1vw,.72rem);color:var(--accent);
  opacity:0;transform:translateY(12px);
}
.day-eyebrow .day-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.9rem;height:1.9rem;border:1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius:50%;font-size:.72rem;letter-spacing:0;color:var(--accent);
}
.day-title{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.9rem,5.2vw,3.5rem);line-height:1.02;
  letter-spacing:.01em;margin-bottom:1.1rem;
  color:var(--gold-soft);
  text-shadow:0 2px 40px rgba(0,0,0,.6);
  opacity:0;transform:translateY(16px);
}
.verses{
  font-size:clamp(1.05rem,2.1vw,1.5rem);
  font-weight:300;line-height:1.5;color:var(--ink);
  text-shadow:0 1px 24px rgba(0,0,0,.75);
}
.verses p{
  margin:.15em 0;opacity:0;transform:translateY(14px);
  filter:blur(6px);
}
.verses p .ref{
  color:var(--accent);font-size:.62em;vertical-align:.5em;
  margin-right:.5em;letter-spacing:.08em;opacity:.8;font-style:normal;
}
.verses em{font-style:italic;color:var(--gold-soft);}

/* reveal states toggled by JS */
#scripture.show .day-eyebrow{opacity:1;transform:none;transition:opacity 1s var(--ease) .1s, transform 1s var(--ease) .1s;}
#scripture.show .day-title{opacity:1;transform:none;transition:opacity 1.1s var(--ease) .25s, transform 1.1s var(--ease) .25s;}
#scripture.show .verses p{opacity:1;transform:none;filter:blur(0);transition:opacity 1.3s var(--ease) var(--d,.4s), transform 1.3s var(--ease) var(--d,.4s), filter 1.3s var(--ease) var(--d,.4s);}

/* ---------- Day rail ---------- */
#rail{
  position:fixed;z-index:11;right:clamp(1rem,2.4vw,2.4rem);top:50%;
  transform:translateY(-50%);pointer-events:auto;
}
.rail-list{list-style:none;display:flex;flex-direction:column;gap:.15rem;}
.rail-list li{position:relative;}
.rail-dot{
  --sz:11px;
  appearance:none;background:none;border:0;cursor:pointer;
  display:flex;align-items:center;gap:.8rem;padding:.5rem .1rem;
  color:var(--ink-faint);font-family:var(--display);
  letter-spacing:.18em;font-size:.62rem;
  /* full width + mark pinned to the right edge so every mark lines up vertically,
     regardless of caption length (buttons are fit-content by default) */
  width:100%;flex-direction:row-reverse;justify-content:flex-start;
  transition:color .5s var(--ease);
}
.rail-dot .mark{
  width:var(--sz);height:var(--sz);border-radius:50%;
  border:1px solid color-mix(in srgb, var(--ink) 40%, transparent);
  position:relative;flex:none;transition:all .5s var(--ease);
}
.rail-dot .mark::after{
  content:'';position:absolute;inset:2px;border-radius:50%;
  background:var(--accent);transform:scale(0);transition:transform .5s var(--ease);
}
.rail-dot .caption{opacity:0;transform:translateX(6px);transition:all .45s var(--ease);white-space:nowrap;}
.rail-dot:hover{color:var(--ink-dim);}
.rail-dot:hover .caption{opacity:1;transform:none;}
.rail-dot:hover .mark{border-color:var(--accent);}
li.active .rail-dot{color:var(--gold-soft);}
li.active .rail-dot .mark{border-color:var(--accent);box-shadow:0 0 14px color-mix(in srgb,var(--accent) 60%, transparent);}
li.active .rail-dot .mark::after{transform:scale(1);}
li.active .rail-dot .caption{opacity:1;transform:none;}
li.done .rail-dot .mark::after{transform:scale(.5);opacity:.5;}

/* ---------- Controls ---------- */
#controls{position:fixed;z-index:11;left:50%;bottom:calc(3.2vh + var(--safe));transform:translateX(-50%);display:flex;gap:.8rem;}
.ctrl{
  width:46px;height:46px;border-radius:50%;
  background:rgba(255,246,232,.05);backdrop-filter:blur(8px);
  border:1px solid rgba(255,246,232,.16);color:var(--ink-dim);
  display:grid;place-items:center;cursor:pointer;
  transition:all .4s var(--ease);
}
.ctrl:hover{background:color-mix(in srgb,var(--accent) 16%, transparent);border-color:var(--accent);color:var(--gold-soft);transform:translateY(-2px);}
.ctrl:active{transform:translateY(0);}
.ctrl:disabled{opacity:.28;pointer-events:none;}

/* ---------- Top bar ---------- */
#topbar{
  position:fixed;z-index:11;top:0;left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(1.1rem,3vh,1.8rem) clamp(1.3rem,4vw,2.6rem);
}
.brand{
  font-family:var(--display);letter-spacing:.5em;font-size:.8rem;
  color:var(--ink-dim);padding:.35em .2em .35em .5em;
  appearance:none;background:none;border:0;cursor:pointer;
  transition:color .4s var(--ease), text-shadow .4s var(--ease);
}
.brand:hover{color:var(--gold-soft);text-shadow:0 0 18px color-mix(in srgb,var(--gold) 45%, transparent);}
.brand:focus-visible{outline:1px solid color-mix(in srgb,var(--gold) 60%, transparent);outline-offset:4px;border-radius:2px;}
.top-actions{display:flex;gap:.6rem;}
.pill{
  display:flex;align-items:center;gap:.5rem;
  background:rgba(255,246,232,.04);border:1px solid rgba(255,246,232,.14);
  color:var(--ink-dim);border-radius:100px;padding:.42rem .85rem;
  font-family:var(--display);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  cursor:pointer;transition:all .4s var(--ease);
}
.pill:hover{border-color:var(--accent);color:var(--gold-soft);}
.pill[aria-pressed="true"]{border-color:var(--accent);color:var(--gold-soft);background:color-mix(in srgb,var(--accent) 12%, transparent);}
.pill .ico-sound,.pill .ico-auto{width:8px;height:8px;border-radius:50%;background:currentColor;opacity:.5;transition:opacity .3s;}
.pill[aria-pressed="true"] .ico-sound,.pill[aria-pressed="true"] .ico-auto{opacity:1;box-shadow:0 0 8px currentColor;}

/* ---------- Day progress ---------- */
#dayprogress{position:fixed;z-index:11;left:0;top:0;height:2px;width:100%;background:transparent;}
#dayprogress .fill{display:block;height:100%;width:0;background:linear-gradient(90deg,transparent,var(--accent));box-shadow:0 0 10px var(--accent);transition:width .2s linear;}

/* ---------- Intro ---------- */
#intro{
  position:fixed;inset:0;z-index:20;display:grid;place-items:center;
  background:radial-gradient(120% 120% at 50% 40%, rgba(8,10,20,.2), rgba(3,4,8,.86) 70%);
  text-align:center;padding:2rem;
  transition:opacity 1.6s var(--ease), visibility 1.6s;
}
.intro-inner{max-width:40rem;}
.intro-kicker{font-family:var(--display);letter-spacing:.44em;text-transform:uppercase;font-size:.72rem;color:var(--accent);opacity:0;animation:rise 1.4s var(--ease) .2s forwards;}
.intro-title{
  font-family:var(--display);font-weight:500;
  font-size:clamp(2.6rem,9vw,6rem);line-height:1;margin:1.4rem 0 1rem;
  color:var(--gold-soft);letter-spacing:.02em;
  text-shadow:0 4px 60px rgba(255,210,127,.18);
  opacity:0;animation:rise 1.8s var(--ease) .45s forwards;
}
.intro-sub{font-size:clamp(1.05rem,2.4vw,1.4rem);font-weight:300;color:var(--ink-dim);opacity:0;animation:rise 1.6s var(--ease) .8s forwards;}
.begin{
  margin-top:2.6rem;font-family:var(--display);letter-spacing:.24em;text-transform:uppercase;
  font-size:.78rem;color:var(--bg);background:linear-gradient(180deg,var(--gold-soft),var(--gold));
  border:0;border-radius:100px;padding:1rem 2.4rem;cursor:pointer;
  box-shadow:0 8px 40px rgba(255,210,127,.28), inset 0 1px 0 rgba(255,255,255,.6);
  opacity:0;animation:rise 1.6s var(--ease) 1.15s forwards;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.begin:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 14px 60px rgba(255,210,127,.45), inset 0 1px 0 rgba(255,255,255,.7);}
.begin:active{transform:translateY(0) scale(1);}
.intro-hint{margin-top:2.2rem;font-size:.82rem;color:var(--ink-faint);letter-spacing:.04em;opacity:0;animation:rise 1.6s var(--ease) 1.5s forwards;}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
body.begun #intro{opacity:0;visibility:hidden;pointer-events:none;}

/* ---------- Loader ---------- */
#loader{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:var(--bg);transition:opacity 1s var(--ease), visibility 1s;}
.loader-inner{text-align:center;}
.loader-ring{width:54px;height:54px;margin:0 auto 1.4rem;border-radius:50%;border:1px solid rgba(255,246,232,.12);position:relative;}
.loader-ring span{position:absolute;inset:-1px;border-radius:50%;border:1px solid transparent;border-top-color:var(--gold);animation:spin 1.1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
.loader-text{font-family:var(--display);letter-spacing:.3em;text-transform:uppercase;font-size:.68rem;color:var(--ink-faint);}
body.loaded #loader{opacity:0;visibility:hidden;pointer-events:none;}

/* ---------- Hidden util ---------- */
body:not(.begun) #scripture,
body:not(.begun) #rail,
body:not(.begun) #controls,
body:not(.begun) #topbar,
body:not(.begun) #dayprogress{opacity:0;pointer-events:none;transition:opacity .6s;}
body.begun #topbar,body.begun #rail,body.begun #controls,body.begun #dayprogress{opacity:1;transition:opacity 1.4s var(--ease) .4s;}

/* Autoplay hides manual controls subtly */
body.autoplay #controls{opacity:.35;}

@media (max-width:720px){
  #rail{right:.6rem;}
  .rail-dot .caption{display:none;}
  #scripture{padding-bottom:calc(15vh + var(--safe));}
  .brand{letter-spacing:.32em;font-size:.7rem;}
  .pill .lbl{display:none;}
  #letterbox .bar{height:5vh;}
  body.cinema #letterbox .bar{height:6vh;}
}

@media (prefers-reduced-motion:reduce){
  #grain{animation:none;}
  *{scroll-behavior:auto;}
}

/* ---------- Text legibility: shadow under all UI text (readable on any scene) ---------- */
/* text-shadow inherits, so these cascade to verse lines, refs, emphasis, etc. */
.day-title{text-shadow:var(--sh-title);}
.verses{text-shadow:var(--sh-text);}
.day-eyebrow,.brand,.pill,.rail-dot{text-shadow:var(--sh-ui);}
.intro-title{text-shadow:var(--sh-title);}
.intro-kicker,.intro-sub,.intro-hint{text-shadow:var(--sh-ui);}
/* give the nav/toggle chrome a readable edge too */
.ctrl svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.7));}
.rail-dot .mark{box-shadow:0 1px 3px rgba(0,0,0,.5);}

@media (max-width:720px){
  /* stronger halos + a taller, darker bottom scrim where text covers more of the frame */
  :root{
    --sh-title: 0 1px 3px rgba(0,0,0,.94), 0 2px 12px rgba(0,0,0,.72), 0 0 42px rgba(0,0,0,.62);
    --sh-text: 0 1px 2px rgba(0,0,0,.96), 0 1px 10px rgba(0,0,0,.74), 0 0 24px rgba(0,0,0,.55);
  }
  #scrim-bottom{
    height:76vh;
    background:linear-gradient(to top,
      rgba(3,4,8,.76) 0%, rgba(3,4,8,.54) 22%, rgba(3,4,8,.24) 50%, transparent 80%);
  }
}