/* ============================================================================
   BuildYourPocket — cinema.css
   Page-level scaffolding for the cinematic homepage: the pinned opening,
   the morphing desk-tour, and near-fullscreen product windows.
   Depends on os.css (tokens/chrome) + app.css (the app skin). cinema.js drives.
   ========================================================================== */

/* ── 1 · OPENING ───────────────────────────────────────────────────────── */
.cinema { position: relative; height: 360vh; background: #04060a; }
.cinema__stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: grid; place-items: center;
}
.cinema__stage > * { grid-area: 1 / 1; }
.cinema canvas[data-viz="cinema-graph"] { width: 100%; height: 100%; }

/* The full brand lockup (~2.94:1), not a square icon — size by width. */
.cin-logo { width: clamp(260px, 36vw, 480px); height: auto; z-index: 3; will-change: transform, opacity;
  filter: drop-shadow(0 0 40px rgba(232,201,138,0.35)); }
.cin-logo--pulse { animation: cinpulse 3.6s ease-in-out infinite; }
@keyframes cinpulse {
  0%   { filter: drop-shadow(0 0 18px rgba(232,201,138,0.20)); }
  46%  { filter: drop-shadow(0 0 58px rgba(232,201,138,0.62)) drop-shadow(0 0 120px rgba(111,227,201,0.22)); }
  100% { filter: drop-shadow(0 0 18px rgba(232,201,138,0.20)); }
}
/* one-time "awaken" ring that blooms outward on load, behind the logo */
.cin-bloom { grid-area: 1 / 1; z-index: 2; width: clamp(260px, 36vw, 480px); aspect-ratio: 1; border-radius: 50%;
  place-self: center; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(232,201,138,0.5) 0%, rgba(232,201,138,0.12) 40%, transparent 68%);
  animation: cinbloom 2.8s var(--ease-out, ease) 0.15s 1 both; }
@keyframes cinbloom {
  0%   { opacity: 0; transform: scale(0.2); }
  22%  { opacity: 0.9; }
  100% { opacity: 0; transform: scale(6.5); }
}
@media (prefers-reduced-motion: reduce) { .cin-logo--pulse { animation: none; } .cin-bloom { display: none; } }

.cin-line { z-index: 3; max-width: 22ch; margin: 0; text-align: center; will-change: transform, opacity;
  font-size: clamp(1.6rem, 4.6vw, 3.4rem); line-height: 1.08; letter-spacing: -0.03em; font-weight: 600;
  color: var(--text, #eef1f7); }
.cin-line em { font-style: normal; color: var(--gold, #e8c98a); }

.cin-window { z-index: 4; width: min(1120px, 92vw); will-change: transform, opacity; }
/* JS drives the opening; only hide the window once cinema.js is confirmed running */
.cin .cin-window { opacity: 0; }
/* Reduced-motion / static opening: normal vertical flow, no overlap, no pin */
.cinema--static { height: auto; }
.cinema--static .cinema__stage { position: relative; height: auto; display: flex; flex-direction: column;
  align-items: center; gap: clamp(1.4rem, 4vh, 2.6rem); padding: clamp(3rem, 8vh, 6rem) 0; }
.cinema--static .cinema__stage > * { grid-area: auto; }
.cinema--static canvas[data-viz="cinema-graph"] { display: none; }
.cinema--static .cin-window { opacity: 1 !important; transform: none !important; }
.cinema--static .cin-hint { display: none; }
.cin-hint { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 5;
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint, #5a6678);
  display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cin-hint span { width: 1px; height: 34px; background: linear-gradient(var(--faint,#5a6678), transparent); animation: hintdrop 1.8s ease infinite; }
@keyframes hintdrop { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ── 2 · DESK TOUR ─────────────────────────────────────────────────────── */
.tour { position: relative; }
.tour__pin { position: sticky; top: 0; min-height: 100vh; display: flex; flex-direction: column;
  justify-content: center; padding: clamp(3rem, 8vh, 6rem) 0; }
.tour__head { text-align: center; margin-bottom: 1.4rem; }
.tour__head .eyebrow { justify-content: center; }
.tour__head h2 { font-size: clamp(1.4rem, 3vw, 2.1rem); }
.tour__win { width: min(1180px, 94vw); margin: 0 auto; }

/* the persistent app shell holds all desk panels. Panels are visible & stacked
   by default (no-JS safe); only when cinema.js runs (.cin) do they overlay and
   crossfade so just the active .on panel shows. */
.tour__stage { position: relative; }
.app__stage { position: relative; min-height: 460px; }
.desk-panel { padding: 16px; display: grid; gap: 12px; align-content: start;
  border-top: 1px solid var(--a-line, rgba(255,255,255,.08)); }
.desk-panel:first-child { border-top: 0; }
.cin .desk-panel { position: absolute; inset: 0; opacity: 0; transform: translateY(14px) scale(0.992);
  transition: opacity .55s var(--ease-out, ease), transform .55s var(--ease-out, ease); pointer-events: none; border-top: 0; }
.cin .desk-panel.on { opacity: 1; transform: none; pointer-events: auto; }
.app__stage::-webkit-scrollbar { display: none; }

/* progress rail */
.tour__rail { display: flex; justify-content: center; gap: 7px; margin-top: 1.4rem; flex-wrap: wrap; }
.tour__rail i { width: 22px; height: 3px; border-radius: 999px; background: var(--line, rgba(255,255,255,.12)); transition: background .4s, width .4s; }
.tour__rail i.on { background: var(--gold, #e8c98a); width: 30px; }

/* static (reduced-motion) fallback: stack panels vertically, all visible */
.tour--static .tour__pin { position: static; min-height: 0; }
.tour--static .app__stage { min-height: 0; }
.tour--static .desk-panel { position: relative; inset: auto; opacity: 1; transform: none; pointer-events: auto;
  border-top: 1px solid var(--a-line, rgba(255,255,255,.08)); }
.tour--static .desk-panel:first-child { border-top: 0; }
.tour--static .tour__rail { display: none; }

/* ── JOURNEY THROUGH INTELLIGENCE ──────────────────────────────────────── */
.journey { position: relative; }
.journey__pin { position: sticky; top: 0; min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2.4rem, 7vh, 5rem) 0; }
.journey__head { text-align: center; margin-bottom: 1.4rem; }
.journey__head .eyebrow { justify-content: center; }
.journey__grid { display: grid; grid-template-columns: 260px 1fr; gap: clamp(1.4rem, 4vw, 3rem); align-items: stretch;
  width: min(1180px, 94vw); margin: 0 auto; }

/* the pipeline spine */
.spine { position: relative; padding: 8px 0 8px 26px; }
.spine__track { position: absolute; left: 5px; top: 12px; bottom: 12px; width: 2px; background: rgba(255,255,255,0.10); border-radius: 2px; }
.spine__fill { position: absolute; left: 0; top: 0; width: 100%; height: 0;
  background: linear-gradient(180deg, var(--gold, #e8c98a), var(--signal, #6fe3c9)); border-radius: 2px; box-shadow: 0 0 10px rgba(232,201,138,0.5); transition: height .2s linear; }
.spine__token { position: absolute; left: 6px; top: 0; width: 14px; height: 14px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--gold, #e8c98a); box-shadow: 0 0 0 4px rgba(232,201,138,0.18), 0 0 22px rgba(232,201,138,0.8); z-index: 3; transition: top .2s linear; }
.spine__node { position: relative; padding: 8px 0 8px 6px; font-size: 0.86rem; color: var(--faint, #5a6678);
  transition: color .35s var(--ease-out, ease); line-height: 1.15; }
.spine__node::before { content: ""; position: absolute; left: -24px; top: 13px; width: 8px; height: 8px; border-radius: 50%;
  background: #1a2233; border: 1px solid rgba(255,255,255,0.14); transition: background .35s, border-color .35s, box-shadow .35s; }
.spine__node.done { color: var(--muted, #93a0b4); }
.spine__node.done::before { background: var(--signal, #6fe3c9); border-color: var(--signal, #6fe3c9); }
.spine__node.on { color: var(--text, #eef1f7); font-weight: 600; }
.spine__node.on::before { background: var(--gold, #e8c98a); border-color: var(--gold, #e8c98a); box-shadow: 0 0 0 4px rgba(232,201,138,0.16); }
.spine__node small { display: block; font-size: 0.72rem; font-weight: 400; color: var(--faint, #5a6678); }

/* the morphing window on the right */
.journey__win { position: relative; }
.journey__win .appwin { height: 100%; }
.jstage { position: relative; min-height: 440px; }
/* Base = visible & stacked (no-JS safe). Overlay/crossfade only once cinema.js runs (.cin). */
.jpanel { padding: 16px; display: grid; gap: 12px; align-content: start; border-top: 1px solid var(--a-line, rgba(255,255,255,.08)); }
.jpanel:first-child { border-top: 0; }
.cin .jpanel { position: absolute; inset: 0; opacity: 0; transform: translateY(20px) scale(0.985); filter: blur(7px);
  transition: opacity .55s var(--ease-out, ease), transform .62s var(--ease-out, ease), filter .5s var(--ease-out, ease);
  pointer-events: none; border-top: 0; }
.cin .jpanel.on { opacity: 1; transform: none; filter: none; pointer-events: auto; }
/* inner cards rise in a stagger as the panel evolves in — one intelligence assembling */
.cin .jpanel > * { transition: opacity .5s var(--ease-out, ease), transform .55s var(--ease-out, ease); }
.cin .jpanel:not(.on) > * { opacity: 0; transform: translateY(12px); }
.cin .jpanel.on > * { opacity: 1; transform: none; }
.cin .jpanel.on > *:nth-child(1) { transition-delay: .05s; }
.cin .jpanel.on > *:nth-child(2) { transition-delay: .12s; }
.cin .jpanel.on > *:nth-child(3) { transition-delay: .19s; }
.cin .jpanel.on > *:nth-child(4) { transition-delay: .26s; }
@media (prefers-reduced-motion: reduce) { .cin .jpanel { filter: none !important; transition: opacity .3s; } .cin .jpanel > * { transition: none; } }
.journey__count { text-align: center; margin-top: 1.1rem; font-family: var(--mono); font-size: 0.78rem; letter-spacing: .12em; color: var(--faint, #5a6678); }

/* static / reduced-motion */
.journey--static .journey__pin { position: static; min-height: 0; }
.journey--static .jstage { min-height: 0; }
.journey--static .jpanel { position: relative; inset: auto; opacity: 1; transform: none; pointer-events: auto;
  border-top: 1px solid var(--a-line, rgba(255,255,255,.08)); }
.journey--static .jpanel:first-child { border-top: 0; }
.journey--static .spine__token { display: none; }

@media (max-width: 820px) {
  .journey__grid { grid-template-columns: 1fr; }
  .spine { display: flex; overflow-x: auto; padding: 0 0 10px; gap: 4px; scrollbar-width: none; }
  .spine::-webkit-scrollbar { display: none; }
  .spine__track, .spine__fill, .spine__token { display: none; }
  .spine__node { white-space: nowrap; padding: 6px 10px; border: 1px solid var(--line, rgba(255,255,255,.1)); border-radius: 999px; font-size: .74rem; }
  .spine__node::before { display: none; }
  .spine__node small { display: none; }
  .jstage { min-height: 520px; }
}

/* ── Encryption journey (security page) ────────────────────────────────── */
.encflow { position: relative; }
.encflow__rail { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; margin: 1rem 0 2rem; }
.encflow__line { position: absolute; left: 6%; right: 6%; top: 34px; height: 2px; background: rgba(255,255,255,0.10); z-index: 0; }
.encflow__packet { position: absolute; top: 34px; left: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; z-index: 3;
  background: var(--gold, #e8c98a); box-shadow: 0 0 0 4px rgba(232,201,138,0.18), 0 0 20px rgba(232,201,138,0.8);
  transition: left .6s var(--ease-out, ease); }
.encstage { position: relative; z-index: 1; background: none; border: 0; cursor: pointer; color: inherit; font: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px 4px; text-align: center; }
.encstage__dot { width: 68px; height: 68px; border-radius: 18px; display: grid; place-items: center;
  background: var(--panel, #0b0f16); border: 1px solid var(--line, rgba(255,255,255,0.1)); color: var(--muted, #93a0b4);
  transition: border-color .3s, color .3s, transform .3s var(--ease-out, ease), box-shadow .3s; }
.encstage__dot svg { width: 26px; height: 26px; }
.encstage__l { font-size: 0.76rem; color: var(--faint, #5a6678); max-width: 12ch; line-height: 1.2; transition: color .3s; }
.encstage.on .encstage__dot { border-color: var(--gold, #e8c98a); color: var(--gold, #e8c98a); transform: translateY(-3px); box-shadow: 0 12px 30px -10px rgba(232,201,138,0.4); }
.encstage.on .encstage__l { color: var(--text, #eef1f7); }
.encstage:focus-visible { outline: none; }
.encstage:focus-visible .encstage__dot { border-color: var(--signal, #6fe3c9); }

.encflow__detail { position: relative; min-height: 130px; }
.encdetail { position: absolute; inset: 0; opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .4s var(--ease-out, ease), transform .4s var(--ease-out, ease); }
.encdetail.on { opacity: 1; transform: none; pointer-events: auto; }

@media (max-width: 720px) {
  .encflow__rail { grid-auto-flow: row; grid-auto-columns: auto; }
  .encflow__line, .encflow__packet { display: none; }
  .encstage { flex-direction: row; justify-content: flex-start; gap: 14px; }
  .encstage__dot { width: 46px; height: 46px; border-radius: 12px; } .encstage__dot svg { width: 20px; height: 20px; }
  .encstage__l { max-width: none; font-size: .84rem; }
  .encflow__detail { position: relative; min-height: 0; margin-top: 1rem; }
  .encdetail { position: relative; opacity: 1; transform: none; display: none; }
  .encdetail.on { display: block; }
}

/* ── Docs toolbar + channel notes ──────────────────────────────────────── */
.doctoolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.docsearch { flex: 1; min-width: 220px; height: 44px; border-radius: 12px; padding: 0 16px; font: inherit; font-size: 0.95rem;
  color: var(--text, #eef1f7); background: var(--panel, #0b0f16); border: 1px solid var(--line, rgba(255,255,255,.1)); }
.docsearch:focus { outline: none; border-color: var(--gold, #e8c98a); }
.docselect { height: 44px; border-radius: 12px; padding: 0 12px; font: inherit; color: var(--text, #eef1f7);
  background: var(--panel, #0b0f16); border: 1px solid var(--line, rgba(255,255,255,.1)); }
[data-channel-note] { display: none; }
[data-channel-note].on { display: block; }

/* ── FINALE ────────────────────────────────────────────────────────────── */
.finale { position: relative; overflow: hidden; padding-top: clamp(5rem, 13vh, 9rem); padding-bottom: clamp(5rem, 13vh, 9rem); }
.finale__graph { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.55; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at center, #000 26%, transparent 72%);
  mask-image: radial-gradient(ellipse 60% 60% at center, #000 26%, transparent 72%); }
.finale__logo { width: clamp(220px, 28vw, 340px); height: auto; filter: drop-shadow(0 0 44px rgba(232,201,138,0.45)); animation: cinpulse 4s ease-in-out infinite; }
.finale__line { font-size: clamp(2rem, 5.4vw, 3.6rem); line-height: 1.05; letter-spacing: -0.035em; }
.finale__again { display: inline-block; margin-top: 2.2rem; font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--faint, #5a6678); transition: color .35s var(--ease-out, ease); }
.finale__again:hover, .finale__again:focus-visible { color: var(--gold, #e8c98a); }
@media (prefers-reduced-motion: reduce) { .finale__logo { animation: none; } }

/* ── near-fullscreen standalone product window (used on interior pages) ─── */
.showcase { width: min(1180px, 94vw); margin: 0 auto; }

/* expandable card detail */
[data-expandable] .card-more { max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .45s var(--ease-out, ease), opacity .3s, margin .3s; }
[data-expandable].open .card-more { max-height: 320px; opacity: 1; margin-top: 10px; }
[data-expand] { cursor: pointer; }
[data-expand] .chev { transition: transform .3s; display: inline-block; }
[data-expandable].open [data-expand] .chev { transform: rotate(180deg); }

/* split-compare */
[data-split] { position: relative; overflow: hidden; }
[data-split] .split__a { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); z-index: 2; }
[data-split] .split__handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; z-index: 3;
  background: var(--gold, #e8c98a); cursor: ew-resize; touch-action: none; }
[data-split] .split__handle::after { content: "⇆"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 26px; height: 26px; border-radius: 50%; background: var(--gold, #e8c98a); color: #04060a; font-size: 12px;
  display: grid; place-items: center; }

@media (max-width: 720px) {
  .cinema { height: 300vh; }
  .cin-window { width: 94vw; }
  .app__stage { min-height: 520px; }
  .desk-panel { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .cin-logo--pulse { animation: none; }
  .cin-hint span { animation: none; }
  .desk-panel { transition: none; }
}