/* logo-hero.css (v42): the official academy badge, big in the hero, with a once-only entrance.
   Ring draws -> badge turns in -> name and tagline rise. ~2.3 s total, plays once on load.
   Then only the thin dashed outer ring turns very slowly. Reduced motion = static logo. */
.hero .tlogo{--tl:252px;--pad:16px;position:relative;width:var(--tl);height:var(--tl);margin:4px auto 14px;flex:none;display:block;contain:layout}
.hero .tlogo .tl-badge{position:absolute;top:var(--pad);right:var(--pad);bottom:var(--pad);left:var(--pad);width:calc(100% - 2*var(--pad));height:calc(100% - 2*var(--pad));border-radius:50%;display:block;
  filter:drop-shadow(0 14px 22px rgba(1,40,96,.22));transform-origin:50% 50%}
.hero .tlogo .tl-rings{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:visible;transform:rotate(-90deg)}
.hero .tlogo circle{fill:none}
.hero .tlogo .tl-track{stroke:rgba(244,185,66,.22);stroke-width:.5}
.hero .tlogo .tl-draw{stroke:#F4B942;stroke-width:1.5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0}
.hero .tlogo .tl-dash{stroke:#C9962E;stroke-width:.55;stroke-dasharray:.9 2.4;transform-origin:60px 60px;opacity:.85}
@media (min-width:760px){ .hero .tlogo{--tl:340px;--pad:20px;margin:0 auto 18px} }

/* entrance: plain CSS, starts at first paint, no splash, nothing blocks */
@keyframes tlDraw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes tlIn{0%{opacity:0;transform:scale(.8) rotate(-90deg)}35%{opacity:1}100%{opacity:1;transform:none}}
@keyframes tlFade{from{opacity:0}to{opacity:.85}}
@keyframes tlSpin{to{transform:rotate(360deg)}}
@keyframes tlRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes tlFadeT{from{opacity:0}to{opacity:1}}
@keyframes tlFadeF{from{filter:opacity(0)}to{filter:none}}

.hero .tlogo .tl-draw{animation:tlDraw 1.3s cubic-bezier(.65,0,.35,1) .1s both}
.hero .tlogo .tl-badge{animation:tlIn 1.25s cubic-bezier(.22,1,.36,1) .15s both}
.hero .tlogo .tl-dash{animation:tlFade .6s ease 1.25s both,tlSpin 120s linear 1.25s infinite}

/* the text follows the badge. Same rule before and after .m-ready so nothing restarts. */
.hero .badge,.m-ready .hero .badge{animation:tlRise .6s cubic-bezier(.22,1,.36,1) .7s both!important}
.hero h1,.m-ready .hero h1{animation:tlRise .7s cubic-bezier(.22,1,.36,1) .8s both!important}
.hero .orn,.m-ready .hero .orn{animation:tlFadeT .6s ease .95s both!important}
.hero .tag,.m-ready .hero .tag{animation:tlRise .6s cubic-bezier(.22,1,.36,1) 1s both!important}
.hero .hero-text>.hi,.m-ready .hero .hero-text>.hi{animation:tlRise .6s cubic-bezier(.22,1,.36,1) 1.08s both!important}
.hero .cta>*,.m-ready .hero .cta>*{animation:tlRise .55s cubic-bezier(.22,1,.36,1) 1.15s both!important}
.hero .cta>*:nth-child(2),.m-ready .hero .cta>*:nth-child(2){animation-delay:1.21s!important}
.hero .cta>*:nth-child(3),.m-ready .hero .cta>*:nth-child(3){animation-delay:1.27s!important}
.hero .sub,.m-ready .hero .sub{animation:tlFadeF .6s ease 1.35s both!important}
.hero .arch,.m-ready .hero .arch{animation:tlRise .9s cubic-bezier(.22,1,.36,1) .5s both!important}
.hero .stats>*,.m-ready .hero .stats>*{animation:tlRise .6s cubic-bezier(.22,1,.36,1) 1.4s both!important}
.hero .stats>*:nth-child(2),.m-ready .hero .stats>*:nth-child(2){animation-delay:1.48s!important}

/* reduced motion (system setting or the site's own motion switch): static logo, everything visible */
@media (prefers-reduced-motion:reduce){
  .hero .tlogo *,.hero .badge,.hero h1,.hero .orn,.hero .tag,.hero .hero-text>.hi,.hero .cta>*,.hero .sub,.hero .arch,.hero .stats>*{animation:none!important}
  .hero .tlogo .tl-draw{stroke-dashoffset:0}
}
.no-motion .hero .tlogo *,.no-motion .hero .badge,.no-motion .hero h1,.no-motion .hero .orn,.no-motion .hero .tag,.no-motion .hero .hero-text>.hi,.no-motion .hero .cta>*,.no-motion .hero .sub,.no-motion .hero .arch,.no-motion .hero .stats>*{animation:none!important}

/* v53 fallback: keep the coin's back photo round, stacked and hidden even on older phone browsers */
.hero .tlogo .tl-flip{position:absolute;top:var(--pad);right:var(--pad);bottom:var(--pad);left:var(--pad)}
.hero .tlogo .tl-card{position:relative;width:100%;height:100%}
.hero .tlogo .tl-card>img{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.hero .tlogo .tl-card>.tl-back{object-fit:cover;-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}