.entrance-traces {position:fixed;inset:0;pointer-events:none;z-index:99;overflow:hidden}
.entrance-traces i {
  position:absolute;left:var(--target-x);top:var(--target-y);
  width:100px;height:1px;transform-origin:left;
  background:linear-gradient(90deg,transparent,#eac981,transparent);
  animation:trace-to-order 1.1s var(--delay) cubic-bezier(.7,0,.2,1) both;
  box-shadow:0 0 9px #eac98155;
}
.entrance-traces i:nth-child(3n) {width:56px;background:linear-gradient(90deg,transparent,#b4d8e7,transparent)}
.entrance-active .header .brand {animation:brand-arrival 1.5s ease-out both}
.entrance-active .hero-copy h1 {animation:message-arrival 1.35s .15s cubic-bezier(.16,1,.3,1) both}
.entrance-active .hero-copy .intro {animation:message-arrival 1.1s .35s cubic-bezier(.16,1,.3,1) both}
@keyframes trace-to-order {
  0% {opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--angle)) scaleX(.5)}
  15% {opacity:.7}
  65% {opacity:.9}
  100% {opacity:0;transform:translate(0,0) rotate(0) scaleX(.06)}
}
@keyframes brand-arrival {
  0%,40%,100% {filter:drop-shadow(0 0 0 transparent)}
  68% {filter:drop-shadow(0 0 16px #efd28eaa) brightness(1.28)}
}
@keyframes message-arrival {
  from {opacity:.2;filter:blur(5px);transform:translateY(14px)}
  to {opacity:1;filter:blur(0);transform:none}
}
@media(prefers-reduced-motion:reduce) {
  .entrance-traces {display:none}
  .entrance-active .header .brand,.entrance-active .hero-copy h1,.entrance-active .hero-copy .intro {animation:none}
}