/* GBTT homepage motion layer, v1 (27 Sep 2026).
   Loaded by index.html only. Additive: it styles only the classes that
   site/home-motion.js adds (hm-*) plus two ticker hygiene rules, so the
   React components and tokens.css are untouched. Remove the two tags in
   index.html and the homepage is exactly as it was. */

/* ── 0. Motion hygiene: the ticker pauses when read, and stops for reduced motion ── */
.gbtt-v2 .hybrid-ticker:hover .marquee-track,
.gbtt-v2 .hybrid-ticker:focus-within .marquee-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .gbtt-v2 .marquee-track { animation: none !important; }
  .gbtt-v2 .hybrid-ticker { overflow-x: auto; }
}

/* ── 1. Phone header that steps aside ── */
.hm-bar { display: none; }
@media (max-width: 768px) {
  /* tokens.css hides sideways scroll with overflow-x:hidden, which also stops
     position:sticky; clip does the same job and keeps the bar pinned */
  @supports (overflow: clip) { html, body { overflow-x: clip !important; } }
  .gbtt-v2 nav.hm-nav { position: sticky !important; top: 0; z-index: 60; box-shadow: 0 6px 16px -14px rgba(11,15,20,.5); }
  .gbtt-v2 nav.hm-nav { padding: 0 !important; }
  .gbtt-v2 nav.hm-nav > div { flex-wrap: nowrap !important; padding: 9px 14px !important; gap: 10px !important; }
  .gbtt-v2 nav.hm-nav > div > div.hm-bar { width: auto !important; margin-left: auto !important; padding: 0 !important; flex-wrap: nowrap !important; gap: 8px !important; order: 1; }
  .gbtt-v2 nav.hm-nav > div > div:not(.hm-bar) { order: 2; }
  .gbtt-v2 nav.hm-nav > div > a:first-child { gap: 10px !important; min-width: 0; }
  .gbtt-v2 nav.hm-nav > div > a:first-child svg { width: 38px !important; height: 38px !important; }
  .gbtt-v2 nav.hm-nav > div > a:first-child > div:nth-child(2) { margin: 4px 0 !important; }
  .gbtt-v2 nav.hm-nav > div > a:first-child > div:last-child > div:nth-child(1),
  .gbtt-v2 nav.hm-nav > div > a:first-child > div:last-child > div:nth-child(2) { font-size: 16.5px !important; }
  .gbtt-v2 nav.hm-nav > div > a:first-child > div:last-child > div:nth-child(3) { display: none; }
  .gbtt-v2 nav.hm-nav > div > div:not(.hm-bar) { display: none !important; }
  .gbtt-v2 nav.hm-nav.hm-open > div { flex-wrap: wrap !important; padding-bottom: 14px !important; }
  .gbtt-v2 nav.hm-nav.hm-open > div > div:not(.hm-bar) { display: flex !important; }
  .hm-bar { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
  .hm-bar a, .hm-bar button {
    font-family: var(--mono); font-size: 10px !important; letter-spacing: 1.4px !important; text-transform: uppercase;
    min-height: 38px; padding: 0 11px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    border: 1px solid var(--ink); text-decoration: none; background: transparent; color: var(--ink);
  }
  .hm-bar a { background: var(--ink); color: var(--paper) !important; }
  .hm-bar .hm-burger { width: 14px; height: 10px; position: relative; display: inline-block; }
  .hm-bar .hm-burger::before, .hm-bar .hm-burger::after, .hm-bar .hm-burger i {
    content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .2s, opacity .2s;
  }
  .hm-bar .hm-burger::before { top: 0; } .hm-bar .hm-burger i { top: 4.25px; } .hm-bar .hm-burger::after { bottom: 0; }
  .hm-open .hm-bar .hm-burger::before { transform: translateY(4.25px) rotate(45deg); }
  .hm-open .hm-bar .hm-burger::after { transform: translateY(-4.25px) rotate(-45deg); }
  .hm-open .hm-bar .hm-burger i { opacity: 0; }
}

/* ── 2. Sound switch (off until asked) ── */
.hm-snd {
  margin-left: 14px; display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: var(--mono); font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase;
  color: #6B7280; background: transparent; border: 1px solid #D9D4C6; padding: 0 10px; min-height: 30px;
}
.hm-snd:hover { color: #0B0F14; border-color: #0B0F14; }
.hm-snd svg { width: 15px; height: 15px; }
.hm-snd .on { display: none; }
.hm-snd[aria-pressed="true"] { color: #F3EFE6; background: #0B0F14; border-color: #0B0F14; }
.hm-snd[aria-pressed="true"] .on { display: block; }
.hm-snd[aria-pressed="true"] .off { display: none; }

/* ── 3. Postcards with paper depth ── */
.gbtt-v2 .ls-card { perspective: 1000px; -webkit-tap-highlight-color: transparent; }
.gbtt-v2 .ls-card .pc.hm-t {
  transform: translateY(var(--hm-lift, 0px)) rotateX(calc(var(--hm-rx, 0) * 1deg)) rotateY(calc(var(--hm-ry, 0) * 1deg)) scale(var(--hm-s, 1));
  box-shadow: calc(var(--hm-ry, 0) * -1.1px) calc(8px + var(--hm-rx, 0) * 1.1px) 26px -16px rgba(11,15,20, calc(.16 + var(--hm-l, 0) * .26));
  transition: transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .55s cubic-bezier(.2,.8,.2,1), border-color .2s;
  will-change: transform;
}
.gbtt-v2 .ls-card:hover .pc.hm-t { --hm-lift: -2px; }
.gbtt-v2 .ls-card .pc.hm-t.hm-live { transition: transform .08s linear, box-shadow .08s linear, border-color .2s; }
.gbtt-v2 .ls-card .pc.hm-t .pc-h { transform: translate(calc(var(--hm-ry, 0) * .45px), calc(var(--hm-rx, 0) * -.45px)); transition: transform .55s cubic-bezier(.2,.8,.2,1); }
.gbtt-v2 .ls-card .pc.hm-t .pc-motif { transform: translate(calc(var(--hm-ry, 0) * -1px), calc(var(--hm-rx, 0) * 1px)); transition: transform .55s cubic-bezier(.2,.8,.2,1); }
.gbtt-v2 .ls-card .pc.hm-t.hm-live .pc-h, .gbtt-v2 .ls-card .pc.hm-t.hm-live .pc-motif { transition: transform .08s linear; }
.gbtt-v2 .ls-card .pc.hm-t.hm-press { --hm-s: .985; }
.gbtt-v2 .ls-grid.hm-deal .ls-card { animation: hmDeal .85s cubic-bezier(.22,.8,.3,1) backwards; animation-delay: calc(var(--hm-i, 0) * 95ms); }
@keyframes hmDeal { 0% { opacity: .08; transform: translate3d(0, -46px, 60px) rotateX(26deg) rotateZ(var(--hm-rz, -1.5deg)); } 60% { opacity: 1; } 82% { transform: translate3d(0, 3px, 0) rotateX(-2deg); } 100% { transform: none; } }

/* ── 4. Numbers that count, and the Seven Files ruled in ── */
.hm-num { font-variant-numeric: tabular-nums; }
.gbtt-v2 .hp-pil > div > div:first-child { position: relative; }
.gbtt-v2 .hp-pil > div > div:first-child::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: #C8272B; transform: scaleX(0); transform-origin: left; }
.gbtt-v2 .hp-pil.hm-in > div > div:first-child::after { animation: hmRule 1.2s cubic-bezier(.6,0,.2,1) .1s forwards; }
.gbtt-v2 .hp-pil.hm-in .hp-pil-card { animation: hmRise .7s cubic-bezier(.2,.8,.2,1) backwards; }
.gbtt-v2 .hp-pil.hm-in .hp-pil-card:nth-child(2) { animation-delay: .08s; } .gbtt-v2 .hp-pil.hm-in .hp-pil-card:nth-child(3) { animation-delay: .16s; }
.gbtt-v2 .hp-pil.hm-in .hp-pil-card:nth-child(4) { animation-delay: .24s; } .gbtt-v2 .hp-pil.hm-in .hp-pil-card:nth-child(5) { animation-delay: .32s; }
.gbtt-v2 .hp-pil.hm-in .hp-pil-card:nth-child(6) { animation-delay: .40s; } .gbtt-v2 .hp-pil.hm-in .hp-pil-card:nth-child(7) { animation-delay: .48s; }
@keyframes hmRule { to { transform: scaleX(1); } }
@keyframes hmRise { from { opacity: .08; transform: translateY(22px); } }

/* ── 5. Flagship: the gap, drawn to scale from zero ── */
.hm-gap { margin-top: 26px; font-family: var(--mono); }
.hm-gap .hm-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) 62px; gap: 12px; align-items: center; margin: 0 0 10px; }
.hm-gap .hm-l { font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(243,239,230,.62); }
.hm-gap .hm-v { font-size: 13px; font-weight: 700; color: #F3EFE6; text-align: right; font-variant-numeric: tabular-nums; }
.hm-gap .hm-track { position: relative; height: 16px; background: rgba(243,239,230,.07); }
.hm-gap .hm-fill { position: absolute; left: 0; top: 0; bottom: 0; background: #F3EFE6; width: var(--w); transform-origin: left; }
.hm-gap .hm-ghost { position: absolute; top: -3px; bottom: -3px; left: var(--x); width: var(--gw); border: 1.5px dashed #C8272B; background: repeating-linear-gradient(135deg, rgba(200,39,43,.55) 0 4px, rgba(200,39,43,.18) 4px 8px); }
.hm-gap .hm-ghost b { position: absolute; right: 0; top: calc(100% + 6px); font-size: 11px; color: #F0575A; white-space: nowrap; letter-spacing: .6px; }
.hm-gap .hm-note { font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(243,239,230,.5); margin-top: 26px; }
.hm-gap.hm-pre .hm-fill { transform: scaleX(0); } .hm-gap.hm-pre .hm-ghost { opacity: 0; }
.hm-gap.hm-go .hm-fill { animation: hmGrow 1.1s cubic-bezier(.6,0,.2,1) backwards; }
.hm-gap.hm-go .hm-row:nth-child(2) .hm-fill { animation-delay: .25s; }
.hm-gap.hm-go .hm-ghost { animation: hmGhost .6s cubic-bezier(.3,1.4,.5,1) 1.35s backwards; transform-origin: left; }
@keyframes hmGrow { from { transform: scaleX(0); } }
@keyframes hmGhost { from { opacity: 0; transform: scaleX(0); } }
.hm-par { will-change: transform; }

/* ── 6. The reticle builds once per visit, then follows the pointer ── */
.gbtt-v2 nav > div > a:first-child { perspective: 260px; }
.gbtt-v2 nav svg.hm-ret { transition: transform .35s cubic-bezier(.2,.8,.2,1); transform: rotateX(calc(var(--gx, 0) * 1deg)) rotateY(calc(var(--gy, 0) * 1deg)); }
.gbtt-v2 nav svg.hm-ret.hm-build line { stroke-dasharray: 1 1; animation: hmDraw .55s cubic-bezier(.6,0,.2,1) backwards; }
.gbtt-v2 nav svg.hm-ret.hm-build line:nth-child(-n+2) { animation-delay: .05s; }
.gbtt-v2 nav svg.hm-ret.hm-build line:nth-child(3), .gbtt-v2 nav svg.hm-ret.hm-build line:nth-child(4) { animation-delay: .3s; }
.gbtt-v2 nav svg.hm-ret.hm-build circle { transform-box: fill-box; transform-origin: center; animation: hmPop .45s cubic-bezier(.3,1.5,.5,1) .55s backwards; }
.gbtt-v2 nav svg.hm-ret.hm-build line:nth-child(n+7) { animation-delay: .8s; }
.gbtt-v2 nav svg.hm-ret.hm-build circle:nth-last-child(-n+2) { animation-delay: 1.05s; }
@keyframes hmDraw { from { stroke-dashoffset: 1; } }
@keyframes hmPop { from { transform: scale(0); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .gbtt-v2 .ls-card .pc.hm-t, .gbtt-v2 .ls-card .pc.hm-t * { transition: none !important; transform: none !important; }
  .gbtt-v2 .hp-pil > div > div:first-child::after { transform: scaleX(1); animation: none !important; }
  .hm-gap *, .gbtt-v2 .ls-grid.hm-deal .ls-card, .gbtt-v2 .hp-pil .hp-pil-card, .gbtt-v2 nav svg.hm-ret * { animation: none !important; }
}