:root {
  --stage: #06100b;
  --ink: #f6f1e8;
  --muted: rgba(246, 241, 232, 0.62);
  --gold: #f0c489;
  --gold-deep: #d99a52;
  --green: #5ec98d;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: var(--stage); }
body { color: var(--ink); font-family: var(--serif); -webkit-font-smoothing: antialiased; cursor: default; }

.stage { position: fixed; inset: 0; overflow: hidden; }

/* ── Cinematic background (Ken Burns crossfade) ── */
.bg {
  position: absolute; inset: -4%;
  background-size: cover; background-position: center;
  opacity: 0; will-change: transform, opacity;
}
.bg--a { opacity: 1; }
.scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 46%, rgba(6,16,11,0) 30%, rgba(6,16,11,0.55) 100%),
    linear-gradient(to bottom, rgba(6,16,11,0.28) 0%, rgba(6,16,11,0) 26%, rgba(6,16,11,0) 60%, rgba(6,16,11,0.72) 100%);
}
.vignette { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 220px 40px rgba(0,0,0,0.55); }
.mist { position: absolute; inset: 0; pointer-events: none; opacity: 0.5; mix-blend-mode: screen;
  background:
    radial-gradient(40% 26% at 30% 62%, rgba(240,196,137,0.10), transparent 70%),
    radial-gradient(46% 30% at 72% 50%, rgba(246,241,232,0.06), transparent 70%);
  animation: drift 26s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translate3d(-2%, 1%, 0) scale(1.02); } to { transform: translate3d(3%, -2%, 0) scale(1.08); } }

/* ── Text layer ── */
.textlayer {
  position: absolute; inset: 0; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  padding: 10vh 8vw; text-align: center; pointer-events: none;
}
.tblock { max-width: 1040px; }
.t-kicker { font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.36em; font-size: 12px; color: var(--gold); margin-bottom: 2rem; }
.t-title {
  font-family: var(--serif); font-weight: 300; letter-spacing: -0.015em;
  font-size: clamp(2.2rem, 5.6vw, 4.6rem); line-height: 1.08;
  text-shadow: 0 2px 40px rgba(0,0,0,0.5);
}
.t-title em { font-style: italic; color: var(--gold); }
.t-sub {
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: clamp(1.3rem, 3vw, 2.2rem); color: var(--ink); margin-top: 1.2rem;
  text-shadow: 0 2px 30px rgba(0,0,0,0.5);
}
.t-mini { font-family: var(--sans); font-size: clamp(0.95rem, 1.7vw, 1.15rem); letter-spacing: 0.06em; color: var(--muted); margin-top: 2.4rem; }
.t-mini span { display: inline-block; margin: 0 0.35em; }
.t-line {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.7rem, 4vw, 3.1rem); line-height: 1.28; letter-spacing: -0.01em;
  text-shadow: 0 2px 34px rgba(0,0,0,0.55);
}
.t-line em { font-style: italic; color: var(--gold); }
.t-line .big { display: block; font-size: 1.35em; margin-top: 0.3em; color: var(--gold); }
.t-hook {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.9rem, 4.6vw, 3.4rem); line-height: 1.2; letter-spacing: -0.01em;
  color: var(--ink); text-shadow: 0 2px 40px rgba(0,0,0,0.6);
}
.t-hook .accent { color: var(--green); }
.t-hooklabel { font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.34em; font-size: 11px; color: var(--gold-deep); margin-bottom: 1.4rem; }
.t-line + .t-line { margin-top: 0; }
.tblock--close .t-kicker { margin-bottom: 0; }
.qrwrap { display: inline-block; background: #fff; padding: 18px; border-radius: 22px; margin: 2rem 0 1.6rem; box-shadow: 0 30px 70px rgba(0,0,0,0.55); }
.qrwrap img { display: block; width: min(230px, 52vw); height: auto; }

/* ── Phone layer ── */
.phonelayer { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; }
.herophone { max-height: 82vh; max-width: 78vw; width: auto; opacity: 0; filter: drop-shadow(0 40px 80px rgba(0,0,0,0.6)); }

/* Front-facing CSS phone */
.cssphone {
  position: relative; width: min(332px, 80vw); aspect-ratio: 332 / 690; max-height: 82vh;
  background: #050607; border-radius: 48px; padding: 11px;
  box-shadow: 0 0 0 2px #24272a, 0 50px 120px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(255,255,255,0.04);
  opacity: 0; display: none;
}
.cp-island { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 92px; height: 26px; background: #000; border-radius: 16px; z-index: 6; }
.cp-wall, .cp-notif, .wa { position: absolute; inset: 11px; border-radius: 38px; overflow: hidden; }
.cp-wall { background-size: cover; background-position: 50% 40%; }
.cp-wall::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.15), rgba(0,0,0,0.35)); }

/* Notification */
.cp-notif {
  inset: auto 22px auto 22px; top: 64px; height: auto; border-radius: 20px;
  background: rgba(28,30,32,0.72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  display: flex; align-items: center; gap: 11px; padding: 12px 13px; z-index: 5;
  opacity: 0; transform: translateY(-18px); box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}
.cp-notif-ic { width: 38px; height: 38px; border-radius: 10px; background: #0a6a37; display: flex; align-items: center; justify-content: center; flex: none; }
.cp-notif-ic img { width: 26px; height: 26px; }
.cp-notif-tx { font-family: var(--sans); color: #fff; line-height: 1.3; }
.cp-notif-tx b { display: block; font-size: 13.5px; font-weight: 600; }
.cp-notif-tx span { font-size: 12.5px; color: rgba(255,255,255,0.72); }

/* WhatsApp */
.wa { display: flex; flex-direction: column; background: #0b141a; opacity: 0; z-index: 4; }
.wa-head { background: #1f2c33; color: #e9edef; display: flex; align-items: center; gap: 10px; padding: 44px 14px 12px; flex: none; }
.wa-back { font-size: 22px; color: #8aa0ab; margin-right: -2px; }
.wa-av { width: 36px; height: 36px; border-radius: 50%; background: #0a6a37; display: flex; align-items: center; justify-content: center; flex: none; }
.wa-av img { width: 26px; height: 26px; }
.wa-name { font-family: var(--sans); font-size: 15px; font-weight: 600; }
.wa-on { font-family: var(--sans); font-size: 12px; color: #8aa0ab; }
.wa-thread {
  flex: 1; padding: 16px 12px; display: flex; flex-direction: column; gap: 8px; overflow: hidden;
  background-color: #0b141a;
  background-image: linear-gradient(rgba(11,20,26,0.94), rgba(11,20,26,0.94)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='%23223' fill-opacity='0.4'%3E%3Ccircle cx='10' cy='10' r='1.2'/%3E%3Ccircle cx='40' cy='30' r='1.2'/%3E%3Ccircle cx='20' cy='50' r='1.2'/%3E%3C/g%3E%3C/svg%3E");
}
.wa-row { display: flex; }
.wa-b { max-width: 82%; background: #202c33; color: #e9edef; padding: 7px 10px 5px; border-radius: 10px; border-top-left-radius: 3px; font-family: var(--sans); font-size: 14px; line-height: 1.42; white-space: pre-line; box-shadow: 0 1px 1px rgba(0,0,0,0.2); }
.wa-b .wa-t { display: block; text-align: right; font-size: 10.5px; color: #8aa0ab; margin-top: 2px; }
.wa-typing { display: inline-flex; gap: 3px; padding: 10px; }
.wa-typing i { width: 6px; height: 6px; border-radius: 50%; background: #6b7d87; animation: wat 1s infinite; }
.wa-typing i:nth-child(2){animation-delay:.15s}.wa-typing i:nth-child(3){animation-delay:.3s}
@keyframes wat { 0%,60%,100%{opacity:.3;transform:translateY(0)} 30%{opacity:1;transform:translateY(-2px)} }
.wa-input { flex: none; display: flex; align-items: center; gap: 6px; padding: 9px 14px 16px; background: #0b141a; }
.wa-ph { font-family: var(--sans); font-size: 14px; color: #6b7d87; }
.wa-caret { width: 2px; height: 18px; background: var(--green); animation: caret 1.05s steps(1) infinite; }
@keyframes caret { 0%,50%{opacity:1} 51%,100%{opacity:0} }

/* ── Ambient chapter pips + hint ── */
.pips { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; gap: 9px; z-index: 6; opacity: 0.5; }
.pip { width: 6px; height: 6px; border-radius: 50%; background: rgba(246,241,232,0.28); transition: background 0.5s, transform 0.5s; }
.pip.on { background: var(--gold); transform: scale(1.25); }
.hint { position: absolute; left: 50%; bottom: 46px; transform: translateX(-50%); z-index: 6; font-family: var(--sans); font-size: 12px; letter-spacing: 0.14em; color: var(--muted); transition: opacity 0.8s; }
.hint b { color: var(--ink); }
.hint span { margin-left: 10px; opacity: 0.6; }

@media (max-width: 620px) {
  .pips { bottom: 18px; } .hint { bottom: 34px; font-size: 11px; }
}