/* ============================================================
   Festival del Libro Dominicana — Animation layer
   "Leer es florecer" — movimiento orgánico de floración.
   Reveals al scroll · parallax · count-up · stroke draw ·
   hero animado (el libro se arma desde pétalos).
   Respeta prefers-reduced-motion y el toggle .no-anim.
   ============================================================ */

/* ---------- SCROLL REVEALS ---------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s cubic-bezier(.2,.75,.25,1),
              transform .8s cubic-bezier(.2,.75,.25,1);
  transition-delay: var(--rd, 0s);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

/* directional + scale variants */
.reveal.from-left  { transform: translateX(-40px); }
.reveal.from-right { transform: translateX(40px); }
.reveal.from-scale { transform: scale(.92); }
.reveal.from-left.in, .reveal.from-right.in, .reveal.from-scale.in { transform: none; }

/* ---------- SECTION HEADERS: drawn filete + bloom dot ---------- */
.sec-head { position: relative; }
.sec-head .bloom-rule {
  display: block; width: 0; height: 2px; margin: 18px auto 0;
  background: linear-gradient(90deg, var(--rojo), var(--amarillo));
  border-radius: 2px; transition: width .9s cubic-bezier(.2,.8,.2,1) .15s;
}
.reveal.in .bloom-rule { width: 56px; }

/* ---------- COUNT-UP numbers ---------- */
.countup { font-variant-numeric: tabular-nums; }

/* ---------- HERO: animated title words ("florece") ---------- */
.bloom-line { display: block; overflow: hidden; }
.bloom-word {
  display: inline-block;
  transform: translateY(110%) rotate(4deg);
  opacity: 0;
  animation: bloom-rise .9s cubic-bezier(.2,.85,.25,1) forwards;
}
@keyframes bloom-rise {
  to { transform: translateY(0) rotate(0); opacity: 1; }
}

/* fade-up helper for hero supporting elements */
.rise-in { opacity: 0; animation: rise-up .8s ease-out forwards; }
@keyframes rise-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* ---------- COUNTDOWN ---------- */
.countdown {
  display: flex; gap: 10px; margin-top: 30px; flex-wrap: wrap;
}
.cd-cell {
  position: relative;
  min-width: 78px; padding: 14px 12px 11px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  text-align: center; overflow: hidden;
}
.cd-cell::before {
  content: ''; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: var(--accent-c, var(--azul));
}
.cd-cell .cd-num {
  font-family: var(--font-display); font-weight: 800;
  font-size: 38px; line-height: 1; color: var(--azul-900);
  font-variant-numeric: tabular-nums;
  display: block;
}
.cd-cell .cd-lbl {
  font-family: var(--font-brand); font-weight: 700;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); margin-top: 7px; display: block;
}
.cd-flip { animation: cd-flip .5s ease; }
@keyframes cd-flip {
  0% { transform: translateY(-60%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@media (max-width:520px){ .cd-cell{ min-width: 64px; padding: 11px 8px 9px; } .cd-cell .cd-num{ font-size: 30px; } }

/* ---------- COUNTDOWN wrapper + label ---------- */
.countdown-wrap { margin-top: 30px; }
.countdown-lbl {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-brand); font-weight: 700;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3);
}
.countdown-lbl i { color: var(--azul); font-size: 14px; }
.countdown-wrap .countdown { margin-top: 12px; }

/* ---------- HERO scroll cue ---------- */
.hero__scroll {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  width: 30px; height: 50px; border-radius: var(--r-pill);
  border: 2px solid var(--azul-200);
  display: flex; align-items: flex-start; justify-content: center;
  cursor: pointer; z-index: 5; color: var(--azul-400);
  animation: rise-up .8s ease-out 1.4s both;
}
.hero__scroll i { position: absolute; bottom: 7px; font-size: 14px; animation: cue-arrow 1.8s ease-in-out infinite; }
.hero__scroll-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--rojo); margin-top: 8px; animation: cue-dot 1.8s ease-in-out infinite; }
@keyframes cue-dot { 0%,100% { transform: translateY(0); opacity: 1; } 60% { transform: translateY(16px); opacity: .2; } }
@keyframes cue-arrow { 0%,100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(3px); opacity: 1; } }
.no-anim .hero__scroll, .no-anim .hero__scroll-dot, .no-anim .hero__scroll i { animation: none !important; }
@media (max-width: 900px){ .hero__scroll { display: none; } }

/* ---------- HERO ART: bloom (book assembled from petals) ---------- */
.bloom-stage { position: relative; width: 400px; height: 440px; }
@media (max-width: 900px){ .bloom-stage{ transform: scale(.82); } }
.bloom-petal {
  position: absolute; top: 50%; left: 50%;
  border-radius: 0 50% 0 50%;
  transform-origin: center;
  /* RESTING state is the CSS base, so when the orbit animation takes over it
     keeps these values (otherwise the petal would snap back to invisible). */
  opacity: var(--op, .9);
  transform: translate(-50%,-50%) translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(var(--sc, 1));
  animation: petal-assemble 1.1s cubic-bezier(.18,.9,.25,1) both;
  animation-delay: var(--pd, 0s);
}
@keyframes petal-assemble {
  0%   { opacity: 0; transform: translate(-50%,-50%) translate(var(--fx), var(--fy)) rotate(var(--frot)) scale(.2); }
  70%  { opacity: 1; }
  100% { opacity: var(--op, .9); transform: translate(-50%,-50%) translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(var(--sc, 1)); }
}
/* gentle orbit after assembly */
.bloom-petal.settled { animation: petal-orbit 8s ease-in-out infinite; animation-delay: var(--od, 0s); }
@keyframes petal-orbit {
  0%,100% { transform: translate(-50%,-50%) translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(var(--sc,1)); }
  50%     { transform: translate(-50%,-50%) translate(calc(var(--tx) + var(--dx,0px)), calc(var(--ty) + var(--dy,-14px))) rotate(calc(var(--rot) + 6deg)) scale(var(--sc,1)); }
}
.bloom-mark {
  position: absolute; top: 50%; left: 50%; width: 196px;
  transform: translate(-50%,-50%);
  opacity: 1;
  filter: drop-shadow(0 22px 30px rgba(2,55,107,.20));
  animation: mark-pop 1s cubic-bezier(.2,.9,.3,1.2) both;
  animation-delay: .85s; z-index: 4;
}
@keyframes mark-pop {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.4) rotate(-8deg); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(0); }
}
.bloom-mark.bob { animation: mark-bob 6s ease-in-out infinite; animation-delay: 1.85s; }
@keyframes mark-bob {
  0%,100% { transform: translate(-50%, calc(-50% - 6px)) scale(1) rotate(-1.5deg); }
  50%     { transform: translate(-50%, calc(-50% + 10px)) scale(1) rotate(1.5deg); }
}
/* sparkle ring around the bloom */
.bloom-ring {
  position: absolute; top: 50%; left: 50%; width: 320px; height: 320px;
  transform: translate(-50%,-50%); border-radius: 50%;
  border: 1.5px dashed var(--azul-200);
  opacity: .6; animation: ring-in 1s ease both; animation-delay: 1.1s;
}
.bloom-ring.spin { animation: ring-spin 38s linear infinite; animation-delay: 2.1s; }
@keyframes ring-in { from { opacity: 0; } to { opacity: .6; } }
@keyframes ring-spin { from { transform: translate(-50%,-50%) rotate(0); } to { transform: translate(-50%,-50%) rotate(360deg); } }

/* ---------- SVG GROWTH LINE (stroke draw) ---------- */
.cta-vine { position: absolute; left: 24px; top: 14px; width: 200px; height: 134px; z-index: 1; opacity: .9; pointer-events: none; }
.vine-dot { opacity: 0; transform-box: fill-box; transform-origin: center; }
.reveal.in .cta-vine .vine-dot { animation: dot-pop .5s cubic-bezier(.2,.9,.3,1.4) forwards; animation-delay: 1.9s; }
@keyframes dot-pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@media (max-width: 760px){ .cta-vine { display: none; } }
.grow-path {
  stroke-dasharray: var(--len, 1200);
  stroke-dashoffset: var(--len, 1200);
  transition: stroke-dashoffset 2.2s cubic-bezier(.4,.6,.3,1);
}
.reveal.in .grow-path, .grow-path.draw { stroke-dashoffset: 0; }

/* ---------- card / slot hover lift already in site.css; add float drift parallax ---------- */
[data-parallax] { will-change: transform; }

/* ---------- nav: shrink + solidify on scroll ---------- */
.nav.scrolled { padding: 6px 10px 6px 14px; background: rgba(255,255,255,.85); box-shadow: var(--shadow-md); }

/* ---------- ripple/marquee already in CSS ---------- */

/* ---------- reduced motion & no-anim ---------- */
@media (prefers-reduced-motion: reduce){
  .reveal, .bloom-word, .rise-in, .grow-path { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .bloom-petal, .bloom-mark, .bloom-ring { animation: none !important; opacity: var(--op,1) !important; }
  .reveal.in .bloom-rule { width: 56px; }
}
.no-anim .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
.no-anim .bloom-word, .no-anim .rise-in { opacity: 1 !important; transform: none !important; animation: none !important; }
.no-anim .grow-path { stroke-dashoffset: 0 !important; transition: none !important; }
.no-anim .bloom-petal { animation: none !important; opacity: var(--op,.9) !important;
  transform: translate(-50%,-50%) translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(var(--sc,1)) !important; }
.no-anim .bloom-mark { animation: none !important; opacity: 1 !important; transform: translate(-50%,-50%) !important; }
.no-anim .bloom-ring { animation: none !important; opacity: .5 !important; }
.no-anim .cd-flip { animation: none !important; }
.no-anim [data-parallax] { transform: none !important; }
.no-anim .nav.scrolled { transition: none; }