/* Club 36 · card FX layer — typed custom properties, spring easing, additive idle,
   Houdini metal, scroll-driven raking light, plus-lighter specular, gem fire, style queries.
   Everything here is progressive: each block is @supports-guarded, base card still stands alone. */

/* ── typed props: these interpolate, so light and tilt can be transitioned/animated ── */
@property --tx{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --ty{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --sx{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --sy{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --lx{syntax:'<percentage>';inherits:false;initial-value:50%}
@property --ly{syntax:'<percentage>';inherits:false;initial-value:0%}
@property --lit{syntax:'<number>';inherits:false;initial-value:0}
@property --rake{syntax:'<angle>';inherits:false;initial-value:74deg}
@property --caust{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --fire{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --px-a{syntax:'<number>';inherits:true;initial-value:.05}
@property --px-d{syntax:'<number>';inherits:true;initial-value:4}

/* the light and the tilt now ease themselves — the card lags the cursor like real mass */
.mc{transform:perspective(1500px) rotateX(calc(var(--ty) + var(--sy))) rotateY(calc(var(--tx) + var(--sx)));
  transition:--tx .34s cubic-bezier(.2,.8,.2,1),--ty .34s cubic-bezier(.2,.8,.2,1),--lx .38s linear,--ly .38s linear,--lit .4s var(--ease)}
.mc:hover{transition:--tx .12s linear,--ty .12s linear,--lx .16s linear,--ly .16s linear,--lit .25s}

/* ── spring flip: a real overshoot curve, not a bezier approximation ── */
@media(prefers-reduced-motion:no-preference){
  /* per-keyframe easing carries the shot; composition must not add to the base transform */
  .mc.mc[data-flip="in"] .mc-in,.mc.mc[data-flip="out"] .mc-in{animation-composition:replace}
  .mc[data-flip="in"] .mc-sheen,.mc[data-flip="out"] .mc-sheen{animation:mcSweep 1s cubic-bezier(.2,0,.25,1) .52s}
  /* additive idle: one keyframe set works face-up and face-down */
  @supports (animation-composition:add){
    .mc-in{animation-name:mcIdleAdd;animation-composition:add}
    @keyframes mcIdleAdd{
      0%,100%{transform:rotateY(-1.1deg) rotateX(.5deg) translateY(0) translateZ(0)}
      34%{transform:rotateY(1.5deg) rotateX(-.5deg) translateY(-3px) translateZ(6px)}
      68%{transform:rotateY(.3deg) rotateX(.8deg) translateY(-1px) translateZ(2px)}}
  }
}

/* ── procedural metal (Houdini): replaces the noise bitmap with a painted surface ── */
@supports (background:paint(c36-metal)){
  .mc-grain{background-image:paint(c36-metal);background-size:100% 100%;opacity:.55;mix-blend-mode:overlay}
  .mc-web{display:none}
}
[data-f="foyer"]{--px-ink:rgba(0,0,0,.9);--px-lit:rgba(226,234,248,.9);--px-a:.055;--px-d:5}
[data-f="sterling"]{--px-ink:rgba(24,28,36,.75);--px-lit:rgba(255,255,255,.95);--px-a:.06;--px-d:4}
[data-f="prestige"]{--px-ink:rgba(70,48,6,.8);--px-lit:rgba(255,250,214,.95);--px-a:.07;--px-d:4}
[data-f="ruby"]{--px-ink:rgba(0,0,0,.85);--px-lit:rgba(240,170,150,.6);--px-a:.05;--px-d:5}
[data-f="reserve"]{--px-ink:rgba(0,0,0,.85);--px-lit:rgba(212,175,55,.7);--px-a:.05;--px-d:5}
[data-f="platinum"]{--px-ink:rgba(20,24,32,.7);--px-lit:rgba(255,255,255,.9);--px-a:.065;--px-d:4}
[data-f="prive"]{--px-ink:rgba(0,0,0,.9);--px-lit:rgba(212,175,55,.55);--px-a:.05;--px-d:6}

/* ── specular that adds light instead of painting white over it ── */
.mc-sheen{mix-blend-mode:var(--f-blend,plus-lighter)}
[data-f="sterling"],[data-f="prestige"],[data-f="platinum"]{--f-blend:overlay}
[data-f="sterling"]{--f-sheen-a:rgba(255,255,255,.2);--f-sheen-b:rgba(255,255,255,.44)}
[data-f="prestige"]{--f-sheen-a:rgba(255,252,228,.22);--f-sheen-b:rgba(255,255,244,.5)}
[data-f="platinum"]{--f-sheen-a:rgba(255,255,255,.12);--f-sheen-b:rgba(255,255,255,.28)}
/* liquid highlight — SVG displacement, only while the pointer is on the card */
.mc:hover .mc-sheen{filter:url(#c36Ripple)}

/* ── raking light: the sun crosses the card as it travels the scrollport ── */
.mc-rake{display:block;position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0}
@supports (animation-timeline:view()){
  .mc-rake{opacity:1;mix-blend-mode:var(--f-blend,plus-lighter);
    background:linear-gradient(var(--rake),transparent 34%,var(--f-sheen-a) 46%,var(--f-sheen-b) 50%,var(--f-sheen-a) 54%,transparent 66%);
    animation:mcRake linear both;animation-timeline:view();animation-range:entry 4% exit 96%}
  @keyframes mcRake{from{--rake:78deg}to{--rake:-78deg}}
  @media(prefers-reduced-motion:no-preference){
    .mc{animation:mcScrollPitch linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    @keyframes mcScrollPitch{from{--sy:3.4deg;--sx:-1.6deg}to{--sy:-3.4deg;--sx:1.6deg}}
  }
}

/* ── the stone's fire: a rotating caustic and a hue-shifting flash inside the well ── */
.mc-fire{display:block;position:absolute;inset:-6%;border-radius:50%;pointer-events:none;z-index:2;mix-blend-mode:screen;opacity:.3;
  background:conic-gradient(from var(--caust),rgba(255,140,190,.34),rgba(255,238,150,.4) 14%,rgba(150,255,216,.36) 28%,rgba(130,196,255,.34) 42%,transparent 52%,rgba(255,190,130,.3) 68%,transparent 78%,rgba(198,150,255,.34) 92%,rgba(255,140,190,.34));
  filter:blur(3px) saturate(1.15)}
.mc-flash{display:block;position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:3;mix-blend-mode:screen;
  background:radial-gradient(22% 16% at 34% 26%,rgba(255,255,255,.9),rgba(214,255,244,.22) 46%,transparent 68%),radial-gradient(14% 10% at 68% 72%,rgba(226,240,255,.44),transparent 70%);
  filter:hue-rotate(var(--fire)) saturate(1.4)}
@media(prefers-reduced-motion:no-preference){
  .mc-fire{animation:mcCaust 8.5s linear var(--idle,0s) infinite}
  .mc-flash{animation:mcFire 5.5s ease-in-out var(--idle,0s) infinite}
  @keyframes mcCaust{from{--caust:0deg}to{--caust:360deg}}
  @keyframes mcFire{0%,100%{--fire:-30deg;opacity:.72}38%{--fire:40deg;opacity:.95}72%{--fire:8deg;opacity:.84}}
}
/* style query: a revealed card's stone burns brighter than a face-down one */
@container style(--rv:1){
  .mc-fire{opacity:.44}
  .mc-flash{filter:hue-rotate(var(--fire)) saturate(1.6) brightness(1.12)}
}
@container style(--rv:0){.mc-fire{opacity:.2}}

/* ══════════ PRIVÉ — the black card, maxed. All scoped to [data-f="prive"]. ══════════ */
/* living gold-foil angle — typed so it interpolates smoothly (background-position shimmer is jerky) */
@property --foil{syntax:'<angle>';inherits:true;initial-value:0deg}

/* 1 · gold hot-stamp: the wordmark, tier, ENT glyph and balance are struck foil that drifts */
[data-f="prive"]{
  --f-mark:conic-gradient(from calc(210deg + var(--foil)),#8a6a14,#F4D03F 12%,#FBEFC7 22%,#D4AF37 40%,#7d5f10 58%,#e6c86a 78%,#8a6a14 100%);
  --f-num:conic-gradient(from calc(200deg + var(--foil)),#a8821c,#F4D03F 14%,#FBEFC7 26%,#D4AF37 46%,#8a6a14 64%,#F4D03F 84%,#a8821c 100%);
  --f-ent:conic-gradient(from calc(200deg + var(--foil)),#8a6a14,#FBEFC7 20%,#F4D03F 40%,#D4AF37 60%,#8a6a14 100%);
}
[data-f="prive"] .mc-tier{background:var(--f-num);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}
@media(prefers-reduced-motion:no-preference){
  [data-f="prive"]{animation:mcFoil 7s linear infinite}
  @keyframes mcFoil{from{--foil:0deg}to{--foil:360deg}}
  [data-f="prive"]:hover{animation-duration:3.4s}
}

/* 2 · tilt-into-the-light iridescence — stacked OKLCH linear+conic, color-dodge, masked to the pointer.
   Real black cards read as carbon foil: a banded rainbow that only blooms where light catches. */
.mc-holo{display:none}
[data-f="prive"] .mc-holo{display:block;position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:5.4cqw;
  mix-blend-mode:color-dodge;opacity:calc(.1 + var(--lit) * .42);transition:opacity .4s var(--ease);
  background:
    linear-gradient(calc(116deg + var(--tx) * 6),transparent 22%,oklch(.7 .13 205/.42) 42%,oklch(.8 .17 300/.5) 50%,oklch(.76 .15 60/.42) 58%,transparent 78%),
    repeating-linear-gradient(calc(116deg + var(--tx) * 6),oklch(.72 .1 260/.16) 0 2px,transparent 2px 6px),
    conic-gradient(from calc(200deg + var(--foil)) at var(--lx) var(--ly),oklch(.68 .12 40/.3),oklch(.72 .12 180/.26),oklch(.72 .13 300/.3),oklch(.68 .12 40/.3));
  -webkit-mask:radial-gradient(120% 120% at var(--lx) var(--ly),#000 4%,rgba(0,0,0,.5) 40%,transparent 74%);
          mask:radial-gradient(120% 120% at var(--lx) var(--ly),#000 4%,rgba(0,0,0,.5) 40%,transparent 74%)}
@supports not (color:oklch(.5 .1 200)){
  [data-f="prive"] .mc-holo{background:
    linear-gradient(116deg,transparent 22%,rgba(120,200,220,.4) 42%,rgba(190,150,230,.48) 50%,rgba(230,200,140,.4) 58%,transparent 78%),
    conic-gradient(from 200deg at var(--lx) var(--ly),rgba(210,150,120,.3),rgba(140,220,210,.26),rgba(180,150,230,.3),rgba(210,150,120,.3))}
}
@media(prefers-reduced-motion:reduce){[data-f="prive"] .mc-holo{opacity:.16}}

/* 3 · legibility: the balance is the hero number — clean linear gold (no conic seam), sized to fit 257,493,
   watermark dimmed so it never sits behind the digits; HOUSE CREDIT lifted to match CLUB BALANCE gold */
[data-f="prive"] .mc-bal{background:linear-gradient(176deg,#FBEFC7 6%,#F4D03F 34%,#D4AF37 62%,#c49a2e 96%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-size:9cqw;letter-spacing:-.024em;filter:drop-shadow(0 1.5px 1px rgba(0,0,0,.45))}
[data-f="prive"] .mc-balrow{gap:1.8cqw}
[data-f="prive"] .mc-balrow .entg{font-size:7.6cqw}
[data-f="prive"] .mc-wm{opacity:.42}
@media(prefers-reduced-motion:no-preference){[data-f="prive"] .mc-wm{animation:none;opacity:.42}}
[data-f="prive"] .mc-clbl{color:rgba(201,166,63,.92)}