/* Slow, smooth typography first; the portrait reveal never transforms its interaction surface. */
.hero-entering {
  --intro-name-start: 40ms;
  --intro-name-time: 1600ms;
  --intro-line-gap: 180ms;
  --intro-photo-start: 850ms;
  --intro-photo-time: 650ms;
  --intro-detail-start: 1200ms;
}
.hero-entrance-light,
.hero-entrance-ring { display: none; position: absolute; pointer-events: none; }
.hero-entrance-light {
  z-index: 6;
  top: -30%;
  left: 0;
  width: clamp(64px, 8vw, 140px);
  height: 160%;
  background: linear-gradient(90deg, #aed43400, #a9dd3466 25%, #c7f56be6 49%, #efffc4e6 50%, #b9ed48cc 52%, #aed43433 76%, #aed43400);
  box-shadow: 0 0 70px 22px #a4db343b;
}
.hero-entrance-light::after {
  content: '';
  position: absolute;
  inset: 0 100% 0 auto;
  width: 150px;
  background: linear-gradient(90deg, transparent, #a4db342e);
  clip-path: polygon(40% 0,100% 0,100% 100%,65% 100%,65% 80%,20% 80%,20% 62%,45% 62%,45% 40%,0 40%,0 20%,40% 20%);
}
.hero-entrance-ring {
  z-index: 2;
  top: 10%;
  right: 1%;
  width: 44%;
  aspect-ratio: 1;
  border: 2px solid #c6e95caa;
  border-radius: 50%;
  box-shadow: 0 0 45px #aed43430, inset 0 0 45px #aed43420;
}
.hero-entrance-ring::after { content: ''; position: absolute; inset: -6%; border: 1px solid #aed43455; border-radius: inherit; }
.hero-strategy.hero-entering .hero-entrance-light,
.hero-strategy.hero-entering .hero-entrance-ring { display: block; }
.hero-entering .hero-entrance-light { animation: hero-light-pass 650ms calc(var(--intro-photo-start) - 80ms) cubic-bezier(.4,0,.2,1) both; }
.hero-entering .hero-entrance-ring { animation: hero-ring-expand 850ms var(--intro-photo-start) cubic-bezier(.16,1,.3,1) both; }
.hero-entering .hero-title-line {
  --line-start: var(--intro-name-start);
  position: relative;
}
.hero-entering .hero-title-lime { --line-start: calc(var(--intro-name-start) + var(--intro-line-gap)); }
.hero-title-text { display: block; }
.hero-entering .hero-title-text { animation: hero-title-resolve var(--intro-name-time) var(--line-start) cubic-bezier(.22,.65,.25,1) both; }
.hero-entering .hero-kicker { animation: hero-detail-enter 550ms var(--intro-detail-start) both; }
.hero-entering .hero-role { animation: hero-detail-enter 550ms calc(var(--intro-detail-start) + 60ms) both; }
.hero-entering .hero-intro { animation: hero-detail-enter 550ms calc(var(--intro-detail-start) + 150ms) both; }
.hero-entering .hero-project-link { animation: hero-detail-enter 550ms calc(var(--intro-detail-start) + 240ms) both; }
.hero-entering .hero-footer { animation: hero-detail-enter 550ms calc(var(--intro-detail-start) + 340ms) both; }
.hero-entering .strategy-portrait { animation: hero-portrait-enter var(--intro-photo-time) var(--intro-photo-start) cubic-bezier(.16,1,.3,1) both; }

@keyframes hero-title-resolve {
  from { opacity: 0; transform: translate3d(0,.12em,0); filter: blur(5px); }
  to { opacity: 1; transform: translate3d(0,0,0); filter: blur(0); }
}
@keyframes hero-detail-enter {
  from { opacity: 0; transform: translate3d(0,24px,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}
@keyframes hero-portrait-enter {
  from { opacity: 0; clip-path: inset(-30% 100% -10% 0); }
  to { opacity: 1; clip-path: inset(-30% -30% -10% -30%); }
}
@keyframes hero-light-pass {
  0% { opacity: 0; transform: translate3d(-250%,0,0) skewX(-14deg); }
  14%, 78% { opacity: .9; }
  100% { opacity: 0; transform: translate3d(calc(100vw + 250%),0,0) skewX(-14deg); }
}
@keyframes hero-ring-expand {
  0% { opacity: 0; transform: scale(.55); }
  25% { opacity: .8; }
  100% { opacity: 0; transform: scale(1.5); }
}
@media (max-width: 800px) {
  .hero-entering { --intro-name-time: 1400ms; --intro-photo-start: 700ms; --intro-photo-time: 550ms; --intro-detail-start: 1050ms; }
  .hero-entrance-ring { top: auto; bottom: 13%; right: 9%; width: 82%; }
  .hero-entering .hero-entrance-light { animation-duration: 600ms; }
  .hero-entering .hero-entrance-ring { animation-duration: 750ms; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-strategy.hero-entering .hero-entrance-light,
  .hero-strategy.hero-entering .hero-entrance-ring { display: none; }
  .hero-entering [data-intro],
  .hero-entering .hero-title-text,
  .hero-entering .strategy-portrait,
  .hero-entering .hero-footer { animation: none !important; }
}