/* CluoPrints motion layer — warm, lively, lightweight. Loaded after style.css. */
#mx-progress{position:fixed;top:0;left:0;height:4px;width:0;z-index:999;
  background:linear-gradient(90deg,#c4674a,#d9a441);border-radius:0 4px 4px 0;pointer-events:none}

/* scroll reveal */
.rv{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

/* hero life */
.hero-home{position:relative;overflow:hidden}
.hero-home .h-collage .main{animation:mx-kenburns 16s ease-in-out infinite alternate}
@keyframes mx-kenburns{from{transform:scale(1)}to{transform:scale(1.07)}}
.hero-home .h-collage .tile{animation:mx-bob 4.5s ease-in-out infinite}
.hero-home .h-collage .tile.t2{animation-delay:1.1s}
@keyframes mx-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.hero-home .h-badge{animation:mx-bob 3.6s ease-in-out infinite}
.petal{position:absolute;top:-40px;opacity:.5;pointer-events:none;z-index:1;
  animation-name:mx-drift;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes mx-drift{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(105vh) rotate(320deg)}}

/* marquee ribbon */
.mx-marquee{background:#7d8c6f;color:#fff;overflow:hidden;padding:12px 0;
  transform:rotate(-1.2deg) scale(1.02);margin:6px 0 0;position:relative;z-index:2}
.mx-track{display:flex;width:max-content;white-space:nowrap;font-weight:800;letter-spacing:.12em;
  animation:mx-slide 28s linear infinite}
@keyframes mx-slide{to{transform:translateX(-50%)}}

/* stats */
.mx-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:820px;margin:8px auto 0}
.mx-stat{background:#fffdf8;border:1px solid #eadbc8;border-radius:20px;padding:24px 8px;text-align:center;
  box-shadow:0 8px 20px rgba(90,60,30,.06)}
.mx-stat b{font-family:Georgia,'Times New Roman',serif;font-size:38px;color:#c4674a}
.mx-stat small{display:block;margin-top:4px;color:#6d645a;font-weight:700}
@media(max-width:560px){.mx-stats{grid-template-columns:1fr 1fr 1fr;gap:8px}.mx-stat b{font-size:26px}.mx-stat small{font-size:.72rem}}

/* cinematic scroll section */
.cine-wrap{height:300vh;position:relative;max-width:none;padding:0}
.cine{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;background:linear-gradient(180deg,#fbf5ec,#f1e7d3)}
.cine-frame{width:min(540px,84vw);border-radius:24px;overflow:hidden;border:6px solid #fff;
  box-shadow:0 30px 60px rgba(90,60,30,.28);will-change:transform}
.cine-frame img{width:100%;display:block}
.cine-line{position:absolute;bottom:10%;left:0;right:0;text-align:center;padding:0 16px;opacity:0;
  font-family:Georgia,'Times New Roman',serif;font-size:clamp(26px,5vw,42px);font-weight:700;color:#2e2a26}
.cine-line small{display:block;font-family:inherit;font-size:15px;font-weight:700;color:#c4674a;
  letter-spacing:.22em;margin-top:8px;text-transform:uppercase}

/* critter stage & performances */
.critters .stage-curtain{height:24px;max-width:900px;margin:0 auto 6px;border-radius:6px;
  background:repeating-linear-gradient(90deg,#c4674a 0 30px,#a9502f 30px 60px)}
.critters .stage-hint{text-align:center;color:#8a7f72;font-weight:700;margin-bottom:10px}
.critters .critter{position:relative;cursor:pointer}
.critters .critter .prop{position:absolute;font-size:21px;z-index:2;pointer-events:none}
.critters .critter .face{will-change:transform}
.critters .critter:nth-child(1) .face{animation:mx-foxplay 3.4s ease-in-out infinite}
@keyframes mx-foxplay{0%,100%{transform:translateY(0) rotate(0)}22%{transform:translateY(-13px) rotate(-6deg)}46%{transform:translateY(0) rotate(0)}70%{transform:translateY(-9px) rotate(5deg)}}
.critters .critter:nth-child(1) .prop{right:6px;top:-4px;animation:mx-leafspin 3.4s linear infinite}
@keyframes mx-leafspin{to{transform:rotate(360deg)}}
.critters .critter:nth-child(2) .face{animation:mx-bunnyhop 1.7s ease-in-out infinite}
@keyframes mx-bunnyhop{0%,100%{transform:translateY(0) scaleY(1)}30%{transform:translateY(-17px) scaleY(1.05)}55%{transform:translateY(0) scaleY(.9)}72%{transform:translateY(-8px) scaleY(1.02)}}
.critters .critter:nth-child(2) .prop{left:2px;bottom:34px;animation:mx-bob 1.7s ease-in-out infinite}
.critters .critter:nth-child(3) .face{animation:mx-bearslide 4.2s ease-in-out infinite}
@keyframes mx-bearslide{0%,100%{transform:translateX(-13px) rotate(-4deg)}50%{transform:translateX(13px) rotate(4deg)}}
.critters .critter:nth-child(3) .prop{animation:mx-snowfall 3s linear infinite}
@keyframes mx-snowfall{0%{transform:translateY(-6px);opacity:0}25%{opacity:.95}100%{transform:translateY(56px);opacity:0}}
.critters .critter:nth-child(4) .face{animation:mx-waddle 1.15s ease-in-out infinite}
@keyframes mx-waddle{0%,100%{transform:rotate(-6deg) translateY(0)}50%{transform:rotate(6deg) translateY(-4px)}}
.critters .critter:nth-child(4) .prop{left:0;top:2px;animation:mx-fishjump 2.6s ease-in-out infinite}
@keyframes mx-fishjump{0%,100%{transform:translate(0,20px) rotate(-24deg);opacity:0}25%{opacity:1}50%{transform:translate(8px,-6px) rotate(18deg);opacity:1}75%{opacity:1}90%{transform:translate(0,20px) rotate(50deg);opacity:0}}
.critters .critter.encore .face{animation-duration:.65s !important}
.mx-spark{position:absolute;font-size:17px;pointer-events:none;z-index:5;animation:mx-sparkup 1s ease-out forwards}
@keyframes mx-sparkup{from{transform:translateY(0) scale(.6);opacity:1}to{transform:translateY(-52px) scale(1.3);opacity:0}}

/* gentle card life */
.grid .card{transition:transform .35s ease,box-shadow .35s ease}
.grid .card:hover{transform:translateY(-6px);box-shadow:0 18px 34px rgba(90,60,30,.14)}
.grid .card img{transition:transform .6s ease}
.grid .card:hover img{transform:scale(1.06)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .rv{opacity:1;transform:none}
  .cine-wrap{height:auto}.cine{position:static;height:auto;padding:40px 0}.cine-line{position:static;opacity:1;margin-top:14px}
  .cine-line[data-line="1"],.cine-line[data-line="2"]{display:none}
}

/* --- v2: inner pages come alive --- */
.hero h1, .hero .h-eyebrow, .hero p, .hero .btn, main h1, .page-head h1{
  animation:mx-rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero p{animation-delay:.12s}.hero .btn{animation-delay:.22s}
@keyframes mx-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.gallery-main{animation:mx-rise .8s ease both;border-radius:18px}
.gallery-main img{animation:mx-kenburns 18s ease-in-out infinite alternate}
.thumbs img{transition:transform .3s ease}
.thumbs img:hover{transform:scale(1.08)}
.order-box .btn{animation:mx-glow 2.6s ease-in-out infinite}
@keyframes mx-glow{0%,100%{box-shadow:0 6px 16px rgba(196,103,74,.25)}50%{box-shadow:0 8px 26px rgba(196,103,74,.5)}}
.mx-marquee.slim{transform:none;padding:8px 0;font-size:.86rem;margin:0}
#mx-top{position:fixed;right:16px;bottom:18px;z-index:998;width:52px;height:52px;border-radius:50%;
  border:1px solid #eadbc8;background:#fffdf8;font-size:24px;cursor:pointer;display:none;
  box-shadow:0 10px 24px rgba(90,60,30,.2);animation:mx-bob 3s ease-in-out infinite}
#mx-top.show{display:block}