/* SPDX-License-Identifier: MIT — /v2 (a preview of the home in the treatment of mega.io's product pages, the owner's
   reference, docs/review/home-v2.md) and, since the twelfth pass, the home's layout under v3.css (body.home.v2.v3,
   docs/review/promote-v3.md). Dark first, generous dark space, each section's object beside it (on /v2 the product
   loops, which /site/js/clips.js plays; on the home v3.css's stills), soft studio light under them and glass-lit
   cards in dark mode. It builds on home.css and touches nothing outside body.v2. In light mode every loop sits on a
   dark stage, because the alpha shows floor smudges on white and one pedestal's matte is rough. A browser that
   ignores the WebM's alpha (WebKit) gets the MP4, made on black (.is-opaque): in light mode its card turns that
   black, in dark mode the stage drops its light and the frame's black fades into the page through the edge mask. */

/* The stage and the glass as theme tokens, in tokens.css's pattern: light first, then dark twice (the switch, the OS). */
:root {
  --v2-stage: radial-gradient(130% 95% at 50% 28%, #2B2F35 0%, #17191C 55%, #0A0A0A 100%);   /* gunmetal to ink */
  --v2-stage-edge: inset 0 0 0 1px rgb(255 255 255 / .06), inset 0 1px 0 rgb(255 255 255 / .1);
  --v2-stage-shadow: 0 1px 2px rgb(10 10 10 / .06), 0 32px 64px -36px rgb(10 10 10 / .5);
  --v2-stage-clip: clip; --v2-opaque: #000; --v2-bleed: 0px;
  --v2-light: rgb(255 255 255 / .1);          /* the studio light under a loop */
  --v2-alt: var(--bg-alt);
  --v2-glass: var(--bg-raised); --v2-glass-sunken: var(--bg-sunken); --v2-glass-line: var(--hair);
  --v2-glass-top: var(--hair);
}
:root[data-theme="dark"] {
  --v2-stage: none; --v2-stage-edge: 0 0 #0000; --v2-stage-shadow: 0 0 #0000; --v2-stage-clip: visible; --v2-opaque: transparent;
  --v2-light: rgb(255 255 255 / .065); --v2-alt: var(--bg); --v2-bleed: var(--s-5);
  --v2-glass: linear-gradient(180deg, rgb(255 255 255 / .06), rgb(255 255 255 / .022)), var(--bg);
  --v2-glass-sunken: rgb(255 255 255 / .035); --v2-glass-line: rgb(255 255 255 / .09);
  --v2-glass-top: rgb(255 255 255 / .17);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --v2-stage: none; --v2-stage-edge: 0 0 #0000; --v2-stage-shadow: 0 0 #0000; --v2-stage-clip: visible; --v2-opaque: transparent;
    --v2-light: rgb(255 255 255 / .065); --v2-alt: var(--bg); --v2-bleed: var(--s-5);
    --v2-glass: linear-gradient(180deg, rgb(255 255 255 / .06), rgb(255 255 255 / .022)), var(--bg);
    --v2-glass-sunken: rgb(255 255 255 / .035); --v2-glass-line: rgb(255 255 255 / .09);
    --v2-glass-top: rgb(255 255 255 / .17);
  }
}

.v2 { --sec-pad: 72px; }
@media (min-width: 1024px) { .v2 { --sec-pad: 120px; } }
.v2 .sec.alt { background: var(--v2-alt); }

/* ---------- the stage: a loop, cropped to its object, its frame's edges and floor faded into the page ---------- */
.v2 .stage {
  --ar: 4 / 3; --x: 50%; --fade: 86%;
  position: relative; isolation: isolate; width: 100%; max-width: 560px; margin-inline: auto; aspect-ratio: var(--ar);
  border-radius: var(--r-panel); background: var(--v2-stage); box-shadow: var(--v2-stage-edge), var(--v2-stage-shadow);
  overflow: var(--v2-stage-clip); pointer-events: none; user-select: none;
}
.v2 .stage::before {   /* soft light from above, pooled behind the object */
  content: ""; position: absolute; inset: -6% -10% 2%; z-index: -1;
  background: radial-gradient(50% 50% at 50% 46%, var(--v2-light), transparent);
}
.v2 .stage :is(video, .still) {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--x) 50%;
  -webkit-mask: linear-gradient(to bottom, transparent, #000 5%, #000 var(--fade), transparent),
                linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-composite: source-in;
  mask: linear-gradient(to bottom, transparent, #000 5%, #000 var(--fade), transparent),
        linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-composite: intersect;
}
.v2 .stage.is-opaque { background: var(--v2-opaque); }
.v2 .stage.is-opaque::before { display: none; }
.stage-a, .stage-end { --x: 50%; }
.stage-b { --x: 53%; --fade: 84%; }
.stage-c { --fade: 82%; }
.stage-d { --x: 53%; --fade: 85%; }

/* ---------- hero: the words on the left, the drive on the right; the slice of a drive below, as on the home ---------- */
.v2 .hero { padding-top: var(--s-7); }
.v2-hero { display: grid; gap: var(--s-5); align-items: center; }
.v2-hero-copy { display: grid; justify-items: start; }
.v2 .hero h1 { font-size: clamp(34px, 10vw, 68px); line-height: 1.02; }
.v2 .h1-2 { font-size: clamp(17px, 5vw, 34px); line-height: 1.22; letter-spacing: -.025em; margin-top: .45em; }
.v2 .hero .lede { max-width: 36rem; margin-top: var(--s-5); }
.v2 .hero .cta-row { justify-content: flex-start; }
.v2-object { width: 100%; max-width: 520px; margin-inline: auto; }
.motion .v2 .hero .stage { animation: pop .7s 160ms var(--ease-out) both; }
.v2-object { position: relative; }   /* the hero loop and its switch */
/* Pause motion (WCAG 2.2.2): one switch for every loop, at the hero loop's lower corner, glass on the dark stage */
.loops {
  position: absolute; right: var(--s-3); bottom: var(--s-3); z-index: 1; display: grid; place-items: center;
  inline-size: 36px; block-size: 36px; padding: 0; border: 1px solid rgb(255 255 255 / .16); border-radius: var(--r-pill);
  background: rgb(10 10 10 / .55); color: #FAFAFA; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: background-color var(--dur-1) var(--ease-out), scale var(--dur-1) var(--ease-out);
}
.loops:hover { background: rgb(38 38 38 / .8); }
.loops:active { scale: .94; }
.loops:focus-visible { outline-color: #FAFAFA; }
.loops .icon { width: 14px; height: 14px; }
.loops .i-play, .loops[aria-pressed="true"] .i-pause { display: none; }
.loops[aria-pressed="true"] .i-play { display: block; }
@media (pointer: coarse) { .loops { inline-size: var(--tap); block-size: var(--tap); } }
.v2 .slice { width: 100%; margin-top: var(--s-7); }
@media (min-width: 960px) {
  .v2 .hero { padding-top: var(--s-8); }
  .v2-hero { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: var(--s-7); }
  .v2 .hero .lede { font-size: 18px; }   /* its second sentence on one line beside the drive */
  .v2-object { max-width: none; }
  .v2 .hero .stage { --ar: 5 / 4; max-width: none; margin-right: calc(-1 * var(--v2-bleed)); width: auto; }
  .v2 .slice { margin-top: var(--s-8); }
}

/* ---------- the frosted cards in dark mode: lit from above (a white gradient, 6 % to 2 %, and a brighter top edge) inside
   a white hairline, on an opaque base. No backdrop blur: nothing sits behind them but the page, and a blur near a playing
   loop costs a phone every frame. Light mode keeps the drive's plain cards. ---------- */
.v2 :is(.slice, .share-card, .side:not(.yours), .chain-rows, .coin-box) {
  background: var(--v2-glass); border-color: var(--v2-glass-line); border-top-color: var(--v2-glass-top);
}
.v2 .slice-head { background: var(--v2-glass-sunken); }
@media (prefers-contrast: more) {
  .v2 :is(.slice, .share-card, .side:not(.yours), .chain-rows, .coin-box) { background: var(--bg-raised); border-color: var(--line); }
}
@media (prefers-reduced-transparency: reduce) { .loops { background: #0A0A0A; -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ---------- What's different: the file going through the lock beside the question, the table below ---------- */
.v2-lead { display: grid; gap: var(--s-5); align-items: center; margin-bottom: var(--s-6); }
.v2-lead .sec-head { margin-bottom: 0; }
.v2 .compare { max-width: none; }
.v2 .compare td { text-wrap: pretty; }
.v2 .compare-note { max-width: none; margin-left: 0; text-align: left; }
@media (min-width: 900px) {
  .v2-lead { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "stage head"; gap: var(--s-8); margin-bottom: var(--s-7); }
  .v2-lead .stage { grid-area: stage; max-width: none; }
  .v2-lead .sec-head { grid-area: head; }
}

/* ---------- Who sees what: the four sides beside the frosted box, which stays in view while they pass ---------- */
.v2-who { display: grid; gap: var(--s-5); align-items: start; }
.v2-who .stage { max-width: 480px; }
@media (min-width: 1000px) {
  .v2-who { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "cards stage"; gap: var(--s-7); }
  .v2-who .sides { grid-area: cards; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-who .stage { --ar: 1 / 1; grid-area: stage; position: sticky; top: 96px; max-width: none; }
}

/* ---------- Tari does the private parts: the coin beside its words, held in view while they pass ---------- */
.v2-chain { display: grid; gap: var(--s-5); }
.v2-chain .sec-head { margin-bottom: 0; }
@media (min-width: 960px) {
  .v2-chain {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto auto 1fr;
    grid-template-areas: "stage head" "stage rows" "stage coin"; column-gap: var(--s-8); row-gap: var(--s-5); align-items: start;
  }
  .v2-chain .sec-head { grid-area: head; }
  .v2-chain .chain-rows { grid-area: rows; }
  .v2-chain .coin-box { grid-area: coin; }
  .v2-chain .stage { --ar: 1 / 1; grid-area: stage; position: sticky; top: 96px; max-width: none; }
}

/* ---------- the closing: the drive again, smaller, over the last ask ---------- */
.v2 .end { --end-pad: var(--sec-pad); }
.v2 .closing .stage { width: min(100%, 440px); margin-bottom: var(--s-2); }
@media (min-width: 640px) { .v2 .closing .stage { --ar: 5 / 4; } }