/* PlayWexa v0.25.1: original owner supplied 2048 × 852 hero, shown uncropped. */
:root{--pw-final-hero-ratio:2048/852}

/* The desktop hero height tracks the ORIGINAL asset's aspect ratio; no cut heads or hands. */
body[data-route="/"] .pw-cinematic-hero.hero{
  position:relative;
  box-sizing:border-box;
  width:100%;max-width:none;margin:0;
  min-height:41.60156vw;
  border-top:0;
  border-radius:0;
  background:#061329;
  overflow:hidden;
  isolation:isolate;
}
body[data-route="/"] .pw-cinematic-hero .hero-inner{
  position:relative;
  display:flex;
  align-items:center;
  box-sizing:border-box;
  width:var(--pw-site-width);
  max-width:var(--pw-content-max);
  margin-inline:auto;
  min-height:41.60156vw;
  padding:30px 0;
}
body[data-route="/"] .pw-cinematic-hero .hero-stars{
  display:none; /* redundant layer could introduce an unintended dark strip */
}
body[data-route="/"] .pw-cinematic-hero .hero-visual.pw-cinematic-scene{
  position:absolute;
  left:calc((var(--pw-site-width) - 100vw)/2);
  right:calc((var(--pw-site-width) - 100vw)/2);
  top:0;bottom:0;
  z-index:0;
  display:block;
  width:auto;max-width:none;height:100%;min-height:0;
  margin:0;padding:0;
  overflow:hidden;
  border:0;border-radius:0;
  background:#061329;
  box-shadow:none;
  isolation:isolate;
}
body[data-route="/"] .pw-cinematic-hero .pw-cinematic-image,
body[data-route="/"] .pw-cinematic-hero .pw-cinematic-scene:hover .pw-cinematic-image{
  position:absolute;inset:0;
  display:block;width:100%;height:100%;
  max-width:none;max-height:none;
  object-fit:contain;
  object-position:center center;
  transform:none;
  filter:none;
  transition:none;
}
/* Exactly one continuous LEFT-TO-RIGHT contrast fade; no hard horizontal bands. */
body[data-route="/"] .pw-cinematic-hero .pw-cinematic-scene::after{
  content:"";position:absolute;inset:0;z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(2,9,26,.92) 0%,
    rgba(3,11,30,.76) 18%,
    rgba(3,11,30,.46) 35%,
    rgba(3,11,30,.11) 52%,
    rgba(3,11,30,0) 66%);
}
body[data-route="/"] .pw-cinematic-hero .hero-copy{
  position:relative;z-index:3;
  width:min(52%,735px);
  max-width:100%;
  padding:18px 0;
  align-self:center;
  text-shadow:0 2px 12px rgba(0,0,0,.44);
}
body[data-route="/"] .pw-cinematic-hero .hero-copy h1{
  font-size:clamp(3rem,4.5vw,5.7rem);
  line-height:1.07;
  margin:16px 0 15px;
  color:#faffff;
  text-shadow:0 3px 19px rgba(1,5,17,.74);
}
body[data-route="/"] .pw-cinematic-hero .hero-copy>p{
  color:#f3f7ff;
  font-size:clamp(1rem,1.11vw,1.2rem);
  line-height:1.65;
  text-shadow:0 3px 14px rgba(0,0,0,.88);
}
body[data-route="/"] .pw-cinematic-hero .hero-copy .button-row{gap:10px;row-gap:9px;margin-top:18px}
body[data-route="/"] .pw-cinematic-hero .hero-copy .hero-stats{margin-top:20px}
body[data-route="/"] .pw-cinematic-hero .pw-hero-artifact{
  position:absolute;z-index:5;
  top:clamp(12px,2vw,28px);
  right:clamp(14px,2vw,42px);
}
body[data-route="/"] .pw-cinematic-hero .pw-portal-trigger{
  position:absolute;z-index:5;
  right:clamp(35px,10vw,180px);
  bottom:clamp(16px,5.2vw,72px);
}
/* Mid-size desktop: keep full image; avoid a crop introduced by older breakpoints. */
@media (min-width:1201px) and (max-width:1440px){
  body[data-route="/"] .pw-cinematic-hero .hero-copy{width:min(60%,640px)}
  body[data-route="/"] .pw-cinematic-hero .hero-copy h1{font-size:clamp(2.85rem,4.45vw,4.35rem)}
  body[data-route="/"] .pw-cinematic-hero .hero-copy>p{font-size:.96rem}
  body[data-route="/"] .pw-cinematic-hero .pw-portal-trigger{right:3.3%;bottom:3.3%;min-height:47px}
}
/* On tablet/mobile show all the copy FIRST, then the entire uncropped artwork. */
@media (max-width:1200px){
  body[data-route="/"] .pw-cinematic-hero.hero{
    min-height:0;height:auto;
    background:linear-gradient(180deg,#061329,#08152e 62%,#061329);
  }
  body[data-route="/"] .pw-cinematic-hero .hero-inner{
    display:flex;flex-direction:column;align-items:stretch;
    min-height:0;height:auto;
    padding:24px 0 0;
    width:var(--pw-site-width);
  }
  body[data-route="/"] .pw-cinematic-hero .hero-copy{
    width:100%;max-width:720px;
    padding:10px 0 20px;
    align-self:flex-start;
  }
  body[data-route="/"] .pw-cinematic-hero .hero-visual.pw-cinematic-scene{
    position:relative;left:auto;right:auto;top:auto;bottom:auto;
    width:100%;height:auto;min-height:0;aspect-ratio:2048/852;
    flex:none;
    margin-inline:auto;
    overflow:visible;
    border:0;border-radius:0;box-shadow:none;
    background:none;
  }
  body[data-route="/"] .pw-cinematic-hero .pw-cinematic-image{
    position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  }
  body[data-route="/"] .pw-cinematic-hero .pw-cinematic-scene::after{background:none}
  body[data-route="/"] .pw-cinematic-hero .pw-hero-artifact{top:12px;right:12px;padding:8px 10px;font-size:.72rem}
  body[data-route="/"] .pw-cinematic-hero .pw-portal-trigger{
    min-height:40px;min-width:135px;right:12px;bottom:9px;
    font-size:.74rem;border-radius:12px;padding:5px 9px;
  }
  body[data-route="/"] .pw-cinematic-hero .pw-portal-glyph{font-size:1.35rem}
}
@media(max-width:600px){
  body[data-route="/"] .pw-cinematic-hero .hero-inner{padding-top:14px}
  body[data-route="/"] .pw-cinematic-hero .hero-copy{padding:8px 0 15px}
  body[data-route="/"] .pw-cinematic-hero .hero-copy h1{font-size:clamp(2.28rem,8.6vw,3.4rem)}
  body[data-route="/"] .pw-cinematic-hero .hero-copy>p{font-size:.92rem}
  body[data-route="/"] .pw-cinematic-hero .hero-copy .button-row{gap:8px;margin-top:15px}
  body[data-route="/"] .pw-cinematic-hero .hero-copy .btn{font-size:.77rem;min-height:42px;padding:10px 13px}
  body[data-route="/"] .pw-cinematic-hero .hero-copy .hero-stats{margin-top:18px;gap:5px}
  body[data-route="/"] .pw-cinematic-hero .pw-hero-artifact{font-size:.62rem;max-width:42%;}
  body[data-route="/"] .pw-cinematic-hero .pw-portal-trigger{font-size:.65rem;min-height:34px;min-width:0;padding:4px 7px}
  body[data-route="/"] .pw-cinematic-hero .pw-portal-glyph{font-size:1.1rem}
}
@media(prefers-reduced-motion:reduce){
  body[data-route="/"] .pw-cinematic-hero .pw-portal-trigger{animation:none}
}
