/* =========================================================
   Expo Botánica 2026 · animaciones (versión elegida por Neo)
   - Hero y logo: opción C (despliegue 3D, pétalos, profundidad)
   - Tarjetas con foto: opción B (se destapan en dos fases)
   - Cuenta regresiva: opción B
   - Todo lo demás: opción A (reveals suaves, ilustraciones vivas, hover)
   Movimiento solo bajo .fx-motion (sin prefers-reduced-motion).
   Estados ocultos de los reveals solo con html.fx-ready (lo pone el JS).
   ========================================================= */

[data-fx="final"] {
  --fx-ease: cubic-bezier(.22, .8, .24, 1);
  --fx-soft: cubic-bezier(.33, .1, .25, 1);
  --fx-expo: cubic-bezier(.16, 1, .3, 1);
  --fx-io: cubic-bezier(.7, 0, .2, 1);
  --fx-spring: cubic-bezier(.2, .8, .2, 1);
}

/* =========================================================
   HERO (C) — intro en CSS puro, sin parpadeo si el JS falla
   ========================================================= */

.fx-motion[data-fx="final"] .hero__bg {
  inset: -18px;                       /* margen para el parallax */
  will-change: translate;
  animation: fx-bg 2.4s cubic-bezier(.2, .7, .1, 1) both;
}
@keyframes fx-bg {
  from { opacity: 0; scale: 1.16; }
  to   { opacity: 1; scale: 1; }
}

.fx-motion[data-fx="final"] .topbar { animation: fx-down 1s .15s var(--fx-spring) both; }
@keyframes fx-down {
  from { opacity: 0; transform: translateY(-28px); }
  to   { opacity: 1; transform: none; }
}

/* Logo: la rama brota, el año se abre, las letras se despliegan desde abajo,
   la hoja de la "i" cae girando entre los pétalos. */
.fx-motion[data-fx="final"] .hero__logo { will-change: translate; }
.fx-motion[data-fx="final"] .logo-svg .lg-sprig,
.fx-motion[data-fx="final"] .logo-svg .lg-20,
.fx-motion[data-fx="final"] .logo-svg .lg-26,
.fx-motion[data-fx="final"] .logo-svg .lg-l,
.fx-motion[data-fx="final"] .logo-svg .lg-leaf,
.fx-motion[data-fx="final"] .logo-svg .lg-tagline { transform-box: fill-box; }

.fx-motion[data-fx="final"] .logo-svg .lg-sprig {
  transform-origin: 50% 100%;
  animation: fx-sprout 1.5s .25s var(--fx-spring) both;
}
@keyframes fx-sprout {
  0%   { opacity: 0; transform: scale(.15) rotate(-16deg); }
  55%  { opacity: 1; transform: scale(1.06) rotate(3deg); }
  100% { opacity: 1; transform: none; }
}
.fx-motion[data-fx="final"] .logo-svg .lg-20 { animation: fx-from-l 1.1s .75s var(--fx-spring) both; }
.fx-motion[data-fx="final"] .logo-svg .lg-26 { animation: fx-from-r 1.1s .75s var(--fx-spring) both; }
@keyframes fx-from-l { from { opacity: 0; transform: translateX(46px); } to { opacity: 1; transform: none; } }
@keyframes fx-from-r { from { opacity: 0; transform: translateX(-46px); } to { opacity: 1; transform: none; } }

.fx-motion[data-fx="final"] .logo-svg .lg-l {
  transform-origin: 50% 100%;
  animation: fx-unfold 1.15s cubic-bezier(.16, .9, .3, 1) both;
}
.fx-motion[data-fx="final"] .logo-svg .lg-expo .lg-l { animation-delay: calc(.45s + var(--i) * .09s); }
.fx-motion[data-fx="final"] .logo-svg .lg-botanica .lg-l { animation-delay: calc(.8s + var(--i) * .065s); }
@keyframes fx-unfold {
  0%   { opacity: 0; transform: translateY(38%) scaleY(.04) skewX(-8deg); }
  35%  { opacity: 1; }
  70%  { transform: translateY(-2%) scaleY(1.07) skewX(1deg); }
  100% { opacity: 1; transform: none; }
}

.fx-motion[data-fx="final"] .logo-svg .lg-leaf {
  transform-origin: 50% 50%;
  animation: fx-leaf 2s 1.3s cubic-bezier(.33, .6, .3, 1) both;
}
@keyframes fx-leaf {
  0%   { opacity: 0; transform: translate(-70px, -260px) rotate(-280deg) scale(.8); }
  12%  { opacity: 1; }
  45%  { transform: translate(34px, -110px) rotate(-90deg); }
  70%  { transform: translate(-14px, -22px) rotate(18deg); }
  86%  { transform: translate(4px, -4px) rotate(-6deg); }
  100% { opacity: 1; transform: none; }
}

.fx-motion[data-fx="final"] .logo-svg .lg-tagline {
  transform-origin: 50% 50%;
  animation: fx-tag 1.1s 1.75s var(--fx-spring) both;
}
@keyframes fx-tag {
  from { opacity: 0; transform: translateY(18px) scaleX(.86); }
  to   { opacity: 1; transform: none; }
}

.fx-motion[data-fx="final"] .hero__date { animation: fx-pop .9s 2s cubic-bezier(.2, .9, .25, 1.2) both; }
.fx-motion[data-fx="final"] .hero__meta { animation: fx-rise .9s 2.15s var(--fx-spring) both; }
.fx-motion[data-fx="final"] .hero__ctas { animation: fx-rise .9s 2.3s var(--fx-spring) both; }
@keyframes fx-pop {
  from { opacity: 0; transform: scale(.82) translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fx-rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* Ilustraciones del hero: florecen (C). Fill "backwards": al terminar,
   el JS toma rotate/translate para el vaivén (A) y la profundidad (C). */
.fx-motion[data-fx="final"] .hero .deco { will-change: translate, rotate; }
.fx-motion[data-fx="final"] .deco--hero-flores { animation: fx-bloom-fl 2.4s .4s var(--fx-spring) backwards; }
@keyframes fx-bloom-fl { from { opacity: 0; scale: .7; translate: 40px 30px; } to { opacity: 1; scale: 1; translate: 0 0; } }
.fx-motion[data-fx="final"] .deco--hero-rama { animation: fx-bloom-r 2.2s .5s var(--fx-spring) backwards; }
.fx-motion[data-fx="final"] .deco--hero-roja { animation: fx-bloom 2.2s .9s var(--fx-spring) backwards; }
.fx-motion[data-fx="final"] .deco--hero-hojas { animation: fx-hojas 2.6s .1s var(--fx-spring) backwards; }
@keyframes fx-hojas { from { opacity: 0; translate: -60px -40px; rotate: -5deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
@keyframes fx-bloom   { from { opacity: 0; scale: .55; rotate: -14deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes fx-bloom-r { from { opacity: 0; scale: .6;  rotate: 10deg; }  to { opacity: 1; scale: 1; rotate: 0deg; } }

/* Martín pescador: aterriza en su rama al final de la intro y picotea 3 veces.
   El picoteo usa la propiedad `rotate` (se compone con el `transform` del aterrizaje)
   y pivota en las patas, sobre la rama. */
.fx-motion[data-fx="final"] .martin__rama { animation: fx-fade-in .9s 2.4s ease both; }
.fx-motion[data-fx="final"] .martin__ave {
  transform-origin: 44% 63%;            /* las patas, sobre la rama */
  animation:
    fx-perch 1.6s 2.5s var(--fx-spring) both,
    fx-peck .4s 4.25s linear 1 none;
}
@keyframes fx-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fx-peck {
  0%, 100% { rotate: 0deg; translate: 0 0; }
  /* cada picotazo: baja rápido, rebota un poco y sube más lento */
  7%  { rotate: -13deg; translate: -3px 3px; animation-timing-function: ease-out; }
  12% { rotate: -10.5deg; translate: -2px 2px; animation-timing-function: ease-in-out; }
  28% { rotate: .8deg;  translate: 0 0; animation-timing-function: ease-in; }
  33% { rotate: 0deg;   translate: 0 0; animation-timing-function: ease-in; }
  40% { rotate: -13deg; translate: -3px 3px; animation-timing-function: ease-out; }
  45% { rotate: -10.5deg; translate: -2px 2px; animation-timing-function: ease-in-out; }
  61% { rotate: .8deg;  translate: 0 0; animation-timing-function: ease-in; }
  66% { rotate: 0deg;   translate: 0 0; animation-timing-function: ease-in; }
  73% { rotate: -13deg; translate: -3px 3px; animation-timing-function: ease-out; }
  78% { rotate: -10.5deg; translate: -2px 2px; animation-timing-function: ease-in-out; }
  94% { rotate: .8deg;  translate: 0 0; animation-timing-function: ease-out; }
}
@keyframes fx-perch {
  0%   { opacity: 0; transform: translate(70px, -46px) rotate(-9deg) scale(.92); }
  55%  { opacity: 1; transform: translate(-4px, 3px) rotate(1.5deg) scale(1.01); }
  80%  { transform: translate(1px, -1px) rotate(-.4deg); }
  100% { opacity: 1; transform: none; }
}

/* Pétalos (canvas inyectado por el JS) */
[data-fx="final"] .fx-petals {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  pointer-events: none;
}
/* En los paneles con foto van detrás del contenido (z-index 1): nunca tapan textos ni el formulario */
[data-fx="final"] .fx-petals--behind { z-index: 0; }

/* =========================================================
   REVEALS AL HACER SCROLL (A)
   ========================================================= */

.fx-ready[data-fx="final"] [data-fxa] {
  transition:
    opacity .95s var(--fx-ease) var(--fxa-d, 0ms),
    translate 1.15s var(--fx-ease) var(--fxa-d, 0ms),
    scale 1.05s var(--fx-ease) var(--fxa-d, 0ms),
    filter 1s var(--fx-ease) var(--fxa-d, 0ms),
    transform .55s var(--fx-ease),
    box-shadow .55s var(--fx-ease);
}
.fx-ready[data-fx="final"] [data-fxa]:not(.is-in) { opacity: 0; translate: 0 28px; }
.fx-ready[data-fx="final"] [data-fxa="title"]:not(.is-in) { translate: 0 22px; filter: blur(6px); }
.fx-ready[data-fx="final"] [data-fxa="pop"]:not(.is-in) { translate: none; scale: .9; }
.fx-ready[data-fx="final"] [data-fxa="num"]:not(.is-in) { translate: none; scale: .35; }
.fx-ready[data-fx="final"] [data-fxa="form"]:not(.is-in) { translate: 0 44px; }

/* Ilustraciones de las secciones: florecen al entrar (A) */
.fx-ready[data-fx="final"] main .deco { transition: opacity 1.6s var(--fx-soft); }
.fx-ready[data-fx="final"] main .deco.fx-deco-wait { opacity: 0; }

/* =========================================================
   TARJETAS CON FOTO (B): la foto se destapa desde abajo y
   después la tarjeta se "desenrolla" con su cuerpo de color.
   ========================================================= */

[data-fx="final"] .card { --fx-mh: 230px; }
[data-fx="final"] .card--zona { --fx-mh: 250px; }
[data-fx="final"] .card--prog { --fx-mh: 220px; }

.fx-motion[data-fx="final"] .card__media { overflow: hidden; }
[data-fx="final"] .fx-media {
  position: absolute; inset: 0;
  background: inherit;
  transition: transform 1.8s var(--fx-soft);
}

.fx-ready[data-fx="final"] .card.fx-bm {
  transition:
    clip-path 1.15s var(--fx-io) calc(var(--bd, 0s) + .55s),
    transform .55s var(--fx-ease),
    box-shadow .55s var(--fx-ease);
}
.fx-ready[data-fx="final"] .card.fx-bm:not(.fx-bm-done) {
  clip-path: inset(0 0 calc(100% - var(--fx-mh)) 0 round var(--radius-card));
}
.fx-ready[data-fx="final"] .card.fx-bm.is-in:not(.fx-bm-done) {
  clip-path: inset(0 0 0 0 round var(--radius-card));
}
.fx-ready[data-fx="final"] .card.fx-bm .card__media {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.05s var(--fx-io) var(--bd, 0s);
}
.fx-ready[data-fx="final"] .card.fx-bm.is-in .card__media { clip-path: inset(0 0 0 0); }
.fx-ready[data-fx="final"] .card.fx-bm .fx-media {
  scale: 1.15;
  transition: scale 1.9s var(--fx-expo) var(--bd, 0s), transform 1.8s var(--fx-soft);
}
.fx-ready[data-fx="final"] .card.fx-bm.is-in .fx-media { scale: 1; }
.fx-ready[data-fx="final"] .card.fx-bm .tag {
  opacity: 0; translate: 0 -8px;
  transition: opacity .6s, translate .8s var(--fx-expo);
  transition-delay: calc(var(--bd, 0s) + .6s);
}
.fx-ready[data-fx="final"] .card.fx-bm.is-in .tag { opacity: 1; translate: 0 0; }
.fx-ready[data-fx="final"] .card.fx-bm .card__body > * {
  opacity: 0; translate: 0 18px;
  transition: opacity .8s var(--fx-expo), translate 1.1s var(--fx-expo);
  transition-delay: calc(var(--bd, 0s) + .85s + var(--ci, 0) * 70ms);
}
[data-fx="final"] .card__body > :nth-child(2) { --ci: 1; }
[data-fx="final"] .card__body > :nth-child(3) { --ci: 2; }
.fx-ready[data-fx="final"] .card.fx-bm.is-in .card__body > * { opacity: 1; translate: 0 0; }

/* =========================================================
   CUENTA REGRESIVA (B) — es contenido: se ve también sin movimiento
   ========================================================= */

[data-fx="final"] .fx-cd {
  margin-top: 56px; max-width: 520px; padding-top: 20px;
  border-top: 1px solid rgba(244, 239, 230, .38);
}
[data-fx="final"] .fx-cd__label {
  margin: 0; font: 500 12px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase;
}
[data-fx="final"] .fx-cd__units { display: flex; margin-top: 16px; }
[data-fx="final"] .fx-cd__u { padding: 0 26px; border-left: 1px solid rgba(244, 239, 230, .3); }
[data-fx="final"] .fx-cd__u:first-child { padding-left: 0; border-left: 0; }
[data-fx="final"] .fx-cd__n {
  display: flex; font-family: var(--serif); font-weight: 400;
  font-size: clamp(46px, 5.28vw, 76px); line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
[data-fx="final"] .fx-cd__dg { position: relative; display: inline-block; height: 1em; overflow: hidden; }
[data-fx="final"] .fx-cd__dg > span { display: block; }
[data-fx="final"] .fx-cd__dg > span + span { position: absolute; left: 0; top: 0; }
[data-fx="final"] .fx-cd__t {
  display: block; margin-top: 10px;
  font: 500 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; opacity: .85;
}
[data-fx="final"] .fx-cd__open { margin: 10px 0 0; font-family: var(--serif); font-style: italic; font-size: clamp(34px, 3.3vw, 48px); line-height: 1.1; }
[data-fx="final"] .fx-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* La rama de inscripción se corre hacia el borde para no tapar la cuenta regresiva */
@media (min-width: 761px) {
  [data-fx="final"] .inscripcion:has(.fx-cd) .deco--insc-rama { margin-left: -52px; }
}

/* =========================================================
   HOVER (A) — solo desktop con mouse
   ========================================================= */

@media (hover: hover) and (pointer: fine) {
  .fx-motion[data-fx="final"] .card:hover { transform: translateY(-6px); }
  .fx-motion[data-fx="final"] .card:hover .fx-media { transform: scale(1.06); }
  .fx-motion[data-fx="final"] .card--glass:hover {
    box-shadow: inset 0 0 0 1px rgba(244, 239, 230, .34), 0 24px 46px -20px rgba(0, 0, 0, .6);
  }
  .fx-motion[data-fx="final"] .card--zona:hover {
    box-shadow: 0 24px 46px -20px rgba(9, 25, 18, .5);
  }
  .fx-motion[data-fx="final"] .pase:hover,
  .fx-motion[data-fx="final"] .ticket:hover {
    transform: translateY(-6px);
    box-shadow: inset 0 0 0 1px rgba(244, 239, 230, .55), 0 24px 46px -20px rgba(9, 25, 18, .55);
  }
  .fx-motion[data-fx="final"] .expo:hover {
    transform: translateY(-4px);
    box-shadow: inset 0 0 0 1px rgba(15, 42, 30, .22), 0 18px 34px -18px rgba(9, 25, 18, .35);
  }
  .fx-motion[data-fx="final"] .btn--lime:hover {
    box-shadow: 0 0 0 6px rgba(167, 167, 0, .16), 0 14px 34px -10px rgba(167, 167, 0, .65);
  }
  .fx-motion[data-fx="final"] .btn--cream:hover {
    box-shadow: 0 0 0 6px rgba(244, 239, 230, .14), 0 14px 34px -10px rgba(244, 239, 230, .5);
  }
  .fx-motion[data-fx="final"] .btn--ghost:hover {
    box-shadow: inset 0 0 0 1.5px rgba(244, 239, 230, .95), 0 0 0 6px rgba(244, 239, 230, .08);
  }
}

/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 760px) {
  [data-fx="final"] .card { --fx-mh: 168px; }
  .fx-ready[data-fx="final"] [data-fxa]:not(.is-in) { translate: 0 20px; }
  .fx-ready[data-fx="final"] [data-fxa="form"]:not(.is-in) { translate: 0 28px; }

  [data-fx="final"] .fx-cd { margin-top: 28px; padding-top: 16px; }
  [data-fx="final"] .fx-cd__units { margin-top: 12px; }
  [data-fx="final"] .fx-cd__u { padding: 0 14px; }
  [data-fx="final"] .fx-cd__n { font-size: 44px; }
  [data-fx="final"] .fx-cd__t { font-size: 10px; margin-top: 8px; }
}