/* One uninterrupted navy canvas continues through the entire site. */
/* Touch visitors can scroll past artwork without selecting its image bounds. */
@media (any-pointer: coarse) {
  img,
  picture {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
  }
}

body.has-icon-background{
  --navy:#01040b;
  background:var(--navy);
  isolation:isolate;
}

body.has-icon-background #home-icon-canvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  display:block;
  pointer-events:none;
}

body.has-icon-background > main,
body.has-icon-background > .site-footer{
  position:relative;
  z-index:1;
}

/* Transparent sections expose faint icons while the existing cards retain their finish. */
body.has-icon-background .intro-scroll,
body.has-icon-background .intro-stage,
body.has-icon-background .intro-reveal,
body.has-icon-background .noscript-intro,
body.has-icon-background .story-intro,
body.has-icon-background .story-step,
body.has-icon-background .page-intro,
body.has-icon-background .platform-showcase,
body.has-icon-background .section,
body.has-icon-background .about-manifesto,
body.has-icon-background .principles,
body.has-icon-background .closing-section,
body.has-icon-background .closing-panel,
body.has-icon-background .site-footer{
  background:transparent;
}

body.has-icon-background .intro-fallback,
body.has-icon-background .site-header,
body.has-icon-background .site-header nav.is-open,
body.has-icon-background .medai-overview .mo-ring-hole{
  background:var(--navy);
}

/* The original, unmodified logo stays centered on the opening screen. */
.intro-stage{
  --intro-logo-width:min(38vw,720px);
  --intro-logo-scale:.38;
  --intro-logo-center:50%;
}
.intro-fallback img{
  position:absolute;
  top:var(--intro-logo-center);
  left:50%;
  width:var(--intro-logo-width);
  transform:translate(-50%,-50%);
}
@media(max-width:599px){
  .intro-stage{--intro-logo-width:66vw}
}
/* Tablet opening: the resting SVG and fragment canvas share the larger scale. */
@media (min-width:600px) and (max-width:1199px),
       (min-width:1200px) and (max-width:1366px) and (pointer:coarse){
  .intro-stage{--intro-logo-width:min(44vw,720px);--intro-logo-scale:.44}
}

/* Only the AI letters carry the logo's vertical color treatment. */
.contact-hero .contact-hero-copy #contact-title .contact-brand-ai{color:#00c5f5}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .contact-hero .contact-hero-copy #contact-title .contact-brand-ai{
    background-image:linear-gradient(180deg,#00d5ed 0%,#009aff 48%,#0755ff 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
}
@media(forced-colors:active){
  .contact-hero .contact-hero-copy #contact-title .contact-brand-ai{background-image:none;color:CanvasText}
}

/* At rest, use the original image with its intrinsic aspect ratio. The
   fragment canvas remains responsible for forward and reverse scrolling. */
.intro-fallback img{height:auto}
.intro-stage.intro-ready.intro-at-start .intro-fallback{display:flex;background:transparent}
.intro-stage.intro-at-start #intro-canvas{visibility:hidden}