/* A quiet, static starfield: small stars and distant galaxies, with no extra animation. */
:root{--distant-space:url('/wp-content/danielelabs-cinematic/assets/distant-space.svg?v=20261017-1');--space-size:1600px 1200px}
body,body.reel-page,.cases-dialog,.site-footer{background-image:var(--distant-space);background-size:var(--space-size);background-repeat:repeat}
/* The preceding section's rule was the visible seam above the manta. */
.intro{border-bottom:0}
/* Keep the existing scene lighting, with barely visible stars in the dark margins. */
.hero.scene::after{background-image:radial-gradient(ellipse at 87% 68%,rgba(54,113,255,.1),transparent 45%),var(--distant-space);background-size:auto,var(--space-size)}
.cosmic-scene::after{background-image:radial-gradient(ellipse at 77% 34%,rgba(196,86,169,.08),transparent 40%),var(--distant-space);background-size:auto,var(--space-size)}
/* Fade every foreground layer, not just the video, into the section above/below. */
.cosmic-scene .scene-art{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 80%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 80%,transparent)}
/* Real word spacing and intentional phrase groups render consistently in Chrome. */
.hero.scene h1{font-size:clamp(70px,6.3vw,108px);max-width:1040px;line-height:1.02}
.cosmic-copy h2{font-size:clamp(68px,5.8vw,99px);max-width:900px;line-height:1.06}
.hero.scene h1 .headline-line,.cosmic-copy h2 .headline-line{display:block;white-space:nowrap}
.hero.scene h1 .headline-line>span,.cosmic-copy h2 .headline-line>span{display:inline}
.hero.scene h1 .third::before,.cosmic-copy h2 span+span::before{content:none}
@media(max-width:760px){
  .hero.scene,.cosmic-scene,.hero.scene .hero-content,.cosmic-copy{background-color:#08090b;background-image:var(--distant-space);background-size:var(--space-size)}
  .hero.scene .scene-art::after{background:linear-gradient(0deg,#08090b,transparent 28%,transparent 85%,rgba(8,9,11,.16))}
  .cosmic-scene .scene-art::after{background:linear-gradient(0deg,#08090b,transparent 25%,transparent 82%,#08090b)}
  .hero.scene h1{font-size:clamp(30px,10.5vw,76px);line-height:1.04}
  .cosmic-copy h2{font-size:clamp(30px,10.4vw,75px);line-height:1.08}
}

/* Treat the name as one wordmark, with consistent weight and icon spacing. */
.brand .brand-wordmark{display:inline;margin:0;font-weight:700;letter-spacing:-.06em;white-space:nowrap}
.brand .brand-wordmark>span{display:inline;margin:0;font-weight:400;letter-spacing:inherit}