/* motion.css — cinematic additive layer for "Una aventura mágica"
   Rules:
   • Nothing is hidden unless <html> has .motion-ready (added by motion.js).
   • Mobile-first; enhancements at min-width:768px.
   • prefers-reduced-motion: everything visible and static.
   • Parallax uses the individual `translate` property, reveals use
     `transform`/`opacity`, so they never fight each other or app.js. */

:root{
  --mx-ease:cubic-bezier(.2,.7,.15,1);
  --mx-ease-soft:cubic-bezier(.4,0,.2,1);
  --mx-dur:.9s;
  --mx-gold:#efd69c;
  --mx-lilac:#c8bcf1;
}

/* ---------- Particle canvas (inserted into .night-sky) ---------- */
.mx-particles{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;opacity:0;
  transition:opacity 1.6s var(--mx-ease-soft);
}
.mx-particles.is-on{opacity:1}

/* Keep the hero content above the particle layer */
.motion-ready .night-sky>.hero,
.motion-ready .night-sky>.trip-ribbon,
.motion-ready .night-sky>.promo{position:relative;z-index:1}

/* ---------- Hero glow ---------- */
.motion-ready .hero-art:before{animation:mx-glow 7s ease-in-out infinite alternate}
@keyframes mx-glow{
  0%{opacity:.75;transform:scale(.94)}
  100%{opacity:1;transform:scale(1.08)}
}
.motion-ready .hero .button.gold{
  box-shadow:0 6px 36px #efd69c22,0 0 0 0 #efd69c55;
  animation:mx-halo 3.6s ease-in-out 2.2s infinite;
}
@keyframes mx-halo{
  0%,100%{box-shadow:0 6px 36px #efd69c22,0 0 0 0 #efd69c00}
  50%{box-shadow:0 6px 40px #efd69c40,0 0 0 8px #efd69c14}
}

/* Floating existing sparks (decorative, aria-hidden in markup) */
.motion-ready .spark{animation:mx-float 6s ease-in-out infinite;text-shadow:0 0 14px #efd69caa}
.motion-ready .spark-two{animation-duration:7.5s;animation-delay:-2s;color:var(--mx-lilac);text-shadow:0 0 14px #c8bcf1aa}
.motion-ready .spark-three{animation-duration:5.2s;animation-delay:-1s}
@keyframes mx-float{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-10px) rotate(12deg)}
}
.motion-ready .orbit-one{animation:mx-orbit 40s linear infinite}
.motion-ready .orbit-two{animation:mx-orbit2 55s linear infinite}
@keyframes mx-orbit{to{transform:rotate(336deg) scaleX(1.2)}}
@keyframes mx-orbit2{to{transform:rotate(380deg) scaleX(1.45)}}

/* ---------- Parallax (values written by JS as CSS vars) ---------- */
.motion-ready .hero-art{translate:0 var(--mx-par-art,0px);will-change:translate}
.motion-ready .hero-copy{translate:0 var(--mx-par-copy,0px)}

/* ---------- Kinetic headlines (word split) ---------- */
.mx-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.mx-wi{display:inline-block}
.motion-ready .mx-split .mx-wi{
  transform:translateY(110%) rotate(4deg);opacity:0;
  transition:transform var(--mx-dur) var(--mx-ease),opacity .6s var(--mx-ease-soft);
  transition-delay:calc(var(--mx-i,0) * 55ms + var(--mx-base,0ms));
}
.motion-ready .mx-split.is-in .mx-wi{transform:none;opacity:1}
.motion-ready h1.mx-split{--mx-base:150ms}

/* Hero supporting copy cascades after the H1 */
.motion-ready .hero-copy>:not(h1){
  opacity:0;transform:translateY(18px);
  transition:opacity .8s var(--mx-ease-soft),transform .9s var(--mx-ease);
}
.motion-ready .hero-copy.is-in>:not(h1){opacity:1;transform:none}
.motion-ready .hero-copy.is-in>.eyebrow{transition-delay:0s}
.motion-ready .hero-copy.is-in>.hero-description{transition-delay:.7s}
.motion-ready .hero-copy.is-in>.button{transition-delay:.85s}
.motion-ready .hero-copy.is-in>.hero-note{transition-delay:1s}
.motion-ready .hero-art>img{opacity:0;transform:scale(.96);transition:opacity 1.2s var(--mx-ease-soft),transform 1.6s var(--mx-ease)}
.motion-ready .hero.is-in .hero-art>img{opacity:1;transform:none}
/* app.js fades the still when the 3D scene is live — keep that behaviour */
.motion-ready .hero.is-in .hero-art.live>img{opacity:0}

/* ---------- Scroll reveals ---------- */
.motion-ready [data-mx-reveal]{
  opacity:0;transform:translateY(28px);
  transition:opacity .9s var(--mx-ease-soft),transform 1s var(--mx-ease);
  transition-delay:calc(var(--mx-i,0) * 90ms);
}
.motion-ready [data-mx-reveal="fade"]{transform:none}
.motion-ready [data-mx-reveal="scale"]{transform:translateY(20px) scale(.97)}
.motion-ready [data-mx-reveal].is-in{opacity:1;transform:none}

/* ---------- Smooth section transitions ---------- */
.paper-body{position:relative}
.motion-ready .paper-body:before{
  content:'';position:absolute;left:0;right:0;top:-48px;height:48px;pointer-events:none;
  background:linear-gradient(to bottom,#141c3e00,#faf8f3);
}
.motion-ready .parks-section{
  background:linear-gradient(to bottom,#faf8f3 0,#eeedf5 90px,#eeedf5 calc(100% - 90px),#faf8f3 100%);
  border-color:transparent;
}
.motion-ready .section-heading .eyebrow.ink{position:relative}
.motion-ready .section-heading.is-in .eyebrow.ink:after{
  content:'';display:block;height:1px;width:56px;margin-top:10px;
  background:linear-gradient(90deg,#695192,#efd69c);
  transform-origin:left;animation:mx-line 1s var(--mx-ease) .2s both;
}
@keyframes mx-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- Promo figure (inserted after the hero) ---------- */
.promo{padding:8px 0 40px;text-align:center;color:#f9f5ea}
.promo .eyebrow{margin-bottom:12px}
.promo h2{font-size:30px;letter-spacing:-1px;margin-bottom:20px;color:#f9f5ea}
.promo-figure{
  position:relative;margin:0 auto;max-width:360px;padding:3px;border-radius:24px;
  background:linear-gradient(140deg,#efd69c,#c8bcf1 45%,#695192 70%,#efd69c);
  box-shadow:0 20px 60px #0a0f2688,0 0 50px #c8bcf133;
}
.promo-figure:before{
  content:'';position:absolute;inset:-20px;border-radius:40px;z-index:-1;
  background:radial-gradient(ellipse,#b19be055,transparent 70%);filter:blur(20px);
}
.promo-figure video{
  display:block;width:100%;aspect-ratio:9/16;max-height:78vh;object-fit:cover;
  border-radius:21px;background:#141c3e;
}
.promo-figure figcaption{
  margin-top:14px;padding:0 8px 4px;font-size:13px;line-height:1.6;color:#d8d3e8;
}
.promo-figure figcaption span{color:var(--mx-gold);margin-right:6px}

/* ---------- Tablet / desktop enhancements ---------- */
@media (min-width:768px){
  .promo{padding:16px 0 64px}
  .promo h2{font-size:clamp(2rem,3.25vw,3rem)}
  .promo-figure{max-width:880px;border-radius:28px}
  .promo-figure video{aspect-ratio:16/9;max-height:none;border-radius:25px}
  .promo-figure figcaption{font-size:14px;margin-top:16px}
  .motion-ready [data-mx-reveal]{transform:translateY(40px)}
  .motion-ready [data-mx-reveal="fade"]{transform:none}
}

/* ---------- Reduced motion: everything visible, static ---------- */
@media (prefers-reduced-motion:reduce){
  .mx-particles{display:none!important}
  .motion-ready .hero-art,.motion-ready .hero-copy{translate:none!important}
  .motion-ready [data-mx-reveal],
  .motion-ready .mx-split .mx-wi,
  .motion-ready .hero-copy>:not(h1),
  .motion-ready .hero-art>img{opacity:1!important;transform:none!important;transition:none!important}
  .motion-ready .hero.is-in .hero-art.live>img{opacity:0!important}
  .motion-ready .spark,.motion-ready .orbit,.motion-ready .hero-art:before,
  .motion-ready .hero .button.gold,.motion-ready .section-heading .eyebrow.ink:after{animation:none!important}
}

/* ---------- Print: drop the cinematic layer ---------- */
@media print{
  .mx-particles,.promo{display:none!important}
  [data-mx-reveal],.mx-wi,.hero-copy>*,.hero-art>img{opacity:1!important;transform:none!important}
}