@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@600;700&display=swap');

/* V3.6 // visual correction pass after interaction review */

/* PROFILE RECORD // contain the inner cyan rail, then let the OUTER frame cast the light. */
.portrait-console__bezel{
  overflow:hidden!important;
  isolation:isolate;
}
.portrait-console__bezel::before{
  left:4px!important;
  top:10%!important;
  bottom:18%!important;
  width:4px!important;
}
.portrait-console__bezel::after{
  right:4px!important;
  top:10%!important;
  bottom:18%!important;
  width:4px!important;
}
/* Stronger siren aura without letting the cyan strip cut across the bevel corner. */
@keyframes profileSirenAura{
  0%,100%{filter:drop-shadow(-9px 0 18px rgba(255,48,74,.34)) drop-shadow(9px 0 17px rgba(90,223,255,.18)) drop-shadow(0 0 13px rgba(153,214,255,.08))}
  25%{filter:drop-shadow(-16px 0 31px rgba(255,48,74,.68)) drop-shadow(8px 0 17px rgba(90,223,255,.16)) drop-shadow(-3px 0 38px rgba(255,48,74,.22))}
  50%{filter:drop-shadow(-7px 0 15px rgba(255,48,74,.14)) drop-shadow(16px 0 31px rgba(90,223,255,.64)) drop-shadow(4px 0 40px rgba(90,223,255,.2))}
  75%{filter:drop-shadow(-12px 0 23px rgba(255,48,74,.39)) drop-shadow(12px 0 24px rgba(90,223,255,.39)) drop-shadow(0 0 30px rgba(155,220,255,.11))}
}

/* HERO NAME // harder, angular display face to match the SPD hardware language. */
.hero__copy h1{
  font-family:"Oxanium","Arial Narrow","Inter",sans-serif!important;
  font-weight:700!important;
  letter-spacing:-.025em!important;
  font-feature-settings:"ss01" 1;
}

/* SIDE RAIL // keep the flavour, give the useful hero content more room. */
@media(min-width:1321px){
  .mock-hero{
    grid-template-columns:64px 420px minmax(0,1fr)!important;
    gap:18px!important;
  }
  .mock-hero::after{left:520px!important}
  .hero-side-rail{
    padding:15px 7px!important;
    font-size:8px!important;
    line-height:1.42!important;
  }
  .hero-side-rail strong{font-size:9px!important;line-height:1.45!important;letter-spacing:.035em!important}
  .hero-side-rail i{width:14px!important}
}
@media(max-width:1320px){
  .mock-hero{grid-template-columns:360px minmax(0,1fr)!important;gap:22px!important}
  .mock-hero::after{left:382px!important}
}
@media(max-width:980px){.mock-hero{grid-template-columns:1fr!important}}

/* CONNECT WITH ME // pointer should feel attached to the card, not chase it. */
.connect-panel .social-card{
  transition:transform .12s cubic-bezier(.16,.8,.2,1),box-shadow .09s ease,border-color .09s ease,background .09s ease!important;
}
.connect-panel .social-card:hover,
.connect-panel .social-card:focus-visible{
  transition:transform .025s linear,box-shadow .07s ease,border-color .07s ease,background .07s ease!important;
}
.connect-panel .social-card .social-icon,
.connect-panel .social-card .social-copy{
  transition:transform .07s linear,color .07s ease,filter .07s ease!important;
}

/* REFRESH // exact geometric centering; only this SVG glyph rotates. */
.feed-refresh{
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  line-height:0!important;
}
.feed-refresh__icon{
  display:block!important;
  width:15px!important;
  height:15px!important;
  font-size:0!important;
  line-height:0!important;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237dcfff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 1 0-2.35 5.65'/%3E%3Cpath d='M20 4v7h-7'/%3E%3C/svg%3E") center/15px 15px no-repeat;
  transform-origin:50% 50%!important;
}
.feed-refresh.is-refreshing .feed-refresh__icon{animation:refreshIconSpinCentered .58s cubic-bezier(.3,.7,.4,1)!important}
@keyframes refreshIconSpinCentered{to{transform:rotate(360deg)}}

/* SEASONAL MODULE // one siren colour on each end. */
.seasonal--compact{
  overflow:visible!important;
  border-left-color:rgba(255,48,74,.58)!important;
  border-right-color:rgba(90,223,255,.58)!important;
  box-shadow:-6px 0 17px rgba(255,48,74,.08),6px 0 17px rgba(90,223,255,.08);
}
.seasonal--compact::before{
  left:0!important;
  top:0!important;
  bottom:0!important;
  width:5px!important;
  background:#ff304a!important;
  box-shadow:0 0 8px rgba(255,48,74,.9),0 0 20px rgba(255,48,74,.38),0 0 34px rgba(255,48,74,.13)!important;
  opacity:.9!important;
  animation:seasonalRedBeacon 2.8s ease-in-out infinite!important;
}
.seasonal--compact::after{
  content:""!important;
  position:absolute!important;
  z-index:2!important;
  left:auto!important;
  right:0!important;
  top:0!important;
  bottom:0!important;
  width:5px!important;
  height:auto!important;
  pointer-events:none!important;
  background:#58ddff!important;
  box-shadow:0 0 8px rgba(90,223,255,.95),0 0 20px rgba(90,223,255,.4),0 0 34px rgba(90,223,255,.14)!important;
  opacity:.42!important;
  transform:none!important;
  animation:seasonalCyanBeacon 2.8s ease-in-out -1.4s infinite!important;
}
@keyframes seasonalRedBeacon{0%,100%{opacity:.38;filter:brightness(.75)}42%{opacity:1;filter:brightness(1.45)}60%{opacity:.7;filter:brightness(1.05)}}
@keyframes seasonalCyanBeacon{0%,100%{opacity:.38;filter:brightness(.75)}42%{opacity:1;filter:brightness(1.5)}60%{opacity:.72;filter:brightness(1.08)}}
.seasonal--compact:hover{
  box-shadow:-8px 0 22px rgba(255,48,74,.14),8px 0 24px rgba(90,223,255,.15),0 10px 28px rgba(0,0,0,.24)!important;
}

/* FOOTER SOCIAL STRIP // no floating/scale motion: instant signal-colour response instead. */
.mock-footer .footer-socials a{
  transform:none!important;
  transition:border-color .07s ease,color .07s ease,box-shadow .07s ease,background .07s ease!important;
}
.mock-footer .footer-socials a:hover,
.mock-footer .footer-socials a:focus-visible{
  transform:none!important;
  background:rgba(var(--brand-rgb),.075)!important;
  border-color:rgba(var(--brand-rgb),.62)!important;
  box-shadow:0 0 9px rgba(var(--brand-rgb),.18),inset 0 0 9px rgba(var(--brand-rgb),.04)!important;
}
.mock-footer .footer-socials a svg{transition:color .07s ease,filter .07s ease!important}
.mock-footer .footer-socials a:hover svg,
.mock-footer .footer-socials a:focus-visible svg{filter:drop-shadow(0 0 4px rgba(var(--brand-rgb),.7))!important}

/* MOTION OFF */
body.reduced-motion .seasonal--compact::before,
body.reduced-motion .seasonal--compact::after,
body.reduced-motion .feed-refresh.is-refreshing .feed-refresh__icon{animation:none!important}
body.reduced-motion .connect-panel .social-card:hover,
body.reduced-motion .connect-panel .social-card:focus-visible{transition:border-color .08s,box-shadow .08s,background .08s!important}