/* CPJ hero comparison. Original photo pixels and final layout are preserved. */
.hero-studio{--hero-enter:cubic-bezier(.16,1,.3,1);--hero-response:cubic-bezier(.22,1,.36,1);--hero-distance:1;overflow:hidden}
.hero-studio .hero-visual{position:relative;isolation:isolate}
.hero-orbit{position:absolute;inset:10% 3% 0;z-index:-1;pointer-events:none}
.hero-orbit::before{content:"";position:absolute;inset:0;border-radius:50%;background:#eadbb6;opacity:.48;transform:rotate(-12deg)}
.hero-star{position:absolute;display:block;background:var(--yellow,#f4cc3b);clip-path:polygon(50% 0,61% 34%,98% 35%,69% 57%,79% 94%,50% 72%,21% 94%,31% 57%,2% 35%,39% 34%);aspect-ratio:1}
.hero-star-one{width:13%;left:-4%;top:28%;--star-turn:-18deg;transform:rotate(-18deg)}
.hero-star-two{width:8%;right:1%;top:13%;background:var(--red);--star-turn:14deg;transform:rotate(14deg)}
.hero-star-three{width:5%;right:0;bottom:14%;background:var(--navy);--star-turn:-8deg;transform:rotate(-8deg)}
.hero-studio .faculty-yoshiken{--from-x:0px;--from-y:72px;--delay:160ms}
.hero-studio .faculty-note{--from-x:72px;--from-y:16px;--delay:80ms}
.hero-studio .faculty-minami{--from-x:-72px;--from-y:16px;--delay:240ms}
.hero-studio .faculty-inaka_male{--from-x:-48px;--from-y:-64px;--delay:0ms}
.hero-studio .faculty-inaka_female{--from-x:48px;--from-y:-64px;--delay:320ms}
.mo .hero-studio.is-entering .faculty-person{animation:studio-gather 620ms var(--hero-enter) var(--delay) both}
.mo .hero-studio.is-entering .headline-line{animation:studio-copy 480ms var(--hero-enter) both}
.mo .hero-studio.is-entering .headline-accent{animation-delay:80ms}
.mo .hero-studio.is-entering .hero-star{animation:studio-star 780ms var(--hero-enter) 120ms both}
.hero-studio .fv-btn{opacity:1!important;transform:none!important;transition:none}
.hero-studio .cta{transition:background-color 160ms var(--hero-response),box-shadow 160ms var(--hero-response),transform 160ms var(--hero-response)}
.hero-studio .cta::after{transition:transform 160ms var(--hero-response)}
.hero-studio .cta:focus-visible{outline:3px solid var(--navy);outline-offset:5px}
.hero-studio .cta:active{transform:translateY(2px)}
@media(hover:hover) and (pointer:fine){.hero-studio .cta:hover::after{transform:translateX(4px)}}
@keyframes studio-gather{from{transform:translate(calc(var(--from-x)*var(--hero-distance)),calc(var(--from-y)*var(--hero-distance)));opacity:0}to{transform:translate(0,0);opacity:1}}
@keyframes studio-copy{from{transform:translateY(12px);opacity:.6}to{transform:none;opacity:1}}
@keyframes studio-star{from{transform:rotate(calc(var(--star-turn) - 32deg)) scale(.75);opacity:0}to{transform:rotate(var(--star-turn)) scale(1);opacity:1}}
@media(max-width:899px){.hero-studio{--hero-distance:.5}.mo .hero-studio.is-entering .faculty-person{animation-duration:540ms}}
@media(prefers-reduced-motion:reduce){.hero-studio *,.hero-studio *::after{animation:none!important;transition:none!important}}