/* ============================================================================
   DeltaCrown Homepage — "Front Row Hybrid" body
   Ported from the Claude Design handoff (DeltaCrown Homepage.dc.html).

   Scope: every rule is namespaced under `.dc-home` so the design tokens and the
   intentionally-generic utility classes (.cta / .m / .tile / .mode / …) can
   neither leak into the rest of the site nor be clobbered by site-wide
   single-class rules (2-class specificity always wins). Static layout values
   live as inline styles in home.html; this file owns tokens, hover/press
   states, keyframes, the Mac-dock, responsive rules and the scroll reveal.
   ============================================================================ */

.dc-home{
  --az:#0A84FF;--az4:#3FA3FF;--az6:#006FE6;--vi:#6849E5;--vi4:#8470EE;--go:#CFA75A;--go4:#E2C588;
  --live:#FF3B5C;--suc:#2ECC71;
  --bg:#0A0D14;--s1:#11151E;--s2:#181D27;--s3:#222936;
  --fg:#F4F6FA;--mut:#AEB6C7;--soft:#727B90;--dim:#474F61;
  --hair:rgba(255,255,255,.07);--stroke:rgba(255,255,255,.11);--strong:rgba(255,255,255,.18);
  --tAz:rgba(10,132,255,.14);--tVi:rgba(104,73,229,.16);--tGo:rgba(207,167,90,.14);--tLi:rgba(255,59,92,.14);--tSu:rgba(46,204,113,.14);
  --brand:linear-gradient(135deg,#6849E5,#0A84FF);
  /* identity -> prestige: violet through a soft mauve to champion gold, with only
     a whisper of azure. Keeps the brand "crown" sweep without reading as blue. */
  --crown:linear-gradient(116deg,#8470EE 0%,#A382D6 34%,#C99FAE 60%,#E2C588 100%);
  --disp:"Sora",-apple-system,system-ui,sans-serif;
  --text:"Inter",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --eo:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.34,1.56,.64,1);
}
.dc-home,.dc-home *{box-sizing:border-box;}

/* ── Type / utility helpers ──────────────────────────────────────────────── */
.dc-home .m{font-family:var(--mono);font-variant-numeric:tabular-nums;}
.dc-home .grad{background:var(--crown);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}

/* ── Press / button language ─────────────────────────────────────────────── */
.dc-home .press{transition:transform .14s var(--eo),background .2s,border-color .2s,color .2s,box-shadow .2s;}
.dc-home .press:active{transform:scale(.975);}
.dc-home .cta{position:relative;overflow:hidden;}
.dc-home .cta::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transform:translateX(-130%) skewX(-14deg);transition:transform 1s var(--eo);}
.dc-home .cta:hover::after{transform:translateX(230%) skewX(-14deg);}
.dc-home .cta:hover{transform:translateY(-1px);box-shadow:0 18px 44px -18px rgba(10,132,255,.7);}
.dc-home .ghost:hover{border-color:var(--soft);color:var(--fg);}

/* ── Cards / tiles ───────────────────────────────────────────────────────── */
.dc-home .tile:hover{background:var(--s2);border-color:var(--strong);transform:translateY(-2px);}
.dc-home .tile:hover [data-i]{color:var(--az4);}
.dc-home .tcard:hover{transform:translateY(-4px);border-color:var(--strong);box-shadow:0 30px 60px -36px rgba(0,0,0,.7);}
.dc-home .tcard:hover .joinp{background:var(--az);color:#fff;}
.dc-home .mode:hover{transform:translateY(-3px);border-color:var(--strong);background:var(--s2);}
.dc-home .mode:hover [data-i]{color:var(--az4);}
.dc-home .filter:hover{color:var(--fg);border-color:var(--strong);}
.dc-home .trow:hover{background:var(--s2);border-color:var(--strong);}
.dc-home .lnk:hover{color:var(--fg);}
.dc-home .ecocard{transition:transform .3s var(--eo),border-color .3s,background .3s;}
.dc-home .ecocard:hover{transform:translateY(-3px);border-color:var(--strong);background:var(--s2);}
.dc-home .ecocard:hover [data-i]{transform:scale(1.08);}
.dc-home .pathcard{transition:transform .3s var(--eo),border-color .3s,box-shadow .3s;}
.dc-home .pathcard:hover{transform:translateY(-4px);border-color:var(--strong);box-shadow:0 28px 56px -36px rgba(0,0,0,.7);}
.dc-home .pathcard:hover .pathcta{gap:11px;}
.dc-home .wcard:hover{border-color:var(--strong);}

/* ── Mac-dock game rail (pure CSS: hover/focus scale + neighbour lift) ────── */
.dc-home .dock{display:flex;align-items:flex-end;justify-content:center;gap:12px;flex-wrap:wrap;}
.dc-home .dock-item{position:relative;flex:0 0 auto;transition:transform .34s var(--spring),border-color .3s,box-shadow .34s var(--eo);transform-origin:bottom center;will-change:transform;}
.dc-home .dock-item:hover,.dc-home .dock-item:focus-visible{transform:translateY(-12px) scale(1.14);z-index:3;border-color:var(--strong);box-shadow:0 36px 60px -30px rgba(0,0,0,.85),0 0 0 1px rgba(132,112,238,.3);outline:none;}
.dc-home .dock-item:hover+.dock-item,.dc-home .dock-item:focus-visible+.dock-item,.dc-home .dock-item:has(+.dock-item:hover),.dc-home .dock-item:has(+.dock-item:focus-visible){transform:translateY(-5px) scale(1.06);z-index:2;}
.dc-home .dock-item:hover .dock-info,.dc-home .dock-item:focus-visible .dock-info{opacity:1;transform:translateY(0);}
.dc-home .dock-item:hover .gover,.dc-home .dock-item:focus-visible .gover{opacity:1;}
.dc-home .dock-info{opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s var(--eo);}
@media (hover:none){
  .dc-home .dock-item{transition:transform .2s var(--eo);}
  .dc-home .dock-item .dock-info{opacity:1;transform:none;}
}

/* ── Hero-bottom row: proof signals (left) + supported-games dock (right).
   One balanced row on desktop; stacks at a single intentional breakpoint so it
   never drops awkwardly at 1080p / 100%. ──────────────────────────────────── */
.dc-home .hero-bottom{display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,3vw,40px);}
.dc-home .hero-proof{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--soft);}
.dc-home .hero-games{flex:0 0 auto;display:flex;align-items:flex-end;gap:14px;}
@media (max-width:980px){
  .dc-home .hero-bottom{flex-direction:column;align-items:flex-start;gap:18px;}
  .dc-home .hero-games{align-self:flex-start;max-width:100%;}
}

/* ── Hero mini game dock — compact single row for all 11 titles; pure-CSS
   scale + neighbour lift + tooltip. On touch it disables the hover lift and
   falls back to horizontal scroll + tap. ───────────────────────────────── */
.dc-home .hero-dock{display:flex;flex-wrap:nowrap;align-items:flex-end;gap:7px;padding:12px 2px 6px;max-width:100%;}
.dc-home .hero-dock-item{position:relative;flex:0 0 auto;width:27px;height:27px;border-radius:8px;border:1px solid var(--hair);background-size:cover;background-position:center;box-shadow:0 2px 6px rgba(0,0,0,.4);transition:transform .3s var(--spring),border-color .25s,box-shadow .3s var(--eo);transform-origin:bottom center;will-change:transform;}
.dc-home .hero-dock-item:hover,.dc-home .hero-dock-item:focus-visible{transform:translateY(-6px) scale(1.26);border-color:var(--strong);box-shadow:0 16px 28px -12px rgba(0,0,0,.85),0 0 0 1px rgba(132,112,238,.32);outline:none;z-index:3;}
.dc-home .hero-dock-item:hover+.hero-dock-item,.dc-home .hero-dock-item:focus-visible+.hero-dock-item,.dc-home .hero-dock-item:has(+.hero-dock-item:hover),.dc-home .hero-dock-item:has(+.hero-dock-item:focus-visible){transform:translateY(-3px) scale(1.1);z-index:2;}
.dc-home .hero-dock-tip{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%) translateY(4px);white-space:nowrap;padding:3px 8px;border-radius:7px;background:var(--s3);border:1px solid var(--stroke);color:var(--fg);font-family:var(--mono);font-size:9px;letter-spacing:.04em;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s var(--eo);box-shadow:0 10px 22px -10px rgba(0,0,0,.8);z-index:6;}
.dc-home .hero-dock-item:hover .hero-dock-tip,.dc-home .hero-dock-item:focus-visible .hero-dock-tip{opacity:1;transform:translateX(-50%) translateY(0);}
@media (hover:none){
  .dc-home .hero-dock{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .dc-home .hero-dock::-webkit-scrollbar{display:none;}
  .dc-home .hero-dock-item{transition:transform .18s var(--eo);}
  .dc-home .hero-dock-tip{display:none;}
}

/* ── Tournament filter chips — client-side toggle; accessible pressed state ── */
.dc-home .dc-tfilter{cursor:pointer;font-family:var(--text);transition:transform .14s var(--eo),background .2s,border-color .2s,color .2s;}
.dc-home .dc-tfilter:hover{color:var(--fg);border-color:var(--strong);}
.dc-home .dc-tfilter[aria-pressed="true"]{background:var(--tAz)!important;border-color:rgba(10,132,255,.45)!important;color:var(--fg)!important;}
.dc-home .dc-tfilter:focus-visible{outline:2px solid var(--az4);outline-offset:2px;}

/* ── Ambient motion keyframes (referenced by inline styles in home.html) ──── */
.dc-home .rv{will-change:auto;}
@keyframes dch-glow{0%,100%{opacity:.7;}50%{opacity:1;}}
@keyframes dch-spot{0%,100%{opacity:.7;transform:translateX(-50%) scale(1);}50%{opacity:1;transform:translateX(-50%) scale(1.03);}}
@keyframes dch-drA{0%,100%{transform:translate3d(0,0,0);}50%{transform:translate3d(-20px,12px,0);}}
@keyframes dch-drB{0%,100%{transform:translate3d(0,0,0);}50%{transform:translate3d(18px,-12px,0);}}
@keyframes dch-breathe{0%,100%{opacity:.66;}50%{opacity:1;}}
@keyframes dch-draw{to{stroke-dashoffset:0;}}
@keyframes dch-grow{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@keyframes dch-rise{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;}}

/* ── Responsive helpers (body uses these for the connector arrows) ───────── */
@media (max-width:768px){.dc-home .deskonly{display:none !important;}}
@media (min-width:769px){.dc-home .mobonly{display:none !important;}}

/* Why-DeltaCrown comparison: 3-up (old | arrow | new) collapses to a single
   stacked column at the same breakpoint the connector arrow hides, so the two
   comparison cards never get squeezed side-by-side on phones. */
@media (max-width:768px){.dc-home .why-grid{grid-template-columns:1fr !important;}}

/* ── Scroll reveal — progressive enhancement only.
   Content is fully visible by default; the reveal applies only where the
   browser supports a view() timeline (Chromium 115+) and motion is allowed,
   so it can never strip or hide content (the handoff "Lessons" regression). ── */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .dc-home [data-reveal]{
      animation:dch-rise linear both;
      animation-timeline:view();
      animation-range:entry 4% cover 24%;
    }
  }
}

/* ── Desktop-only: hide at mobile/tablet breakpoints (mobile uses .dc-home-m) */
@media (max-width:1023px){.dc-home{display:none!important;}}

/* ── Homepage: hide desktop footer wrapper at mobile/tablet widths ─────────── */
@media (max-width:1023px){.dc-footer-desktop{display:none!important;}}

/* ── Reduced-motion: kill all ambient + reveal animation ─────────────────── */
@media (prefers-reduced-motion:reduce){
  .dc-home [data-anim]{animation:none !important;}
  .dc-home .rv,.dc-home [data-reveal]{animation:none !important;opacity:1 !important;transform:none !important;}
}