/* Spyce — "why Spyce": short, visual, one idea per tile */

/* ---------- intro: light, compact, straight into the grid ---------- */
.ab-intro{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:center;gap:clamp(28px,4vw,64px);padding:clamp(36px,5vw,72px) 0 clamp(28px,3vw,44px);position:relative;isolation:isolate}
.ab-copy{display:flex;flex-direction:column;align-items:flex-start;gap:20px;text-align:right}
.ab-intro::before{content:"";position:absolute;inset:-10% 40% 0 -10%;z-index:-1;background:radial-gradient(45% 55% at 50% 45%,rgba(255,166,142,.28),transparent 70%)}
/* the badge: our words orbiting the music */
.ab-badge{position:relative;aspect-ratio:1;border-radius:var(--r-xl);overflow:hidden;isolation:isolate;display:grid;place-items:center;
  background:radial-gradient(70% 70% at 30% 20%,#FFA68E,transparent 60%),radial-gradient(80% 80% at 80% 90%,#C9412A,transparent 65%),#FD6145;box-shadow:0 40px 80px -36px rgba(201,65,42,.6)}
.ab-badge::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.22;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.ab-badge svg{width:92%;height:auto;overflow:visible}
/* the network: a sound → the creators → their people */
.ab-net .links line{stroke:#fff;stroke-width:1.4;stroke-linecap:round;opacity:.22;transition:opacity .5s,stroke-width .5s}
.ab-net .links line.fan{stroke-width:1;opacity:0}
.ab-net .links line.hot{opacity:.9;stroke-width:2.2}
.ab-net .links line.fan.hot{opacity:.7}
.ab-net .aud circle{fill:#fff;opacity:.34;transform-box:fill-box;transform-origin:center;transition:opacity .45s,transform .45s cubic-bezier(.3,1.6,.5,1),fill .45s}
.ab-net .aud circle.dk{fill:#2A1511;opacity:.28}
.ab-net .aud circle.lit{opacity:1;fill:#fff;transform:scale(1.9)}
.ab-net .cr{transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
.ab-net .cr .bg{fill:#FFF5F1;stroke:#fff;stroke-width:3;filter:drop-shadow(0 8px 14px rgba(42,21,17,.28));transition:fill .4s}
.ab-net .cr .me{fill:#FFA68E;transition:fill .4s}
.ab-net .cr.on .bg{fill:#2A1511;stroke:#FFCDBD}
.ab-net .cr.on .me{fill:#FD6145}
.ab-net .spark{fill:#fff;opacity:0;filter:drop-shadow(0 0 6px #fff)}
.ab-badge .core{fill:#fff;filter:drop-shadow(0 16px 30px rgba(42,21,17,.3))}
.ab-badge .eq rect{fill:var(--c-500);transform-box:fill-box;transform-origin:center;animation:abEq 1.3s ease-in-out infinite;animation-delay:calc(var(--k) * -.17s)}
.ab-badge .eq rect:nth-child(2n){fill:var(--c-300)}
@keyframes abEq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
.ab-title{font-size:clamp(38px,4.5vw,66px);line-height:1.02;letter-spacing:-.04em;color:var(--ink)}
.ab-2{display:block;color:var(--c-text)}
.ab-title .w{display:inline-block;opacity:0;filter:blur(14px);transform:translateY(24px);animation:abWord .9s cubic-bezier(.16,1,.3,1) forwards}
.ab-title .w:nth-child(1){animation-delay:.1s}.ab-title .w:nth-child(2){animation-delay:.22s}.ab-title .w:nth-child(3){animation-delay:.34s}
.ab-2 .w:nth-child(1){animation-delay:.6s}.ab-2 .w:nth-child(2){animation-delay:.72s}
.ab-sub{margin:0;max-width:48ch;font-size:clamp(17px,1.5vw,20px);line-height:1.65;color:var(--mute);text-wrap:balance;opacity:0;animation:abFade 1s ease 1s forwards}
@keyframes abWord{to{opacity:1;filter:blur(0);transform:none}}
@keyframes abFade{to{opacity:1}}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ab-why{padding-top:0}

/* ---------- five things, as a bento ---------- */
.bnt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"tech tech meas" "crea people art";gap:18px}
.bt{border-radius:var(--r-xl);overflow:hidden;display:flex;flex-direction:column;background:var(--card);box-shadow:var(--shadow-soft);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.bt:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.bt-tech{grid-area:tech}.bt-meas{grid-area:meas}.bt-crea{grid-area:crea}.bt-people{grid-area:people}.bt-art{grid-area:art}
.bt-vis{height:200px;position:relative;display:grid;place-items:center;overflow:hidden}
.bt-tx{padding:6px 26px 26px;display:flex;flex-direction:column;gap:8px}
.bt-tx h3{font-size:clamp(21px,1.9vw,25px);line-height:1.2;letter-spacing:-.015em}
.bt-tx p{margin:0;color:var(--mute);font-size:16.5px;line-height:1.6;max-width:44ch}

/* tech: an audience map being read */
.bt-tech{background:#16100E;color:#fff}
.bt-tech .bt-tx p{color:rgba(255,255,255,.66)}
.meter{display:flex;gap:10px;align-items:flex-end;justify-content:center;width:88%;height:120px}
.meter span{display:flex;flex-direction:column-reverse;gap:8px}
.meter i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.12);transition:background-color .22s,transform .22s,box-shadow .22s}
.meter i.on{background:#FD6145;transform:scale(1.15)}
.meter i.pk{background:#FFCDBD;box-shadow:0 0 12px rgba(253,97,69,.8)}
.scan{position:absolute;top:0;bottom:0;width:90px;background:linear-gradient(90deg,transparent,rgba(253,97,69,.22),transparent);animation:scan 4.2s cubic-bezier(.45,0,.55,1) infinite}
@keyframes scan{0%{right:-100px}100%{right:110%}}

/* measurement: the line draws */
.bt-meas{background:var(--c-500);color:var(--c-900)}
.bt-meas .bt-tx p{color:var(--c-900)}
.bt-meas svg{width:78%;height:auto;overflow:visible}
.bt-meas .line{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-dasharray:1;animation:abDraw 5s ease-in-out infinite}
.bt-meas .dot{fill:#fff;opacity:0;animation:abDot 5s ease-in-out infinite}
@keyframes abDraw{0%{stroke-dashoffset:1}55%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
@keyframes abDot{0%,50%{opacity:0}60%,85%{opacity:1}100%{opacity:0}}

/* creative: a brief writes itself (fragment styles live in main.css) */
.bt-crea .bt-vis{background:radial-gradient(70% 90% at 85% 10%,#FFE7DF,transparent 70%),radial-gradient(60% 80% at 10% 100%,#FFCDBD,transparent 70%),#FFF5F1;margin:8px 8px 0;border-radius:calc(var(--r-xl) - 8px)}

/* people: faces we know, one at a time */
.bt-people .bt-vis{background:radial-gradient(70% 90% at 15% 10%,#FFE7DF,transparent 70%),#FFF5F1;margin:8px 8px 0;border-radius:calc(var(--r-xl) - 8px)}
.faces{display:flex}
.faces i{width:62px;height:62px;border-radius:50%;margin-inline-start:-14px;border:4px solid #FFF5F1;background:linear-gradient(135deg,#FFA68E,#FD6145);animation:face 6s ease-in-out infinite;animation-delay:calc(var(--k) * .6s)}
.faces i:nth-child(2n){background:linear-gradient(135deg,#FFCDBD,#C9412A)}
.faces i:nth-child(3n){background:linear-gradient(135deg,#FFE7DF,#FFA68E)}
.faces i:first-child{margin-inline-start:0}
@keyframes face{0%,20%,100%{transform:none;box-shadow:none}8%{transform:translateY(-10px);box-shadow:0 0 0 4px #FD6145}}

/* artists: the music itself */
.bt-art{background:var(--c-50)}
.wave{display:flex;align-items:center;gap:5px;height:110px}
.wave i{width:6px;border-radius:3px;background:var(--c-500);height:100%;transform:scaleY(.2);animation:wv 1.6s ease-in-out infinite;animation-delay:calc(var(--k) * -.11s)}
.wave i:nth-child(3n){background:var(--c-300)}
@keyframes wv{0%,100%{transform:scaleY(.18)}50%{transform:scaleY(1)}}

/* ---------- close: one slim dark strip ---------- */
.ab-end{padding-bottom:clamp(56px,7vw,96px)}
.ab-strip{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:clamp(28px,3.4vw,44px) clamp(26px,3.6vw,48px);border-radius:var(--r-xl);
  background:radial-gradient(60% 140% at 100% 0%,rgba(253,97,69,.28),transparent 60%),#16100E;color:#fff;box-shadow:0 30px 60px -32px rgba(42,21,17,.55)}
.ab-strip-tx{display:flex;flex-direction:column;gap:8px}
.ab-strip h2{font-size:clamp(26px,2.8vw,38px);line-height:1.15;letter-spacing:-.025em;color:#fff;margin:0}
.ab-strip h2 span{color:var(--c-500)}
.ab-strip p{margin:0;color:rgba(255,255,255,.66);font-size:17px}
.ab-strip .cta-row{display:flex;gap:12px;flex:none}
.ab-strip .btn svg{width:20px;height:20px;fill:currentColor}
.ab-strip .btn-outline-light{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
.ab-strip .btn-outline-light:hover{background:rgba(255,255,255,.08)}

@media (max-width:980px){
  .ab-strip{flex-direction:column;align-items:flex-start}
}
@media (max-width:900px){
  .bnt{grid-template-columns:1fr 1fr;grid-template-areas:"tech tech" "meas crea" "people art"}
}
@media (max-width:640px){
  .ab-intro{grid-template-columns:1fr;padding:24px 0 22px;gap:22px}
  .ab-copy{gap:14px}
  .ab-badge{aspect-ratio:auto;height:340px;border-radius:28px}
  .ab-badge svg{width:auto;height:90%}
  .ab-title{font-size:clamp(38px,11vw,48px);line-height:1.06}
  .ab-sub{font-size:16.5px}
  .bnt{grid-template-columns:1fr;grid-template-areas:"tech" "meas" "crea" "people" "art";gap:12px}
  .bt-vis{height:160px}
  .bt-tx{padding:4px 20px 22px}
  .bt-tx h3{font-size:19px}.bt-tx p{font-size:16px}
  .meter{gap:7px;height:96px}.meter i{width:7px;height:7px}.meter span{gap:6px}
  .faces i{width:48px;height:48px}
  .ab-strip{flex-direction:column;align-items:stretch;text-align:center;gap:22px;padding:30px 20px;border-radius:28px}
  .ab-strip h2{font-size:clamp(24px,7vw,28px)}.ab-strip h2 span{display:block}
  .ab-strip p{font-size:16px}
  .ab-strip .cta-row{flex-direction:column}
  .ab-strip .btn{width:100%;height:52px}
}
@media (prefers-reduced-motion:reduce){
  .ab-title .w,.ab-sub{animation:none;opacity:1;filter:none;transform:none}
  .ab-badge *{animation:none!important}
  .bnt *{animation:none!important}
}
/* intro enters as one piece: title, text and the square together */
.ab-title .w{animation-duration:.8s}
.ab-2 .w:nth-child(1){animation-delay:.42s}.ab-2 .w:nth-child(2){animation-delay:.5s}
.ab-sub{animation:abRise .9s cubic-bezier(.16,1,.3,1) .55s both!important}
.ab-badge{animation:abRise 1s cubic-bezier(.16,1,.3,1) .15s both}
@keyframes abRise{from{opacity:0;transform:translateY(22px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ab-badge,.ab-sub{animation:none!important;opacity:1;transform:none}}
html.a11y-still .ab-badge,html.a11y-still .ab-sub{animation:none!important;opacity:1;transform:none}
.stories:focus-visible{outline:3px solid var(--c-500);outline-offset:4px;border-radius:26px}
/* measurement card: white type on coral */
.bt-meas{color:#fff}.bt-meas .bt-tx p{color:#fff}