/* ============================================================================
   moria-motion.css — Clínica Moriá · motor de movimento
   Consome tokens: --wine --wine-deep --sand --gold-deep --gold --gold-bright
                   --champagne --ease-out
   Tokens opcionais (podem viver em media queries — o JS lê o valor computado):
     --moria-light-x / --moria-light-y   repouso da luz (ex.: 62% 40%)
     --moria-xray-top                    offset sticky do palco (default 0)
     --moria-xray-stage-h                altura do palco (default 100vh)
   Estados escritos pelo JS:
     [data-moria-light].is-live   JS a correr nesta secção
     [data-moria-light].is-static reduced-motion (composição fixa, sem loop)
     [data-moria-light].is-lit    luz/malha visíveis (fade-in)
     [data-moria-light].is-animating  loop ativo → will-change ligado
     [data-moria-xray].is-live / .is-static / .is-animating
     .xray__step.is-active        passo corrente (o integrador estiliza o texto)
   Sem JS: retrato + luz estática (::after) no hero; anéis CSS no palco do raio-x.
   ========================================================================== */

/* ---------------------------------------------------------------- A · hero */
[data-moria-light] .hero__media {
  overflow: hidden;
  isolation: isolate;                     /* confina o blend da luz ao retrato */
}
[data-moria-light] .hero__photo {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
[data-moria-light].is-animating .hero__photo { will-change: transform; }

[data-moria-light] .hero__mesh {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: 0;
  -webkit-transition: opacity 1.6s var(--ease-out, ease-out);
          transition: opacity 1.6s var(--ease-out, ease-out);
}
[data-moria-light].is-lit .hero__mesh { opacity: 1; }

/* luz champagne — elemento criado pelo JS; só `transform` muda por frame */
[data-moria-light] .hero__light {
  position: absolute;
  top: 0; left: 0;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  -webkit-transform: translate3d(-200vw, -200vh, 0);
          transform: translate3d(-200vw, -200vh, 0);
  -webkit-transition: opacity 1.6s var(--ease-out, ease-out);
          transition: opacity 1.6s var(--ease-out, ease-out);
}
[data-moria-light].is-lit .hero__light { opacity: 1; }
[data-moria-light].is-animating .hero__light { will-change: transform; }

/* grão fino (default discreto; sobrescreva à vontade) */
[data-moria-light] .hero__grain {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  opacity: .07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}

/* sem JS: luz estática colocada com intenção (mesmos tokens de posição) */
[data-moria-light]:not(.is-live) .hero__media::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background: radial-gradient(
    circle 320px at var(--moria-light-x, 62%) var(--moria-light-y, 40%),
    color-mix(in srgb, var(--champagne) 42%, transparent) 0%,
    color-mix(in srgb, var(--gold-bright) 14%, transparent) 45%,
    transparent 100%
  );
}

/* --------------------------------------------------------------- B · raio-x */
[data-moria-xray] .xray__stage {
  position: -webkit-sticky;
  position: sticky;
  top: var(--moria-xray-top, 0px);
  -ms-flex-item-align: start;
      align-self: start;              /* sticky dentro de grid/flex precisa disto */
  height: var(--moria-xray-stage-h, 100vh);
  overflow: hidden;
}
[data-moria-xray] .xray__canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* sem JS: estratos em CSS (anéis concêntricos suaves), para o palco não ficar vazio */
[data-moria-xray]:not(.is-live) .xray__stage::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  background:
    repeating-radial-gradient(ellipse 46% 40% at 50% 50%,
      transparent 0px, transparent 26px,
      color-mix(in srgb, var(--gold) 34%, transparent) 26px,
      color-mix(in srgb, var(--gold) 34%, transparent) 27px);
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, #000 35%, transparent 100%);
          mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, #000 35%, transparent 100%);
}