/* ===========================================================================
   ONE RAID STUDIO — index.css  (home page only)
   =========================================================================== */

/* ---------------------------------------------------------------- HERO */
.hero{position:relative;overflow:clip;padding-block:clamp(40px,6vw,80px) clamp(40px,5vw,72px)}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(58% 55% at 74% 32%,rgba(199,41,65,.22),transparent 70%),
    radial-gradient(46% 42% at 12% 84%,rgba(255,45,149,.10),transparent 72%);
}
.hero__inner{
  position:relative;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(240px,380px);
  align-items:center;gap:clamp(28px,4vw,56px);
}
.hero__copy{display:flex;flex-direction:column;gap:var(--sp-5);min-width:0}
.hero__copy>*{animation:enter .8s var(--ease) both}
.hero__copy>*:nth-child(1){animation-delay:.05s}
.hero__copy>*:nth-child(2){animation-delay:.14s}
.hero__copy>*:nth-child(3){animation-delay:.22s}
.hero__copy>*:nth-child(4){animation-delay:.3s}

.wordmark{font-family:var(--arcade);font-weight:400;font-size:var(--fs-display);line-height:1.5;letter-spacing:0}
.wordmark>span{display:block}
.wordmark .fill{
  color:transparent;-webkit-text-fill-color:transparent;
  -webkit-text-stroke:2px var(--neon-red);text-shadow:0 0 30px var(--glow-red);
}
.wordmark .slash{color:var(--neon-cyan);-webkit-text-fill-color:var(--neon-cyan);text-shadow:0 0 24px rgba(0,229,255,.75)}

/* glitch — ambient pass only in `max`, hover everywhere */
@keyframes clipA{0%{clip-path:inset(10% 0 64% 0)}20%{clip-path:inset(72% 0 8% 0)}40%{clip-path:inset(34% 0 44% 0)}60%{clip-path:inset(4% 0 82% 0)}80%{clip-path:inset(58% 0 26% 0)}100%{clip-path:inset(24% 0 56% 0)}}
@keyframes clipB{0%{clip-path:inset(66% 0 12% 0)}20%{clip-path:inset(18% 0 68% 0)}40%{clip-path:inset(48% 0 30% 0)}60%{clip-path:inset(80% 0 6% 0)}80%{clip-path:inset(10% 0 74% 0)}100%{clip-path:inset(54% 0 32% 0)}}
@keyframes autoGlitch{0%,90%,100%{opacity:0}91%{opacity:.85}93%{opacity:0}95%{opacity:.7}97%{opacity:0}}
.glitch{position:relative;display:inline-block}
.glitch::before,.glitch::after{
  content:attr(data-text);position:absolute;left:0;top:0;width:100%;
  pointer-events:none;opacity:0;-webkit-text-fill-color:currentColor;text-shadow:none;
}
.glitch:hover::before{color:var(--neon-red);opacity:.9;transform:translate(-4px,-2px);animation:clipA .45s steps(2,end) infinite}
.glitch:hover::after{color:var(--neon-cyan);opacity:.9;transform:translate(4px,2px);animation:clipB .45s steps(2,end) infinite}
[data-motion="max"] .glitch::before{color:var(--neon-red);transform:translate(-4px,-2px);animation:autoGlitch 9s steps(1,end) infinite}
[data-motion="max"] .glitch::after{color:var(--neon-magenta);transform:translate(4px,2px);animation:autoGlitch 9s steps(1,end) .1s infinite}
[data-motion="max"] .glitch:hover::before{opacity:.9;animation:clipA .45s steps(2,end) infinite}
[data-motion="max"] .glitch:hover::after{opacity:.9;animation:clipB .45s steps(2,end) infinite}

.tagline{
  font-family:var(--bitmap);font-weight:700;
  font-size:clamp(1.05rem,2vw,1.6rem);line-height:1.35;
  color:var(--text);text-shadow:0 0 26px rgba(255,46,77,.35);
}
.hero__lede{max-width:52ch;font-size:var(--fs-lede);line-height:var(--lh-body);color:var(--text-muted)}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-top:var(--sp-1)}
.hero__cta .btn{flex:0 1 auto}

.hero__mark{display:flex;justify-content:center;min-width:0}
.hero__cube{
  position:relative;width:min(100%,380px);aspect-ratio:1/1;
  transition:transform .3s ease-out;will-change:transform;
  animation:enter .9s var(--ease) both;animation-delay:.16s;
}
.hero__cube::before{
  content:"";position:absolute;inset:8%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,46,77,.6),rgba(255,45,149,.18) 46%,transparent 70%);
  filter:blur(30px);animation:pulse 5s ease-in-out infinite;
}
.hero__cube__inner{
  position:relative;width:100%;height:100%;
  transition:transform .38s var(--ease);
}
.hero__cube:hover .hero__cube__inner{transform:scale(1.08)}
.hero__cube img{
  width:100%;height:100%;object-fit:contain;
  animation:floaty 4.5s ease-in-out infinite;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.55));
}

/* ------------------------------------------------------------- MARQUEE */
.marquee{border-block:2px solid var(--border);background:var(--surface);overflow:hidden}
.marquee__track{
  display:flex;width:max-content;
  animation:marquee 36s linear infinite;
  will-change:transform;
}
.marquee__track:hover{animation-play-state:paused}
.marquee__seq{
  flex:0 0 auto;
  white-space:nowrap;padding-block:11px;
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.18em;
  text-transform:uppercase;color:var(--text-dim);
}

/* --------------------------------------------------------------- ABOUT */
.about{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.about__copy{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0}

.chips{display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start}
@keyframes chipIn{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}
.chip{
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;
  color:var(--text);background:var(--surface-2);border:2px solid var(--border);
  box-shadow:var(--sh-1);padding:10px 14px;
  animation:chipIn .45s var(--ease) both;animation-delay:calc(var(--i,0)*55ms);
  transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.chip:hover{border-color:var(--brand-red);color:var(--white)}
.chip--lead{background:var(--brand-red-deep);border-color:var(--neon-red);color:var(--white)}

/* ---------------------------------------- SERVICE CARDS (home summary) */
.svc-card{padding:var(--sp-5);gap:var(--sp-3)}
.svc-card .card__title{margin-top:var(--sp-1)}
.svc-card .tag{align-self:flex-start}

/* ------------------------------------------------------------- SOCIALS */
.socials{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.socials li{display:flex;min-width:0}
.social{
  display:inline-flex;align-items:center;gap:9px;min-height:var(--tap);
  font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--white);background:var(--surface);border:2px solid var(--brand-red-deep);
  box-shadow:var(--sh-1);padding:11px 16px;
  transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.social:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-2),var(--glow-sm);border-color:var(--neon-red);color:var(--white)}
.social:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--maroon)}
.social i{display:block;width:8px;height:8px;flex-shrink:0;background:var(--text-muted)}

/* ------------------------------------------------------------- CONTACT */
.contact{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,380px);gap:clamp(28px,4vw,64px);align-items:start}
.contact__copy{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0}
.contact__actions{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0}

.bigbtn{
  display:flex;flex-direction:column;gap:5px;
  padding:20px 22px;text-align:left;cursor:pointer;
  border:2px solid var(--border);background:transparent;color:var(--text);
  box-shadow:var(--sh-2);
  transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),
             background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.bigbtn:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-3);background:var(--surface-2);border-color:var(--neon-cyan);color:var(--text)}
.bigbtn:active{transform:translate(2px,2px);box-shadow:var(--sh-1)}
.bigbtn--primary{background:var(--brand-red-lit);border-color:var(--neon-red);color:var(--white);box-shadow:var(--sh-2),var(--glow-sm)}
.bigbtn--primary:hover{background:var(--neon-red);border-color:var(--neon-red);color:var(--white);box-shadow:var(--sh-3),var(--glow-md)}
.bigbtn b{font-family:var(--title);font-weight:600;font-size:1.3rem;line-height:1.1}
.bigbtn small{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.bigbtn--primary small{color:rgba(255,255,255,.88)}

.copy-status{
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.08em;
  text-transform:uppercase;color:var(--neon-cyan);min-height:1.2em;
}

/* ---------------------------------------------------------- RESPONSIVE */
@media (max-width:960px){
  .hero__inner{grid-template-columns:1fr;gap:var(--sp-6);justify-items:center;text-align:center}
  .hero__copy{align-items:center;order:2}
  .hero__mark{order:1}
  .hero__cube{width:min(72vw,300px)}
  .hero__lede{max-width:56ch}
  .hero__cta{justify-content:center}
  .about,.contact{grid-template-columns:1fr}
  .contact__actions{max-width:520px}
}

@media (max-width:640px){
  /* the tube glow reads far heavier on a small, dense screen — dial it back */
  .wordmark .fill{text-shadow:0 0 10px rgba(255,46,77,.4)}
  .wordmark .slash{text-shadow:0 0 8px rgba(0,229,255,.5)}
  .tagline{text-shadow:0 0 14px rgba(255,46,77,.28)}
  .hero__lede{display:none}
  .hero__cta{gap:var(--sp-3);width:100%}
  .hero__cta .btn{flex:1 1 100%}
  .socials li{flex:1 1 140px}
  .social{width:100%;justify-content:center}
  .marquee span{font-size:.66rem;letter-spacing:.14em}
}