/* waiv-hero-b.css — interactive Direction-B hero: finishes, NFC x-ray, kinetic stage */

/* ── real product finishes (CSS interpretations, named per getwaiv.com) ── */
.wv-card--midnightgold{
  --acc:#EAC982;--ink:rgba(234,201,130,.6);
  background:
    radial-gradient(135% 110% at 18% -5%, rgba(255,231,170,.26), transparent 52%),
    linear-gradient(125deg,#050a16 0%,#11203f 24%,#26406a 45%,#0b1426 60%,#02060f 100%);
  box-shadow:inset 0 1.5px 0 rgba(255,228,160,.4),inset 0 -2px 5px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(180,150,90,.32),0 2px 4px rgba(0,0,0,.5),0 40px 70px -26px rgba(0,2,12,.92);
}
.wv-card--midnightgold .wv-card-gloss{background:radial-gradient(120% 80% at 16% 6%, rgba(255,231,170,.3), transparent 52%);}

.wv-card--sapphire{
  --acc:#D4E2FF;--ink:rgba(212,226,255,.62);
  background:
    radial-gradient(135% 110% at 18% -5%, rgba(180,205,255,.42), transparent 52%),
    linear-gradient(125deg,#06143f 0%,#143fa0 26%,#2f6ff0 46%,#102f7c 60%,#040d2b 100%);
  box-shadow:inset 0 1.5px 0 rgba(200,220,255,.6),inset 0 -2px 5px rgba(0,0,0,.5),
    inset 0 0 0 1px rgba(120,160,255,.36),0 2px 4px rgba(0,0,0,.45),0 40px 70px -26px rgba(2,10,40,.9);
}

.wv-card--seafrost{
  --acc:#0E6E8C;--ink:rgba(14,60,90,.55);
  background:
    radial-gradient(135% 110% at 18% -5%, rgba(255,255,255,.9), transparent 55%),
    linear-gradient(125deg,#a7cdd6 0%,#e6f4f7 28%,#ffffff 46%,#c2dee4 62%,#9bc0cb 100%);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.95),inset 0 -2px 5px rgba(110,150,160,.5),
    inset 0 0 0 1px rgba(255,255,255,.6),0 2px 4px rgba(0,0,0,.2),0 40px 70px -26px rgba(20,60,80,.5);
}
.wv-card--seafrost .wv-card-gloss{background:radial-gradient(120% 80% at 16% 6%, rgba(255,255,255,.6), transparent 52%);}
.wv-card--seafrost .wv-card-logo{filter:drop-shadow(0 1px 1px rgba(110,150,160,.5));}
.wv-card--seafrost .wv-card-edge{box-shadow:inset 0 0 24px rgba(110,150,160,.25);}

.wv-card--heritage{
  --acc:#F2E4C4;--ink:rgba(245,232,200,.6);
  background:
    radial-gradient(135% 110% at 18% -5%, rgba(255,240,200,.4), transparent 52%),
    linear-gradient(125deg,#3a3320 0%,#6e5d34 26%,#a08a4c 46%,#5c4f2e 60%,#2a2414 100%);
  box-shadow:inset 0 1.5px 0 rgba(255,236,190,.45),inset 0 -2px 5px rgba(0,0,0,.5),
    inset 0 0 0 1px rgba(150,120,60,.4),0 2px 4px rgba(0,0,0,.45),0 40px 70px -26px rgba(20,15,5,.85);
}
.wv-card--heritage .wv-card-gloss{background:radial-gradient(120% 80% at 16% 6%, rgba(255,240,200,.34), transparent 52%);}

.wv-card--mono{
  --acc:#EDEDED;--ink:rgba(255,255,255,.55);
  background:
    radial-gradient(135% 110% at 18% -5%, rgba(255,255,255,.34), transparent 52%),
    linear-gradient(125deg,#0c0c0e 0%,#37383c 26%,#5d5f64 46%,#2a2b2e 60%,#070708 100%);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5),inset 0 -2px 5px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(150,150,155,.3),0 2px 4px rgba(0,0,0,.5),0 40px 70px -26px rgba(0,0,0,.9);
}

/* ── 3D stage / tilt / float ── */
.hb-stage{position:relative;display:flex;align-items:center;justify-content:center;}
.wv-card3d-float{perspective:1700px;will-change:transform;}
@keyframes hb-bob{0%{transform:translateY(-10px)}100%{transform:translateY(12px)}}
.wv-card3d-float{animation:hb-bob 6.5s ease-in-out infinite alternate;}
.wv-card3d-tilt{transform-style:preserve-3d;transform:rotateX(7deg) rotateY(-23deg) rotateZ(2deg);will-change:transform;}
.wv-ground-shadow{position:absolute;left:50%;bottom:-4%;transform:translateX(-50%);height:42px;border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,4,18,.6), transparent 74%);filter:blur(20px);z-index:-1;}

/* ── NFC x-ray internals ── */
.wv-nfc-x{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .55s ease;z-index:4;overflow:hidden;border-radius:inherit;}
.wv-card.is-revealed .wv-nfc-x{opacity:1;}
.wv-card.is-revealed .wv-card-brushed,
.wv-card.is-revealed .wv-card-sheen{opacity:.12;}
.wv-card.is-revealed .wv-card-logo,
.wv-card.is-revealed .wv-card-meta{opacity:.14;}
.wv-card.is-revealed .wv-card-nfc{opacity:.16;}
.wv-nfc-x-dim{position:absolute;inset:0;background:radial-gradient(125% 125% at 58% 48%, rgba(0,6,18,.5), rgba(0,5,14,.82));}
.wv-coil{position:absolute;inset:11% 9%;}
.wv-coil span{position:absolute;border:1.4px solid var(--acc);border-radius:6%;box-shadow:0 0 7px color-mix(in srgb, var(--acc) 60%, transparent);}
.wv-coil span:nth-child(1){inset:0;opacity:.95;}
.wv-coil span:nth-child(2){inset:5.5%;opacity:.85;}
.wv-coil span:nth-child(3){inset:11%;opacity:.75;}
.wv-coil span:nth-child(4){inset:16.5%;opacity:.65;}
.wv-coil span:nth-child(5){inset:22%;opacity:.55;}
.wv-coil span:nth-child(6){inset:27.5%;opacity:.45;}
.wv-chip{position:absolute;right:30%;top:40%;width:13%;aspect-ratio:1.25;border-radius:16%;
  background:linear-gradient(140deg,#20242b,#454b56 55%,#181b21);
  box-shadow:0 0 16px rgba(63,123,255,.5),inset 0 0 0 1px rgba(190,210,255,.45),inset 0 2px 3px rgba(255,255,255,.18);}
.wv-chip::before{content:"";position:absolute;inset:24%;border-radius:14%;background:
  repeating-linear-gradient(0deg, rgba(234,201,130,.85) 0 2px, transparent 2px 5px),
  repeating-linear-gradient(90deg, rgba(234,201,130,.55) 0 2px, transparent 2px 5px);opacity:.7;}
.wv-chip i{position:absolute;background:var(--acc);border-radius:1px;box-shadow:0 0 4px var(--acc);}
.wv-chip i:nth-child(1){top:-7px;left:30%;width:2px;height:8px;}
.wv-chip i:nth-child(2){top:-7px;left:62%;width:2px;height:8px;}
.wv-chip i:nth-child(3){bottom:-7px;left:30%;width:2px;height:8px;}
.wv-chip i:nth-child(4){bottom:-7px;left:62%;width:2px;height:8px;}
.wv-trace{position:absolute;right:43%;top:46%;width:14%;height:2px;background:var(--acc);box-shadow:0 0 6px var(--acc);opacity:.7;}
.wv-scanline{position:absolute;left:0;right:0;height:16%;top:-16%;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--acc) 22%,transparent),transparent);}
.wv-card.is-revealed .wv-scanline{animation:wv-scan 2.8s ease-in-out infinite;}
@keyframes wv-scan{0%{top:-16%}100%{top:100%}}

/* annotations */
.hb-anno{position:absolute;display:flex;align-items:flex-start;gap:8px;font-family:'Space Mono',monospace;
  font-size:11px;line-height:1.45;letter-spacing:.06em;color:rgba(230,235,255,.8);opacity:0;
  transform:translateY(6px);transition:opacity .5s ease,transform .5s ease;pointer-events:none;white-space:nowrap;z-index:6;}
.hb-stage.is-revealed .hb-anno{opacity:.9;transform:none;}
.hb-anno b{color:var(--yellow);font-weight:700;letter-spacing:.1em;}
.hb-anno-dot{width:7px;height:7px;border-radius:50%;background:var(--yellow);margin-top:3px;flex:none;box-shadow:0 0 10px rgba(255,213,39,.9);}
.hb-anno-chip{top:24%;right:-6%;}
.hb-anno-coil{bottom:22%;left:-10%;}

/* ── interactive hero shell ── */
.hb-hero{position:relative;width:100%;height:100vh;min-height:740px;overflow:hidden;isolation:isolate;
  color:var(--frost);font-family:'Schibsted Grotesk',system-ui,sans-serif;
  background:
    radial-gradient(120% 90% at 82% 14%, #073066 0%, transparent 52%),
    linear-gradient(158deg,#00112b 0%,#001026 52%,#000814 100%);}
.hb-field{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.hb-glow{position:absolute;border-radius:50%;filter:blur(100px);transition:background .6s ease;}
.hb-glow-1{width:680px;height:680px;right:2%;top:2%;background:radial-gradient(closest-side, rgba(255,213,39,.42), transparent 70%);}
.hb-glow-2{width:620px;height:620px;left:-12%;top:34%;background:radial-gradient(closest-side, rgba(63,123,255,.4), transparent 70%);}
.hb-grain{position:absolute;inset:0;background-image:var(--noise);background-size:170px;opacity:.13;mix-blend-mode:overlay;}

.hb-nav{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:28px clamp(28px,4vw,64px);}
.hb-nav-logo{height:30px;}
.hb-nav-links{display:flex;gap:clamp(18px,2.4vw,36px);}
.hb-nav-links a{font-size:15px;color:rgba(230,235,255,.7);cursor:pointer;transition:color .2s;letter-spacing:-.01em;}
.hb-nav-links a:hover{color:#fff;}

.hb-wrap{position:relative;z-index:2;height:calc(100% - 90px);}
.hb-copy{position:absolute;left:clamp(28px,4vw,64px);top:50%;transform:translateY(-52%);max-width:min(46vw,580px);z-index:3;}
.hb-stage-wrap{position:absolute;right:clamp(-40px,-2vw,0px);top:50%;transform:translateY(-50%);z-index:2;}

.hb-eyebrow{display:flex;align-items:center;gap:12px;font-family:'Space Mono',monospace;font-size:13px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--yellow);margin-bottom:26px;}
.hb-eyebrow-mark{width:8px;height:8px;background:var(--yellow);transform:rotate(45deg);box-shadow:0 0 14px rgba(255,213,39,.8);}
.hb-display{font-size:clamp(48px,6.6vw,104px);line-height:.9;font-weight:800;letter-spacing:-.038em;color:#fff;margin:0;text-wrap:balance;}
.hb-display em{font-style:normal;color:var(--yellow);}
.hb-lede{font-size:clamp(17px,1.35vw,21px);line-height:1.55;color:rgba(230,235,255,.72);max-width:32em;margin:26px 0 34px;text-wrap:pretty;}
.hb-cta-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;}

/* finish switcher + reveal control */
.hb-controls{display:flex;align-items:center;gap:22px;margin-top:42px;flex-wrap:wrap;}
.hb-finishes{display:flex;gap:10px;align-items:center;}
.hb-finish-btn{width:48px;height:31px;border-radius:8px;cursor:pointer;border:none;padding:0;position:relative;
  box-shadow:inset 0 0 0 1px rgba(230,235,255,.2);transition:transform .22s,box-shadow .22s;}
.hb-finish-btn:hover{transform:translateY(-2px);}
.hb-finish-btn.is-active{box-shadow:0 0 0 2px var(--yellow),0 8px 20px -6px rgba(255,213,39,.6);transform:translateY(-2px);}
.hb-finish-meta{display:flex;flex-direction:column;gap:2px;min-width:150px;}
.hb-finish-label{font-size:11px;font-family:'Space Mono',monospace;letter-spacing:.18em;text-transform:uppercase;color:rgba(230,235,255,.45);}
.hb-finish-name{font-size:18px;font-weight:600;color:#fff;letter-spacing:-.01em;}
.hb-reveal{display:inline-flex;align-items:center;gap:10px;cursor:pointer;border:none;border-radius:999px;
  font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  padding:11px 18px;background:rgba(230,235,255,.05);color:var(--frost);box-shadow:inset 0 0 0 1px rgba(230,235,255,.25);
  transition:background .22s,box-shadow .22s,transform .22s;}
.hb-reveal:hover{background:rgba(230,235,255,.1);transform:translateY(-2px);}
.hb-reveal.is-on{background:rgba(255,213,39,.14);color:var(--yellow);box-shadow:inset 0 0 0 1px rgba(255,213,39,.45);}
.hb-reveal-dot{width:9px;height:9px;border-radius:50%;background:currentColor;box-shadow:0 0 9px currentColor;}

/* scroll cue */
.hb-scrollcue{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;
  align-items:center;gap:8px;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.3em;color:rgba(230,235,255,.4);text-transform:uppercase;}
.hb-scrollcue-line{width:1px;height:34px;background:linear-gradient(rgba(230,235,255,.5),transparent);animation:hb-cue 2s ease-in-out infinite;transform-origin:top;}
@keyframes hb-cue{0%,100%{transform:scaleY(.4);opacity:.4}50%{transform:scaleY(1);opacity:1}}

@media (prefers-reduced-motion: reduce){
  .wv-card3d-float,.wv-scanline,.hb-scrollcue-line,.wv-card-sheen{animation:none !important;}
}
@media (max-width:1080px){
  .hb-copy{position:relative;top:auto;transform:none;max-width:90%;padding-top:4vh;}
  .hb-stage-wrap{display:none;}
}