/* ENTER WILD ONES — final homepage presentation pass.
   Purposefully loaded after home.css and home-regression-fixes.css so these
   refinements remain isolated from application, ticketing, payment and admin UI. */

/* Match the festival names in the cycle statement to the realm numeral palette. */
body.cinematic-home .v2-cycle-summary .realm-name{
  display:inline-block;
  font-weight:760;
  letter-spacing:.055em;
  text-shadow:0 0 18px currentColor;
  text-rendering:geometricPrecision;
}
body.cinematic-home .v2-cycle-summary .realm-aureva{color:#f1d68c}
body.cinematic-home .v2-cycle-summary .realm-halora{color:#72d9e8}
body.cinematic-home .v2-cycle-summary .realm-sunveil{color:#ff7a3a}
body.cinematic-home .v2-cycle-summary .realm-nocturne{color:#b48cff}

/* Passport finale — stronger hierarchy, correct emblem proportions and a more
   intentional transition from the realm sequence into the account experience. */
body.cinematic-home .v2-passport{
  padding:clamp(126px,10vw,170px) max(24px,6vw) clamp(138px,11vw,186px);
  background:
    radial-gradient(ellipse at 50% 24%,rgba(240,207,122,.105),transparent 28%),
    radial-gradient(ellipse at 50% 72%,rgba(142,110,218,.055),transparent 36%),
    linear-gradient(180deg,#020307 0%,#050407 48%,#010204 100%);
}
body.cinematic-home .v2-passport::after{
  top:52px;
  width:min(500px,62vw);
  background:linear-gradient(90deg,transparent,rgba(240,207,122,.42),transparent);
}

/* The supplied master artwork is square. Lock both intrinsic and rendered
   proportions so browser/device layout cannot stretch the watermark. */
body.cinematic-home .v2-passport-mark{
  display:block;
  left:50%;
  top:48%;
  width:min(600px,72vw);
  height:auto!important;
  max-width:none;
  aspect-ratio:1 / 1;
  object-fit:contain;
  object-position:center;
  transform:translate(-50%,-50%);
  transform-origin:center;
  opacity:.045;
  filter:saturate(.96) contrast(1.03) brightness(1.04);
  pointer-events:none;
  user-select:none;
}

body.cinematic-home .v2-passport .v2-kicker{
  margin-bottom:18px;
  color:#f0cf7a;
  font-size:10px;
  font-weight:800;
  letter-spacing:.39em;
  text-shadow:0 0 22px rgba(240,207,122,.16);
}
body.cinematic-home .v2-passport h2{
  max-width:9.7ch;
  margin:0 auto 28px;
  color:#fbf4e9;
  font-size:clamp(56px,6.8vw,98px);
  line-height:.94;
  letter-spacing:-.052em;
  text-wrap:balance;
  text-shadow:
    0 0 24px rgba(240,207,122,.07),
    0 18px 52px rgba(0,0,0,.52);
}
body.cinematic-home .v2-passport>p:not(.v2-kicker){
  max-width:780px;
  margin:0 auto 31px;
  color:#d1c7bb;
  font-size:clamp(15px,1.35vw,18px);
  line-height:1.82;
  letter-spacing:.012em;
}
body.cinematic-home .v2-passport-features{
  gap:10px 30px;
  margin:5px auto 36px;
  color:#9b9185;
  font-size:8.5px;
  font-weight:650;
  letter-spacing:.22em;
}
body.cinematic-home .v2-passport-features span+span::before{
  left:-18px;
  color:rgba(240,207,122,.58);
}
body.cinematic-home .v2-passport .button{
  min-width:min(360px,92vw);
  min-height:62px;
  padding:0 30px;
  border:1px solid rgba(255,239,195,.28);
  border-radius:2px;
  background:linear-gradient(180deg,#efd78f 0%,#d9b660 52%,#c39239 100%);
  color:#100b04;
  font-size:10.5px;
  font-weight:850;
  letter-spacing:.16em;
  text-transform:uppercase;
  box-shadow:
    0 18px 52px rgba(199,151,47,.22),
    inset 0 1px 0 rgba(255,255,255,.30);
  transition:transform .2s ease,filter .2s ease,box-shadow .2s ease;
}
body.cinematic-home .v2-passport .button:hover,
body.cinematic-home .v2-passport .button:focus-visible{
  transform:translateY(-2px);
  filter:brightness(1.045);
  box-shadow:
    0 22px 62px rgba(199,151,47,.29),
    inset 0 1px 0 rgba(255,255,255,.34);
}

@media(max-width:860px){
  body.cinematic-home .v2-cycle-summary .realm-name{letter-spacing:.04em}
  body.cinematic-home .v2-passport{
    padding:104px 20px 116px;
  }
  body.cinematic-home .v2-passport::after{top:36px}
  body.cinematic-home .v2-passport-mark{
    top:45%;
    width:min(520px,108vw);
    opacity:.038;
  }
  body.cinematic-home .v2-passport .v2-kicker{
    font-size:8.5px;
    letter-spacing:.32em;
  }
  body.cinematic-home .v2-passport h2{
    max-width:10ch;
    margin-bottom:23px;
    font-size:clamp(48px,13vw,66px);
    line-height:.98;
  }
  body.cinematic-home .v2-passport>p:not(.v2-kicker){
    max-width:35rem;
    margin-bottom:27px;
    font-size:14.5px;
    line-height:1.75;
  }
  body.cinematic-home .v2-passport-features{
    gap:9px 16px;
    margin-bottom:30px;
    font-size:7.5px;
    letter-spacing:.16em;
  }
  body.cinematic-home .v2-passport-features span+span::before{display:none}
  body.cinematic-home .v2-passport .button{
    width:min(100%,340px);
    min-width:0;
    min-height:56px;
    border-radius:2px;
    font-size:10px;
  }
}

@media(max-width:430px){
  body.cinematic-home .v2-passport{padding-inline:18px}
  body.cinematic-home .v2-passport-mark{width:min(560px,128vw)}
  body.cinematic-home .v2-passport-features{max-width:330px}
}


/* Realm logo clarity.
   The approved homepage masters are 1200x1200 raster artwork. Keep their rendered
   size inside the source pixel budget at common desktop zoom levels, and avoid
   filtered/transformed image layers that can soften fine wordmark lettering. */
body.cinematic-home .v2-realm-art{
  transform:none;
}
body.cinematic-home .v2-realm-art .realm-logo-frame{
  width:min(100%,560px);
}
body.cinematic-home .v2-realm-art .realm-logo{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  aspect-ratio:1 / 1;
  object-fit:contain;
  image-rendering:auto;
  transform:none;
  filter:none;
  backface-visibility:visible;
}
body.cinematic-home .v2-realm:hover .realm-logo{
  transform:none;
  filter:none;
}

@media(min-width:1600px){
  body.cinematic-home .v2-realm-art .realm-logo-frame{
    width:min(100%,600px);
  }
}

@media(max-width:1100px){
  body.cinematic-home .v2-realm-art .realm-logo-frame{
    width:min(100%,520px);
  }
}

@media(max-width:860px){
  body.cinematic-home .v2-realm-art .realm-logo-frame{
    width:min(92vw,440px);
  }
}

@media(max-width:430px){
  body.cinematic-home .v2-realm-art .realm-logo-frame{
    width:min(90vw,390px);
  }
}


/* Homepage closeout polish — carry the shared Four Realms gradient language
   through the Passport finale without sacrificing supporting-copy readability. */
body.cinematic-home main .v2-passport .v2-kicker,
body.cinematic-home main .v2-passport h2{
  color:#f2d67b;
  background-image:var(--wo-realm-gradient);
  background-size:100% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:none;
}
body.cinematic-home main .v2-passport .v2-passport-copy{
  color:#d1c7bb;
  background-image:var(--wo-support-gradient);
  background-size:100% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
body.cinematic-home main .v2-passport .v2-passport-features,
body.cinematic-home main .v2-passport .v2-passport-note{
  color:#bfb4a5;
  background-image:var(--wo-support-gradient);
  background-size:100% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
body.cinematic-home main .v2-passport .v2-passport-note{
  filter:saturate(.92) brightness(.82);
}

/* Homepage masthead — increase the optical size of the supplied master mark while
   keeping the header compact enough that the hero still owns the first viewport. */
@media(min-width:861px){
  body.cinematic-home{--bar-height:88px}
  body.cinematic-home .topbar{min-height:88px}
  body.cinematic-home.scrolled .topbar{min-height:76px}
  body.cinematic-home .brand-icon{
    width:96px;
    height:74px;
    flex:0 0 96px;
    overflow:visible;
  }
  body.cinematic-home .brand-icon img{
    width:88px!important;
    height:88px!important;
    max-width:none!important;
    object-fit:contain!important;
    transform:none!important;
    transform-origin:left center!important;
  }
  body.cinematic-home .v2-progress{top:88px}
  body.cinematic-home.scrolled .v2-progress{top:76px}
}

/* Homepage footer — remove the oversized square lockup and dead vertical space.
   The footer should read as a compact closing signature, not another hero. */
body.cinematic-home .site-footer{
  grid-template-columns:92px minmax(220px,1fr) minmax(250px,auto);
  gap:clamp(14px,2.5vw,36px);
  padding:16px max(5vw,env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(5vw,env(safe-area-inset-left));
  box-shadow:inset 0 18px 48px rgba(0,0,0,.18);
}
body.cinematic-home .site-footer .footer-brand{
  width:92px;
  margin:0;
}
body.cinematic-home .site-footer .footer-brand .footer-lockup,
body.cinematic-home .site-footer .footer-brand .web-lockup{
  --lockup-width:92px;
  width:92px;
  max-width:92px;
}
body.cinematic-home .site-footer nav{
  font-size:9px;
  letter-spacing:.12em;
}
body.cinematic-home .site-footer nav a{
  min-height:36px;
  padding:5px 12px;
}
body.cinematic-home .site-footer>span{
  max-width:320px;
  font-size:7.5px;
  line-height:1.55;
  letter-spacing:.17em;
}

/* Mobile: larger masthead emblem + tighter closing footer. */
@media(max-width:860px){
  body.cinematic-home{--bar-height:72px}
  body.cinematic-home .topbar,
  body.cinematic-home.scrolled .topbar{
    min-height:72px;
    padding-top:6px;
    padding-bottom:6px;
  }
  body.cinematic-home .brand{min-height:58px}
  body.cinematic-home .brand-icon{
    width:58px;
    height:58px;
    flex:0 0 58px;
  }
  body.cinematic-home .brand-icon img{
    width:100px!important;
    height:100px!important;
    left:-21px!important;
    top:-2px!important;
  }
  body.cinematic-home .v2-hero{padding-top:72px}
  body.cinematic-home .site-footer{
    grid-template-columns:1fr;
    justify-items:center;
    gap:5px;
    padding:14px max(18px,env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
    text-align:center;
  }
  body.cinematic-home .site-footer .footer-brand{
    justify-self:center;
    width:76px;
  }
  body.cinematic-home .site-footer .footer-brand .footer-lockup,
  body.cinematic-home .site-footer .footer-brand .web-lockup{
    --lockup-width:76px;
    width:76px;
    max-width:76px;
  }
  body.cinematic-home .site-footer nav{
    width:100%;
    max-width:330px;
    justify-content:center;
  }
  body.cinematic-home .site-footer nav a{
    min-height:34px;
    padding:4px 10px;
  }
  body.cinematic-home .site-footer>span{
    justify-self:center;
    width:100%;
    max-width:320px;
    margin-top:0;
    padding-top:8px;
    border-top:1px solid rgba(255,255,255,.07);
    text-align:center;
  }
}

@media(max-width:420px){
  body.cinematic-home .brand-label{font-size:8.5px}
  body.cinematic-home .site-footer .footer-brand{width:70px}
  body.cinematic-home .site-footer .footer-brand .footer-lockup,
  body.cinematic-home .site-footer .footer-brand .web-lockup{
    --lockup-width:70px;
    width:70px;
    max-width:70px;
  }
}


/* Final masthead scale correction.
   The source is a square master lockup, so the emblem itself occupies only part
   of the source canvas. Render the master much larger inside a controlled crop
   so the visible Four Realms emblem is unmistakably prominent. */
@media(min-width:861px){
  body.cinematic-home{--bar-height:94px}
  body.cinematic-home .topbar{min-height:94px;padding-top:5px;padding-bottom:5px}
  body.cinematic-home.scrolled .topbar{min-height:82px}
  body.cinematic-home .brand{min-height:82px}
  body.cinematic-home .brand-icon{
    position:relative;
    width:118px;
    height:82px;
    flex:0 0 118px;
    overflow:hidden!important;
    border-radius:0;
    filter:drop-shadow(0 0 18px rgba(240,207,122,.17));
  }
  body.cinematic-home .brand-icon img{
    position:absolute!important;
    width:154px!important;
    height:154px!important;
    max-width:none!important;
    left:-18px!important;
    top:-5px!important;
    object-fit:cover!important;
    object-position:center top!important;
    transform:none!important;
    filter:saturate(1.08) contrast(1.06) brightness(1.05)!important;
  }
  body.cinematic-home .v2-progress{top:94px}
  body.cinematic-home.scrolled .v2-progress{top:82px}
}

@media(max-width:860px){
  body.cinematic-home{--bar-height:84px}
  body.cinematic-home .topbar,
  body.cinematic-home.scrolled .topbar{
    min-height:84px;
    padding-top:5px;
    padding-bottom:5px;
  }
  body.cinematic-home .brand{
    min-height:70px;
    gap:8px;
  }
  body.cinematic-home .brand-icon{
    width:72px;
    height:72px;
    flex:0 0 72px;
    overflow:hidden!important;
    border-radius:0;
  }
  body.cinematic-home .brand-icon img{
    width:124px!important;
    height:124px!important;
    max-width:none!important;
    left:-26px!important;
    top:-3px!important;
    object-fit:cover!important;
    object-position:center top!important;
    filter:saturate(1.08) contrast(1.06) brightness(1.05)!important;
  }
  body.cinematic-home .brand-label{
    max-width:150px;
    font-size:8.5px!important;
    letter-spacing:.16em!important;
  }
  body.cinematic-home .brand-label span{
    font-size:6px!important;
    letter-spacing:.22em!important;
  }
  body.cinematic-home .v2-hero{padding-top:84px}
}
@media(max-width:390px){
  body.cinematic-home .brand-icon{
    width:66px;
    height:66px;
    flex-basis:66px;
  }
  body.cinematic-home .brand-icon img{
    width:114px!important;
    height:114px!important;
    left:-24px!important;
    top:-2px!important;
  }
  body.cinematic-home .brand-label{max-width:122px}
}

/* End-credit footer.
   Keep the closing strip deliberately shallow and use the Four Realms palette
   in both navigation and legal copy so the site finishes in the same visual
   language used throughout the homepage. */
body.cinematic-home .site-footer{
  grid-template-columns:62px minmax(0,1fr) auto;
  gap:clamp(10px,2vw,24px);
  min-height:0;
  padding:8px max(4vw,env(safe-area-inset-right)) calc(9px + env(safe-area-inset-bottom)) max(4vw,env(safe-area-inset-left));
}
body.cinematic-home .site-footer .footer-brand{
  width:62px;
  height:62px;
}
body.cinematic-home .site-footer .footer-brand .footer-lockup,
body.cinematic-home .site-footer .footer-brand .web-lockup{
  --lockup-width:62px;
  width:62px;
  max-width:62px;
}
body.cinematic-home .site-footer nav{
  gap:2px;
  font-size:8.5px;
  line-height:1;
  letter-spacing:.11em;
}
body.cinematic-home .site-footer nav a{
  min-height:30px;
  padding:3px 9px;
  color:#d7c8a5;
  background-image:var(--wo-realm-gradient);
  background-size:100% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
body.cinematic-home .site-footer nav a+a::before{
  height:10px;
  background:rgba(255,255,255,.09);
}
body.cinematic-home .site-footer>span{
  max-width:none;
  color:#b9ad9f;
  background-image:var(--wo-support-gradient);
  background-size:100% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  font-size:7px;
  line-height:1.35;
  letter-spacing:.14em;
  white-space:nowrap;
}
body.cinematic-home .site-footer::before{
  left:14%;
  right:14%;
}

@media(max-width:860px){
  body.cinematic-home .site-footer{
    grid-template-columns:56px 1fr;
    grid-template-areas:
      "logo nav"
      "legal legal";
    align-items:center;
    justify-items:stretch;
    gap:2px 10px;
    padding:7px max(14px,env(safe-area-inset-right)) calc(9px + env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
  }
  body.cinematic-home .site-footer .footer-brand{
    grid-area:logo;
    justify-self:start;
    width:56px;
    height:56px;
  }
  body.cinematic-home .site-footer .footer-brand .footer-lockup,
  body.cinematic-home .site-footer .footer-brand .web-lockup{
    --lockup-width:56px;
    width:56px;
    max-width:56px;
  }
  body.cinematic-home .site-footer nav{
    grid-area:nav;
    width:100%;
    max-width:none;
    justify-content:flex-end;
    flex-wrap:wrap;
  }
  body.cinematic-home .site-footer nav a{
    min-height:29px;
    padding:3px 7px;
    font-size:8px;
  }
  body.cinematic-home .site-footer>span{
    grid-area:legal;
    justify-self:center;
    width:100%;
    max-width:none;
    margin:0;
    padding-top:5px;
    border-top:1px solid rgba(255,255,255,.055);
    font-size:6.7px;
    line-height:1.3;
    letter-spacing:.11em;
    text-align:center;
    white-space:normal;
  }
}
@media(max-width:390px){
  body.cinematic-home .site-footer{
    grid-template-columns:50px 1fr;
    gap:1px 7px;
    padding-left:10px;
    padding-right:10px;
  }
  body.cinematic-home .site-footer .footer-brand{
    width:50px;
    height:50px;
  }
  body.cinematic-home .site-footer .footer-brand .footer-lockup,
  body.cinematic-home .site-footer .footer-brand .web-lockup{
    --lockup-width:50px;
    width:50px;
    max-width:50px;
  }
  body.cinematic-home .site-footer nav a{
    padding-inline:5px;
    font-size:7.4px;
    letter-spacing:.08em;
  }
}


/* Masthead lockup correction: preserve the entire circular Four Realms emblem
   and always show the companion wordmark beside it. The previous crop was too
   shallow, which visually cut the emblem at its lower edge. */
@media(min-width:861px){
  body.cinematic-home{--bar-height:116px}
  body.cinematic-home .topbar{
    min-height:116px;
    padding-top:6px;
    padding-bottom:10px;
  }
  body.cinematic-home.scrolled .topbar{min-height:100px}
  body.cinematic-home .brand{
    min-height:100px;
    gap:14px;
    overflow:visible;
  }
  body.cinematic-home .brand-icon{
    width:126px;
    height:104px;
    flex:0 0 126px;
    overflow:hidden!important;
  }
  body.cinematic-home .brand-icon img{
    width:164px!important;
    height:164px!important;
    left:-19px!important;
    top:-1px!important;
  }
  body.cinematic-home .brand-label{
    display:flex!important;
    flex-direction:column;
    justify-content:center;
    min-width:0;
    margin:0;
    color:#f8f0e3;
    font-size:11px;
    font-weight:750;
    line-height:1.15;
    letter-spacing:.22em;
    white-space:nowrap;
    text-transform:uppercase;
  }
  body.cinematic-home .brand-label span{
    display:block;
    margin-top:7px;
    color:#a99a82;
    font-size:7px;
    font-weight:550;
    letter-spacing:.31em;
  }
  body.cinematic-home .v2-progress{top:116px}
  body.cinematic-home.scrolled .v2-progress{top:100px}
}

@media(max-width:860px){
  body.cinematic-home{--bar-height:100px}
  body.cinematic-home .topbar,
  body.cinematic-home.scrolled .topbar{
    min-height:100px;
    padding-top:6px;
    padding-bottom:10px;
  }
  body.cinematic-home .brand{
    min-height:84px;
    gap:10px;
    overflow:visible;
  }
  body.cinematic-home .brand-icon{
    width:78px;
    height:88px;
    flex:0 0 78px;
    overflow:hidden!important;
  }
  body.cinematic-home .brand-icon img{
    width:140px!important;
    height:140px!important;
    left:-31px!important;
    top:-1px!important;
  }
  body.cinematic-home .brand-label{
    display:flex!important;
    flex-direction:column;
    justify-content:center;
    min-width:0;
    max-width:160px;
    margin:0;
    color:#f8f0e3;
    font-size:9.5px!important;
    font-weight:750;
    line-height:1.15;
    letter-spacing:.17em!important;
    white-space:nowrap;
    text-transform:uppercase;
  }
  body.cinematic-home .brand-label span{
    display:block;
    margin-top:5px;
    color:#a99a82;
    font-size:6.4px!important;
    font-weight:550;
    letter-spacing:.22em!important;
  }
  body.cinematic-home .v2-hero{padding-top:100px}
}

@media(max-width:390px){
  body.cinematic-home{--bar-height:96px}
  body.cinematic-home .topbar,
  body.cinematic-home.scrolled .topbar{min-height:96px}
  body.cinematic-home .brand{min-height:80px;gap:8px}
  body.cinematic-home .brand-icon{
    width:72px;
    height:84px;
    flex-basis:72px;
  }
  body.cinematic-home .brand-icon img{
    width:134px!important;
    height:134px!important;
    left:-31px!important;
    top:-1px!important;
  }
  body.cinematic-home .brand-label{
    max-width:130px;
    font-size:8.4px!important;
    letter-spacing:.13em!important;
  }
  body.cinematic-home .brand-label span{
    font-size:5.8px!important;
    letter-spacing:.17em!important;
  }
  body.cinematic-home .v2-hero{padding-top:96px}
}


/* Footer color correction — keep the end-credit layout, return the footer copy
   to the restrained neutral palette used before the multicolor experiment. */
body.cinematic-home .site-footer nav a{
  color:#8f887e!important;
  background:none!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  -webkit-text-fill-color:currentColor!important;
}
body.cinematic-home .site-footer nav a:hover,
body.cinematic-home .site-footer nav a:focus-visible{
  color:#efe5d7!important;
  -webkit-text-fill-color:currentColor!important;
}
body.cinematic-home .site-footer>span{
  color:#847b6d!important;
  background:none!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  -webkit-text-fill-color:currentColor!important;
}