/* =========================================================
KAG V55 — WIDE-GAMUT / OLED / FLUID RENDERING LAYER
Safe sRGB first. P3 + OKLCH progressively enhance capable displays.
========================================================= */
:root{
  --kag-accent-color:rgb(255,0,50);
  --kag-accent-hot:rgb(255,24,56);
  --kag-accent-soft:rgba(255,0,50,.22);
  --kag-deep-charcoal:rgb(17,18,21);
  --kag-deep-charcoal-2:rgb(10,11,13);
  --kag-offwhite:rgb(244,244,241);
  --kag-muted-white:rgb(218,218,214);
  --kag-black-soft:rgb(5,6,7);
}

@supports(color:oklch(0.5 0.2 30)){
  :root{
    --kag-deep-charcoal:oklch(.12 .01 250);
    --kag-deep-charcoal-2:oklch(.085 .008 250);
    --kag-offwhite:oklch(.965 .006 92);
    --kag-muted-white:oklch(.86 .008 92);
    --kag-black-soft:oklch(.045 .006 250);
  }
}

@media(color-gamut:p3){
  :root{
    --kag-accent-color:color(display-p3 1 0 .15);
    --kag-accent-hot:color(display-p3 1 .045 .13);
    --kag-accent-soft:color(display-p3 1 0 .15 / .24);
  }
}

html,body{
  background:var(--kag-black-soft);
  color:var(--kag-offwhite);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:geometricPrecision;
}

body::after{
  content:"";
  position:fixed;
  z-index:2147483000;
  inset:-12%;
  pointer-events:none;
  opacity:.02;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' seed='13' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.78'/%3E%3C/svg%3E");
  background-size:180px 180px;
  transform:translateZ(0);
  will-change:transform;
  contain:strict;
}

#kag-home{
  --red:var(--kag-accent-color)!important;
}

#kag-home .red,
#kag-home .kag-project-tag strong,
#kag-home .kag-cinema-bridge h3::after{
  color:var(--kag-accent-color)!important;
}

#kag-home .kag-eyebrow::before,
#kag-home .kag-cinema-bridge h3::after{
  background:var(--kag-accent-color)!important;
}

#kag-home .kag-capability-zone,
#kag-home .kag-capability,
#kag-home .kag-capability *{
  -webkit-font-smoothing:antialiased!important;
  -moz-osx-font-smoothing:grayscale!important;
}

#kag-home .kag-capability{
  color:var(--kag-offwhite)!important;
}

#kag-home .kag-capability-zone::before{
  background:
    radial-gradient(
      ellipse at 77% 50%,
      rgba(14,15,18,.94) 0%,
      rgba(12,13,16,.82) 27%,
      rgba(9,10,12,.54) 48%,
      rgba(5,6,7,.23) 65%,
      rgba(5,6,7,.06) 75%,
      transparent 86%
    )!important;
}

@supports(background:color-mix(in oklch,black,white)){
  #kag-home .kag-capability-zone::before{
    background:
      radial-gradient(
        ellipse at 77% 50%,
        color-mix(in oklch,var(--kag-deep-charcoal) 92%,var(--kag-accent-color) 8%) 0%,
        color-mix(in oklch,var(--kag-deep-charcoal) 96%,transparent 4%) 27%,
        color-mix(in oklch,var(--kag-deep-charcoal-2) 68%,transparent 32%) 49%,
        color-mix(in oklch,var(--kag-deep-charcoal-2) 32%,transparent 68%) 66%,
        transparent 86%
      )!important;
  }

  #kag-home #reel{
    background:
      radial-gradient(
        circle at 73% 48%,
        color-mix(in oklch,var(--kag-accent-color) 13%,transparent 87%),
        transparent 38%
      ),
      linear-gradient(
        180deg,
        color-mix(in oklch,var(--kag-deep-charcoal-2) 94%,var(--kag-accent-color) 6%),
        var(--kag-black-soft)
      )!important;
  }
}

/* Wide-gamut hover/glow accents. */
#kag-home .kag-work:hover,
#kag-home .kag-play:hover .kag-play-button,
#kag-home .kag-footer-social:hover,
#kag-home .kag-social:hover{
  border-color:var(--kag-accent-color)!important;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--kag-accent-color) 22%,transparent),0 0 28px var(--kag-accent-soft)!important;
}

@supports(color:color-mix(in oklch,red,black)){
  #kag-home .kag-work:hover,
  #kag-home .kag-play:hover .kag-play-button,
  #kag-home .kag-footer-social:hover,
  #kag-home .kag-social:hover{
    box-shadow:
      0 0 0 1px color-mix(in oklch,var(--kag-accent-color) 26%,transparent),
      0 0 30px color-mix(in oklch,var(--kag-accent-color) 24%,transparent)!important;
  }
}

/* Kodak image becomes the actual fluid stage. */
#kag-home #reel .kag-pose-media{
  overflow:visible!important;
  pointer-events:none!important;
  isolation:isolate!important;
}

#kag-home #reel .kag-fluid-canvas{
  position:absolute!important;
  z-index:4!important;
  display:block!important;
  opacity:0;
  pointer-events:none!important;
  will-change:transform,opacity;
  contain:layout paint style;
  transition:opacity .24s ease;
}

#kag-home #reel .kag-pose-media.kag-fluid-ready .kag-fluid-canvas{
  opacity:1!important;
}

#kag-home #reel .kag-pose-media.kag-fluid-ready>img{
  opacity:0!important;
}

#kag-home .kag-fluid-hint{
  z-index:8!important;
  color:var(--kag-muted-white)!important;
  border-color:color-mix(in srgb,var(--kag-offwhite) 16%,transparent)!important;
  background:rgba(13,14,17,.52)!important;
  -webkit-font-smoothing:antialiased!important;
  -moz-osx-font-smoothing:grayscale!important;
}

@media(color-gamut:p3){
  #kag-home .kag-fluid-hint{
    border-color:color(display-p3 1 1 1 / .15)!important;
    background:color(display-p3 .045 .048 .055 / .56)!important;
  }
}

@media(max-width:900px){
  body::after{opacity:.016}
  #kag-home .kag-fluid-hint{font-size:8px!important;letter-spacing:.12em!important}
}

@media(prefers-reduced-motion:reduce){
  #kag-home .kag-fluid-hint{transition:none!important}
}