/* ============================================================
   CAPA DE EFECTOS — bordes dorados vivos, brillo al desplazar,
   botones animados, 3D y partículas doradas.
   Las clases fx-* las añade scripts/effects.js.
   ============================================================ */

/* Ángulo animable para los degradados cónicos */
@property --spin {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

:root {
  --scroll-deg: 0deg;      /* lo actualiza JS al desplazar */
  --scroll-glow: 0;        /* 0 → quieto, 1 → desplazando */
}

/* ============================================================
   KEYFRAMES COMPARTIDOS
   ============================================================ */
@keyframes spinAngle {
  to { --spin: 360deg; }
}

@keyframes goldShimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes sweep {
  0%, 55% { transform: translateX(-120%); }
  85%, 100% { transform: translateX(120%); }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 10px 28px rgba(46, 70, 100, 0.3), 0 0 0 1.5px rgba(232, 200, 120, 0.9), 0 0 0 0 rgba(232, 200, 120, 0.5); }
  50% { box-shadow: 0 10px 28px rgba(46, 70, 100, 0.3), 0 0 0 1.5px rgba(255, 241, 196, 1), 0 0 0 12px rgba(232, 200, 120, 0); }
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.3); }
  30% { transform: scale(1); }
  45% { transform: scale(1.2); }
}

@keyframes sheenPass {
  from { transform: translateX(-130%) skewX(-18deg); }
  to { transform: translateX(230%) skewX(-18deg); }
}

@keyframes frameFlash {
  0% { box-shadow: 0 0 0 0 rgba(232, 200, 120, 0); }
  35% { box-shadow: 0 0 28px 4px rgba(232, 200, 120, 0.55); }
  100% { box-shadow: 0 0 0 0 rgba(232, 200, 120, 0); }
}

/* ============================================================
   TEXTOS DORADOS CON BRILLO EN MOVIMIENTO
   ============================================================ */
.script-title,
.count-number,
.verse-text strong,
.verse-ref,
.gallery-cta-title,
.hero-names .name,
.hero-names .ampersand {
  background-size: 200% 200%;
  animation: goldShimmer 6s linear infinite;
}

/* Las tarjetas de la cuenta regresiva, detalles, regalos, etc.
   quedan con el borde original reemplazado por el marco dorado vivo */
.countdown-item,
.details-card,
.gift-card,
.verse-card,
.rsvp-form,
.timeline-content,
.donation-card,
.gallery-event-item {
  border-color: rgba(201, 163, 82, 0.35);
}

/* ============================================================
   MARCO DORADO ANIMADO (span .fx-border insertado por JS)
   El brillo gira solo y además avanza con el scroll.
   ============================================================ */
.fx-frame {
  position: relative;
  isolation: isolate;
}

.fx-border {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  pointer-events: none;
  z-index: 5;
  background: conic-gradient(
    from calc(var(--spin) + var(--scroll-deg)),
    #9C7A2E 0deg,
    #E8C878 30deg,
    #FFF8E1 50deg,
    #E8C878 70deg,
    #B8923F 110deg,
    #9C7A2E 160deg,
    #C9A352 180deg,
    #E8C878 210deg,
    #FFF8E1 230deg,
    #E8C878 250deg,
    #B8923F 290deg,
    #9C7A2E 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: spinAngle 7s linear infinite;
  opacity: calc(0.8 + var(--scroll-glow) * 0.2);
  filter: brightness(calc(1 + var(--scroll-glow) * 0.35)) saturate(calc(1 + var(--scroll-glow) * 0.3));
  transition: opacity 0.4s ease, filter 0.4s ease;
}

.invite-card .fx-border {
  padding: 3px;
}

/* Halo dorado alrededor de la tarjeta mientras se desplaza */
.fx-frame.fx-in-view {
  box-shadow:
    0 0 calc(var(--scroll-glow) * 26px) rgba(232, 200, 120, calc(var(--scroll-glow) * 0.55)),
    0 8px 30px rgba(201, 169, 97, 0.15);
}

/* Destello diagonal que cruza la tarjeta al entrar en pantalla */
.fx-sheen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  z-index: 4;
}

.fx-sheen::before {
  content: '';
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 45%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 248, 225, 0.0) 10%, rgba(255, 248, 225, 0.75) 50%, rgba(255, 248, 225, 0) 90%, transparent 100%);
  transform: translateX(-130%) skewX(-18deg);
  mix-blend-mode: soft-light;
}

.fx-frame.fx-shine .fx-sheen::before {
  animation: sheenPass 1.4s cubic-bezier(.4, 0, .2, 1) forwards;
}

.fx-frame.fx-shine {
  animation: frameFlash 1.6s ease-out;
}

/* ============================================================
   INCLINACIÓN 3D CON EL CURSOR / GIROSCOPIO
   ============================================================ */
.fx-tilt {
  transform-style: preserve-3d;
  will-change: transform;
}

.js-enabled .fx-tilt.reveal.visible,
.fx-tilt.is-tilting {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
}

.js-enabled .fx-tilt.is-tilting {
  transition: transform 0.2s ease-out, opacity 0.8s ease, box-shadow 0.3s ease;
}

/* Reflejo de luz que sigue al cursor */
.fx-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 4;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 248, 225, 0.45) 0%, transparent 55%);
  opacity: 0;
  transition: opacity 0.3s ease;
  mix-blend-mode: soft-light;
}

.fx-tilt.is-tilting .fx-glare {
  opacity: 1;
}

/* ============================================================
   APARICIÓN EN 3D AL HACER SCROLL
   ============================================================ */
.js-enabled .reveal:not(.visible) {
  opacity: 0;
  transform: perspective(900px) translateY(40px) rotateX(14deg) scale(0.97);
  transform-origin: 50% 100%;
}

.js-enabled .reveal.visible {
  transition: opacity 0.9s ease, transform 1s cubic-bezier(.2, .8, .2, 1);
}

/* ============================================================
   BOTONES ANIMADOS
   ============================================================ */
.fx-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Brillo que recorre el botón cada pocos segundos */
.fx-btn-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
}

.fx-btn-shine::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.65) 50%, transparent 100%);
  animation: sweep 3.2s ease-in-out infinite;
}

.fx-btn > *:not(.fx-btn-shine):not(.fx-ripple) {
  position: relative;
  z-index: 1;
}

/* Onda al tocar */
.fx-ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(circle, rgba(255, 248, 225, 0.85) 0%, rgba(232, 200, 120, 0.4) 45%, transparent 70%);
  animation: ripple 0.75s ease-out forwards;
  z-index: 0;
}

@keyframes ripple {
  to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* Efecto "magnético": el botón sigue un poco al cursor */
.fx-magnetic {
  translate: var(--mx, 0px) var(--my, 0px);
  transition: translate 0.25s ease-out, transform 0.3s ease, box-shadow 0.3s ease, background-position 0.4s ease, color 0.3s ease;
}

.btn-submit.fx-btn {
  animation: btnGlow 2.8s ease-in-out infinite;
}

.btn-gallery.fx-btn {
  animation: btnGlowSoft 2.8s ease-in-out infinite;
}

@keyframes btnGlow {
  0%, 100% { box-shadow: 0 4px 16px rgba(201, 163, 82, 0.3); }
  50% { box-shadow: 0 6px 26px rgba(232, 200, 120, 0.7), 0 0 0 3px rgba(255, 241, 196, 0.45); }
}

@keyframes btnGlowSoft {
  0%, 100% { box-shadow: 0 4px 16px rgba(201, 163, 82, 0.15); }
  50% { box-shadow: 0 6px 24px rgba(232, 200, 120, 0.5), 0 0 0 3px rgba(255, 241, 196, 0.4); }
}

/* Enlaces dorados con subrayado animado y flecha que avanza */
.details-link,
.gift-link {
  background-image: linear-gradient(90deg, #9C7A2E, #FFF1C4, #E8C878, #9C7A2E);
  background-size: 0% 1.5px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  border-bottom-color: transparent !important;
  transition: background-size 0.45s ease, color 0.3s ease, letter-spacing 0.3s ease;
}

.details-link:hover,
.gift-link:hover {
  background-size: 100% 1.5px;
  letter-spacing: 0.24em;
  text-shadow: 0 0 10px rgba(232, 200, 120, 0.6);
}

.hashtag {
  position: relative;
  overflow: hidden;
}

.hashtag:hover {
  transform: translateY(-4px) scale(1.04);
}

/* ============================================================
   CUENTA REGRESIVA — números que giran en 3D
   ============================================================ */
.count-number.fx-flip {
  animation: flipNumber 0.6s cubic-bezier(.3, 1.4, .5, 1), goldShimmer 6s linear infinite;
}

@keyframes flipNumber {
  0% { transform: perspective(300px) rotateX(-90deg); opacity: 0.2; }
  100% { transform: perspective(300px) rotateX(0); opacity: 1; }
}

/* Los puntos de la línea de tiempo laten en dorado */
.timeline-dot {
  animation: dotPulse 2.6s ease-in-out infinite;
}

@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 200, 120, 0.6); }
  50% { box-shadow: 0 0 0 8px rgba(232, 200, 120, 0); }
}

/* ============================================================
   PARTÍCULAS DORADAS Y BARRA DE PROGRESO
   ============================================================ */
.fx-particles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 950;
}

.intro-pending .fx-particles {
  z-index: 1001;
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  z-index: 960;
  transform-origin: 0 50%;
  transform: scaleX(var(--progress, 0));
  background: linear-gradient(90deg, #9C7A2E, #E8C878, #FFF8E1, #E8C878, #9C7A2E);
  box-shadow: 0 0 10px rgba(232, 200, 120, 0.8);
}

/* ============================================================
   MOVIMIENTO REDUCIDO — respeta la preferencia del sistema
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .fx-particles { display: none; }
}