/*
 * Camera Grid: the home page's own sections. The hero and its playable
 * viewfinder, the marquee, Scene-Guide-Score's exploded stack, the coach,
 * private-by-design and the zoom ruler. Shared components are in base.css.
 *
 * Motion is transform and opacity only. Everything rests complete: the
 * viewfinder locked, the stack exploded, the coach on its lock.
 */

/* ── Hero ────────────────────────────────────────────────── */
.hero { position: relative; padding-block: clamp(40px, 7vw, 96px) clamp(72px, 8vw, 120px); overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: -20% -10% auto; height: 120%; pointer-events: none;
  background: radial-gradient(60% 55% at 72% 40%, rgba(233, 165, 107, .22), transparent 70%),
              radial-gradient(40% 40% at 20% 10%, rgba(61, 220, 151, .08), transparent 70%); }
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-copy { display: grid; gap: 26px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.facts { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; }
.facts li { font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.facts li::before { content: "+"; color: var(--amber); margin-right: 8px; }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; } }

/* The playable viewfinder */
.stage { display: grid; justify-items: center; }
/* The lens: the viewfinder and the engraved ring round it; the hint sits below in flow, so it may wrap. */
.lens { position: relative; width: 100%; display: grid; place-items: center; padding: 6%; }
.ring-text { position: absolute; inset: -4%; width: 108%; height: 108%; pointer-events: none; transform: rotate(var(--spin, 0deg)); }
.ring-text text { font: 500 12.5px var(--mono); letter-spacing: .42em; fill: rgba(214, 224, 255, .4); }
.ring-text circle { fill: none; stroke: var(--line); }
.vf { --state: #fff; position: relative; width: min(100%, 420px); aspect-ratio: 3 / 4; border-radius: 34px; overflow: hidden;
  background: #000; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  box-shadow: 0 0 0 10px #05060a, 0 0 0 11px var(--line-2), 0 50px 120px rgba(0, 0, 0, .6), 0 0 90px rgba(233, 165, 107, .18); }
.vf[data-state="close"] { --state: var(--amber); }
.vf[data-state="locked"] { --state: var(--mint); }
.vf:active, .vf.is-dragging { cursor: grabbing; }
.vf:focus-visible { outline-offset: 14px; border-radius: 34px; }
/* The scene is 1.38 viewfinder heights square (1.84 widths, at 3:4) and placed in percent of itself, so it needs no measuring.
   At rest it sits locked: the sun on the upper-left crossing. */
.vf .scene { position: absolute; left: 0; top: 0; width: 184%; max-width: none; height: auto; aspect-ratio: 1;
  transform: translate3d(-15.034%, -8.996%, 0); will-change: transform; pointer-events: none; }
.vf .grid, .vf .overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.vf .grid line { stroke: rgba(255, 255, 255, .5); stroke-width: 1; vector-effect: non-scaling-stroke; }
.vf .target { fill: none; stroke: var(--state); stroke-width: 1.8; stroke-dasharray: 5 3.6; transition: stroke .3s; }
.vf .marker { fill: var(--state); transition: fill .3s; }
.vf .leash { stroke: var(--state); stroke-width: .9; stroke-dasharray: 1.5 3; opacity: .7; transition: stroke .3s, opacity .3s; }
.vf.locked .leash { opacity: 0; }
.chip { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 999px; background: rgba(15, 17, 24, .62); backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); font: 600 13px var(--body); white-space: nowrap; border: 1px solid rgba(255, 255, 255, .12); }
.chip .tag { font: 600 10px var(--mono); letter-spacing: .08em; padding: 3px 7px; border-radius: 6px; background: var(--mint); color: #062b1b;
  transition: opacity .25s, transform .25s; }
.vf:not(.locked) .chip .tag { opacity: 0; transform: scale(.7); width: 0; padding: 3px 0; margin-left: -8px; }
.tip { position: absolute; left: 50%; bottom: 128px; transform: translateX(-50%); padding: 8px 15px; border-radius: 999px;
  background: rgba(15, 17, 24, .66); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font: 600 15px var(--body);
  display: flex; gap: 8px; align-items: center; white-space: nowrap; border: 1px solid rgba(242, 177, 52, .4); transition: opacity .3s, transform .3s; }
.tip svg { width: 16px; height: 16px; color: var(--amber); transition: transform .3s; }
.vf.locked .tip { opacity: 0; transform: translate(-50%, 8px); }
.shutter { position: absolute; left: 50%; bottom: 26px; width: 84px; height: 84px; transform: translateX(-50%); }
.shutter svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.shutter .track { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 5; }
.shutter .arc { fill: none; stroke: var(--state); stroke-width: 5; stroke-linecap: round; transition: stroke .3s; }
.shutter .btn { fill: #fff; }
.shutter .score { position: absolute; inset: 0; display: grid; place-items: center; font: 500 17px var(--mono); color: #0B0D12;
  font-variant-numeric: tabular-nums; }
.vf.pulse .shutter { animation: pulse .6s ease-out; }
@keyframes pulse { 40% { transform: translateX(-50%) scale(1.09); } }
.hint { margin-top: 10px; padding-inline: 8px; text-align: center; }
.hint .eng { color: var(--muted); }
.hint .eng span { color: var(--text); }
@media (max-width: 480px) {
  .vf { border-radius: 28px; }
  .tip { bottom: 112px; font-size: 14px; }
  .shutter { width: 72px; height: 72px; bottom: 22px; }
  .shutter .score { font-size: 15px; }
  .hint .eng { letter-spacing: .14em; }
  .bubble .eng { letter-spacing: .14em; }
}

/* ── Engraved marquee ────────────────────────────────────── */
.marquee { border-block: 1px solid var(--line); overflow: hidden; padding-block: 18px; background: var(--ink-2); }
.marquee .track { display: flex; gap: 48px; width: max-content; animation: slide 60s linear infinite; }
.marquee span { font: 500 12px var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.marquee span i { font-style: normal; color: var(--amber); margin-left: 48px; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ── Scene. Guide. Score. ────────────────────────────────── */
.sgs .wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.steps { display: grid; gap: 26px; counter-reset: s; padding: 0; margin: 0; }
.steps li { list-style: none; display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
.steps li::before { counter-increment: s; content: counter(s); font: 500 14px var(--mono); width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid var(--line-2); color: var(--mint); }
.steps p { margin: 6px 0 0; color: var(--muted); }
.sgs .more { margin: 34px 0 0 60px; }
@media (max-width: 900px) { .sgs .wrap { grid-template-columns: 1fr; } }

/* ── The coach ───────────────────────────────────────────── */
.coach { background: linear-gradient(180deg, var(--ink), var(--ink-2)); }
.coach .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .coach .wrap { grid-template-columns: 1fr; } }

/* ── Private by design ───────────────────────────────────── */
.private .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.bubble { position: relative; aspect-ratio: 1; width: min(100%, 460px); margin-inline: auto; }
.bubble canvas { display: block; width: 100%; height: 100%; }
.bubble .eng { position: absolute; left: 0; right: 0; bottom: 1%; text-align: center; }
.nolist { display: grid; gap: 14px; padding: 0; margin: 28px 0 0; }
.nolist li { list-style: none; display: flex; gap: 14px; align-items: baseline; font-size: 18px; }
.nolist li::before { content: "✕"; font: 500 13px var(--mono); color: var(--amber); }
@media (max-width: 900px) { .private .wrap { grid-template-columns: 1fr; } }

/* ── The zoom ruler: scroll progress, read like the app's zoom ── */
.ruler { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 40; height: 300px; width: 44px; pointer-events: none; }
.ruler .ticks { position: absolute; right: 0; top: 0; bottom: 0; width: 12px;
  background: repeating-linear-gradient(180deg, var(--line-2) 0 1px, transparent 1px 10px); }
.ruler .stop { position: absolute; right: 18px; transform: translateY(-50%); font: 500 10px var(--mono); color: var(--muted); }
.ruler .needle { position: absolute; right: -2px; top: 0; width: 26px; height: 2px; background: var(--amber); box-shadow: 0 0 8px var(--amber);
  transform: translateY(calc(var(--rp, 0) * 300px)); }
.ruler .read { position: absolute; right: 30px; top: 0; font: 500 12px var(--mono); color: var(--amber); background: var(--ink);
  padding: 2px 6px; border-radius: 6px; font-variant-numeric: tabular-nums; transform: translateY(calc(var(--rp, 0) * 300px - 50%)); }
@media (max-width: 1279.98px) { .ruler { display: none; } }