/* Cinematic preview (/cinematic): a dark visual layer over the normal homepage styles.
   Loaded only by cinematic.html. CSS-only motion; prefers-reduced-motion shows final states. */

@property --cs-to { syntax: '<number>'; inherits: true; initial-value: 0; }

html.cine.dark {
  --bg-rgb: 5 8 18; --bg2-rgb: 10 15 32; --panel-rgb: 13 19 38;
  --ink-rgb: 236 240 252; --ink-soft-rgb: 168 180 214; --ink-faint-rgb: 118 131 168;
  --accent-rgb: 102 146 255; --cyan: 94 231 255; --violet: 139 92 246;
}
html.cine body { background: rgb(var(--bg-rgb)); }
/* Atmosphere: deep navy and violet light from the top, a faint grid, nothing animated. */
html.cine body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 520px at 18% -8%, rgb(37 70 190 / .38), transparent 70%),
    radial-gradient(760px 480px at 88% 4%, rgb(var(--violet) / .22), transparent 70%),
    radial-gradient(1100px 700px at 50% 120%, rgb(16 36 96 / .45), transparent 70%);
}
html.cine body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgb(255 255 255 / .025) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .025) 1px, transparent 1px);
  background-size: 64px 64px; -webkit-mask-image: radial-gradient(1000px 700px at 50% 20%, #000 20%, transparent 75%); mask-image: radial-gradient(1000px 700px at 50% 20%, #000 20%, transparent 75%);
}
html.cine .glow-blue, html.cine .glow-green { opacity: 0 !important; }
html.cine #theme-toggle { display: none; }
html.cine .nav-glass { background: rgb(8 12 26 / .72); border-color: rgb(255 255 255 / .08); }

/* Hero type */
html.cine #check h1 { font-size: clamp(2.6rem, 6.4vw, 5.2rem); letter-spacing: -.035em; line-height: 1.02; }
.cine-grad { background: linear-gradient(100deg, #fff 0%, #b9ccff 35%, rgb(var(--cyan)) 70%, #a78bfa 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.cine #check .hero-rise.mx-auto.mt-6 { color: rgb(var(--ink-soft-rgb)); }
.cine-ghost { color: rgb(var(--ink-rgb)); background: rgb(255 255 255 / .04); border: 1px solid rgb(255 255 255 / .16); backdrop-filter: blur(10px); }
.cine-ghost:hover { background: rgb(255 255 255 / .08); border-color: rgb(var(--cyan) / .5); }
html.cine .hero-check { background: rgb(13 19 38 / .7); border-color: rgb(255 255 255 / .12); box-shadow: 0 30px 80px -30px rgb(37 99 235 / .55); }

/* ---------- Inspection scene ---------- */
.cine-scene { position: relative; }
.cs-tag { display: inline-flex; margin: 0 0 12px 4px; padding: 4px 10px; border-radius: 999px; font: 600 11.5px/1.2 "Geist Mono", ui-monospace, monospace; letter-spacing: .04em; text-transform: uppercase; color: rgb(var(--cyan)); background: rgb(var(--cyan) / .08); border: 1px solid rgb(var(--cyan) / .25); }
.cs-browser { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(180deg, rgb(16 23 46), rgb(9 13 28)); border: 1px solid rgb(255 255 255 / .1);
  box-shadow: 0 0 0 1px rgb(255 255 255 / .03) inset, 0 60px 140px -50px rgb(37 99 235 / .55), 0 30px 60px -30px rgb(0 0 0 / .8); animation: cs-in .7s cubic-bezier(.16,1,.3,1) .4s both; }
.cs-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid rgb(255 255 255 / .07); }
.cs-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgb(255 255 255 / .14); }
.cs-url { margin-left: 10px; flex: 1; max-width: 420px; font: 500 12.5px/1 "Geist Mono", ui-monospace, monospace; color: rgb(var(--ink-soft-rgb)); background: rgb(255 255 255 / .05); border-radius: 8px; padding: 8px 12px; }
.cs-ext { margin-left: auto; width: 22px; height: 22px; border-radius: 6px; background: rgb(var(--accent-rgb)); box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / .6); animation: cs-ping 1.4s ease-out .9s 2; }
.cs-body { position: relative; height: 470px; padding: 22px; }
.cs-site { width: 44%; }
.cs-sk { height: 12px; border-radius: 8px; background: rgb(255 255 255 / .06); }
.cs-sk.w55 { width: 55%; } .cs-sk.w80 { width: 80%; margin-top: 18px; } .cs-sk.w50 { width: 50%; margin-top: 9px; }
.cs-sk.hero { height: 150px; margin-top: 18px; background: linear-gradient(130deg, rgb(var(--accent-rgb) / .2), rgb(var(--violet) / .08)); }
.cs-sk-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.cs-sk-row .cs-sk { height: 72px; }
.cs-beam { position: absolute; left: 0; width: 52%; top: 0; height: 100%; pointer-events: none; opacity: 0; animation: cs-sweep 1.6s cubic-bezier(.45,0,.2,1) 1s both; }
.cs-beam::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 56px; background: linear-gradient(to bottom, transparent, rgb(var(--cyan) / .28)); border-bottom: 2px solid rgb(var(--cyan)); box-shadow: 0 10px 40px rgb(var(--cyan) / .6); }
.cs-status { position: absolute; left: 22px; bottom: 18px; display: flex; align-items: center; gap: 8px; font: 500 12.5px/1 "Geist Mono", ui-monospace, monospace; color: rgb(var(--ink-soft-rgb)); }
.cs-dot { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--cyan)); box-shadow: 0 0 12px rgb(var(--cyan)); animation: cs-blink 1s steps(2) 1s 3, cs-done .3s 3.4s both; }
.cs-s1 { animation: cs-out .2s 3.4s both; }
.cs-s2 { position: absolute; left: 16px; white-space: nowrap; opacity: 0; color: #6ee7a0; animation: cs-fade .3s 3.5s both; }
.cs-panel { position: absolute; right: 18px; top: 18px; bottom: 18px; width: 50%; padding: 18px; border-radius: 16px; background: rgb(255 255 255 / .04); border: 1px solid rgb(255 255 255 / .1); backdrop-filter: blur(12px); box-shadow: 0 30px 70px -30px rgb(0 0 0 / .9); animation: cs-slide .7s cubic-bezier(.16,1,.3,1) 2.3s both; }
.cs-head { display: flex; align-items: center; gap: 14px; }
.cs-ring { --cs-to: 0; position: relative; flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: conic-gradient(#ef4444 calc(var(--cs-to) * 1%), rgb(255 255 255 / .08) 0); animation: cs-fill 1s cubic-bezier(.16,1,.3,1) 3s both; }
.cs-ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #b91c1c; box-shadow: 0 0 30px rgb(239 68 68 / .45); }
.cs-ring span { position: relative; color: #fff; font: 800 26px/1 -apple-system, "SF Pro Display", system-ui, sans-serif; animation: cs-fade .3s 3.5s both; }
.cs-host { font: 600 14px/1.2 "Geist Mono", ui-monospace, monospace; color: rgb(var(--ink-rgb)); }
.cs-score { margin-top: 3px; font-size: 13px; color: rgb(var(--ink-faint-rgb)); } .cs-score b { font-size: 24px; color: rgb(var(--ink-rgb)); letter-spacing: -.02em; }
.cs-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.cs-pills i { font: 700 10.5px/1 system-ui, sans-serif; font-style: normal; padding: 4px 7px; border-radius: 6px; }
.cs-pills .m { background: rgb(249 115 22 / .15); color: #fdba74; } .cs-pills .l { background: rgb(var(--accent-rgb) / .16); color: #a5bdff; } .cs-pills .p { background: rgb(34 197 94 / .14); color: #86efac; }
.cs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 14px; }
.cs-cell { padding: 9px 10px; border-radius: 10px; background: rgb(255 255 255 / .035); border: 1px solid rgb(255 255 255 / .08); border-left-width: 3px; animation: cs-pop .45s cubic-bezier(.16,1,.3,1) calc(2.8s + var(--i) * .16s) both; }
.cs-cell b { display: block; font-size: 11.5px; color: rgb(var(--ink-rgb)); } .cs-cell span { font-size: 11px; color: rgb(var(--ink-faint-rgb)); }
.cs-cell.bad { border-left-color: #f97316; } .cs-cell.warn { border-left-color: #eab308; } .cs-cell.info { border-left-color: rgb(var(--cyan)); }
.cs-rows { display: grid; gap: 6px; margin-top: 12px; }
.cs-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 9px; font-size: 12px; color: rgb(var(--ink-soft-rgb)); background: rgb(255 255 255 / .03); animation: cs-pop .4s cubic-bezier(.16,1,.3,1) calc(3.9s + var(--i) * .18s) both; }
.cs-row em { font-style: normal; font-weight: 700; font-size: 10.5px; padding: 3px 6px; border-radius: 5px; }
.cs-row.bad em { background: rgb(249 115 22 / .16); color: #fdba74; } .cs-row.warn em { background: rgb(var(--accent-rgb) / .16); color: #a5bdff; } .cs-row.ok em { background: rgb(34 197 94 / .14); color: #86efac; }

@keyframes cs-in { from { opacity: 0; transform: translateY(30px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes cs-sweep { 0% { opacity: 0; transform: translateY(-60px); } 8% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; transform: translateY(100%); } }
@keyframes cs-slide { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
@keyframes cs-pop { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes cs-fill { to { --cs-to: 44; } }
@keyframes cs-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cs-out { to { opacity: 0; } }
@keyframes cs-blink { 50% { opacity: .2; } }
@keyframes cs-done { to { background: #22c55e; box-shadow: 0 0 12px #22c55e; } }
@keyframes cs-ping { to { box-shadow: 0 0 0 12px rgb(var(--accent-rgb) / 0); } }

@media (max-width: 760px) {
  .cs-body { height: auto; padding: 16px; }
  .cs-site { width: 100%; }
  .cs-sk.hero { height: 90px; } .cs-sk-row .cs-sk { height: 44px; }
  .cs-beam { width: 100%; height: 260px; }
  .cs-status { position: relative; left: 0; bottom: 0; margin: 14px 0 0; }
  .cs-panel { position: relative; inset: auto; width: auto; margin-top: 14px; }
  .cs-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Six layers: one accent per layer, reveal on scroll (motion.js adds .in) ---------- */
html.cine #features .surface { background: linear-gradient(180deg, rgb(255 255 255 / .045), rgb(255 255 255 / .015)); border-color: rgb(255 255 255 / .08); position: relative; }
html.cine #features .surface::after { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 2px; border-radius: 2px; background: var(--layer, rgb(var(--accent-rgb))); box-shadow: 0 0 22px var(--layer, rgb(var(--accent-rgb))); opacity: .85; }
html.cine #features .surface:nth-of-type(1) { --layer: #60a5fa; }
html.cine #features .surface:nth-of-type(2) { --layer: #34d399; }
html.cine #features .surface:nth-of-type(3) { --layer: #fbbf24; }
html.cine #features .surface:nth-of-type(4) { --layer: #a78bfa; }
html.cine #features .surface:nth-of-type(5) { --layer: #f472b6; }
html.cine #features .surface:nth-of-type(6) { --layer: rgb(94 231 255); }
html.cine #features .surface:hover { border-color: rgb(255 255 255 / .16); transform: translateY(-3px); }

/* Sections that are light-only on the normal page sit on the dark atmosphere here. */
html.cine #privacy { background: transparent !important; }
html.cine .sw-footer { background: rgb(4 6 14); }

@media (prefers-reduced-motion: reduce) {
  .cs-browser, .cs-beam, .cs-panel, .cs-cell, .cs-row, .cs-ring, .cs-ring span, .cs-dot, .cs-s1, .cs-s2, .cs-ext { animation: none !important; }
  .cs-beam, .cs-s1 { opacity: 0; } .cs-s2 { opacity: 1; } .cs-ring { --cs-to: 44; } .cs-dot { background: #22c55e; }
}

/* Performance (Firefox): no full-screen mask or backdrop blur, no hidden animated glows. */
html.cine body::after { -webkit-mask-image: none; mask-image: none; opacity: .22; }
html.cine .glow-blue, html.cine .glow-green { display: none !important; animation: none !important; }
html.cine .nav-glass { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(8 12 26 / .94); }
html.cine .hero-check, .cine-ghost, .cs-panel { -webkit-backdrop-filter: none; backdrop-filter: none; }
html.cine .cs-panel { background: rgb(20 28 54 / .96); }
html.cine .backdrop-blur, html.cine .sw-foot-cta { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
/* Firefox: keep the fixed atmosphere on its own GPU layer so scrolling doesn't repaint it. */
html.cine body::before, html.cine body::after { will-change: transform; transform: translateZ(0); }

/* Inspection scene: a small sample storefront for the beam to sweep (illustrative, shop.example.com). */
.cs-shop-nav { display: flex; align-items: center; gap: 12px; font-size: 12px; color: rgb(var(--ink-soft-rgb)); }
.cs-shop-nav b { color: rgb(var(--ink-rgb)); font-size: 13.5px; margin-right: auto; }
.cs-shop-nav i { font-style: normal; padding: 3px 8px; border-radius: 999px; background: rgb(255 255 255 / .06); }
.cs-shop-hero { margin-top: 14px; padding: 18px; border-radius: 14px; background: linear-gradient(130deg, rgb(var(--accent-rgb) / .35), rgb(var(--violet) / .18)); }
.cs-shop-hero small { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--cyan)); }
.cs-shop-hero strong { display: block; margin-top: 4px; font-size: 22px; letter-spacing: -.02em; color: #fff; }
.cs-shop-hero em { display: inline-block; margin-top: 10px; font-style: normal; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 8px; background: #fff; color: #0b1229; }
.cs-shop-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.cs-shop-row > div { padding: 8px; border-radius: 12px; background: rgb(255 255 255 / .04); border: 1px solid rgb(255 255 255 / .06); font-size: 11.5px; }
.cs-shop-row i { display: block; height: 52px; border-radius: 8px; margin-bottom: 6px; }
.cs-shop-row .p1 { background: linear-gradient(135deg, #3b4f8f, #6b7fc4); } .cs-shop-row .p2 { background: linear-gradient(135deg, #5a4a8a, #a08bd6); } .cs-shop-row .p3 { background: linear-gradient(135deg, #2c6e78, #5ec4cf); }
.cs-shop-row span { display: block; color: rgb(var(--ink-soft-rgb)); } .cs-shop-row b { color: rgb(var(--ink-rgb)); }
.cs-shop-login { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 11.5px; color: rgb(var(--ink-faint-rgb)); }
.cs-shop-login i { flex: 1; height: 22px; border-radius: 6px; background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .08); }
.cs-shop-login em { font-style: normal; font-weight: 600; padding: 5px 10px; border-radius: 6px; background: rgb(var(--accent-rgb)); color: #fff; }
@media (max-width: 760px) { .cs-shop-hero strong { font-size: 18px; } .cs-shop-row i { height: 38px; } }