/* Komeetix v18: compositor-only scroll transitions. All scene coordinates,
   palettes, type sizes and the approved SVG curve remain those of v17. */
@media (min-width:881px) {
  .atmosphere::before {content:none !important;display:none !important}
  .atmosphere-art {
    position:absolute;inset:-4%;
    background:url("assets/komeetix-dark-atmosphere.png") center/cover no-repeat;
    opacity:.24;mix-blend-mode:screen;
    transform:translate3d(0,0,0) scale(1.04);
    transition:opacity .9s ease,filter .9s ease;
    will-change:transform;
  }
  html[data-theme="light"] .atmosphere-art {
    opacity:.14;mix-blend-mode:multiply;filter:saturate(1.25) hue-rotate(-6deg);
  }
  .ghost-type span {will-change:transform,opacity;backface-visibility:hidden}
  .reflection,.light-sweep,.mark-trace,.world-grid {will-change:transform}
  .hero-mark {will-change:transform;backface-visibility:hidden}
  .journey-body {will-change:transform}
  .journey-contrail {will-change:opacity}
  .journey-state {will-change:opacity}
  .flow-copy {opacity:0;will-change:opacity}
  .nav-rail > svg {will-change:transform;transform:translateZ(0)}
  .rail-reveal {
    position:absolute;inset:0;overflow:hidden;pointer-events:none;
    will-change:transform;transform:translate3d(-100%,0,0);
  }
  .rail-reveal-inner {
    position:absolute;inset:0;will-change:transform;
    transform:translate3d(100%,0,0);
  }
  .rail-reveal svg {overflow:visible}
  .rail-reveal .rail-progress-line {
    stroke-dasharray:none !important;stroke-dashoffset:0 !important;
    vector-effect:none;filter:none;stroke-width:2.05;
  }
  .journey-sprite {z-index:7}
}
@media (prefers-reduced-motion:reduce) {
  .atmosphere-art,.reflection,.light-sweep,.mark-trace,.world-grid {will-change:auto}
}

/* Preserve the K silhouette and both layers of glow, but cache those soft
   shadows as transparent artwork rather than two live GPU blur passes. */
.mark-art {position:relative;width:100%;height:100%;display:grid;place-items:center}
@media (min-width:881px){
html[data-render-tier="dense"] .film-grain{
    background-image:url("assets/optimized/grain.png");background-size:180px 180px;
    /* At this opacity the film texture stays subtle without a full-screen
       background-reading blend pass on every frame. */
    mix-blend-mode:normal;opacity:.013;
  }
html[data-render-tier="dense"] .mark-art{
    animation:logoBreath 6.4s ease-in-out infinite;
    transform-origin:50% 52%;will-change:transform;
  }
html[data-render-tier="dense"] .mark-art::before,html[data-render-tier="dense"] .mark-art::after{
    content:"";position:absolute;inset:-25%;pointer-events:none;
    background:center/100% 100% no-repeat;transition:opacity .8s ease;
  }
html[data-render-tier="dense"] .mark-art::before{background-image:url("assets/optimized/k-shadow-dark.webp");opacity:1}
html[data-render-tier="dense"] .mark-art::after{background-image:url("assets/optimized/k-shadow-light.webp");opacity:0}
html[data-render-tier="dense"][data-theme="light"] .mark-art::before{opacity:0}
html[data-render-tier="dense"][data-theme="light"] .mark-art::after{opacity:1}
html[data-render-tier="dense"] .mark-art .hero-mark{animation:none!important;filter:none!important;will-change:auto}
html[data-render-tier="dense"] .theme-bubble,html[data-render-tier="dense"] .coming-portal,html[data-render-tier="dense"] .nav-orb-aura{
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  }
html[data-render-tier="dense"] .theme-bubble:hover{filter:none!important}
}
@media (prefers-reduced-motion:reduce) {.mark-art {animation:none!important}}

/* Rendering cost follows physical pixels, including a HiDPI browser
   with a CSS viewport narrower than its 3440px display. */
@media (min-width:881px){
html[data-render-tier="dense"] .aurora{background:none !important;filter:none !important;}
html[data-render-tier="dense"] .aurora::before,html[data-render-tier="dense"] .aurora::after{
    content:"";position:absolute;inset:-25%;pointer-events:none;
    background-position:center;background-size:100% 100%;background-repeat:no-repeat;
    transition:opacity .9s ease;
  }
html[data-render-tier="dense"] .aurora::before{opacity:1;}
html[data-render-tier="dense"] .aurora::after{opacity:0;}
html[data-render-tier="dense"][data-theme="light"] .aurora::before{opacity:0;}
html[data-render-tier="dense"][data-theme="light"] .aurora::after{opacity:1;}
html[data-render-tier="dense"] .aurora-a::before{background-image:url("assets/optimized/aurora-a-dark.webp");}
html[data-render-tier="dense"] .aurora-a::after{background-image:url("assets/optimized/aurora-a-light.webp");}
html[data-render-tier="dense"] .aurora-b::before{background-image:url("assets/optimized/aurora-b-dark.webp");}
html[data-render-tier="dense"] .aurora-b::after{background-image:url("assets/optimized/aurora-b-light.webp");}
html[data-render-tier="dense"] .aurora-c::before{background-image:url("assets/optimized/aurora-c-dark.webp");}
html[data-render-tier="dense"] .aurora-c::after{background-image:url("assets/optimized/aurora-c-light.webp");}
html[data-render-tier="dense"] .mark-halo{background:none !important;filter:none !important;}
html[data-render-tier="dense"] .mark-halo::before{
    content:"";position:absolute;inset:-25%;pointer-events:none;
    background:url("assets/optimized/mark-halo-dark.webp") center/100% 100% no-repeat;
  }
html[data-render-tier="dense"] .light-ribbon{box-shadow:none;filter:none;}
html[data-render-tier="dense"] .scene,
html[data-render-tier="dense"] .ghost-type span {filter:none!important}
html[data-render-tier="dense"] .light-sweep {filter:blur(6px)}
}