/* ============================================================
   SHAMMA — SISTEMA DE EMBLEMA
   El logo oficial como pieza gráfica de fondo con brillo
   metálico, halo pulsante, anillo orbital y motion.

   Capas (de atrás hacia adelante):
     1. __halo   → resplandor difuso que respira
     2. __ring   → anillo orbital que gira (conic-gradient enmascarado)
     3. __disc   → el logo negro oficial
     4. __sheen  → barrido de luz sobre el disco completo
     5. __script → el lettering "Shamma" en oro, con glow propio
   ============================================================ */

.emblem {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  display: grid;
  place-items: center;
  will-change: transform, opacity;
}
.emblem > * { grid-area: 1 / 1; width: 100%; height: 100%; }

/* ---- 1. Halo ---- */
.emblem__halo {
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(240,206,134,.30) 0%, transparent 58%),
    radial-gradient(circle at 50% 50%, rgba(168,85,247,.38) 0%, transparent 72%);
  filter: blur(58px);
  transform: scale(1.18);
  animation: emblemBreath 7.5s var(--ease-out) infinite;
}
@keyframes emblemBreath {
  0%, 100% { opacity: .55; transform: scale(1.14); }
  50%      { opacity: 1;   transform: scale(1.30); }
}

/* ---- 2. Anillo orbital ---- */
.emblem__ring {
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0%,
    transparent 34%,
    rgba(240,206,134,.85) 48%,
    rgba(255,255,255,.95) 51%,
    rgba(168,85,247,.70) 60%,
    transparent 74%,
    transparent 100%);
  -webkit-mask: radial-gradient(circle, transparent 0 48.4%, #000 48.9% 50%, transparent 50.5%);
          mask: radial-gradient(circle, transparent 0 48.4%, #000 48.9% 50%, transparent 50.5%);
  transform: scale(1.035);
  animation: emblemSpin 26s linear infinite;
  opacity: .85;
}
/* Segundo anillo, más lento y en sentido contrario */
.emblem__ring--slow {
  transform: scale(1.11);
  animation: emblemSpin 44s linear infinite reverse;
  opacity: .35;
  background: conic-gradient(from 180deg,
    transparent 0%, transparent 55%,
    rgba(217,70,166,.75) 70%, rgba(240,206,134,.55) 78%, transparent 92%);
  -webkit-mask: radial-gradient(circle, transparent 0 49.1%, #000 49.4% 50%, transparent 50.3%);
          mask: radial-gradient(circle, transparent 0 49.1%, #000 49.4% 50%, transparent 50.3%);
}
/* from/to explícitos y con la MISMA lista de funciones: si solo se
   declara `to`, el navegador interpola matrices y 360° ≡ 0°, así que
   el anillo se quedaría quieto. */
@keyframes emblemSpin {
  from { transform: rotate(0deg)   scale(var(--ring-s, 1.035)); }
  to   { transform: rotate(360deg) scale(var(--ring-s, 1.035)); }
}
.emblem__ring       { --ring-s: 1.035; }
.emblem__ring--slow { --ring-s: 1.11; }

/* ---- 3. El disco (logo oficial) ---- */
.emblem__disc {
  object-fit: contain;
  opacity: .92;
  filter: drop-shadow(0 0 46px rgba(168,85,247,.42));
  animation: emblemPulse 7.5s var(--ease-out) infinite;
}
@keyframes emblemPulse {
  0%, 100% { transform: scale(1);     filter: drop-shadow(0 0 40px rgba(168,85,247,.35)); }
  50%      { transform: scale(1.022); filter: drop-shadow(0 0 68px rgba(217,164,65,.48)); }
}

/* ---- 4. Barrido de luz sobre el disco ---- */
.emblem__sheen {
  -webkit-mask-image: url('../img/logo-emblem.webp');
          mask-image: url('../img/logo-emblem.webp');
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  background: linear-gradient(112deg,
    transparent 34%,
    rgba(240,206,134,.32) 44%,
    rgba(255,255,255,.55) 50%,
    rgba(201,168,240,.34) 56%,
    transparent 66%);
  background-size: 260% 260%;
  mix-blend-mode: screen;
  animation: emblemSheen 6s var(--ease-out) infinite;
}
@keyframes emblemSheen {
  0%       { background-position: 130% 130%; opacity: 0; }
  12%      { opacity: 1; }
  62%      { opacity: 1; }
  75%, 100%{ background-position: -30% -30%; opacity: 0; }
}

/* ---- 5. El lettering en oro con glow ---- */
.emblem__script {
  -webkit-mask-image: url('../img/logo-mark.webp');
          mask-image: url('../img/logo-mark.webp');
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  background: linear-gradient(115deg, var(--gold) 0%, var(--gold-lit) 38%, #FFFDF6 50%, var(--gold-lit) 62%, var(--gold) 100%);
  background-size: 220% 220%;
  animation: emblemScript 9s var(--ease-out) infinite;
  filter: drop-shadow(0 0 22px rgba(240,206,134,.75));
  opacity: .95;
}
@keyframes emblemScript {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ============ EMBLEMA DEL HERO (marca de agua) ============ */
/* El centrado vive en el CSS y el JS solo mueve --ex/--ey/--es/--eo,
   así el parallax nunca pisa el translate(-50%,-50%). */
.emblem--hero, .emblem--cta {
  transform:
    translate(calc(-50% + var(--ex, 0px)), calc(-50% + var(--ey, 0px)))
    scale(var(--es, 1));
  opacity: calc(var(--base-op) * var(--eo, 1));
}

.emblem--hero {
  --base-op: .17;
  top: 46%; left: 50%;
  width: min(126vh, 1180px);
  aspect-ratio: 1;
}
@media (min-width: 1000px) {
  /* En desktop se corre a la derecha, detrás de la pila de fotos */
  .emblem--hero { --base-op: .20; left: 68%; top: 50%; width: min(115vh, 1020px); }
}
@media (max-width: 640px) {
  .emblem--hero { --base-op: .13; width: 145vw; top: 42%; }
  /* En móvil se apaga la capa más costosa */
  .emblem--hero .emblem__ring--slow { display: none; }
}

/* ============ EMBLEMA DEL CTA FINAL ============ */
.emblem--cta {
  --base-op: .14;
  top: 50%; left: 50%;
  width: min(88vh, 720px);
  aspect-ratio: 1;
}
.emblem--cta .emblem__halo { animation-duration: 9s; }

/* ============ WORDMARK — CALIGRAFÍA OFICIAL ============ */
/* `logo-lettering.webp` es la caligrafía oficial de la iglesia: trazo negro
   sobre transparente. Sobre el fondo oscuro sería invisible, así que se usa
   como MÁSCARA y el color lo pone el background. Así se puede pintar en
   crema, en oro o con un degradado en movimiento sin tocar el archivo. */
.footer__wordmark {
  -webkit-mask-image: url('../img/logo-lettering.webp');
          mask-image: url('../img/logo-lettering.webp');
  -webkit-mask-size: contain;   mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  aspect-ratio: 1500 / 507;
}

/* ---- Escudo de la cabecera ----
   `logo-crest.png` sale del logo oficial: se le quitó el aro y el mapamundi
   —las líneas del mapa desaparecían a este tamaño y solo ensuciaban— y quedan
   la caligrafía y la Biblia dorada. El trazo va en crema sobre transparente
   para que se lea encima del hero; el dorado conserva su color original. */
.crest {
  position: relative; display: block; isolation: isolate;
  height: clamp(72px, 7.2vw, 108px);
  aspect-ratio: 1005 / 440;
  transition: height .5s var(--ease-out);
}
.nav.is-stuck .crest { height: clamp(56px, 5.4vw, 78px); }

.crest__art {
  width: 100%; height: 100%; object-fit: contain; display: block;
  animation: crestHalo 9s var(--ease-out) infinite;
}

/* Destello recortado con la propia silueta del logo: la franja de plata y oro
   solo se ve dentro del trazo, nunca en una caja rectangular. */
.crest__shine {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(104deg,
    transparent 28%,
    rgba(214,222,234,.75) 40%,     /* plata */
    rgba(255,255,255,.98) 47%,     /* filo de luz */
    rgba(240,206,134,.95) 54%,     /* oro claro */
    rgba(217,164,65,.70) 61%,      /* oro */
    transparent 74%);
  background-size: 280% 100%;
  background-position: 130% 50%;
  background-repeat: no-repeat;
  -webkit-mask-image: url('../img/logo-crest.png');
          mask-image: url('../img/logo-crest.png');
  -webkit-mask-size: contain;      mask-size: contain;
  -webkit-mask-position: center;   mask-position: center;
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  mix-blend-mode: screen;
  animation: crestSheen 6.5s var(--ease-out) infinite;
  will-change: background-position;
}

/* El destello cruza en el primer tercio del ciclo y después descansa: un brillo
   permanente y constante sería un parpadeo, no un acabado. */
@keyframes crestSheen {
  0%   { background-position: 130% 50%; }
  36%  { background-position: -30% 50%; }
  100% { background-position: -30% 50%; }
}

/* Halo que respira entre lila y oro: la «luz entremezclada» del fondo */
@keyframes crestHalo {
  0%, 100% {
    filter: drop-shadow(0 0 7px rgba(201,168,240,.18))
            drop-shadow(0 0 2px rgba(240,206,134,.22));
  }
  50% {
    filter: drop-shadow(0 0 17px rgba(240,206,134,.42))
            drop-shadow(0 0 5px rgba(214,222,234,.32));
  }
}

/* Al pasar el mouse el destello se repite mucho más seguido */
.nav__logo:hover .crest__shine { animation-duration: 2.4s; }
.nav__logo:hover .crest__art   { animation-duration: 3.4s; }

/* ---- Footer ----
   Aquí se usa la variante de SOLO TRAZO. La caligrafía oficial tiene el
   interior de las letras en blanco opaco, así que enmascarar con el archivo
   original da una silueta rellena — demasiado pesada a este tamaño.
   `logo-lettering-outline.webp` lleva el alfa recalculado a la oscuridad
   del píxel, así que deja únicamente el contorno. */
.footer__wordmark {
  width: min(100%, 860px);
  margin: clamp(2.5rem, 6vw, 4.5rem) auto 0;
  -webkit-mask-image: url('../img/logo-lettering-outline.webp');
          mask-image: url('../img/logo-lettering-outline.webp');
  -webkit-mask-position: center; mask-position: center;
  background: linear-gradient(100deg,
    rgba(201,168,240,.55) 0%,
    rgba(201,168,240,.55) 32%,
    rgba(240,206,134,1) 50%,
    rgba(201,168,240,.55) 68%,
    rgba(201,168,240,.55) 100%);
  background-size: 260% 100%;
  animation: wordmarkSheen 12s var(--ease-out) infinite;
  opacity: .5;
  user-select: none;
}
@keyframes wordmarkSheen {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ============ BRILLO EN LOS LOGOS PEQUEÑOS ============ */
/* Footer — respiración lenta */
.footer__brand img {
  filter: drop-shadow(0 0 14px rgba(168,85,247,.35));
  animation: emblemBreathSmall 6s var(--ease-out) infinite;
}
@keyframes emblemBreathSmall {
  0%, 100% { filter: drop-shadow(0 0 12px rgba(168,85,247,.30)); }
  50%      { filter: drop-shadow(0 0 26px rgba(217,164,65,.55)); }
}

/* Preloader — barrido de luz sobre la marca mientras carga */
.preloader__mark { position: relative; isolation: isolate; }
.preloader__mark::after {
  content: '';
  position: absolute; inset: 0; z-index: 2;
  border-radius: 50%;
  background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,.60) 50%, transparent 62%);
  background-size: 300% 300%;
  mix-blend-mode: screen;
  animation: emblemSheen 2.4s var(--ease-out) infinite;
}

/* ============ MOVIMIENTO REDUCIDO ============ */
/* IMPORTANTE (regla APEX 16): Windows activa `prefers-reduced-motion: reduce`
   por defecto en muchísimas configuraciones — de hecho está activo en el equipo
   donde se desarrolló este sitio. Si aquí se apagaran las animaciones, el
   emblema se vería completamente muerto justo en la máquina del cliente.
   Por eso NO se desactivan: son bucles lentos de opacidad y gradiente, sin
   parpadeos ni desplazamientos bruscos. Solo se ralentizan hasta volverse
   casi imperceptibles. */
@media (prefers-reduced-motion: reduce) {
  .emblem__ring           { animation-duration: 38s; }
  .emblem__ring--slow     { animation-duration: 60s; }
  .emblem__halo           { animation-duration: 11s; }
  .emblem__disc           { animation-duration: 11s; }
  .emblem__sheen          { animation-duration: 8.5s; }
  .emblem__script         { animation-duration: 13s; }
  .footer__brand img      { animation-duration: 9s; }
  .preloader__mark::after { animation-duration: 3s; }
  .footer__wordmark       { animation-duration: 20s; }
}