/* V3.4 // topbar + hero + identity interaction layer */

/* TOPBAR // signal rail */
.mock-topbar{
  overflow:hidden;
  transition:background .25s ease,border-color .25s ease,box-shadow .25s ease,backdrop-filter .25s ease;
}
.mock-topbar::after{
  content:"";
  position:absolute;
  left:-18%;
  bottom:0;
  width:18%;
  height:2px;
  pointer-events:none;
  opacity:.5;
  background:linear-gradient(90deg,transparent,rgba(90,223,255,.28),#ff304a,rgba(90,223,255,.4),transparent);
  box-shadow:0 0 10px rgba(255,48,74,.35),0 0 16px rgba(90,223,255,.16);
  animation:topbarSignalSweep 6.8s linear infinite;
}
.mock-topbar.is-scrolled{
  background:rgba(2,8,14,.95)!important;
  border-color:rgba(116,207,255,.32)!important;
  box-shadow:0 10px 32px rgba(0,0,0,.34),0 1px 0 rgba(90,223,255,.08);
  backdrop-filter:blur(22px) saturate(1.1);
}
.mock-brand strong{
  transition:color .22s ease,text-shadow .22s ease,transform .22s ease;
  transform-origin:left center;
  animation:brandSignal 5.4s ease-in-out infinite;
}
.mock-brand:hover strong{
  color:#f4fbff;
  transform:scale(1.035);
  text-shadow:-3px 0 12px rgba(255,48,74,.3),3px 0 15px rgba(90,223,255,.34),0 0 18px rgba(222,243,255,.18);
}
.mock-nav a{
  transition:color .18s ease,text-shadow .18s ease,transform .18s ease;
}
.mock-nav a:hover,.mock-nav a.is-active{
  text-shadow:0 0 10px rgba(116,207,255,.2);
}
.mock-nav a:hover{transform:translateY(-1px)}
.mock-nav a:hover::after,.mock-nav a.is-active::after{animation:navLock .72s cubic-bezier(.2,.8,.2,1) both}
.site-metrics>span,.site-favorite{
  position:relative;
  overflow:hidden;
}
.site-metrics>span::before,.site-favorite::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:-45%;
  width:32%;
  transform:skewX(-16deg);
  background:linear-gradient(90deg,transparent,rgba(116,207,255,.1),transparent);
  opacity:0;
}
.site-metrics>span:hover::before,.site-favorite:hover::before{animation:microScan .55s ease-out both}

@keyframes topbarSignalSweep{0%{left:-18%;opacity:0}8%{opacity:.58}48%{opacity:.58}58%,100%{left:112%;opacity:0}}
@keyframes brandSignal{0%,72%,100%{text-shadow:0 0 0 rgba(116,207,255,0)}76%{text-shadow:-2px 0 10px rgba(255,48,74,.26),2px 0 12px rgba(90,223,255,.3)}82%{text-shadow:0 0 5px rgba(116,207,255,.12)}}
@keyframes navLock{0%{box-shadow:0 0 0 rgba(255,48,74,0)}45%{box-shadow:0 0 16px rgba(255,48,74,.55)}100%{box-shadow:0 0 8px rgba(255,48,74,.22)}}
@keyframes microScan{0%{left:-45%;opacity:0}20%{opacity:1}100%{left:120%;opacity:0}}

/* HERO NAME // slow acquisition shimmer */
.hero__copy h1{
  position:relative;
  color:#f3f8fb;
  background:linear-gradient(104deg,#eef7ff 0%,#eef7ff 38%,#9fe6ff 47%,#ffffff 51%,#ff9aab 56%,#eef7ff 64%,#eef7ff 100%);
  background-size:260% 100%;
  background-position:100% 50%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 9px rgba(112,183,227,.06));
  animation:nameSignalPass 8.4s ease-in-out infinite;
}
.hero__copy.signal-acquired h1{animation-name:nameSignalPass,nameAcquireKick;animation-duration:8.4s,.62s;animation-timing-function:ease-in-out,cubic-bezier(.2,.8,.2,1);animation-iteration-count:infinite,1}
.name-accent{
  position:relative;
  overflow:visible;
  animation:nameAccentPulse 3.4s ease-in-out infinite;
}
.name-accent::after{
  content:"";
  position:absolute;
  left:0;
  top:-3px;
  width:22px;
  height:10px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.82),transparent);
  filter:blur(2px);
  opacity:0;
  animation:nameAccentSweep 4.2s ease-in-out infinite;
}
.hero__copy blockquote{
  transition:color .25s ease,text-shadow .25s ease,transform .25s ease;
}
.hero__copy:hover blockquote{
  color:#a2cbe5;
  text-shadow:0 0 11px rgba(90,223,255,.15);
  transform:translateX(3px);
}
.hero-watermark{
  animation:watermarkBreath 6.6s ease-in-out infinite;
}
@keyframes nameSignalPass{0%,60%{background-position:100% 50%}76%{background-position:0% 50%}100%{background-position:0% 50%}}
@keyframes nameAcquireKick{0%{transform:translateX(-3px);filter:drop-shadow(-4px 0 0 rgba(255,48,74,.22)) drop-shadow(4px 0 0 rgba(90,223,255,.2))}45%{transform:translateX(2px)}100%{transform:translateX(0);filter:drop-shadow(0 2px 9px rgba(112,183,227,.06))}}
@keyframes nameAccentPulse{0%,100%{box-shadow:0 0 10px rgba(255,48,74,.25)}50%{box-shadow:0 0 17px rgba(255,48,74,.58),8px 0 16px rgba(90,223,255,.12)}}
@keyframes nameAccentSweep{0%,60%{left:-8px;opacity:0}70%{opacity:.85}88%{left:50px;opacity:0}100%{left:50px;opacity:0}}
@keyframes watermarkBreath{0%,100%{opacity:.8;transform:translate3d(0,0,0)}50%{opacity:1;transform:translate3d(2px,-1px,0)}}

/* IDENTITY // scanner + cursor parallax */
.mock-identity{
  --identity-x:0deg;
  --identity-y:0deg;
  --identity-mx:50%;
  --identity-my:50%;
  transform-style:preserve-3d;
  will-change:transform,box-shadow;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,border-color .28s ease;
}
.mock-identity::after{
  content:"";
  position:absolute;
  z-index:5;
  pointer-events:none;
  left:9px;
  right:9px;
  top:-15%;
  height:10%;
  opacity:.0;
  background:linear-gradient(180deg,transparent,rgba(90,223,255,.04),rgba(90,223,255,.32),rgba(255,255,255,.13),transparent);
  filter:blur(.2px);
  mix-blend-mode:screen;
  animation:identityScan 5.6s cubic-bezier(.42,0,.58,1) infinite;
}
.mock-identity:hover{
  transform:perspective(900px) rotateX(var(--identity-x)) rotateY(var(--identity-y)) translateY(-3px);
  border-color:rgba(116,207,255,.58)!important;
  box-shadow:0 16px 40px rgba(0,0,0,.32),-5px 0 18px rgba(255,48,74,.09),6px 0 22px rgba(90,223,255,.12);
}
.mock-identity .identity-card__video{
  transform:scale(1.035) translate3d(calc((var(--identity-my) - 50%) * .025),calc((var(--identity-mx) - 50%) * .018),0);
  transition:transform .22s ease,opacity .28s ease,filter .28s ease;
}
.mock-identity:hover .identity-card__video{
  opacity:.24!important;
  filter:saturate(.95) contrast(1.12) brightness(.76)!important;
}
.mock-identity .identity-card__content{
  transform:translateZ(16px);
}
.mock-identity dl>div{
  position:relative;
  transition:background .18s ease,padding-left .18s ease,border-color .18s ease;
}
.mock-identity dl>div::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:2px;
  height:0;
  transform:translateY(-50%);
  background:#5adfff;
  box-shadow:0 0 9px rgba(90,223,255,.6);
  transition:height .18s ease;
}
.mock-identity dl>div:hover{
  padding-left:7px!important;
  background:linear-gradient(90deg,rgba(90,223,255,.06),transparent 72%);
  border-color:rgba(90,223,255,.25)!important;
}
.mock-identity dl>div:hover::before{height:55%}
.mock-identity #heroPresence{
  animation:presenceSignal 2.8s ease-in-out infinite;
}
.mock-identity.signal-acquired .identity-card__label{
  animation:identityLabelLock .65s cubic-bezier(.2,.8,.2,1) 1;
}
@keyframes identityScan{0%,15%{top:-15%;opacity:0}22%{opacity:.65}65%{top:105%;opacity:.42}72%,100%{top:105%;opacity:0}}
@keyframes presenceSignal{0%,100%{text-shadow:0 0 0 rgba(90,223,255,0)}50%{text-shadow:0 0 10px rgba(90,223,255,.45)}}
@keyframes identityLabelLock{0%{letter-spacing:.18em;color:#ff667d;text-shadow:0 0 8px rgba(255,48,74,.45)}55%{letter-spacing:.06em;color:#d7e7f2}100%{letter-spacing:.045em}}

/* Reduced motion keeps the visual polish, removes movement. */
body.reduced-motion .mock-topbar::after,
body.reduced-motion .mock-brand strong,
body.reduced-motion .hero__copy h1,
body.reduced-motion .name-accent,
body.reduced-motion .name-accent::after,
body.reduced-motion .hero-watermark,
body.reduced-motion .mock-identity::after,
body.reduced-motion .mock-identity #heroPresence,
body.reduced-motion .mock-identity.signal-acquired .identity-card__label{
  animation:none!important;
}
body.reduced-motion .hero__copy h1{background:none!important;-webkit-text-fill-color:#f3f8fb!important;color:#f3f8fb!important;filter:none!important}
body.reduced-motion .mock-identity,
body.reduced-motion .mock-identity:hover{transform:none!important;transition:border-color .16s ease,box-shadow .16s ease!important}
body.reduced-motion .mock-identity .identity-card__video{transform:none!important}

@media(max-width:820px){
  .mock-topbar::after{animation-duration:8.4s}
  .mock-identity:hover{transform:translateY(-1px)}
  .hero__copy h1{animation-duration:10s}
}