/* ===========================================================
   2bsaved.org — "What Must I Do To Be Saved?"
   Brand gradient: blue #2676b3 -> teal #49b99c -> purple #724c99
   =========================================================== */

:root{
  --blue:#2676b3;
  --teal:#49b99c;
  --purple:#724c99;
  --grad: linear-gradient(120deg,#2676b3 0%,#3a97a8 38%,#49b99c 55%,#5f7d9a 78%,#724c99 100%);
  --grad-soft: linear-gradient(120deg,#2676b3,#49b99c,#724c99);

  --bg0:#0b1017;
  --bg1:#111826;
  --bg2:#17202f;
  --card:#141c2b;
  --line:rgba(255,255,255,.09);

  --ink:#eef3f9;
  --ink-soft:#c3cedd;
  --ink-dim:#8a97a9;
  --accent:#5fd0c0;
  --warn:#ff6b6b;

  --radius:18px;
  --maxw:1180px;
  --sans:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:
    radial-gradient(1100px 650px at 85% -5%, rgba(38,118,179,.20), transparent 60%),
    radial-gradient(900px 600px at 10% 110%, rgba(114,76,153,.22), transparent 60%),
    var(--bg0);
  overflow:hidden;
}

/* ---------- Welcome overlay ---------- */
.welcome{
  position:fixed; inset:0; z-index:50;
  display:grid; place-items:center;
  background:
    radial-gradient(900px 600px at 50% 28%, rgba(73,185,156,.14), transparent 60%),
    rgba(8,12,18,.72);
  backdrop-filter:blur(10px) saturate(1.1);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);
  padding:24px;
  animation:fade .45s ease;
}
.welcome-inner{
  max-width:580px;text-align:center;
  background:linear-gradient(180deg,rgba(24,33,49,.78),rgba(16,22,33,.78));
  border:1px solid var(--line);border-radius:22px;
  padding:clamp(28px,5vw,46px);box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.welcome-logo{width:clamp(250px,36vw,330px);height:auto;display:block;margin:0 auto}

.welcome-title{
  font-size:clamp(2rem,6vw,3.6rem); line-height:1.05; margin:22px 0 10px;
  font-weight:800; letter-spacing:-.02em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.welcome-sub{color:var(--ink-soft);font-size:clamp(1rem,2.3vw,1.25rem);margin-bottom:30px}
.welcome-sub strong{color:var(--ink)}
.begin-btn{
  font-size:1.25rem; font-weight:700; color:#06121a; cursor:pointer;
  border:0; border-radius:999px; padding:16px 46px;
  background:var(--grad); background-size:180% 180%;
  box-shadow:0 12px 34px rgba(73,185,156,.38);
  transition:transform .15s ease, box-shadow .2s ease, background-position .6s ease;
}
.begin-btn:hover{transform:translateY(-2px) scale(1.02);background-position:100% 0;box-shadow:0 16px 40px rgba(73,185,156,.5)}
.welcome-note{margin-top:26px;color:var(--ink-dim);font-size:.9rem;line-height:1.6;max-width:460px;margin-inline:auto}

/* ---------- App shell ---------- */
.app{position:fixed;inset:0;display:flex;flex-direction:column}
[hidden]{display:none !important}

/* Top bar */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px clamp(14px,3vw,28px);
  border-bottom:1px solid var(--line);
  background:linear-gradient(to bottom,rgba(10,15,23,.85),rgba(10,15,23,.35));
  backdrop-filter:blur(8px);
  z-index:5;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand-logo{width:34px;height:34px}
.brand-name{font-weight:800;font-size:1.15rem;letter-spacing:-.01em}
.brand-dot{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.topbar-actions{display:flex;align-items:center;gap:10px}
.email-link{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  color:var(--ink-soft);font-size:.92rem;font-weight:600;
  padding:8px 14px;border:1px solid var(--line);border-radius:999px;
  transition:all .18s ease;
}
.email-link:hover{color:#06121a;background:var(--grad);border-color:transparent}
.email-ico{display:inline-grid;place-items:center}
.email-ico svg{width:16px;height:16px;display:block}
.icon-btn{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  background:rgba(255,255,255,.04);color:var(--ink-soft);cursor:pointer;
  display:grid;place-items:center;transition:color .18s ease,border-color .18s ease,background .18s ease;
}
.icon-btn svg{width:20px;height:20px;display:block}
.icon-btn:hover{color:var(--accent);border-color:var(--accent);background:rgba(95,208,192,.12)}
.icon-btn.off{color:var(--ink-dim)}
.icon-btn.cue{color:#06121a;background:var(--grad);border-color:transparent;animation:cuePulse 1.5s ease-in-out infinite}
@keyframes cuePulse{0%,100%{box-shadow:0 0 0 0 rgba(73,185,156,.55)}50%{box-shadow:0 0 0 11px rgba(73,185,156,0)}}
.sound-hint{
  display:inline-flex;align-items:center;font-size:.82rem;font-weight:700;color:#06121a;
  background:var(--grad);padding:7px 13px;border-radius:999px;white-space:nowrap;
  animation:cuePulse 1.5s ease-in-out infinite;
}
/* background-music volume control */
.vol{display:flex;align-items:center;gap:9px}
.vol-slider{
  -webkit-appearance:none;appearance:none;width:88px;height:5px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.16);
}
.vol-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:15px;height:15px;border-radius:50%;
  background:var(--grad);border:2px solid var(--bg0);box-shadow:0 1px 5px rgba(0,0,0,.45);cursor:pointer}
.vol-slider::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:#49b99c;border:2px solid var(--bg0);cursor:pointer}
.vol-slider:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (max-width:620px){ .vol-slider{width:58px} .email-text{display:none} }

/* Stage */
.stage{flex:1;min-height:0;display:grid;place-items:center;padding:clamp(14px,3vw,30px);position:relative;overflow:hidden}
.slide{width:100%;max-width:var(--maxw);height:100%;display:flex;align-items:center;justify-content:center}

/* Slide card */
.card{
  width:100%;max-height:100%;
  display:grid;gap:clamp(18px,3vw,38px);align-items:center;
  background:linear-gradient(180deg,rgba(23,32,47,.9),rgba(16,22,33,.9));
  border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(20px,3.2vw,40px);
  box-shadow:0 30px 70px rgba(0,0,0,.45);
  position:relative;overflow:hidden;
  animation:slideIn .5s cubic-bezier(.2,.7,.2,1);
}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--grad)}
.card.has-media{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.card.no-media{grid-template-columns:1fr;max-width:860px;margin-inline:auto;text-align:left}
.card.no-media.wide{max-width:1080px}

/* Media */
.media{align-self:center}
.media img{
  width:100%;height:auto;max-height:52vh;object-fit:cover;
  border-radius:14px;border:1px solid var(--line);
  box-shadow:0 16px 40px rgba(0,0,0,.5);
  background:#0c1118;
}

/* Text column — capped to the space between top bar and controls so it never overlaps them */
.content{min-width:0;min-height:0;align-self:center;max-height:calc(100vh - 310px);overflow-y:auto;padding-right:10px}
.content::-webkit-scrollbar{width:8px}
.content::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:8px}
.kicker{font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.title{
  font-size:clamp(1.5rem,3.2vw,2.3rem);line-height:1.12;font-weight:800;letter-spacing:-.02em;
  margin-bottom:16px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.body p{
  font-family:var(--serif);color:var(--ink-soft);
  font-size:clamp(1rem,1.5vw,1.14rem);line-height:1.72;margin-bottom:13px;
}
.body p:last-child{margin-bottom:0}
.ref{color:var(--accent);font-style:normal;font-family:var(--sans);font-weight:700;font-size:.92em;white-space:nowrap}
.emph{color:#fff;font-weight:700;font-family:var(--sans);letter-spacing:.01em}
.hl{background:rgba(73,185,156,.26);color:#eafaf6;font-weight:700;border-radius:5px;padding:.03em .4em;font-family:var(--sans)}

/* Separation diagram (slide 10) */
.sep-diagram{margin:4px 0 16px;padding:16px 20px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.03)}
.sep-god,.sep-man{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:900;letter-spacing:.06em;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sep-god{text-align:right}
.sep-man{text-align:left}
.sep-gap{position:relative;margin:12px 0;padding:14px 0;border-top:2px dashed rgba(255,107,107,.55);border-bottom:2px dashed rgba(255,107,107,.55)}
.sep-sins{display:block;text-align:center;color:var(--warn);font-weight:600;font-family:var(--sans);font-size:.92rem;line-height:1.5}
/* slide 25 — the sins are "washed away": a water wipe sweeps across and they dissolve */
.sep-diagram.washed .sep-gap{overflow:hidden;animation:gapHeal 1.6s ease-out 2.6s forwards}
.sep-diagram.washed .sep-sins{animation:sinsWash 2.6s ease-in 1.8s forwards}
.sep-wipe{position:absolute;top:-2px;bottom:-2px;left:-45%;width:45%;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(95,208,192,.18),rgba(95,208,192,.6),rgba(73,185,156,.35),transparent);
  filter:blur(4px);animation:sepWipe 2.4s ease-in-out 1.8s forwards}
.sep-washed{margin-top:12px;text-align:center;font-weight:800;letter-spacing:.04em;opacity:0;transform:scale(.94);
  font-size:clamp(1.1rem,2.4vw,1.5rem);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:washedReveal 1.2s ease-out 3.4s forwards}
@keyframes sinsWash{0%{opacity:1;filter:none}55%{opacity:.18;filter:blur(1.5px)}100%{opacity:0;filter:blur(3px)}}
@keyframes sepWipe{0%{left:-45%;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:110%;opacity:0}}
@keyframes gapHeal{to{border-color:rgba(73,185,156,.6)}}
@keyframes washedReveal{to{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .sep-diagram.washed .sep-sins{opacity:.3;text-decoration:line-through;animation:none}
  .sep-diagram.washed .sep-washed{opacity:1;transform:none;animation:none}
  .sep-diagram.washed .sep-gap{border-color:rgba(73,185,156,.6);animation:none}
  .sep-wipe{display:none}
}

/* secondary image at the bottom of a slide (slide 25 ocean pic) */
.media-bottom{width:100%;height:auto;max-height:32vh;object-fit:cover;border-radius:12px;
  border:1px solid var(--line);margin-top:16px;box-shadow:0 10px 30px rgba(0,0,0,.4);background:#0c1118}

/* Scripture reference chip row (optional, big title slides) */
.big-word{
  font-size:clamp(3rem,12vw,7rem);font-weight:900;letter-spacing:.02em;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  margin:10px 0 18px;
}

/* ---------- Table (slide 15) ---------- */
.table-wrap{overflow-x:auto;border-radius:12px;border:1px solid var(--line)}
table.churches{border-collapse:collapse;width:100%;font-size:.92rem;font-family:var(--sans)}
table.churches th,table.churches td{padding:9px 14px;text-align:left;border-bottom:1px solid var(--line)}
table.churches th:nth-child(2),table.churches td:nth-child(2){white-space:nowrap}
table.churches thead th{position:sticky;top:0;background:#1b2436;color:var(--ink);font-weight:700}
table.churches tbody tr:first-child{background:rgba(73,185,156,.14)}
table.churches tbody tr:first-child td{color:#fff;font-weight:700}
table.churches tbody tr:nth-child(even):not(:first-child){background:rgba(255,255,255,.025)}

/* ---------- Interactive ---------- */
.interact{margin-top:20px;padding-top:18px;border-top:1px dashed var(--line)}
.interact .prompt{font-weight:700;font-size:1.08rem;color:var(--ink);margin-bottom:14px;font-family:var(--sans)}
.opts{display:flex;flex-wrap:wrap;gap:10px}
.opt{
  cursor:pointer;border:1px solid var(--line);background:rgba(255,255,255,.04);
  color:var(--ink);padding:12px 18px;border-radius:12px;font-size:1rem;font-weight:600;
  transition:all .15s ease;font-family:var(--sans);
}
.opt:hover{border-color:var(--accent);background:rgba(95,208,192,.1)}
.opt.sel{background:var(--grad);color:#06121a;border-color:transparent;font-weight:700}
.qa{margin-bottom:16px}
.qa .q{font-weight:600;margin-bottom:8px;color:var(--ink-soft);font-family:var(--sans)}
.answer-input{
  width:100%;min-height:90px;resize:vertical;border-radius:12px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);color:var(--ink);padding:14px;font-size:1rem;font-family:var(--serif);
}
.answer-input:focus{outline:none;border-color:var(--accent)}
.reflect-list{margin:14px 0 0;padding-left:18px;color:var(--ink-dim);font-family:var(--serif);line-height:1.7}
.reflect-list li{margin-bottom:4px}
.inter-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.btn{
  cursor:pointer;border:0;border-radius:999px;padding:12px 26px;font-size:1rem;font-weight:700;
  font-family:var(--sans);transition:transform .15s ease,box-shadow .2s ease;
}
.btn-primary{background:var(--grad);color:#06121a;box-shadow:0 10px 26px rgba(73,185,156,.32)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{background:rgba(255,255,255,.05);color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.your-answer{margin-top:14px;color:var(--accent);font-weight:600;font-family:var(--sans)}

/* Final CTA email emphasis */
.cta-email{
  display:inline-flex;align-items:center;gap:10px;margin-top:8px;
  font-size:1.15rem;font-weight:800;text-decoration:none;color:#06121a;
  background:var(--grad);padding:14px 26px;border-radius:999px;
  box-shadow:0 12px 30px rgba(73,185,156,.35);
}
.cta-email:hover{transform:translateY(-1px)}

/* ---------- Controls ---------- */
.controls{padding:10px clamp(14px,3vw,28px) calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:linear-gradient(to top,rgba(10,15,23,.9),rgba(10,15,23,.4));backdrop-filter:blur(8px)}
.progress-wrap{margin-bottom:10px}
.progress-bar{height:6px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.progress-bar span{display:block;height:100%;width:0;background:var(--grad);border-radius:999px;transition:width .4s ease}
.controls-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
.counter{justify-self:start;color:var(--ink-dim);font-weight:700;font-size:.95rem;letter-spacing:.03em}
.ctl-group{justify-self:center;display:flex;align-items:center;gap:16px}
.controls-spacer{justify-self:end}
.ctl{
  width:48px;height:48px;border-radius:50%;border:1px solid var(--line);
  background:rgba(255,255,255,.05);color:var(--ink-soft);cursor:pointer;
  display:grid;place-items:center;
  transition:color .18s ease,border-color .18s ease,background .18s ease,transform .18s ease,box-shadow .18s ease;
}
.ctl svg{width:20px;height:20px;display:block}
.ctl:hover{color:var(--accent);border-color:var(--accent);background:rgba(95,208,192,.12)}
.ctl:disabled{opacity:.3;cursor:not-allowed}
.ctl:disabled:hover{color:var(--ink-soft);border-color:var(--line);background:rgba(255,255,255,.05);transform:none}
.ctl-main{width:62px;height:62px;background:var(--grad);color:#06121a;border:0;box-shadow:0 8px 24px rgba(73,185,156,.3)}
.ctl-main svg{width:24px;height:24px}
.ctl-main:hover{transform:scale(1.06);filter:brightness(1.07);box-shadow:0 12px 32px rgba(73,185,156,.48);color:#06121a;background:var(--grad)}

/* Scroll-lock hint (appears when user scrolls during narration auto-scroll) */
.scroll-hint{
  position:fixed;left:50%;bottom:122px;transform:translateX(-50%) translateY(10px);
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(14,20,30,.94);border:1px solid var(--line);color:var(--ink-soft);
  padding:10px 18px;border-radius:999px;font-size:.88rem;font-weight:600;
  box-shadow:0 12px 34px rgba(0,0,0,.45);white-space:nowrap;
  z-index:30;pointer-events:none;opacity:0;
  transition:opacity .25s ease,transform .25s ease;
}
.scroll-hint.show{opacity:1;transform:translateX(-50%) translateY(0)}
.scroll-hint .lock{font-size:.95rem}
@media (max-width:860px){ .scroll-hint{bottom:110px;font-size:.8rem;padding:8px 14px} }

/* Hidden YT host (kept rendered so audio plays) */
#ytHost{position:fixed;left:-9999px;bottom:-9999px;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}

/* ---------- Animations ---------- */
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
/* eagle intro: stretches in tall (scaleY) then settles to normal */
@keyframes eagleReveal{
  0%{transform:scaleY(5);opacity:0}
  55%{opacity:1}
  100%{transform:scaleY(1);opacity:1}
}
@keyframes slideIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .card.has-media{grid-template-columns:1fr;text-align:left}
  .media img{max-height:34vh}
  .stage{overflow-y:auto;place-items:start center}
  .slide{height:auto;align-items:flex-start}
  .card{max-height:none;overflow:visible}
  .content{max-height:none;overflow:visible;padding-right:0}
  .email-text{display:none}
  .email-link{padding:8px}
}
@media (max-width:480px){
  .brand-name{font-size:1rem}
  .ctl{width:44px;height:44px}
  .ctl-main{width:52px;height:52px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}