/* Hero 3D: CSS 3D transforms only (no WebGL). Pointer/scroll set --rx/--ry/--lift from hero3d.mjs. */
.hero3d{position:relative;min-height:520px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.hero3d .stage{position:relative;width:min(100%,470px);height:520px;perspective:1100px;perspective-origin:50% 40%}
.hero3d .scene{--rx:8deg;--ry:-18deg;--lift:0px;position:absolute;inset:0;transform-style:preserve-3d;transform:translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .6s cubic-bezier(.2,.8,.2,1);will-change:transform}
.hero3d.is-tracking .scene{transition:transform .12s linear}
.hero3d .layer{position:absolute;transform-style:preserve-3d}
.hero3d .orb{position:absolute;left:12%;top:14%;width:76%;height:66%;border-radius:50%;background:radial-gradient(circle at 40% 35%,#e5d7bb66,#12695a33 45%,transparent 70%);filter:blur(28px);transform:translateZ(-160px)}
.hero3d .layer-phone{left:50%;top:20px;transform:translateX(-50%) translateZ(0)}
.hero3d .layer-phone .phone{margin:0;box-shadow:0 40px 80px #05170f66,0 2px 0 #ffffff14 inset}
.hero3d .layer-pass{right:-22px;bottom:64px;transform:translateZ(110px) rotateY(-6deg)}
.hero3d .layer-nfc{left:-26px;bottom:26px;transform:translateZ(170px) rotateZ(-8deg)}

.wallet-pass{width:226px;padding:16px 16px 12px;border-radius:16px;background:linear-gradient(160deg,#173f30,#0b2a20);color:#f5f1e8;box-shadow:0 30px 60px #04120c80,0 0 0 1px #ffffff1f inset;font-family:system-ui,-apple-system,sans-serif;position:relative;overflow:hidden}
.wallet-pass:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,#ffffff1c 45%,transparent 60%);transform:translateX(var(--shine,-60%));transition:transform .6s ease;pointer-events:none}
.pass-head{display:flex;align-items:center;gap:8px;font-size:12px}
.pass-logo{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:#e5d7bb;color:#123a2b;font:700 13px Georgia,serif}
.pass-name{font-weight:600;flex:1}
.pass-hello{text-align:right;font-weight:600;line-height:1.1}.pass-hello small,.pass-field small{display:block;font-size:8px;letter-spacing:.12em;opacity:.7;font-weight:600}
.pass-field{margin:16px 0 10px}.pass-field strong{font:400 30px Georgia,serif;font-variant-numeric:tabular-nums}
.pass-stamps{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:14px}
.pass-stamps i{aspect-ratio:1;border-radius:50%;border:1.5px solid #e5d7bb80;transition:background .35s ease,transform .35s cubic-bezier(.3,1.6,.5,1),border-color .35s}
.pass-stamps i.on{background:#e5d7bb;border-color:#e5d7bb;transform:scale(1)}
.pass-stamps i.pop{transform:scale(1.25)}
.pass-code{width:84px;height:84px;margin:0 auto;border-radius:8px;background:#fff;padding:8px}
.pass-code span{display:block;width:100%;height:100%;background:conic-gradient(from 90deg at 30% 30%,#111 0 25%,transparent 0 50%,#111 0 75%,transparent 0) 0 0/14px 14px,linear-gradient(#111 0 0) 0 0/22px 22px no-repeat,linear-gradient(#111 0 0) 100% 0/22px 22px no-repeat,linear-gradient(#111 0 0) 0 100%/22px 22px no-repeat;opacity:.9}
.pass-alt{margin:8px 0 0;text-align:center;font-size:9px;opacity:.75}
.pass-reward{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.6);opacity:0;padding:10px 14px;border-radius:999px;background:#e5d7bb;color:#123a2b;font-weight:700;font-size:13px;white-space:nowrap;transition:opacity .3s,transform .4s cubic-bezier(.3,1.6,.5,1);box-shadow:0 10px 30px #0006}
.wallet-pass.rewarded .pass-reward{opacity:1;transform:translate(-50%,-50%) scale(1)}

.nfc-card{display:block;position:relative;width:168px;height:106px;border-radius:12px;background:linear-gradient(140deg,#f5f1e8,#e5d7bb);color:#123a2b;box-shadow:0 26px 50px #04120c70,0 0 0 1px #ffffff80 inset;padding:12px 14px}
.nfc-brand{font-weight:800;letter-spacing:.18em;font-size:11px}
.nfc-hint{position:absolute;left:14px;bottom:10px;font-size:9px;letter-spacing:.06em;opacity:.75}
.nfc-waves{position:absolute;right:16px;top:30px;width:40px;height:40px}
.nfc-waves i{position:absolute;inset:0;border:2px solid #123a2b;border-radius:50%;opacity:0;animation:nfc-wave 2.4s ease-out infinite}
.nfc-waves i:nth-child(2){animation-delay:.8s}.nfc-waves i:nth-child(3){animation-delay:1.6s}
@keyframes nfc-wave{0%{transform:scale(.3);opacity:.9}100%{transform:scale(1.4);opacity:0}}

/* Scroll reveal (class added only when JS runs, so content never hides without it). */
.reveal-ready .reveal{opacity:0;transform:translateY(28px) scale(.985);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal-ready .reveal.in{opacity:1;transform:none}
.tilt{transition:transform .25s ease;transform-style:preserve-3d}

@media(max-width:1000px){.hero3d .stage{height:480px}.hero3d .layer-pass{right:-6px}.hero3d .layer-nfc{left:-6px}}
@media(max-width:700px){
 .hero3d{min-height:0}
 .hero3d .stage{height:440px;width:100%;max-width:360px}
 .hero3d .layer-phone{transform:translateX(-50%) scale(.86);transform-origin:top center}
 .hero3d .layer-pass{right:-4px;bottom:40px;transform:translateZ(90px) rotateY(-6deg) scale(.86)}
 .hero3d .layer-nfc{left:-4px;bottom:6px;transform:translateZ(140px) rotateZ(-8deg) scale(.82)}
 .hero3d .scene{animation:sway 9s ease-in-out infinite}
}
@keyframes sway{0%,100%{transform:rotateX(6deg) rotateY(-14deg)}50%{transform:rotateX(9deg) rotateY(-4deg)}}
@supports not (transform-style:preserve-3d){.hero3d .scene{transform:none}.hero3d .layer{transform:none!important}}
@media(prefers-reduced-motion:reduce){
 .hero3d .scene,.hero3d.is-tracking .scene{transition:none;animation:none}
 .nfc-waves i{animation:none;opacity:.35;transform:scale(1)}
 .pass-stamps i,.wallet-pass:before,.pass-reward{transition:none}
 .reveal-ready .reveal{opacity:1;transform:none;transition:none}
 .tilt{transition:none}
}