/* MNDL X layer: advanced 3D, motion and responsive polish. Loads after mndl-ui.css. No dependencies. */

/* ---------- hero: readable headline over the 3D scene ---------- */
.hero .wrap{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.hero h1{font-size:clamp(2.1rem,3.5vw + .25rem,3.6rem);perspective:900px}
.hero .stack{position:relative}
.hero .stack:before{content:"";position:absolute;inset:-2rem -2.5rem -2rem -3rem;z-index:-1;border-radius:40px;
  background:radial-gradient(ellipse at 40% 50%,color-mix(in srgb,var(--bg) 88%,transparent) 30%,transparent 72%);pointer-events:none}
.hero h1 span{overflow:visible}
.hero h1 .w{font-style:normal;display:inline-block;transform-origin:50% 100%;opacity:0;transform:translate3d(0,.5em,-60px) rotateX(-70deg);
  animation:wflip .95s var(--ease) forwards;animation-delay:calc(var(--k,0)*70ms + 120ms)}
.hero h1 span:nth-child(3) .w{background:linear-gradient(100deg,var(--tl),var(--td) 60%,var(--tl2));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
@keyframes wflip{to{opacity:1;transform:none}}
.hero .wrap{transform:translate3d(0,calc(var(--hp,0)*36px),0);opacity:calc(1 - var(--hp,0)*.55);will-change:transform,opacity}
@media(max-width:1000px){.hero .wrap{grid-template-columns:1fr}.hero .stack:before{display:none}}

/* floating depth chips on the hero map */
.map .nd{transition:transform .4s var(--ease),box-shadow .4s,background .25s,color .25s}
.map .nd:hover,.map .nd[aria-pressed=true]{transform:translate(-50%,-50%) translateZ(40px) scale(1.08)}
.hero .map{transform-style:preserve-3d}

/* ---------- cursor halo (fine pointers only) ---------- */
.cur-x{position:fixed;left:0;top:0;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;pointer-events:none;z-index:140;
  border:1.5px solid color-mix(in srgb,var(--tl) 70%,transparent);background:color-mix(in srgb,var(--tl) 6%,transparent);
  opacity:0;transition:opacity .3s,width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),background .3s;will-change:transform}
.cur-x.on{opacity:1}
.cur-x.hot{width:64px;height:64px;margin:-32px 0 0 -32px;background:color-mix(in srgb,var(--tl) 12%,transparent)}
.cur-x.dn{width:26px;height:26px;margin:-13px 0 0 -13px}
@media(hover:none),(pointer:coarse){.cur-x{display:none}}

/* ---------- 3D orbit showcase ---------- */
.orbit-sec{overflow:hidden;position:relative}
.orbit-sec:before{content:"";position:absolute;inset:auto -10% -30% -10%;height:70%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 100%,rgba(220,20,60,.35),transparent 65%)}
.orbit{position:relative;margin-top:clamp(1rem,3vw,2rem);--cw:min(19rem,72vw);--ch:clamp(15.5rem,34vw,18.5rem)}
.orbit-stage{position:relative;height:calc(var(--ch) + 4rem);perspective:1500px;perspective-origin:50% 38%;
  touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;outline:0}
.orbit-stage:active{cursor:grabbing}
.orbit-stage:focus-visible{outline:2px solid var(--am);outline-offset:6px;border-radius:24px}
.orbit-ring{position:absolute;left:50%;top:1.2rem;width:var(--cw);height:var(--ch);margin-left:calc(var(--cw)/-2);transform-style:preserve-3d;
  transform:translateZ(calc(var(--R,420px)*-1)) rotateY(var(--ry,0deg));will-change:transform}
.oc{position:absolute;inset:0;transform:rotateY(calc(var(--i)*var(--step,60deg))) translateZ(var(--R,420px));
  backface-visibility:hidden;-webkit-backface-visibility:hidden;opacity:var(--o,1);transition:opacity .2s}
.oc-in{height:100%;display:flex;flex-direction:column;gap:.7rem;padding:1.4rem 1.4rem 1.2rem;border-radius:22px;color:#fff;
  background:linear-gradient(155deg,rgba(255,255,255,.14),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 30px 60px -30px #000,inset 0 1px 0 rgba(255,255,255,.2)}
.oc-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--tl),var(--td));box-shadow:0 10px 24px -10px var(--tl)}
.oc-ic svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.oc h3{color:#fff;font-size:1.2rem}
.oc p{color:#d9c6cb;font-size:.95rem;line-height:1.5;margin:0}
.oc a{margin-top:auto;color:var(--am);font:600 .95rem var(--f2);text-decoration:none;display:inline-flex;align-items:center;gap:.35rem;min-height:44px;align-self:flex-start}
.oc a:hover{text-decoration:underline}
.oc.front .oc-in{border-color:rgba(255,255,255,.4);box-shadow:0 40px 70px -28px var(--tl),inset 0 1px 0 rgba(255,255,255,.3)}
.orbit-floor{position:absolute;left:50%;bottom:.6rem;width:min(34rem,90%);height:2.6rem;transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse,rgba(220,20,60,.5),transparent 70%);filter:blur(6px)}
.orbit-ctl{display:flex;align-items:center;justify-content:center;gap:.9rem;margin-top:1rem}
.orbit-ctl button{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;display:grid;place-items:center;transition:.25s var(--ease)}
.orbit-ctl button:hover{background:var(--tl);border-color:var(--tl);transform:scale(1.08)}
.orbit-ctl svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.orbit-dots{display:flex;gap:.2rem}
.orbit-dots button{width:30px;height:30px;border:0;background:none;border-radius:50%;display:grid;place-items:center;padding:0}
.orbit-dots button:before{content:"";width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.3);transition:.3s var(--ease)}
.orbit-dots button[aria-current=true]:before{width:24px;border-radius:6px;background:var(--am)}
.orbit-dots button:hover{transform:none;background:none}
.orbit-hint{text-align:center;margin-inline:auto;color:#c9b3b9;font-size:.82rem;margin-top:.6rem}
/* no-JS / reduced-motion fallback: plain grid */
.orbit:not(.live) .orbit-stage{height:auto;perspective:none;cursor:auto}
.orbit:not(.live) .orbit-ring{position:static;width:auto;height:auto;margin:0;transform:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem}
.orbit:not(.live) .oc{position:relative;transform:none;min-height:14rem}
.orbit:not(.live) .orbit-ctl,.orbit:not(.live) .orbit-floor,.orbit:not(.live) .orbit-hint{display:none}
@media(max-width:700px){.orbit{--cw:min(17rem,78vw)}.orbit-stage{perspective:1000px}.oc-in{padding:1.1rem}}

/* ---------- card glare + depth ---------- */
.card,.pnl,.pick{--gx:50%;--gy:0%}
.card.tilt3d:hover,.pnl.tilt3d:hover{box-shadow:0 34px 60px -34px rgba(168,16,45,.45)}
.glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;z-index:2;
  background:radial-gradient(260px circle at var(--gx) var(--gy),rgba(255,255,255,.55),transparent 62%);mix-blend-mode:soft-light}
.tilt3d.live .glare{opacity:1}

/* ---------- scroll-driven 3D section entrances (progressive enhancement) ---------- */
@supports(animation-timeline:view()){
  .band .stack,.band .sh{animation:xrise linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  @keyframes xrise{from{opacity:.0;transform:perspective(900px) translate3d(0,40px,-80px) rotateX(10deg)}to{opacity:1;transform:none}}
}

/* ---------- ambient grain + aurora on dark bands ---------- */
.band.on-d:after{content:"";position:absolute;inset:-20%;pointer-events:none;opacity:.5;
  background:radial-gradient(40% 40% at 20% 30%,rgba(233,180,76,.12),transparent 70%),radial-gradient(45% 45% at 80% 70%,rgba(220,20,60,.22),transparent 70%);
  animation:aurora 18s ease-in-out infinite alternate}
@keyframes aurora{to{transform:translate3d(4%,-3%,0) scale(1.08)}}
.band.on-d>*{z-index:1}

/* ---------- responsive polish ---------- */
.btn,.chip,.tabs button,.mt{min-height:44px}
.g3,.g2,.plans{min-width:0}
.card,.pnl{min-width:0;overflow-wrap:anywhere}
table{max-width:100%}
.tw,.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:560px){
  .sec{padding:clamp(2.4rem,9vw,3.4rem) 0}
  .hero .row{flex-direction:column;align-items:stretch}
  .hero .row .btn{width:100%}
  .fab{right:max(.7rem,env(safe-area-inset-right))}
  .map{max-width:100%}
}
@media(min-width:1000px) and (max-width:1300px){.hero h1{font-size:clamp(2.1rem,3.6vw,3.2rem)}}
@media(min-width:1800px){.wrap{width:min(92rem,100%)}}
@media(max-height:480px) and (orientation:landscape){.hero .wrap{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .hero h1 .w{animation:none;opacity:1;transform:none}
  .hero .wrap{transform:none;opacity:1}
  .band.on-d:after{animation:none}
  .cur-x{display:none}
}