/* Motion and layout for the approved illustrated direction. */
.site-header { background: var(--deep); height: 88px; }
.wordmark { flex: 0 0 auto; }
.brand-logo { width: 264px; height: auto; }
.hero { min-height: clamp(610px, 46vw, 760px); }
.hero-art { inset: -12px; z-index: -4; }
.hero-art picture { display: block; width: 100%; height: 100%; }
.hero-art img, .hero-video { width: 100%; height: 100%; object-fit: cover; object-position: 66% 50%; }
.hero-art img { opacity: 1; filter: none; }
.hero-video { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.hero.has-video-frame .hero-video { opacity: 1; }
.hero-wash { background: linear-gradient(90deg, #0b1114 0%, #0b1114f5 19%, #0b1114df 32%, #0b111485 45%, #0b111414 67%, transparent 80%), linear-gradient(0deg, #0b11147a, transparent 32%); }
.hero::after { border-color: #c8a77a42; inset: 0 18px 18px; border-top: 0; z-index: 4; }
.hero-content { padding: 72px 5.5% 100px; animation: none; }
.hero-description { max-width: 470px; }
.hero h1 { font-size: clamp(48px, 5.2vw, 80px); }
.hero-actions { margin-top: 36px; }
.motion-toggle { position: absolute; right: 36px; bottom: 32px; z-index: 5; display: inline-flex; align-items: center; gap: 9px; padding: 8px 0; border: 0; background: transparent; color: #e2caa8; font-size: 10px; text-transform: uppercase; letter-spacing: 1.7px; min-height: 44px; }
.motion-toggle[hidden] { display: none; }
.motion-toggle svg { width: 16px; height: 16px; }
.motion-toggle .play-icon { display: none; }
.motion-toggle[aria-pressed=true] .play-icon { display: block; }
.motion-toggle[aria-pressed=true] .pause-icon { display: none; }
.motion-toggle:hover span { text-decoration: underline; text-underline-offset: 5px; }
.header-cta, .header-cta:hover { border: 0; background: transparent; padding-inline: 0; }
.header-cta:hover { text-decoration: underline; text-underline-offset: 5px; }
.scroll-cue { bottom: 34px; left: 5.5%; gap: 15px; }
.scroll-line { width: 70px; height: 1px; background: linear-gradient(90deg, #c8a77a70, transparent); }
.button-gold { position: relative; overflow: hidden; }
.button-gold::after { content: ''; position: absolute; inset: -70% -80%; background: linear-gradient(110deg, transparent 42%, #fff3 50%, transparent 58%); transform: translateX(-65%); transition: transform .8s ease; pointer-events: none; }
.button-gold:hover::after, .button-gold:focus-visible::after { transform: translateX(65%); }
.text-link span, .tribe-explore > span { transition: transform .25s ease; }
.text-link:hover span, .tribe:hover .tribe-explore > span { transform: translate(3px, -2px); }
.world-section { display: grid; grid-template-columns: .85fr 2.15fr; column-gap: 42px; padding: 48px 5.5% 44px; }
.world-section .section-heading { margin: 0; display: block; padding-top: 12px; }
.world-section .section-heading h2 { color: #dfc5a0; font-size: clamp(31px, 3.1vw, 45px); }
.tribe-grid { gap: 22px; }
.tribe { height: 390px; padding: 25px; }
.tribe h3 { font-size: 32px; }
.class-portrait { overflow: hidden; min-width: 0; background: var(--paper); }
.class-portrait img { animation: none; }
.portrait-rings { border-radius: 43%; aspect-ratio: 1; }
.portrait-rings::before { border-radius: 43%; transform: rotate(28deg); }
.portrait-rings::after { border-radius: 43%; transform: rotate(-23deg); }
.class-roster { display: grid; gap: 26px; position: relative; z-index: 3; }
.roster-heading { margin: 0 0 8px; font: 500 12px/1.5 var(--body); text-transform: uppercase; letter-spacing: 2.5px; color: #806444; }
.class-choices { display: block; }
.class-choice { display: flex; align-items: center; gap: 13px; width: 100%; min-height: 44px; padding: 10px 0; border: 0; border-bottom: 1px solid #c6bead80; border-radius: 0; background: transparent; color: #69695e; text-align: left; transition: color .2s; }
.class-choice:last-child { border-bottom: 0; }
.class-choice > span:nth-child(2) { font: 600 16px/1.4 var(--display); }
.class-number { font: 400 11px/1.4 var(--body); color: #817764; }
.class-choice .choice-arrow { margin-left: auto; opacity: 0; color: #806444; }
.class-choice.is-active, .class-choice:hover { color: #262c26; }
.class-choice.is-active > span:nth-child(2) { text-decoration: underline; text-decoration-color: #ac9170; text-underline-offset: 5px; }
.class-choice.is-active .choice-arrow { opacity: 1; }
.class-choice .choice-arrow { transition: transform .25s ease; }
.class-choice:hover .choice-arrow { transform: translateX(4px); }

/* Animation is enabled only after controls and preference handling are ready. */
html[data-motion=on] .portrait-rings { animation: seal-turn 90s linear infinite; }
html[data-motion=on] .scroll-cue > span:first-child { animation: scroll-invitation 3.5s ease-in-out infinite; }
html[data-motion=on] .hero-content > * { animation: chapter-enter 1s cubic-bezier(.2,.7,.2,1) both; }
html[data-motion=on] .hero-content > :nth-child(2) { animation-delay: .12s; }
html[data-motion=on] .hero-content > :nth-child(3) { animation-delay: .24s; }


html[data-motion=on] .motion-reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
html[data-motion=on] .motion-reveal.is-visible { opacity: 1; transform: none; }
html[data-motion=on] .tribe:nth-child(2).motion-reveal { transition-delay: .12s; }
html[data-motion=paused] .hero-art, html[data-motion=paused] .hero-art img { transform: none; }
html[data-motion=paused] *, html[data-motion=paused] *::before, html[data-motion=paused] *::after { animation: none !important; transition: none !important; }
html[data-page-hidden=true] *, html[data-page-hidden=true] *::before, html[data-page-hidden=true] *::after,
.hero.is-outside *, .hero.is-outside *::before, .classes-section.is-outside .portrait-rings { animation-play-state: paused !important; }
@keyframes seal-turn { from { transform: rotate(-15deg); } to { transform: rotate(345deg); } }
@keyframes scroll-invitation { 0%, 70%, 100% { transform: translateY(0); } 85% { transform: translateY(5px); } }
@keyframes chapter-enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 1600px) { .hero-content { padding-left: max(5.5%, calc((100vw - 1400px)/2)); } }
@media (max-width: 1100px) {
  .brand-logo { width: 222px; }
  .site-header { gap: 20px; }
  .hero h1 { font-size: 58px; }
  .hero-content { padding-inline: 6%; }
  .hero-description { max-width: 380px; }
  .world-section { grid-template-columns: .85fr 2.15fr; gap: 25px; }
  .tribe { height: 340px; padding: 21px; }
  .tribe h3 { font-size: 28px; }
  .world-section .section-heading h2 { font-size: 31px; }
  .class-choice { gap: 10px; }
  .class-choice > span:nth-child(2) { font-size: 14px; }
}
@media (max-width: 800px) {
  .site-header { height: 80px; }
  .brand-logo { width: 220px; }
  .hero { min-height: 700px; }
  .hero h1 { font-size: 54px; }
  .hero-description { max-width: 330px; }
  .hero-art img, .hero-video { object-position: 72% center; }
  .hero-wash { background: linear-gradient(90deg, #0b1114f5, #0b1114b3 40%, #0b111433 85%), linear-gradient(0deg,#0b111470,transparent 45%); }
  .world-section { display: block; padding-top: 55px; }
  .world-section .section-heading { margin-bottom: 30px; padding-top: 0; }
  .tribe { height: 410px; }
  .class-roster { grid-column: 1/-1; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 32px; }
  .class-choice > span:nth-child(2) { font-size: 17px; }
}
@media (max-width: 560px) {
  .site-header { height: 74px; padding-inline: 6%; }
  .brand-logo { width: 218px; }
  .header-cta { display: none; }
  .menu-toggle { margin-left: auto; width: 44px; height: 44px; align-items: center; }
  .hero { min-height: 870px; align-items: flex-end; }
  .hero-art { inset: -8px -15% 34% -15%; }
  .hero-art img, .hero-video { object-position: 79% 50%; }
  .hero-wash { background: linear-gradient(0deg,#0b1114 4%,#0b1114 27%,#0b1114f0 38%,#0b1114b3 52%,transparent 69%); }
  .hero::after { inset: 0 12px 12px; }
  .hero-content { padding: 415px 7% 99px; }
  .hero h1 { font-size: clamp(37px, 10.4vw, 56px); }
  .hero-description { font-size: 19px; margin-top: 22px; max-width: 370px; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 15px; margin-top: 25px; }
  .hero-actions .button { width: 100%; padding: 16px 20px; font-size: 13px; }
  .hero-actions .text-link { align-self: flex-start; font-size: 15px; }
  .motion-toggle { right: 26px; bottom: 26px; font-size: 9px; min-height: 44px; }
  .scroll-cue { left: 7%; bottom: 34px; }
  .world-section { padding: 48px 7% 28px; }
  .world-section .section-heading h2 { font-size: 38px; }
  .tribe { height: 410px; padding: 27px; }
  .tribe h3 { font-size: 35px; }
  .class-roster { gap: 22px; margin-bottom: 20px; }
  .class-choice { gap: 9px; }
  .class-choice > span:nth-child(2) { font: 500 19px/1.4 var(--body); }
  .class-choice .choice-arrow { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero.has-video-frame .hero-video { opacity: 0; }
  .hero-art, .hero-art img { transform: none !important; }
  .motion-reveal { opacity: 1 !important; transform: none !important; }
}