/* ------------------------------------------------------------------
   Detail layer
   GSAP SplitText masked headlines, taste-skill shutter frames, and
   React Bits-inspired SpotlightCard / Magnet micro-interactions.
------------------------------------------------------------------ */

html.detail-ready .gsap-title{
  opacity:1!important;
  filter:none!important;
  transform:none!important;
  transition:none!important;
}

html.detail-ready .gsap-title .d-char{
  display:inline-block;
  backface-visibility:hidden;
}

html.detail-ready .gsap-title{
  padding-bottom:.04em;
}

html.detail-ready .photo-frame,
html.detail-ready .mguh-diagram{
  will-change:clip-path;
}

html.detail-ready .photo-frame img,
html.detail-ready .mguh-diagram img{
  will-change:transform;
}

.detail-spotlight-host{position:relative}

.detail-spotlight{
  position:absolute;
  inset:0;
  z-index:8;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(240px circle at var(--sx,50%) var(--sy,50%),
      rgba(255,255,255,.07) 0%, rgba(255,255,255,.022) 26%, transparent 48%),
    radial-gradient(420px circle at var(--sx,50%) var(--sy,50%),
      rgba(225,6,0,.11) 0%, rgba(225,6,0,.034) 38%, transparent 74%);
  mix-blend-mode:screen;
  transition:opacity .26s ease;
}

.detail-spotlight.on{opacity:1}

.detail-magnet{
  will-change:transform;
}

html.detail-ready .cover-start:active,
html.detail-ready .closing-restart:active,
html.detail-ready .sim-btn:active{
  filter:brightness(.93);
}

@media (prefers-reduced-motion: reduce){
  .detail-spotlight{display:none}
  html.detail-ready .gsap-title{opacity:1!important;filter:none!important;transform:none!important}
}