/* V3.3 // motion + interaction layer */

/* PROFILE RECORD // slow police-siren aura (smooth, not strobe) */
.portrait-console{
  will-change:filter;
  animation:profileSirenAura 3.6s cubic-bezier(.45,0,.55,1) infinite;
}
.portrait-console__bezel::before,
.portrait-console__bezel::after{
  content:"";
  position:absolute;
  z-index:8;
  pointer-events:none;
  top:7%;
  bottom:7%;
  width:5px;
  opacity:.25;
  mix-blend-mode:screen;
}
.portrait-console__bezel::before{
  left:1px;
  background:linear-gradient(180deg,transparent 0 8%,#ff304a 23% 72%,transparent 92%);
  box-shadow:0 0 8px #ff304a,0 0 22px rgba(255,48,74,.7),0 0 44px rgba(255,48,74,.22);
  animation:profileSirenRed 3.6s cubic-bezier(.45,0,.55,1) infinite;
}
.portrait-console__bezel::after{
  right:1px;
  background:linear-gradient(180deg,transparent 0 8%,#5adfff 23% 72%,transparent 92%);
  box-shadow:0 0 8px #5adfff,0 0 22px rgba(90,223,255,.62),0 0 44px rgba(90,223,255,.2);
  animation:profileSirenBlue 3.6s cubic-bezier(.45,0,.55,1) infinite;
}
.portrait-console__title strong{
  animation:profileTitlePulse 3.6s ease-in-out infinite;
}
.portrait-console__status i{
  animation:statusPulse 2.2s ease-in-out infinite;
}
@keyframes profileSirenAura{
  0%,100%{filter:drop-shadow(-7px 0 13px rgba(255,48,74,.22)) drop-shadow(7px 0 11px rgba(90,223,255,.08))}
  25%{filter:drop-shadow(-12px 0 22px rgba(255,48,74,.5)) drop-shadow(6px 0 11px rgba(90,223,255,.1))}
  50%{filter:drop-shadow(-6px 0 11px rgba(255,48,74,.08)) drop-shadow(12px 0 22px rgba(90,223,255,.48))}
  75%{filter:drop-shadow(-9px 0 16px rgba(255,48,74,.26)) drop-shadow(9px 0 17px rgba(90,223,255,.26))}
}
@keyframes profileSirenRed{0%,100%{opacity:.24;filter:brightness(.85)}25%{opacity:.96;filter:brightness(1.25)}50%{opacity:.16;filter:brightness(.72)}75%{opacity:.5;filter:brightness(1)}}
@keyframes profileSirenBlue{0%,100%{opacity:.18;filter:brightness(.75)}25%{opacity:.18;filter:brightness(.8)}50%{opacity:.96;filter:brightness(1.3)}75%{opacity:.48;filter:brightness(1)}}
@keyframes profileTitlePulse{0%,100%{text-shadow:0 0 0 rgba(255,48,74,0)}25%{text-shadow:0 0 12px rgba(255,48,74,.5)}50%{text-shadow:0 0 3px rgba(90,223,255,.15)}75%{text-shadow:0 0 8px rgba(255,48,74,.25)}}
@keyframes statusPulse{0%,100%{box-shadow:0 0 8px rgba(59,227,168,.7)}50%{box-shadow:0 0 16px rgba(59,227,168,1),0 0 28px rgba(59,227,168,.25)}}

/* CONNECT WITH ME // platform-colour lock-on effect */
.connect-panel .social-card{
  --brand-rgb:116,207,255;
  --brand2-rgb:116,207,255;
  --mx:50%;
  --my:50%;
  --tilt-x:0deg;
  --tilt-y:0deg;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  will-change:transform,box-shadow,border-color;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease,border-color .22s ease,background .22s ease!important;
}
.connect-panel .social-card[data-platform="facebook"]{--brand-rgb:24,119,242;--brand2-rgb:82,151,255}
.connect-panel .social-card[data-platform="instagram"]{--brand-rgb:225,48,108;--brand2-rgb:131,58,180}
.connect-panel .social-card[data-platform="discord"]{--brand-rgb:88,101,242;--brand2-rgb:126,137,255}
.connect-panel .social-card[data-platform="tiktok"]{--brand-rgb:37,244,238;--brand2-rgb:254,44,85}
.connect-panel .social-card[data-platform="youtube"]{--brand-rgb:255,0,51;--brand2-rgb:255,82,82}
.connect-panel .social-card[data-platform="locket"]{--brand-rgb:255,204,72;--brand2-rgb:255,128,92}
.connect-panel .social-card[data-platform="mail"]{--brand-rgb:90,223,255;--brand2-rgb:116,151,255}
.connect-panel .social-card::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  opacity:0!important;
  pointer-events:none!important;
  background:radial-gradient(circle at var(--mx) var(--my),rgba(var(--brand-rgb),.23),transparent 34%),linear-gradient(135deg,rgba(var(--brand2-rgb),.07),transparent 45%,rgba(var(--brand-rgb),.07))!important;
  transition:opacity .22s ease!important;
}
.connect-panel .social-card::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:1!important;
  pointer-events:none!important;
  top:-70%!important;
  bottom:-70%!important;
  left:-40%!important;
  width:26%!important;
  opacity:0!important;
  transform:translateX(-180%) skewX(-18deg)!important;
  background:linear-gradient(90deg,transparent,rgba(var(--brand-rgb),.02),rgba(var(--brand-rgb),.38),rgba(255,255,255,.28),rgba(var(--brand2-rgb),.16),transparent)!important;
  filter:blur(.3px)!important;
}
.connect-panel .social-card>*{position:relative;z-index:2}
.connect-panel .social-card:hover,
.connect-panel .social-card:focus-visible{
  border-color:rgba(var(--brand-rgb),.68)!important;
  background:linear-gradient(180deg,rgba(var(--brand-rgb),.09),rgba(4,13,22,.9))!important;
  box-shadow:0 0 0 1px rgba(var(--brand-rgb),.15),0 0 18px rgba(var(--brand-rgb),.22),0 10px 32px rgba(0,0,0,.32),inset 0 0 24px rgba(var(--brand2-rgb),.08)!important;
  transform:perspective(720px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-5px) scale(1.045)!important;
  z-index:5;
}
.connect-panel .social-card:hover::before,
.connect-panel .social-card:focus-visible::before{opacity:1!important}
.connect-panel .social-card:hover::after,
.connect-panel .social-card:focus-visible::after{animation:platformSweep .78s cubic-bezier(.18,.78,.24,1) both}
.connect-panel .social-card:hover .social-icon,
.connect-panel .social-card:focus-visible .social-icon{
  color:rgb(var(--brand-rgb))!important;
  filter:drop-shadow(0 0 5px rgba(var(--brand-rgb),.88)) drop-shadow(0 0 13px rgba(var(--brand2-rgb),.38));
  transform:translateZ(22px) scale(1.12);
}
.connect-panel .social-card:hover .social-copy,
.connect-panel .social-card:focus-visible .social-copy{transform:translateZ(13px)}
.connect-panel .social-card .social-icon,
.connect-panel .social-card .social-copy{transition:transform .22s cubic-bezier(.2,.8,.2,1),color .2s ease,filter .2s ease}
@keyframes platformSweep{0%{opacity:0;transform:translateX(-190%) skewX(-18deg)!important}18%{opacity:.8}100%{opacity:0;transform:translateX(720%) skewX(-18deg)!important}}

/* MOTION toggle: make the state visible and actually disable movement */
.motion-compact{min-width:82px;text-align:center;transition:border-color .2s,color .2s,box-shadow .2s,background .2s}
.motion-compact[aria-pressed="true"]{border-color:rgba(57,231,166,.5)!important;color:#72ffc4!important;background:rgba(57,231,166,.06)!important;box-shadow:0 0 14px rgba(57,231,166,.08)}
body.reduced-motion .motion-compact{border-color:rgba(255,48,74,.45)!important;color:#ff8a9b!important;background:rgba(255,48,74,.05)!important;box-shadow:none!important}
body.reduced-motion .portrait-console,
body.reduced-motion .portrait-console__bezel::before,
body.reduced-motion .portrait-console__bezel::after,
body.reduced-motion .portrait-console__title strong,
body.reduced-motion .portrait-console__status i,
body.reduced-motion .bg-signals,
body.reduced-motion .radar__sweep{animation:none!important;filter:none!important}
body.reduced-motion .portrait-console{filter:none!important}
body.reduced-motion .portrait-console__bezel::before,
body.reduced-motion .portrait-console__bezel::after{opacity:.2!important}
body.reduced-motion .connect-panel .social-card,
body.reduced-motion .connect-panel .social-card:hover,
body.reduced-motion .connect-panel .social-card:focus-visible{transform:none!important;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease!important}
body.reduced-motion .connect-panel .social-card:hover::after,
body.reduced-motion .connect-panel .social-card:focus-visible::after{animation:none!important;opacity:0!important}
body.reduced-motion .connect-panel .social-card:hover .social-icon,
body.reduced-motion .connect-panel .social-card:focus-visible .social-icon,
body.reduced-motion .connect-panel .social-card:hover .social-copy,
body.reduced-motion .connect-panel .social-card:focus-visible .social-copy{transform:none!important}
body.reduced-motion .reveal{transition:none!important;transform:none!important}

@media(max-width:820px){
  .portrait-console{animation-duration:4.4s}
  .connect-panel .social-card:hover,.connect-panel .social-card:focus-visible{transform:translateY(-2px) scale(1.015)!important}
}
@media(prefers-reduced-motion:reduce){
  .portrait-console,.portrait-console__bezel::before,.portrait-console__bezel::after,.portrait-console__title strong,.portrait-console__status i{animation-duration:7s}
}