/* VIP collection: independent feet, aura and moving body trail. */
.vip-section .section-heading { align-items: end; }
.vip-section .section-heading h2 { max-width: 650px; line-height: 1.06; letter-spacing: -.025em; text-transform: none; text-shadow: none; }
.vip-section .section-heading h2 span { color: #c7a0ff; }
.vip-counts { display: flex; gap: 1.4rem; flex-wrap: wrap; margin-top: 1.3rem; color: var(--muted); font-size: .85rem; }
.vip-counts strong { color: white; font-size: 1.1rem; margin-right: .3rem; }
.trail-showcase { --trail-color: #ffc45e; --trail-secondary: #fff4d7; position: relative; display: grid; grid-template-columns: .8fr 1.2fr; background: #0b111c; border: 1px solid #343347; margin-bottom: 1.5rem; }
.trail-showcase[data-effect="neon"] { --trail-color: #47eff3; --trail-secondary: #ff66c7; }
.trail-showcase[data-effect="frost"] { --trail-color: #a6dcff; --trail-secondary: #ecfaff; }
.trail-showcase[data-effect="dragon"] { --trail-color: #c479ff; --trail-secondary: #ef80f8; }
.trail-showcase[data-effect="emerald"] { --trail-color: #5aefa1; --trail-secondary: #e2ffb3; }
.trail-showcase[data-effect="storm"] { --trail-color: #7aaeff; --trail-secondary: #d8ecff; }
.trail-intro { padding: clamp(1.5rem, 3.5vw, 3rem); align-self: center; }
.trail-new { display: inline-flex; gap: .55rem; align-items: center; font-size: .68rem; font-weight: 800; letter-spacing: .13em; color: #d0b3ff; }
.trail-new span { font-size: 1.2rem; }
.trail-intro h3 { margin: 1.1rem 0; font: 800 clamp(2rem, 3.4vw, 3.2rem)/1.1 "Segoe UI", sans-serif; letter-spacing: -.035em; }
.trail-intro h3 span { color: var(--trail-color); transition: color .2s; }
.trail-intro > p { color: #aebaca; font-size: .95rem; line-height: 1.75; max-width: 350px; }
.trail-path { display: flex; align-items: center; gap: .8rem; margin: 1.4rem 0; }
.trail-path code { border: 1px solid #51416d; padding: .45rem .8rem; color: #e5ccff; background: #20182f; }
.trail-path > span { color: #6f7c8d; }
.trail-path strong { color: white; font-size: .9rem; }
.trail-intro .trail-combine { font-size: .78rem; color: #a3afc0; }
.trail-demo { min-width: 0; display: flex; flex-direction: column; justify-content: center; border-left: 1px solid #252a3c; background: linear-gradient(145deg,#15152b,#0b111c 65%); }
.trail-stage { position: relative; overflow: hidden; }
.trail-stage__label { position: absolute; left: 1.4rem; top: 1.2rem; z-index: 1; font: 700 .6rem/1 monospace; letter-spacing: .14em; color: #8594ad; }
.trail-art { display: block; width: 100%; height: auto; margin-top: 1rem; }
.trail-stage__caption { position: absolute; left: 1.4rem; bottom: .8rem; color: #9ba8b9; font-size: .63rem; }
.trail-motion { position: absolute; bottom: .65rem; right: 1rem; padding: .35rem .6rem; color: #c6d1dd; background: #101a27; border: 1px solid #3f4e62; cursor: pointer; font-size: .68rem; }
.trail-current { display: flex; gap: 1.2rem; align-items: baseline; padding: 1.4rem 1.6rem; border-top: 1px solid #252a3c; }
.trail-current__index { color: var(--trail-color); white-space: nowrap; font: 700 .7rem monospace; }
.trail-current h4 { margin: 0 0 .3rem; color: #f3f4ff; font-size: 1.3rem; }
.trail-current p { margin: 0; color: #aebaca; font-size: .83rem; min-height: 2.8em; }
.trail-selector { grid-column: 1/-1; display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); border-top: 1px solid #343347; }
.trail-selector button { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem; padding: 1.2rem .5rem; border: 0; border-right: 1px solid #252a3c; background: #0e1521; color: #b1bccc; font-size: .75rem; line-height: 1.4; cursor: pointer; }
.trail-selector button:last-child { border-right: 0; }
.trail-selector button > span { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; color: var(--swatch); background: color-mix(in srgb,var(--swatch) 9%,transparent); font-size: 1.5rem; }
.trail-selector button[aria-pressed="true"] { color: #fff; background: color-mix(in srgb,var(--swatch) 11%,#0b111c); box-shadow: inset 0 -3px var(--swatch); }
.trail-selector button:hover { color: #fff; background: #1b2435; }
.trail-selector button:focus-visible,.trail-motion:focus-visible { outline: 2px solid #fff; outline-offset: -4px; z-index: 2; }
.trail-bolt,.trail-snow { display: none; }
[data-effect="storm"] .trail-bolt,[data-effect="frost"] .trail-snow { display: block; }
[data-effect="storm"] .trail-ribbon--one { opacity: .18; }
[data-effect="frost"] .trail-stars { display: none; }
.trail-stream { filter: drop-shadow(0 0 7px color-mix(in srgb,var(--trail-color) 55%,transparent)); }
.trail-specks { animation: trail-flow 2.4s linear infinite; }
.trail-stars,.trail-snow { animation: trail-shimmer 2.4s ease-in-out infinite alternate; }
.trail-ribbon--two { animation: trail-shimmer 1.8s ease-in-out infinite alternate; }
.trail-showcase.is-paused *,.trail-showcase.is-offscreen * { animation-play-state: paused !important; }
@keyframes trail-flow { from { transform: translate(18px,-3px); opacity: .9; } to { transform: translate(-26px,5px); opacity: .25; } }
@keyframes trail-shimmer { from { opacity: .25; } to { opacity: .9; } }
.vip-access { grid-template-columns: 135px minmax(0,1fr); gap: 1.7rem; padding: 1.4rem; }
.vip-emblem { min-height: 145px; box-shadow: none; }
.vip-emblem strong { font-size: 4.4rem; }
.vip-access__copy h3 { font-size: clamp(1.3rem,2.5vw,2rem); text-transform: none; line-height: 1.2; }
.vip-perk { min-height: 220px; transition: border-color .2s,transform .2s; }
.vip-perk:hover { border-color: var(--perk-accent); transform: translateY(-3px); }
.vip-perk h3 { text-transform: none; letter-spacing: -.015em; }
.vip-shell { box-shadow: none; border-bottom-width: 1px; }
@media(max-width: 820px) { .trail-showcase { grid-template-columns: 1fr; } .trail-intro { padding: 1.8rem; } .trail-intro h3 br { display: none; } .trail-intro > p { max-width: 100%; } .trail-demo { border-left: 0; border-top: 1px solid #252a3c; } .trail-art { max-height: 360px; } .trail-selector { grid-template-columns: repeat(3,minmax(0,1fr)); } .trail-selector button:nth-child(3) { border-right: 0; } .trail-selector button:nth-child(-n+3) { border-bottom: 1px solid #252a3c; } }
@media(max-width: 480px) { .trail-intro { padding: 1.4rem; } .trail-selector button { font-size: .7rem; padding: 1rem .35rem; } .trail-current { padding: 1.2rem; gap: .7rem; } .trail-current h4 { font-size: 1.1rem; } .trail-current p { font-size: .78rem; } .vip-counts { gap: .5rem 1rem; } .vip-access { grid-template-columns: 1fr; } .vip-emblem { display: none; } .trail-stage__label { font-size: .5rem; } .trail-stage__caption { font-size: .56rem; left: .7rem; } .trail-motion { right: .5rem; } }
@media(prefers-reduced-motion: reduce) { .trail-showcase:not(.is-paused) .trail-specks,.trail-showcase:not(.is-paused) .trail-stars,.trail-showcase:not(.is-paused) .trail-snow,.trail-showcase:not(.is-paused) .trail-ribbon--two { animation-duration: 10s; } .vip-perk:hover { transform: none; } }