/* Gravity Split hero (IRL | Online), the tilt score game. TIK-0457. Source of truth for the element:
   asset library ui/signature/gravity-split. Class names avoid the site's .btn and .open. */
.split{--bg:#0A0A0A;--ink:#F5F1E8;--muted:#b8af9f;font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--bg)}
.split *{box-sizing:border-box}
  .split{position:relative;height:calc(100svh - 75px);min-height:520px;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none}
  .side{position:absolute;top:0;bottom:0;overflow:hidden;container-type:inline-size}
  .side.online{left:0} .side.irl{right:0}
  .bg{position:absolute;top:0;bottom:0;width:124vw;background-size:cover;background-position:center;transition:opacity .6s ease;will-change:transform}
  .bg.next{opacity:0}
  .online .bg{left:-12vw} .irl .bg{right:-12vw}
  .shade{position:absolute;inset:0}
  .online .shade{background:linear-gradient(90deg,rgba(10,10,10,.82),rgba(10,10,10,.35))}
  .irl .shade{background:linear-gradient(270deg,rgba(10,10,10,.82),rgba(10,10,10,.35))}
  .copy{position:absolute;top:50%;transform:translateY(-50%);width:100%;max-width:440px;padding:0 1.1rem}
  .online .copy{left:0} .irl .copy{right:0;text-align:right}
  .big{font-family:var(--font-heading);font-weight:800;font-size:clamp(1.5rem,24cqw,5rem);white-space:nowrap;line-height:1;letter-spacing:.02em;color:var(--gold);text-shadow:0 2px 18px rgba(0,0,0,.6)}
  .line{margin:.5rem 0 0;color:var(--ink);font-size:1rem;line-height:1.4;max-width:22rem;transition:opacity .3s}
  @container (max-width:260px){ .line{opacity:0;height:0;margin:0;overflow:hidden} }
  .copy{transition:opacity .25s} @container (max-width:110px){ .copy{opacity:0} }
  .irl .line{margin-left:auto}
  .btns{display:flex;flex-direction:column;gap:.55rem;margin-top:1.1rem;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s;pointer-events:none}
  .irl .btns{align-items:flex-end} .online .btns{align-items:flex-start}
  .side.gs-open .btns{opacity:1;transform:none;pointer-events:auto}
  .gs-btn{display:inline-block;padding:.75rem 1.2rem;border-radius:999px;font-weight:600;text-decoration:none;font-size:.95rem;cursor:pointer;min-width:12rem;text-align:center}
  .gs-btn.main{color:#1a1206;background:linear-gradient(180deg,var(--gold-glow),var(--gold))}
  .gs-btn.alt{color:var(--ink);border:1px solid rgba(212,175,55,.55);background:rgba(10,10,10,.45)}
  .price{opacity:.75;font-weight:400}
  /* the divider bar */
  .bar{position:absolute;top:0;bottom:0;width:4px;margin-left:-2px;background:linear-gradient(180deg,transparent,var(--gold),transparent);z-index:5}
  .knob{position:absolute;top:50%;left:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:#141414;border:2px solid var(--gold);
        display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:20px;cursor:grab;touch-action:none;box-shadow:0 0 0 0 rgba(212,175,55,.6);transition:box-shadow .2s}
  .knob:active{cursor:grabbing}
  .knob svg{position:absolute;top:-6px;left:-6px;width:calc(100% + 12px);height:calc(100% + 12px);transform:rotate(-90deg)}
  .knob circle{fill:none;stroke:var(--gold-glow);stroke-width:4;stroke-dasharray:201;stroke-dashoffset:201}
  /* same size locked or free (Rav: the shrink looked like a glitch); only slide it fully on screen */
  .bar.locked.at-online .knob{margin-left:-62px} .bar.locked.at-irl .knob{margin-left:6px}
  .bar.holding .knob{animation:shake .12s linear infinite}
  @keyframes shake{0%{transform:translateX(-1px)}50%{transform:translateX(1px)}100%{transform:translateX(-1px)}}
  .hint{position:absolute;left:50%;top:22%;transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:.6rem;
        background:linear-gradient(180deg,var(--gold-glow),var(--gold));color:#1a1206;border:0;font:700 1.05rem 'Inter',sans-serif;
        padding:.85rem 1.3rem;border-radius:999px;cursor:pointer;white-space:nowrap;box-shadow:0 6px 28px rgba(0,0,0,.55);animation:beckon 1.8s ease-in-out infinite}
  .hint svg{width:22px;height:22px;flex:none;animation:rock 1.8s ease-in-out infinite}
  .hint[hidden]{display:none}
  .hint.off{animation:none;background:rgba(10,10,10,.8);color:var(--ink);border:1px solid rgba(212,175,55,.5);font-weight:600}
  .hint.off svg{display:none}
  @keyframes beckon{0%,100%{box-shadow:0 6px 28px rgba(0,0,0,.55),0 0 0 0 rgba(232,200,74,.55)}50%{box-shadow:0 6px 28px rgba(0,0,0,.55),0 0 0 12px rgba(232,200,74,0)}}
  @keyframes rock{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}
  /* tilt game: hidden until 20 in a row */
  .ghud{position:absolute;top:calc(env(safe-area-inset-top,0px) + 2.4rem);left:50%;transform:translateX(-50%);z-index:7;display:flex;gap:.5rem;align-items:center;
        background:rgba(10,10,10,.82);border:1px solid rgba(212,175,55,.6);border-radius:999px;padding:.45rem .9rem;font-size:.9rem;white-space:nowrap;pointer-events:none}
  .ghud[hidden]{display:none} .ghud b{font-family:var(--font-heading);color:var(--gold);font-size:1.15rem} .ghud .sep{opacity:.45}
  .ghud.pop{animation:gpop .35s ease}
  @keyframes gpop{0%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.12)}100%{transform:translateX(-50%) scale(1)}}
  .gcard{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:8;width:min(86vw,360px);background:#141414;border:1px solid var(--gold);border-radius:18px;
         padding:1.2rem 1.2rem 1rem;text-align:center;box-shadow:0 18px 60px rgba(0,0,0,.7)}
  .gcard[hidden]{display:none}
  .gcard .gn{font-family:var(--font-heading);font-weight:800;font-size:3rem;color:var(--gold);line-height:1}
  .gcard .gt{margin:.6rem 0 1rem;font-size:1rem;line-height:1.45;color:var(--ink)}
  .gcard button{border:0;border-radius:999px;padding:.7rem 1.3rem;font-weight:700;color:#1a1206;background:linear-gradient(180deg,var(--gold-glow),var(--gold));cursor:pointer}
  @media (hover:hover) and (pointer:fine){ .knob:hover{box-shadow:0 0 0 6px rgba(212,175,55,.18)} .gs-btn:hover{filter:brightness(1.08)} }
  @media (prefers-reduced-motion:reduce){ .hint,.hint svg{animation:none}  .bg{transition:none} .btns{transition:none} .bar.holding .knob{animation:none} }