/* 1. Foundations. All production styles belong to the hero or its transition. */
.mt-motion { --metal: 222,178,94; --progress: 0; --exit: 0; position:relative; height:310svh; color:#f1f0ed; background:#080807; font-family:Rajdhani,sans-serif; }
.mt-motion *, .mt-motion-transition * { box-sizing:border-box; }
.mt-motion__stage { position:sticky; top:0; height:100svh; min-height:540px; overflow:hidden; isolation:isolate; background:radial-gradient(ellipse at 50% 40%,#30271a 0%,#19160f 32%,#0c0b08 65%,#070706 100%); }
.mt-motion__atmosphere { position:absolute; inset:-15%; pointer-events:none; opacity:.48; background:radial-gradient(ellipse at 49% 32%,rgba(var(--metal),.20),transparent 42%); transform:translateY(calc(var(--progress) * -7%)); }
.mt-motion__topline { position:absolute; z-index:4; top:100px; left:4.4%; right:4.4%; display:flex; justify-content:space-between; color:#a79678; font-size:10px; font-weight:600; letter-spacing:.24em; opacity:calc(1 - var(--exit)); }
.mt-motion__object { position:absolute; width:min(68vh,660px); height:min(68vh,660px); left:50%; top:34.5%; transform:translate(-50%,-50%); z-index:2; }
.mt-motion__canvas { display:block; width:100%; height:100%; opacity:0; }
.mt-motion[data-renderer="webgl"] .mt-motion__canvas { opacity:1; }
.mt-motion__fallback { position:absolute; width:74%; height:74%; object-fit:contain; left:13%; top:13%; }
.mt-motion[data-renderer="webgl"] .mt-motion__fallback { visibility:hidden; }
.mt-motion__wordmark { position:absolute; z-index:3; bottom:14.5%; left:3%; width:94%; text-align:center; pointer-events:none; transform:translateY(calc(var(--progress) * -12px)); opacity:calc(1 - var(--exit)); }
.mt-motion__overline { display:block; margin-bottom:15px; font-size:10px; letter-spacing:.5em; color:#c8ae7a; font-weight:500; }
.mt-motion h1 { font-family:'Bebas Neue',Impact,sans-serif; font-size:clamp(52px,10.8vw,166px); line-height:.89; letter-spacing:.008em; font-weight:400; margin:0; background:linear-gradient(175deg,#fff2c9 14%,#d8b363 50%,#a57932 87%); color:#f4f3ef; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.mt-motion__wordmark p { margin:20px 0 0; color:#b6a482; font-size:11px; font-weight:500; letter-spacing:.34em; }
/* 2. Restrained reflections below the emblem. */
.mt-motion__floor { position:absolute; inset:58% -15% -25%; background:radial-gradient(ellipse at 50% 52%,rgba(var(--metal),.09),transparent 38%); transform:translateY(calc(var(--progress) * 80px)); }
.mt-motion__floor span { position:absolute; left:28%; right:28%; top:51%; height:1px; background:linear-gradient(90deg,transparent,rgba(var(--metal),.34),transparent); box-shadow:0 2px 20px rgba(var(--metal),.13); }
.mt-motion__bottomline { position:absolute; z-index:4; bottom:clamp(32px,7svh,76px); left:4.4%; right:4.4%; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:end; opacity:calc(1 - var(--exit)); }
.mt-motion a { color:inherit; text-decoration:none; }
.mt-motion__skip { justify-self:start; padding:14px 0; font-size:11px; letter-spacing:.16em; border-bottom:1px solid #8b713e; }
.mt-motion__skip span { margin-left:30px; font-size:19px; }
.mt-motion__scroll { display:flex; align-items:center; flex-direction:column; gap:13px; color:#a28c63; font-size:9px; letter-spacing:.18em; }
.mt-motion__scroll-line { display:block; width:1px; height:35px; background:linear-gradient(transparent,#b09255); }
.mt-motion__material { grid-column:3; grid-row:1; justify-self:end; width:max-content; text-align:right; font-size:10px; letter-spacing:.16em; }
.mt-motion__material > span { display:block; color:#aa915f; margin-bottom:7px; font-size:9px; }
.mt-motion__material strong { font-weight:500; }
.mt-motion__progress { position:absolute; height:1px; bottom:0; width:100%; background:#23282c; }
.mt-motion__progress span { display:block; height:100%; width:calc(var(--progress) * 100%); background:rgb(var(--metal)); }
.mt-motion a:focus-visible,.mt-motion button:focus-visible { outline:2px solid #ded5b9; outline-offset:6px; }
/* 3. Parallax bridge: normal-flow foreground over the outgoing sticky scene. */
/* Single original Golden Boy crown crop; no invented or duplicated bevel layers. */
.mt-motion-transition { --bridge:0;  position:relative; z-index:5; min-height:640px; margin-top:var(--bridge-overlap,-225svh); padding-top:30svh; overflow:clip; color:#e8e6df; background:linear-gradient(180deg,transparent 0%,#090908 22%,#050505 100%); font-family:Rajdhani,sans-serif; }
.mt-motion-transition::before { content:""; position:absolute; inset:14svh 0 0; pointer-events:none; background:radial-gradient(ellipse at 50% 58%,#b17c1919,transparent 44%),url('assets/stone-background.png') center/cover; opacity:.82; mask-image:linear-gradient(transparent,#000 18%,#000 75%,transparent); }
.mt-motion-transition__copy { position:relative; z-index:2; padding:10svh 0 0; text-align:center; }
.mt-motion-transition h2 { font:400 clamp(68px,9vw,136px)/.95 'Bebas Neue',Impact,sans-serif; letter-spacing:.01em; margin:26px 0 25px; }
.mt-motion-transition h2 em { display:inline-block; font-style:normal; color:#d2ae66; }
/* The original five-pipe asset and menu use the same width and source coordinates.
   Endpoints measured in the 1312px source: 171,383,652,915,1162. */
.mt-motion-transition__signature { position:relative; width:min(calc(100% - 160px),1100px); margin:30px auto 0; }
.mt-motion-transition__signature img { display:block; width:100%; height:auto; }

.mt-motion__stage::before{content:"";position:absolute;inset:0;pointer-events:none;background:url('assets/stone-background.png') center/cover;opacity:.17;mask-image:radial-gradient(ellipse at 19% 29%,#000,transparent 32%),radial-gradient(ellipse at 80% 65%,#000,transparent 25%)}
.mt-motion__stage::after{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;background:url('assets/heat-stone.png') 5% 24%/34% auto no-repeat,url('assets/heat-stone.png') 95% 78%/22% auto no-repeat;mix-blend-mode:screen;opacity:.13;mask-image:radial-gradient(ellipse at 22% 31%,#000,transparent 29%),radial-gradient(ellipse at 85% 75%,#000,transparent 20%)}
/* One continuous texture prevents rectangular image-tile edges beside the logo.
   Elliptical masks localize backlight without clipping it at a tile boundary. */
.mt-motion-transition::after{content:"";position:absolute;inset:30% 0 0;pointer-events:none;background:url('assets/heat-stone.png') center/cover no-repeat;opacity:.22;mix-blend-mode:screen;mask-image:radial-gradient(ellipse 26% 18% at 14% 24%,#000,transparent 100%),radial-gradient(ellipse 20% 25% at 89% 66%,#000,transparent 100%)}
.mt-motion-transition__gold{position:absolute;top:0;left:-32%;width:164%;max-width:none!important;height:auto;pointer-events:none;overflow:visible;transform:translateY(calc(var(--bridge) * -100px));transform-origin:50% 40%;filter:drop-shadow(0 20px 18px #0008)}
.mt-gold-particles{opacity:0;transition:opacity .18s linear}

/* Mobile extra scroll span: 80svh gives the crown room to enter from below.
   Crown at 164% crops the long side strokes while retaining the upper corners. */
/* 4. Responsive geometry, including landscape. No fixed-width canvas. */
@media(max-width:767px),(max-width:932px) and (pointer:coarse) {
 .mt-motion { height:180svh; }
 .mt-motion__stage { min-height:0; }
 .mt-motion__topline { top:92px; left:6%; right:6%; font-size:8px; letter-spacing:.15em; }
 .mt-motion__topline span:last-child { display:none; }
 .mt-motion__object { width:104vw; height:104vw; max-width:68svh; max-height:68svh; top:43.5%; }
 .mt-motion__wordmark { bottom:21%; left:5%; width:90%; }
 .mt-motion h1 { font-size:10.8vw; white-space:nowrap; }
 .mt-motion__overline { font-size:8px; letter-spacing:.28em; margin-bottom:15px; }
 .mt-motion__wordmark p { font-size:8px; letter-spacing:.15em; max-width:300px; margin:14px auto 0; }
 .mt-motion__bottomline { left:6%; right:6%; bottom:6%; grid-template-columns:1fr 1fr; }
 .mt-motion__skip { font-size:8px; letter-spacing:.06em; }
 .mt-motion__skip span { margin-left:10px; font-size:15px; }
 .mt-motion__scroll { position:absolute; width:100%; bottom:-26px; font-size:7px; }
 .mt-motion__scroll-line { display:none; }
 .mt-motion__material { grid-column:2; font-size:8px; }
 .mt-motion-transition { min-height:600px; margin-top:var(--bridge-overlap,-15svh); padding-top:21svh; }

 .mt-motion-transition__copy { padding:10svh 0 0; }
 .mt-motion-transition h2 { font-size:20vw; }
 .mt-motion-transition__gold{width:148%;left:-24%;top:7svh;transform:translateY(calc(-1 * var(--crown-rise,0px)))}
 .mt-motion-transition__signature{margin-top:24px}
}
@media(max-width:767px){.mt-motion-transition__signature{width:100%}}
@media(max-height:500px) and (orientation:landscape) {
 .mt-motion__stage { min-height:0; }
 .mt-motion__topline { top:76px; font-size:8px; }
 .mt-motion__object { width:78svh; height:78svh; top:43%; }
 .mt-motion__wordmark { bottom:14%; }
 .mt-motion h1 { font-size:12svh; }
 .mt-motion__overline { display:none; }
 .mt-motion__wordmark p { margin-top:8px; font-size:7px; }
 .mt-motion__bottomline { bottom:5%; }
 .mt-motion__scroll { display:none; }
 .mt-motion-transition h2 { font-size:80px; }
}
/* 5. Respect system reduced-motion preference; no visible motion toggle. */
.mt-motion[data-reduced="true"] { height:100svh; }
.mt-motion[data-reduced="true"] .mt-motion__scroll { display:none; }
.mt-motion[data-reduced="true"] + .mt-motion-transition { margin-top:0; }
@media(prefers-reduced-motion:reduce) {
 :root:not([data-preview-motion="on"]) .mt-motion { height:100svh; }
 :root:not([data-preview-motion="on"]) .mt-motion-transition { margin-top:0; }
 :root:not([data-preview-motion="on"]) .mt-motion__scroll { display:none; }
 :root:not([data-preview-motion="on"]) .mt-gold-particles{display:none}
 :root:not([data-preview-motion="on"]) .mt-motion__wordmark,:root:not([data-preview-motion="on"]) .mt-motion-transition__gold,:root:not([data-preview-motion="on"]) .mt-motion-transition__copy{transform:none}
}
/* Mobile roof reflection travels across the shallow top plane independently. */
[data-crown-roof-shine]{display:none}
@media(max-width:767px),(max-width:932px) and (pointer:coarse){
 [data-crown-roof-shine]{display:block;opacity:.65}
 [data-crown-shine]{clip-path:url(#mt-gold-front-plane)}
 [data-crown-shine] path{transform:scaleX(1.22);transform-origin:center}
}