/* Role-specific timings live in design.css: responsive controls, deliberate
   text, and longer photographic/hero reveals. No extra navigation dwell. */
.m-loader{display:none}
.m-first .m-loader{position:fixed;inset:0;z-index:90;display:grid;place-content:center;gap:1.6rem;background:var(--brand-background);pointer-events:none;clip-path:inset(0);transition:clip-path var(--motion-curtain) var(--ease),visibility 0s var(--motion-curtain)}
.m-loader img{width:clamp(12rem,22vw,18rem);height:auto}
.m-loader-line{height:1px;background:var(--brand-cyan);transform-origin:left;animation:m-line-load 900ms var(--ease) both}
.m-first.m-enter .m-loader{clip-path:inset(0 0 100%);visibility:hidden}
.m-line{display:block;overflow:hidden;padding:.09em 0 .12em;margin:-.09em 0 -.12em}
.m-line>span{display:block}
.m-swap{display:inline-grid;overflow:hidden;vertical-align:bottom;line-height:1.4}
.m-swap>span{grid-area:1/1;display:block;transition:transform var(--motion-ui) var(--ease)}
.m-swap>span[aria-hidden]{transform:translateY(110%)}
:is(a,button):is(:hover,:focus-visible) .m-swap>span:first-child{transform:translateY(-110%)}
:is(a,button):is(:hover,:focus-visible) .m-swap>span[aria-hidden]{transform:translateY(0)}
.m-ready :is([data-motion="heading"],[data-motion="page-title"]) .m-line>span{transform:translateY(105%);transition:transform var(--motion-heading) var(--ease)}
.m-ready.m-enter :is([data-motion="heading"],[data-motion="page-title"]).m-in .m-line>span{transform:translateY(0)}
.m-ready [data-motion="heading"] .m-line:nth-child(2)>span{transition-delay:var(--motion-stagger)}
.m-ready [data-motion="page-title"] .m-line>span{transition-delay:130ms}
.m-ready [data-motion="page-title"] .m-line:nth-child(2)>span{transition-delay:220ms}
.m-ready [data-motion="page-kicker"]{opacity:0;transition:opacity var(--motion-metadata) var(--ease) 80ms}
.m-ready.m-enter [data-motion="page-kicker"]{opacity:1}
.m-ready :is([data-motion="image"],[data-motion="page-image"]){clip-path:inset(0 0 100%);transition:clip-path var(--motion-image) var(--ease)}
.m-ready.m-enter :is([data-motion="image"],[data-motion="page-image"]).m-in{clip-path:inset(0)}
.m-ready [data-motion="page-image"]{transition-delay:240ms}
.m-ready [data-motion="identity"]{clip-path:inset(0 0 100%);transition:clip-path var(--motion-value) var(--ease)}
.m-ready.m-enter [data-motion="identity"].m-in{clip-path:inset(0)}
/* The hero gets one timed entrance; its image leads, next-race information closes. */
.m-preparing main h1{visibility:hidden}
.m-preparing .h-hero-photograph{clip-path:inset(0 0 100%)}
.m-ready .h-hero-photograph{clip-path:inset(0 0 100%);transition:clip-path var(--motion-hero) var(--ease)}
.m-ready .h-hero-image{transform:scale(1.04);transition:transform var(--motion-hero-settle) var(--ease)}
.m-ready.m-enter .h-hero-photograph{clip-path:inset(0)}
.m-ready.m-enter .h-hero-image{transform:scale(1)}
.m-ready .h-hero [data-motion="page-title"] .m-line>span{transition-duration:var(--motion-hero);transition-delay:240ms}
.m-ready .h-hero [data-motion="page-title"] .m-line:nth-child(2)>span{transition-delay:330ms}
.m-ready .h-hero-support p,.m-ready .h-hero-support .h-entry,.m-ready .h-hero-support .button,.m-ready .h-hero-notes,.m-ready .h-next-race{opacity:0;transition:opacity var(--motion-text) var(--ease)}
.m-ready .h-hero-support p,.m-ready .h-hero-support .h-entry{transition-delay:450ms}.m-ready .h-hero-support .button{transition-delay:540ms}.m-ready .h-hero-notes{transition-delay:620ms}.m-ready .h-next-race{transition-delay:730ms}
.m-ready :is(.h-hero-notes,.h-next-race){transition-duration:var(--motion-metadata)}
.m-ready.m-enter :is(.h-hero-support p,.h-hero-support .h-entry,.h-hero-support .button,.h-hero-notes,.h-next-race){opacity:1}
/* Editorial stories reveal image, metadata and headline in that order. */
.m-ready [data-motion="story"] :is(.h-story-image,.i-story-image){clip-path:inset(0 0 100%);transition:clip-path var(--motion-image) var(--ease)}
.m-ready [data-motion="story"] :is(.h-story-meta,.i-story-meta){opacity:0;transition:opacity var(--motion-metadata) var(--ease) 340ms}
.m-ready [data-motion="story"] :is(h2,h3){clip-path:inset(0 0 100%);transition:clip-path var(--motion-heading) var(--ease) 430ms,transform var(--motion-ui) var(--ease)}
.m-ready.m-enter [data-motion="story"].m-in :is(.h-story-image,.i-story-image,h2,h3){clip-path:inset(0)}
.m-ready.m-enter [data-motion="story"].m-in :is(.h-story-meta,.i-story-meta){opacity:1}
.h-story-image:after{content:"";position:absolute;inset:auto 0 0;height:2px;background:var(--brand-cyan);transform:scaleX(0);transform-origin:left;transition:transform var(--motion-ui) var(--ease)}
:is(.h-story,.i-story):is(:hover,:focus-within) :is(.h-story-image,.i-story-image):after{transform:scaleX(1)}
@media(hover:hover){:is(.h-story,.i-story):hover img{transform:scale(1.025)}:is(.h-story,.i-story):hover :is(h2,h3){transform:translateX(3px)}}
/* Calendar rows: separator, date/round, circuit, then state. */
.m-ready [data-motion="race"]{border-top-color:transparent}
.m-ready [data-motion="race"]:before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--brand-line);transform:scaleX(0);transform-origin:left;transition:transform var(--motion-line) var(--ease),background var(--motion-ui) var(--ease)}
.m-ready [data-motion="race"] .i-race-main>*{opacity:0;transform:translateY(5px);transition:opacity var(--motion-row) var(--ease),transform var(--motion-row) var(--ease)}
.m-ready [data-motion="race"] .i-race-round{transition-delay:90ms}.m-ready [data-motion="race"] .i-race-date{transition-delay:180ms}.m-ready [data-motion="race"] .i-race-track{transition-delay:270ms}.m-ready [data-motion="race"] .race-status{transition-delay:360ms}.m-ready [data-motion="race"] .i-arrow{transition-delay:450ms}
.m-ready.m-enter [data-motion="race"].m-in:before{transform:scaleX(1)}
.m-ready.m-enter [data-motion="race"].m-in .i-race-main>*{opacity:1;transform:translateY(0)}
.m-ready [data-motion="race"]:is(:hover,:focus-within):before{background:var(--brand-cyan)}
.i-race-track{transition:transform var(--motion-ui) var(--ease)}
.i-race-main:is(:hover,:focus-visible) .i-race-track{transform:translateX(4px)}
.m-ready.m-enter [data-motion="race"].m-in .i-race-main:is(:hover,:focus-visible) .i-race-track{transform:translateX(4px);transition-delay:0ms}
.m-ready.m-enter [data-motion="race"].m-in .i-race-main:is(:hover,:focus-visible) .i-arrow{transform:translate(3px,-3px);transition-delay:0ms}
/* Native cross-document transitions preserve back/forward and modified clicks. */
@view-transition{navigation:auto}
::view-transition{background:var(--brand-background);pointer-events:none}
::view-transition-group(site-header){animation-duration:var(--motion-nav);animation-timing-function:var(--ease)}
::view-transition-old(site-header),::view-transition-new(site-header){animation-duration:var(--motion-nav);animation-timing-function:var(--ease)}
::view-transition-old(root){animation:m-page-out var(--motion-nav) var(--ease) both}
::view-transition-new(root){animation:m-page-in var(--motion-page) var(--ease) both}
@keyframes m-page-out{to{opacity:0}}
@keyframes m-page-in{from{clip-path:inset(0 0 100%)}to{clip-path:inset(0)}}
@keyframes m-line-load{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){
 @view-transition{navigation:none}
 .m-loader{display:none!important}
 .m-swap>span[aria-hidden]{display:none}
 html main h1{visibility:visible!important}
 html .m-line>span,html .m-swap>span,html [data-motion],html [data-motion] *,html .h-hero-photograph,html .h-hero-image,html .h-hero-support p,html .h-hero-support .h-entry,html .h-hero-support .button,html .h-hero-notes,html .h-next-race{clip-path:none!important;transform:none!important;opacity:1!important;transition:none!important;animation:none!important}
 html [data-motion="race"]{border-top-color:var(--brand-line)}
}

/* Inner pages use finite Web Animations only AFTER viewport entry. There is
   deliberately no CSS waiting state, opacity:0 class or hidden photo mask.
   The homepage keeps its approved lifecycle and choreography above. */
[data-reveal-line]{position:relative}
[data-reveal-line]:before{content:"";position:absolute;pointer-events:none;inset:0 0 auto;height:1px;background:var(--brand-cyan);transform-origin:left;opacity:0}
.i-partner-entry[data-reveal-line]:before{inset:auto 0 0}
[data-reveal-line="vertical"]:before{inset:0 auto 0 -1.25rem;width:1px;height:auto;background:var(--brand-line);opacity:1;transform-origin:top}
.i-reveal-running[data-reveal-line="horizontal"]:before{animation:i-rule-reveal 1000ms var(--ease)}
.i-reveal-running[data-reveal-line="vertical"]:before{animation:i-timeline-reveal var(--motion-line) var(--ease)}
@keyframes i-rule-reveal{0%{transform:scaleX(0);opacity:.8}65%{transform:scaleX(1);opacity:.8}100%{transform:scaleX(1);opacity:0}}
@keyframes i-timeline-reveal{from{transform:scaleY(0)}to{transform:scaleY(1)}}
/* Preserve the existing hover language; entry animations release all styles. */
html[data-page]:not([data-page="home"]) .i-story-copy h2 a{background-image:linear-gradient(var(--brand-cyan),var(--brand-cyan));background-size:0 1px;background-position:left bottom;background-repeat:no-repeat;transition:background-size var(--motion-ui) var(--ease)}
html[data-page]:not([data-page="home"]) .i-story-copy h2 a:is(:hover,:focus-visible){background-size:100% 1px}
html[data-page]:not([data-page="home"]) .i-partner-entry{transition:border-color var(--motion-ui) var(--ease)}
html[data-page]:not([data-page="home"]) .i-partner-entry:is(:hover,:focus-visible){border-color:var(--brand-cyan)}
@media(prefers-reduced-motion:reduce){
 html[data-page]:not([data-page="home"]) [data-reveal],html[data-page]:not([data-page="home"]) [data-reveal] *{animation:none!important;transition:none!important;transform:none!important;clip-path:none!important;opacity:1!important}
 [data-reveal-line]:before{animation:none!important;transform:none!important}
 [data-reveal-line="horizontal"]:before{display:none}
 html[data-page]:not([data-page="home"]) .i-story-copy h2 a{transition:none}
}