/* Pablo Abreu - glass unificado. Lo comparten la SPA y las paginas estaticas.
   Consume SOLO tokens de tokens.css (sin literales de color ni de desfoque). Tiers:
     .glass-scrim   telon/overlay (no panel; no se reduce en movil)
     .glass-subtle  .glass  .glass-strong   paneles
   Las hojas de componente declaran backdrop-filter SOLO con los compuestos
   var(--glass-filter-subtle | --glass-filter | --glass-filter-strong | --scrim-filter) o none.
   Este fichero es el UNICO sitio donde esos compuestos cambian segun el contexto
   (movil, prefers-reduced-transparency, sin soporte). */

/* ---------- Clases reutilizables ---------- */
.glass-subtle,
.glass,
.glass-strong {
  background-color: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
}
.glass-subtle {
  -webkit-backdrop-filter: var(--glass-filter-subtle);
  backdrop-filter: var(--glass-filter-subtle);
}
.glass {
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
}
.glass-strong {
  -webkit-backdrop-filter: var(--glass-filter-strong);
  backdrop-filter: var(--glass-filter-strong);
}
.glass-scrim {
  -webkit-backdrop-filter: var(--scrim-filter);
  backdrop-filter: var(--scrim-filter);
}

/* ---------- Reflejo (sheen) ----------
   Banda de luz sobre los paneles glass. Dos capas de background-image (no tocan
   background-color): la primera se desplaza con el scroll (parallax: view() para paneles
   en flujo, scroll(root) para los fijos) y la segunda cruza el panel al pasar el raton.
   La posicion va en propiedades registradas para poder animarlas. Especificidad
   html:root :is() para ganar al shorthand `background` de las hojas de componente. */
@property --glass-sheen-x {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --glass-sheen-h {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

html:root :is(
  .glass-subtle, .glass, .glass-strong,
  .faq__item, .hero__actions .btn--whatsapp, .landing-deck__card--ref, .ref-card,
  .site-newsletter-band, .article-pill, .article-block .article-links, .elp-menu__item,
  .service-card, .work-card, .site-footer, .site-shell--footer, .hero__snapshot, .hero__card,
  .site-header, .depth-rail, .elp-recept__toggle, .chat-widget__toggle
) {
  background-image: var(--glass-sheen), var(--glass-sheen-hover);
  background-size: 300% 100%, 300% 100%;
  background-position: var(--glass-sheen-x) 0, var(--glass-sheen-h) 0;
  background-repeat: no-repeat;
}
/* La cabecera de las paginas estaticas conserva su degradado superior como tercera capa. */
html:root .site-header.site-header--doc.site-header--doc {
  background-image:
    var(--glass-sheen),
    var(--glass-sheen-hover),
    linear-gradient(180deg, color-mix(in srgb, var(--light) 5.5%, transparent), transparent 78%);
  background-size: 300% 100%, 300% 100%, 100% 100%;
  background-position: var(--glass-sheen-x) 0, var(--glass-sheen-h) 0, 0 0;
}

@keyframes glass-sheen-scroll {
  from { --glass-sheen-x: 12%; }
  to { --glass-sheen-x: 88%; }
}
@keyframes glass-sheen-hover {
  from { --glass-sheen-h: 0%; }
  to { --glass-sheen-h: 100%; }
}

/* La SPA no hace scroll en la raiz sino en main.main-stage: los paneles fijos (fuera de ese
   contenedor) leen su scroll por una linea de tiempo con nombre elevada a <html>. */
@supports (animation-timeline: view()) {
  html { timeline-scope: --glass-page; }
  .main-stage { scroll-timeline: --glass-page block; }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    html:root :is(
      .glass-subtle, .glass, .glass-strong,
      .faq__item, .hero__actions .btn--whatsapp, .landing-deck__card--ref, .ref-card,
      .site-newsletter-band, .article-pill, .article-block .article-links, .elp-menu__item,
      .service-card, .work-card, .site-footer, .site-shell--footer, .hero__snapshot, .hero__card
    ) {
      animation: glass-sheen-scroll linear both;
      animation-timeline: view();
    }
    html:root :is(.site-header, .depth-rail, .elp-recept__toggle, .chat-widget__toggle) {
      animation: glass-sheen-scroll linear both;
      animation-timeline: scroll(root);
    }
    html:root:has(.main-stage) :is(.site-header, .depth-rail, .elp-recept__toggle, .chat-widget__toggle) {
      animation-timeline: --glass-page;
    }
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html:root :is(
    .glass-subtle, .glass, .glass-strong,
    .faq__item, .hero__actions .btn--whatsapp, .landing-deck__card--ref, .ref-card,
    .site-newsletter-band, .article-pill, .article-block .article-links, .elp-menu__item,
    .service-card, .work-card, .site-footer, .site-shell--footer, .hero__snapshot, .hero__card,
    .site-header, .depth-rail, .elp-recept__toggle, .chat-widget__toggle
  ):hover {
    animation: glass-sheen-hover 0.9s ease-out;
  }
  @supports (animation-timeline: view()) {
    html:root :is(
      .glass-subtle, .glass, .glass-strong,
      .faq__item, .hero__actions .btn--whatsapp, .landing-deck__card--ref, .ref-card,
      .site-newsletter-band, .article-pill, .article-block .article-links, .elp-menu__item,
      .service-card, .work-card, .site-footer, .site-shell--footer, .hero__snapshot, .hero__card
    ):hover {
      animation: glass-sheen-scroll linear both, glass-sheen-hover 0.9s ease-out;
      animation-timeline: view(), auto;
    }
    html:root :is(.site-header, .depth-rail, .elp-recept__toggle, .chat-widget__toggle):hover {
      animation: glass-sheen-scroll linear both, glass-sheen-hover 0.9s ease-out;
      animation-timeline: scroll(root), auto;
    }
    html:root:has(.main-stage) :is(.site-header, .depth-rail, .elp-recept__toggle, .chat-widget__toggle):hover {
      animation-timeline: --glass-page, auto;
    }
  }
}

/* ---------- Superficies que nunca son glass ---------- */
.elp-toon__say,
.elp-recept__balloon,
.elp-recept__user,
.chat-widget__bubble,
input,
textarea,
select,
.proj-show__logo {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ---------- Movil: tope de paneles <= 10px (scrims fijados a 2-4px) ----------
   Se redefinen los COMPUESTOS con min()/clamp() sobre los parametros del tema activo, asi un
   tema con --glass-blur* grande no puede saltarse el tope. :root:root (0,2,0) gana a
   [data-theme] (0,1,0) aunque el tema redefina los compuestos directamente. */
@media (max-width: 640px) {
  :root:root {
    --glass-filter-subtle: blur(min(var(--glass-blur-subtle), 8px)) saturate(var(--glass-saturate-subtle));
    --glass-filter: blur(min(var(--glass-blur), 10px)) saturate(var(--glass-saturate));
    --glass-filter-strong: blur(min(var(--glass-blur-strong), 10px)) saturate(var(--glass-saturate-strong));
    --scrim-filter: blur(clamp(2px, var(--scrim-blur), 4px));
  }
}

/* ---------- Degradacion ----------
   1) El desfoque se apaga en la raiz: los compuestos pasan a `none` (!important: gana a temas y
      al tope movil). Cubre TODO elemento que use los compuestos, sin lista de selectores.
   2) Fondo opaco: los paneles que usan --glass-bg / --glass-bg-dense se vuelven opacos por token.
      Los paneles con fondo propio (literal en su hoja) necesitan la lista PANEL de abajo, que
      se repite en las dos ramas porque @media y @supports no se pueden unir en una sola regla.
      `npm run check:theme` falla si las dos listas divergen. */

/* prefers-reduced-transparency: sin blur y fondo opaco */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-filter-subtle: none !important;
    --glass-filter: none !important;
    --glass-filter-strong: none !important;
    --scrim-filter: none !important;
    --glass-bg: var(--glass-bg-solid) !important;
    --glass-bg-dense: var(--glass-bg-solid) !important;
    --glass-sheen-color: transparent !important;
    --glass-sheen-hover-color: transparent !important;
  }
  /* PANEL */
  .glass-subtle, .glass, .glass-strong,
  .site-header, .site-header--doc, .eh-head, .site-shell, .site-footer, .depth-rail, .nav__list,
  .faq__item, .hero__snapshot, .hero__card, .hero__actions .btn--whatsapp, .slider__btn,
  .service-card, .work-card, .team-card, .journal-card, .testimonial, .about__stat,
  .chat-widget__toggle, .chat-widget__panel,
  .elp-recept__toggle, .elp-recept__panel, .elp-recept__game,
  .elp-menu__item, .elp-toon__chip, .elp-dpad__b,
  .landing-deck__card--ref, .ref-card, .site-newsletter-band, .article-pill, .article-block .article-links,
  .nfc-overlay, .section.ref-section .landing-deck__meta {
    background-color: var(--glass-bg-solid) !important;
  }
}

/* Navegador sin backdrop-filter (ni prefijado): fondo opaco y legible */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glass-bg: var(--glass-bg-solid) !important;
    --glass-bg-dense: var(--glass-bg-solid) !important;
  }
  /* PANEL */
  .glass-subtle, .glass, .glass-strong,
  .site-header, .site-header--doc, .eh-head, .site-shell, .site-footer, .depth-rail, .nav__list,
  .faq__item, .hero__snapshot, .hero__card, .hero__actions .btn--whatsapp, .slider__btn,
  .service-card, .work-card, .team-card, .journal-card, .testimonial, .about__stat,
  .chat-widget__toggle, .chat-widget__panel,
  .elp-recept__toggle, .elp-recept__panel, .elp-recept__game,
  .elp-menu__item, .elp-toon__chip, .elp-dpad__b,
  .landing-deck__card--ref, .ref-card, .site-newsletter-band, .article-pill, .article-block .article-links,
  .nfc-overlay, .section.ref-section .landing-deck__meta {
    background-color: var(--glass-bg-solid) !important;
  }
}