/*
 * Celestial Clouds — full-width desktop layout (≥1024px).
 * Loaded after celestial-clouds.css, which keeps every viewport in a 430px
 * phone column. The doubled root class out-ranks those rules without !important.
 */
.tmpl-celestial-clouds.tmpl-celestial-clouds .cc-wide-only{display:none}

@media (min-width:1024px){
  .tmpl-celestial-clouds.tmpl-celestial-clouds{--cc-cloud-w:540px}
  .tmpl-celestial-clouds.tmpl-celestial-clouds .cc-wide-only{display:block}

  /* full-bleed shell */
  .tmpl-celestial-clouds.tmpl-celestial-clouds .film-intro,
  .tmpl-celestial-clouds.tmpl-celestial-clouds main,
  .tmpl-celestial-clouds.tmpl-celestial-clouds footer,
  .tmpl-celestial-clouds.tmpl-celestial-clouds .sky-transition{width:100%}

  /* ── intro ── */
  .tmpl-celestial-clouds.tmpl-celestial-clouds .film-reveal h1{width:min(80vw,900px);transform:none}
  .tmpl-celestial-clouds.tmpl-celestial-clouds .film-reveal h1 span{font-size:clamp(84px,7.5vw,120px)}
  .tmpl-celestial-clouds.tmpl-celestial-clouds .film-reveal h1 b{height:44px;font-size:22px;line-height:44px}
  .tmpl-celestial-clouds.tmpl-celestial-clouds .film-reveal .eyebrow{font-size:13px}
  .tmpl-celestial-clouds.tmpl-celestial-clouds .film-reveal .date-lockup{font-size:17px}

  /* drifting cloud band: fixed-width tiles so it never stretches thin */
  .tmpl-celestial-clouds.tmpl-celestial-clouds .sky-transition{height:300px;margin:-250px auto -50px}
  .tmpl-celestial-clouds.tmpl-celestial-clouds .cloud-stream-back{height:200px;top:-60px}
  .tmpl-celestial-clouds.tmpl-celestial-clouds .cloud-stream-front{height:216px;top:-12px}
  .tmpl-celestial-clouds.tmpl-celestial-clouds .cloud-loop{width:max-content;animation-name:cc-cloudDriftWide;animation-duration:54s}
  .tmpl-celestial-clouds.tmpl-celestial-clouds .cloud-stream-back .cloud-loop{animation-duration:86s}
  .tmpl-celestial-clouds.tmpl-celestial-clouds .cloud-loop img{flex:0 0 var(--cc-cloud-w);width:var(--cc-cloud-w)}
  /* mirror every other tile so neighbouring edges match (no visible seams) */
  .tmpl-celestial-clouds.tmpl-celestial-clouds .cloud-loop img:nth-child(2n){transform:scaleX(-1)}


  /* ── footer ── */
  .tmpl-celestial-clouds.tmpl-celestial-clouds footer{padding:80px 20px 60px}
  .tmpl-celestial-clouds.tmpl-celestial-clouds footer>p:first-child{font-size:46px}
  .tmpl-celestial-clouds.tmpl-celestial-clouds footer h2{font-size:42px}
  .tmpl-celestial-clouds.tmpl-celestial-clouds .footer-monogram{width:280px}
}

/* two tiles per cycle keeps the mirrored pattern aligned; 10 tiles cover viewports up to ~3200px */
@keyframes cc-cloudDriftWide{0%{transform:translate(0)}to{transform:translate(calc(-2 * var(--cc-cloud-w)))}}