.mtc{--mtc-paper:#f5f5f0;--mtc-accent:#e8c45a;position:relative;background:#080808;color:var(--mtc-paper);font-family:Rajdhani,Arial,sans-serif;isolation:isolate;overflow:hidden;box-sizing:border-box}.mtc *{box-sizing:border-box}.mtc-stage{position:relative;aspect-ratio:1.6;overflow:hidden;touch-action:pan-y;outline-offset:-4px;cursor:grab;background:#141516}.mtc-stage.mtc-dragging{cursor:grabbing}.mtc-world{position:absolute;inset:0 auto auto 0;height:100%;will-change:transform}.mtc-photo{position:absolute;top:0;height:100%;max-width:none!important;pointer-events:none;user-select:none}.mtc-pier{position:absolute;max-width:none!important;pointer-events:none;clip-path:inset(0 16% 0 17%);will-change:transform}.mtc-shade{position:absolute;inset:0;background:linear-gradient(180deg,#0009,transparent 25%,transparent 52%,#000e);pointer-events:none}.mtc-header{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:22px 4%;gap:20px;z-index:3}.mtc-nav{display:flex;gap:14px;align-items:center}.mtc-nav button{all:unset;font:600 14px/1.2 Rajdhani,Arial,sans-serif;letter-spacing:.13em;padding:12px 7px;border-bottom:2px solid transparent;cursor:pointer;color:var(--mtc-paper)}.mtc-nav button[aria-pressed=true]{border-bottom-color:var(--mtc-accent)}.mtc-title{position:absolute;left:5%;bottom:16%;width:86%;pointer-events:none;will-change:transform}.mtc-title small{font:600 clamp(9px,1.15vw,13px)/1.2 Rajdhani,Arial,sans-serif;letter-spacing:.22em;color:var(--mtc-tone)}.mtc-title h2{font:normal clamp(52px,8.8vw,106px)/.95 'Bebas Neue',Impact,sans-serif;letter-spacing:0;margin:14px 0 18px;color:var(--mtc-paper)}.mtc-title p{font:600 clamp(9px,1.05vw,12px)/1.4 Rajdhani,Arial,sans-serif;letter-spacing:.12em;margin:0;color:var(--mtc-paper)}.mtc-logo{position:absolute;width:11%;height:auto;right:6%;bottom:17%;pointer-events:none;will-change:transform}.mtc button:focus-visible,.mtc a:focus-visible,.mtc-stage:focus-visible{outline:2px solid var(--mtc-accent);outline-offset:3px}.mtc-status{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mtc-fallback{padding:24px}.mtc-fallback a{color:inherit;margin-right:20px}
@media(max-width:700px){.mtc-stage{aspect-ratio:1.08}.mtc-header{padding:16px 4% 0;flex-direction:column;gap:10px;align-items:flex-start}.mtc-nav{gap:0;width:100%;justify-content:space-between}.mtc-nav button{font-size:11px;padding:10px 4px;min-height:38px}.mtc-title{bottom:24%;left:5%}.mtc-title h2{font-size:56px;margin:9px 0 11px}.mtc-title[data-category=ACCESSORIES] h2{font-size:44px}.mtc-title p{font-size:8px;max-width:230px}.mtc-title small{font-size:8px}.mtc-logo{width:18%;bottom:24%;right:5%}.mtc-shade{background:linear-gradient(180deg,#000d,transparent 31%,transparent 49%,#000e)}}
/* Full-bleed presentation and the user's refined navigation/logo scale. */
.mtc-stage{height:100svh;aspect-ratio:auto}.mtc-header{justify-content:flex-end;padding:24px 4%}.mtc-nav{gap:20px}.mtc-nav button{font-size:12px;line-height:1;padding:7px 4px 4px;letter-spacing:.1em}.mtc-logo{width:16%;max-width:310px;bottom:18%;right:6%}.mtc-title{bottom:18%}
@media(max-width:700px){.mtc-stage{height:auto;aspect-ratio:1.08}.mtc-header{padding:14px 4%;align-items:flex-end}.mtc-nav{gap:12px;width:auto}.mtc-nav button{font-size:10px;min-height:0;padding:7px 2px 3px}.mtc-logo{width:23%;bottom:25%;right:4%}.mtc-title{bottom:25%}}

/* Extend the hit area without separating the underline from its label. */
.mtc-nav button{position:relative}.mtc-nav button::before{content:"";position:absolute;inset:-9px -4px}
/* Clip the animated world without making the stage a focus-scroll container. */
.mtc,.mtc-stage{overflow:clip}
/* Keep the approved navigation treatment when embedded in the WordPress theme. */
.mtc .mtc-nav button,.mtc .mtc-nav button:hover,.mtc .mtc-nav button:focus{background:transparent;color:var(--mtc-paper);box-shadow:none;border-radius:0}
.mtc .mtc-title small{text-transform:none}
/* Mobile uses the same moving panorama, with a full viewport and no extra emblem. */
.mtc-stage{touch-action:pan-y pinch-zoom}
.mtc[data-scroll-state="locked"] .mtc-stage{touch-action:pinch-zoom}
@media(max-width:700px){
 .mtc-stage{height:100svh;height:100dvh;aspect-ratio:auto}
 .mtc-logo{display:none}
 .mtc-header{padding:max(18px,env(safe-area-inset-top)) 24px 12px}
 .mtc-nav{width:100%;gap:12px;justify-content:space-between;flex-wrap:nowrap}
 .mtc-nav button{font-size:12px;font-weight:600;letter-spacing:.08em;padding:9px 1px 5px;white-space:nowrap;flex-shrink:0}
 .mtc-title{left:24px;bottom:120px;width:calc(100% - 48px)}
 .mtc-title small{font-size:10px;line-height:1.5;letter-spacing:.12em}
 .mtc-title h2{font-size:64px}
 .mtc-shade{background:linear-gradient(180deg,#000b 0%,#0002 16%,transparent 42%,#0004 58%,#000d 84%,#000e 100%)}
}
/* The controller assigns these cues serially; no independent looping animations. */
.mtc[data-attention="navigation"] .mtc-nav button[aria-pressed="true"],
.mtc[data-attention="oni"] .mtg-continue{animation:mtc-attention-text 1100ms ease-in-out both}
.mtc[data-attention="collection"] .mtc-title[aria-hidden="false"] .mtc-link-label::after{animation:mtc-attention-line 1100ms ease-in-out both}
@keyframes mtc-attention-text{
 0%,100%{text-shadow:0 0 0 transparent;color:var(--mtc-paper)}
 40%,55%{text-shadow:0 0 7px #fff2ccbb,0 0 19px #e4c17a99;color:#fff8e7}
}
@keyframes mtc-attention-line{
 0%{background-position:140% 0;box-shadow:0 0 0 transparent;filter:brightness(1)}
 40%{box-shadow:0 0 5px #ffe6a9,0 0 13px #d9ae6688;filter:brightness(1.6)}
 70%{background-position:-40% 0;box-shadow:0 0 3px #ffe6a977;filter:brightness(1.2)}
 100%{background-position:-40% 0;box-shadow:0 0 0 transparent;filter:brightness(1)}
}
@media(prefers-reduced-motion:reduce){.mtc[data-attention] .mtc-nav button,.mtc[data-attention] .mtg-continue,.mtc[data-attention] .mtc-link-label::after{animation:none!important}}

/* Mobile v2: larger invisible touch area; the label and underline do not move. */
@media(max-width:700px){.mtc-nav button::before{inset:auto;left:50%;top:50%;width:max(100%,44px);height:44px;transform:translate(-50%,-50%)}}

/* A decorative swipe hint joins the existing serial attention schedule. */
.mtc-swipe-light{pointer-events:none}
.mtc-stage{container-type:size}
.mtc-swipe-light{--mtc-swipe-width:clamp(22px,min(7vw,5vh),56px);display:block;position:absolute;right:max(clamp(8px,1.2vw,16px),env(safe-area-inset-right));top:52%;transform:translateY(-50%);width:var(--mtc-swipe-width);height:calc(var(--mtc-swipe-width)*1.625);z-index:2;opacity:0;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 104'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop stop-color='white' stop-opacity='.22'/%3E%3Cstop offset='.5' stop-color='white' stop-opacity='.5'/%3E%3Cstop offset='1' stop-color='white' stop-opacity='.16'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M14 4 60 52 14 100 4 89 39 52 4 15Z' fill='url(%23a)' stroke='white' stroke-opacity='.8' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M14 9 55 52 14 95' fill='none' stroke='white' stroke-opacity='.25' stroke-width='1'/%3E%3C/svg%3E");filter:drop-shadow(0 1px 3px #0009) drop-shadow(0 0 5px #fff4)}
 .mtc-swipe-light::before,.mtc-swipe-light::after{content:none}
 .mtc[data-attention="swipe"] .mtc-swipe-light{animation:mtc-swipe-light-pulse 1100ms ease-in-out both}
 .mtc[data-moving="true"] .mtc-swipe-light,.mtc[data-position="3.00000"] .mtc-swipe-light{opacity:0;visibility:hidden;animation:none}
@supports(width:1cqi){.mtc-swipe-light{--mtc-swipe-width:clamp(22px,min(7cqi,5cqb),56px);right:max(clamp(8px,1.2cqi,16px),env(safe-area-inset-right))}}
@keyframes mtc-swipe-light-pulse{0%,100%{opacity:0}50%{opacity:.78}}
@media(prefers-reduced-motion:reduce){.mtc-swipe-light{display:none!important;animation:none!important}}

/* The same corridor fills the mobile viewport behind the wider pair framing. */
.mtc-accessories-backdrop{display:none}
@media(max-width:700px){
 .mtc .mtc-stage>.mtc-accessories-backdrop{display:block;position:absolute;inset:0;width:100%;height:100%!important;max-width:none;object-fit:cover;object-position:50% 50%;transform:scale(1.4);opacity:0;filter:brightness(.42);pointer-events:none;user-select:none}
}

/* Add empty architecture only where a wide stage would reveal Accessories during Youth. */
.mtc-divider{position:absolute;top:0;height:100%;overflow:clip;pointer-events:none}
.mtc-divider-image{position:absolute;top:0;height:100%;max-width:none!important;pointer-events:none}
