/* ============================================================
   cine3d.css — MEET LUX v2: one pinned 3D stage, looping video
   planes that glide between chapters, and a deck showing every
   chapter at once. Replaces v1's tall scroll-scrubbed sections.

   Modes:
   - Default (no JS): planes render as normal stacked static
     sections (poster + copy + thread), deck hidden. Fully
     readable, nothing depends on script.
   - html.s3d-on (set by cine3d.js): the stage collapses to one
     compact viewport; planes take 3D positions driven by the
     --d custom property (signed distance from the active
     chapter) that cine3d.js stamps on each plane.
   - Narrow screens (<=1000px) with JS: flat horizontal snap
     carousel, posters only, deck becomes a scrollable strip.
   ============================================================ */

.stage3d { position: relative; }

/* ---- planes: static stacked fallback (no JS) ---- */
.plane {
  position: relative;
  border: 1px solid var(--amber);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg);
  margin: 0 0 22px;
}
.plane-media { position: relative; aspect-ratio: 16 / 9; }
.plane-media img,
.plane-media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.plane-media video[hidden] { display: none; }
.plane-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(5,3,0,0.88) 0%, rgba(5,3,0,0.45) 34%, transparent 60%),
    linear-gradient(to right, rgba(5,3,0,0.55) 0%, transparent 45%);
  pointer-events: none;
}

/* ---- copy block (compact, solid, lower-left) ---- */
.plane-copy {
  position: absolute;
  left: 22px; bottom: 20px;
  z-index: 2;
  max-width: min(46%, 470px);
}
.plane-eyebrow {
  display: inline-block;
  border: 1px solid var(--amber);
  border-radius: 3px;
  padding: 2px 9px;
  font-size: 11.5px;
  letter-spacing: 0.2em;
  color: var(--amber);
  margin-bottom: 10px;
  background: rgba(5, 3, 0, 0.6);
}
.plane-headline {
  margin: 0 0 8px;
  font-size: clamp(19px, 1.8vw, 26px);
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff7d8;
  text-shadow: 0 0 16px rgba(246, 188, 90, 0.3), 0 2px 8px rgba(0,0,0,0.8);
}
.plane-body {
  margin: 0 0 10px;
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--amber);
  text-shadow: 0 1px 6px rgba(0,0,0,0.9);
}
.plane-try {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--amber-soft);
  border-left: 2px solid var(--amber-dim);
  padding: 3px 0 3px 10px;
}
.plane-try b { color: var(--amber); }
.plane-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  border: 1px solid var(--amber);
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 13.5px;
  letter-spacing: 0.08em;
  color: var(--amber);
  text-decoration: none;
  background: rgba(5, 3, 0, 0.72);
  transition: background 0.15s, box-shadow 0.15s;
}
.plane-cta:hover { background: rgba(246, 188, 90, 0.12); box-shadow: 0 0 18px rgba(246, 188, 90, 0.2); }

/* ---- sms pill: a message input, ready to send. Whole pill is the
   sms: link (opens Messages with WAKE UP filled), styled like an
   iMessage compose bar in the site's own branding. ---- */
.sms-pill {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 250px;
  max-width: 100%;
  margin-top: 12px;
  border: 1px solid var(--amber);
  border-radius: 999px;
  padding: 8px 8px 8px 20px;
  background: rgba(5, 3, 0, 0.72);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.08em;
  box-shadow: 0 0 14px rgba(246, 188, 90, 0.12);
  transition: box-shadow 0.15s, background 0.15s;
}
.sms-pill:hover { background: rgba(246, 188, 90, 0.08); box-shadow: 0 0 24px rgba(246, 188, 90, 0.32); }
.sms-pill { cursor: text; }
.sms-pill .pill-line {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
}
.sms-pill .pill-text {
  color: #fff7d8;
  outline: none;
  white-space: nowrap;
  min-width: 1ch;
}
/* typed-in cursor at the end of the message; hidden while the real
   caret is active during editing */
.sms-pill .pill-caret {
  flex: 0 0 auto;
  display: inline-block;
  width: 2px;
  height: 1.15em;
  margin-left: 3px;
  background: #fff7d8;
  animation: pill-blink 1s step-end infinite;
}
.sms-pill.is-editing .pill-caret { display: none; }
@keyframes pill-blink { 50% { opacity: 0; } }
.sms-pill .pill-send {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 50%;
  /* iMessage-send blue, matching the thread's sender bubbles */
  background: #0a84ff;
  color: #eaf4ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 10px rgba(10, 132, 255, 0.4);
}
.guide-pill-row { display: flex; justify-content: center; margin: 18px 0 6px; }

/* ---- text thread (unmistakably you ⇄ lux) ---- */
.thread {
  position: absolute;
  right: 22px; bottom: 20px;
  z-index: 2;
  width: min(40%, 360px);
  border: 1px solid var(--amber-soft);
  border-radius: 12px;
  /* blue-tinted panel: reads as a phone thread, distinct from the
     amber-on-black stage around it (gold outline stays) */
  background: rgba(9, 12, 28, 0.88);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  padding: 10px 12px 8px;
}
.thread-head {
  /* iMessage conversation top bar: back + unread pill, avatar contact, video call */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  margin-bottom: 9px;
  border-bottom: 1px solid var(--amber-faint);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}
.th-back, .th-video { flex: 1 1 0; display: flex; align-items: center; color: #e9edf6; }
.th-back svg { width: 10px; height: 17px; flex: 0 0 auto; }
.th-contact { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.th-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 190, 92, 0.35);
  box-shadow: 0 0 12px rgba(255, 170, 60, 0.28);
}
.th-name {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #f4f6fb;
}
.th-name .th-chev { width: 6px; height: 10px; color: #9aa0ab; }
.th-video { justify-content: flex-end; }
.th-video svg {
  width: 21px; height: 15px;
  box-sizing: content-box;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
}
.msg { display: flex; flex-direction: column; margin: 0 0 8px; }
.msg p {
  margin: 2px 0 0;
  padding: 8px 12px;
  border-radius: 13px;
  font-size: 12.5px;
  line-height: 1.5;
  width: fit-content;
  max-width: 92%;
}
.msg .who {
  font-size: 9px;
  letter-spacing: 0.24em;
  color: var(--amber-dim);
}
/* iMessage semantics: the sender bubble is iMessage blue, the
   receiver bubble a cooler slate blue — gold outlines kept */
.msg-you { align-items: flex-end; }
.msg-you .who { text-align: right; }
.msg-you p {
  background: rgba(10, 132, 255, 0.36);
  border: 1px solid var(--amber);
  color: #eaf4ff;
  border-bottom-right-radius: 4px;
}
.msg-lux { align-items: flex-start; }
.msg-lux p {
  background: rgba(96, 112, 150, 0.32);
  border: 1px solid var(--amber-soft);
  color: #dce7fa;
  border-bottom-left-radius: 4px;
}
.msg-lux .b-link { color: #ffffff; text-decoration: underline; }
.msg .att {
  display: inline-block;
  border: 1px dashed rgba(190, 214, 255, 0.55);
  border-radius: 8px;
  padding: 3px 8px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: #cfe0ff;
  margin-right: 6px;
}
.thread-status {
  text-align: right;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--amber-dim);
  margin-top: -2px;
}

/* ---- deck: every chapter, laid out at once ---- */
.deck {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 16px 0 4px;
}
.deck-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 118px;
  padding: 6px 6px 8px;
  border: 1px solid var(--amber-dim);
  border-radius: 8px;
  background: rgba(246, 188, 90, 0.02);
  color: var(--amber-soft);
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s, color 0.2s;
}
.deck-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
.deck-card .deck-num { font-size: 9.5px; letter-spacing: 0.2em; }
.deck-card .deck-label {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-align: left;
  color: inherit;
}
.deck-card:hover { border-color: var(--amber-soft); color: var(--amber); }
.deck-card.active {
  border-color: var(--amber);
  color: #fff7d8;
  transform: translateY(-4px);
  box-shadow: 0 0 18px rgba(246, 188, 90, 0.22);
}

/* ---- arrows ---- */
.stage-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  width: 46px; height: 64px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--amber-soft);
  border-radius: 8px;
  background: rgba(5, 3, 0, 0.66);
  color: var(--amber);
  font-family: inherit;
  font-size: 22px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.stage-arrow:hover { background: rgba(246, 188, 90, 0.12); border-color: var(--amber); }
.stage-arrow.prev { left: 10px; }
.stage-arrow.next { right: 10px; }
/* no arrow past the ends of the deck */
.stage-arrow.is-hidden { display: none !important; }

/* ============================================================
   3D mode (html.s3d-on, wide screens)
   ============================================================ */
html.s3d-on .stage-viewport {
  position: relative;
  height: min(72svh, 760px);
  perspective: 1500px;
  perspective-origin: 50% 45%;
  /* the stage is a window: clip receding planes so they can't
     widen the document's scrollable area */
  overflow: hidden;
  border-radius: 10px;
}
html.s3d-on .stage-arrow { display: flex; }
html.s3d-on .plane {
  position: absolute;
  inset: 0;
  margin: 0;
  will-change: transform, opacity;
  /* --d = signed distance from active, --da = |distance| (both
     stamped by cine3d.js; avoids CSS abs() portability issues) */
  transform:
    translate3d(calc(var(--d) * 58%), 0, calc(var(--da) * -280px))
    rotateY(calc(var(--d) * -14deg))
    scale(calc(1 - min(var(--da) * 0.09, 0.3)));
  opacity: calc(1 - min(var(--da) * 0.42, 1));
  filter: brightness(calc(1 - min(var(--da) * 0.32, 0.72)));
  transition: transform 0.68s cubic-bezier(0.22, 0.9, 0.3, 1), opacity 0.68s ease, filter 0.68s ease;
  pointer-events: none;
  z-index: calc(10 - var(--da) * 2);
}
html.s3d-on .plane[data-active] { pointer-events: auto; }
html.s3d-on .plane-media { position: absolute; inset: 0; aspect-ratio: auto; }
/* neighbors keep their copy hidden so the stage reads as one scene */
html.s3d-on .plane:not([data-active]) .plane-copy,
html.s3d-on .plane:not([data-active]) .thread { opacity: 0; transition: opacity 0.3s; }
html.s3d-on .plane[data-active] .plane-copy,
html.s3d-on .plane[data-active] .thread { opacity: 1; transition: opacity 0.5s 0.25s; }

/* ============================================================
   Mobile / narrow (JS carousel; static stack without JS)
   ============================================================ */
@media (max-width: 1000px) {
  html.s3d-carousel .stage-viewport {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 2px 6vw 8px;
    scrollbar-width: none;
  }
  html.s3d-carousel .stage-viewport::-webkit-scrollbar { display: none; }
  html.s3d-carousel .plane {
    flex: 0 0 88vw;
    margin: 0;
    scroll-snap-align: center;
  }
  html.s3d-carousel .stage-arrow { display: none; }

  /* copy + thread stack under the media instead of overlaying */
  .plane-copy { position: relative; left: auto; bottom: auto; max-width: none; padding: 14px 14px 4px; }
  .thread { position: relative; right: auto; bottom: auto; width: auto; margin: 0 14px 14px; }
  .plane-scrim { background: linear-gradient(to top, rgba(5,3,0,0.5), transparent 40%); }
  .plane-headline { font-size: 19px; }

  /* 16px stops iOS zoom-on-focus for the editable pill text */
  .sms-pill .pill-text { font-size: 16px; }

  .deck { gap: 8px; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding: 0 4px 6px; scrollbar-width: none; }
  .deck::-webkit-scrollbar { display: none; }
  .deck-card { width: 96px; flex: 0 0 auto; }
}

/* reduced motion: no glide, instant swaps, no autoplay (cine3d.js
   also refuses to start videos) */
@media (prefers-reduced-motion: reduce) {
  html.s3d-on .plane { transition: none; }
  .deck-card { transition: none; }
}