/* Entrance motion. Hidden start states apply only while JS runs (html.js-on),
   so content is always visible if scripts fail. Reduced-motion users get no motion. */
.js-on .rv{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0ms)}
.js-on .rv.in{opacity:1;transform:none}

/* Hero: one crafted entrance. The circle grows in, the portrait rises onto it,
   then the two title lines slide in from opposite sides. */
.js-on .hero-circle{opacity:0;scale:.8;transition:opacity .8s var(--ease) .1s,scale 1s var(--ease) .1s}
.js-on .hero-cutout{opacity:0;translate:0 50px;transition:opacity 1s var(--ease) .3s,translate 1.1s var(--ease) .3s}
.js-on .hero-line{opacity:0;transition:opacity .9s var(--ease),translate 1s var(--ease)}
.js-on .hero-line.l1{translate:30px 0;transition-delay:.5s}
.js-on .hero-line.l2{translate:-30px 0;transition-delay:.65s}
.js-on .hero.is-in .hero-circle{opacity:1;scale:1}
.js-on .hero.is-in .hero-cutout{opacity:1;translate:0 0}
.js-on .hero.is-in .hero-line{opacity:1;translate:0 0}

@media (prefers-reduced-motion: reduce){
  .js-on .rv,.js-on .hero-circle,.js-on .hero-cutout,.js-on .hero-line{opacity:1!important;transform:none!important;translate:none!important;scale:none!important;transition:none!important}
}