/* =========================================================
   Kidkit by Jana — "Magic" layer
   Cinematic motion & delight: aurora, balloons, confetti,
   custom cursor, kinetic type, magnetic buttons, 3D tilt.
   Loads on top of style.css. All gracefully degrades.
   ========================================================= */

/* ---------- Scroll progress ---------- */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--coral),var(--gold),var(--mint));
  box-shadow:0 0 12px rgba(250,179,178,.6);transition:width .1s linear}

/* ---------- Custom cursor (desktop, fine pointer) ---------- */
.kk-cursor-dot,.kk-cursor-ring{position:fixed;top:0;left:0;z-index:9998;pointer-events:none;
  border-radius:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity .3s}
.kk-cursor-dot{width:8px;height:8px;background:var(--coral-deep);mix-blend-mode:multiply}
.kk-cursor-ring{width:38px;height:38px;border:2px solid var(--mint-deep);
  transition:width .25s var(--ease),height .25s var(--ease),background .25s,border-color .25s,opacity .3s}
body.kk-cursor-on.kk-pointer-fine .kk-cursor-dot,
body.kk-cursor-on.kk-pointer-fine .kk-cursor-ring{opacity:1}
body.kk-cursor-on.kk-pointer-fine,
body.kk-cursor-on.kk-pointer-fine a,
body.kk-cursor-on.kk-pointer-fine button,
body.kk-cursor-on.kk-pointer-fine .tilt,
body.kk-cursor-on.kk-pointer-fine input,
body.kk-cursor-on.kk-pointer-fine textarea,
body.kk-cursor-on.kk-pointer-fine select{cursor:none}
.kk-cursor-ring.hovering{width:64px;height:64px;background:rgba(186,226,205,.22);border-color:var(--coral)}
.kk-spark{position:fixed;z-index:9997;pointer-events:none;width:14px;height:14px;transform:translate(-50%,-50%);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F4D845'%3E%3Cpath d='M12 0l2.4 7.2L22 9.6l-6 4.8 2 7.6L12 17l-6 5 2-7.6-6-4.8 7.6-2.4z'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:0;animation:sparkLife .8s ease-out forwards}
@keyframes sparkLife{0%{opacity:1;transform:translate(-50%,-50%) scale(.2) rotate(0)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.1) rotate(90deg)}}

/* ---------- Confetti canvas ---------- */
#kk-confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:9990}

/* ---------- Aurora animated background ---------- */
.aurora{position:absolute;inset:0;overflow:hidden;z-index:-2;pointer-events:none}
.aurora i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;mix-blend-mode:multiply;
  animation:auroraFloat 22s ease-in-out infinite}
.aurora i:nth-child(1){width:46vw;height:46vw;background:var(--coral);left:-8vw;top:-10vw;animation-delay:0s}
.aurora i:nth-child(2){width:42vw;height:42vw;background:var(--mint);right:-6vw;top:-4vw;animation-delay:-6s}
.aurora i:nth-child(3){width:38vw;height:38vw;background:var(--gold);left:18vw;bottom:-16vw;opacity:.4;animation-delay:-12s}
.aurora i:nth-child(4){width:30vw;height:30vw;background:var(--coral);right:8vw;bottom:-12vw;animation-delay:-3s}
@keyframes auroraFloat{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(4vw,3vw) scale(1.12)}
  66%{transform:translate(-3vw,1vw) scale(.94)}
}

/* subtle premium grain */
.grain{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- Floating balloons ---------- */
.balloons{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.balloon{position:absolute;bottom:-200px;width:90px;
  background:url("../img/logo-balloon.png") center/contain no-repeat;
  will-change:transform;opacity:0}
.balloon::after{content:"";display:block;padding-top:135%}

/* ---------- Hero headline: lines rise up (preserves <em>) ---------- */
.hero-headline{margin-bottom:1.3rem}
.hero-headline .line{display:block;overflow:hidden;padding-bottom:.06em}
.hero-headline .line > span{display:inline-block;transform:translateY(118%);animation:kinRise .95s var(--ease) forwards}
.hero-headline .line:nth-child(1) > span{animation-delay:.15s}
.hero-headline .line:nth-child(2) > span{animation-delay:.32s}
.hero-headline .line:nth-child(3) > span{animation-delay:.49s}
.hero-headline em{font-style:italic;color:var(--coral-ink)}
@media(prefers-reduced-motion:reduce){.hero-headline .line>span{transform:none;animation:none}}

/* ---------- Kinetic headline ---------- */
.kin{display:inline-block}
.kin .word{display:inline-block;overflow:hidden;vertical-align:top}
.kin .word > span{display:inline-block;transform:translateY(110%);
  animation:kinRise .9s var(--ease) forwards}
@keyframes kinRise{to{transform:translateY(0)}}

/* ---------- Magnetic / shimmer button ---------- */
.magnetic{position:relative;will-change:transform}
.btn.shine{position:relative;overflow:hidden}
.btn.shine::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);transition:none}
.btn.shine:hover::after{animation:shineSweep .9s ease}
@keyframes shineSweep{to{left:140%}}

/* ---------- 3D tilt cards ---------- */
.tilt{transform-style:preserve-3d;transition:transform .25s var(--ease);will-change:transform}
.tilt .tilt-layer{transform:translateZ(40px)}

/* ---------- Cinematic hero ---------- */
.hero-cine{position:relative;min-height:clamp(640px,92vh,1000px);display:flex;align-items:center;
  padding:clamp(40px,7vh,90px) 0;overflow:hidden}
.hero-cine .hero-grid{position:relative;z-index:2}
.eyebrow-pop{opacity:0;transform:translateY(14px);animation:fadeUp .7s var(--ease) .1s forwards}
.hero-cine .lead{opacity:0;transform:translateY(14px);animation:fadeUp .8s var(--ease) .9s forwards}
.hero-cine .hero-tagline{opacity:0;transform:translateY(14px);animation:fadeUp .8s var(--ease) 1.05s forwards}
.hero-cine .hero-actions{opacity:0;transform:translateY(14px);animation:fadeUp .8s var(--ease) 1.2s forwards}
@keyframes fadeUp{to{opacity:1;transform:none}}

/* stacked tilted photo cards */
.hero-stack{position:relative;height:clamp(420px,52vh,600px);perspective:1200px}
.photo-card{position:absolute;border-radius:26px;overflow:hidden;border:6px solid #fff;
  box-shadow:var(--shadow-lg);background:var(--cream-2)}
.photo-card img{width:100%;height:100%;object-fit:cover;display:block}
.photo-card.pc1{width:64%;height:78%;left:0;top:6%;z-index:2;rotate:-5deg;
  animation:floatCard 7s ease-in-out infinite}
.photo-card.pc2{width:56%;height:62%;right:0;bottom:2%;z-index:3;rotate:5deg;
  animation:floatCard 7s ease-in-out infinite reverse;animation-delay:-2s}
@keyframes floatCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.hero-stack .sticker{position:absolute;z-index:5;background:#fff;border-radius:16px;
  box-shadow:var(--shadow-md);padding:.7rem 1rem;font-weight:700;font-size:.85rem;display:flex;gap:.6rem;align-items:center}
.hero-stack .sticker small{display:block;font-weight:500;color:var(--ink-soft);font-size:.74rem}
.hero-stack .sticker.s1{top:-14px;right:8%}
.hero-stack .sticker.s2{bottom:6%;left:-10px}
.hero-stack .badge-dot{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:1.1rem}
.hero-balloon-float{position:absolute;width:120px;z-index:4;left:-44px;bottom:18%;
  filter:drop-shadow(0 14px 20px rgba(39,34,41,.18));animation:floatY 6s ease-in-out infinite}

.scroll-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--ink-soft);
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;font-weight:800;
  opacity:0;animation:fadeUp .8s var(--ease) 1.6s forwards}
.scroll-cue .mouse{width:24px;height:38px;border:2px solid var(--ink-soft);border-radius:14px;position:relative}
.scroll-cue .mouse::before{content:"";position:absolute;left:50%;top:7px;width:4px;height:8px;border-radius:3px;
  background:var(--coral-deep);transform:translateX(-50%);animation:wheel 1.5s ease-in-out infinite}
@keyframes wheel{0%{opacity:0;top:7px}40%{opacity:1}100%{opacity:0;top:18px}}

@media(max-width:880px){
  .hero-stack{height:380px;margin-top:1.5rem}
  .hero-balloon-float{width:92px;left:0}
}

/* ---------- Marquee ---------- */
.marquee{overflow:hidden;padding:1.4rem 0;border-block:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;gap:3.5rem;width:max-content;animation:marq 26s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--serif);
  font-size:clamp(1.3rem,2.4vw,2rem);font-weight:600;color:var(--ink);white-space:nowrap}
.marquee__item .star{color:var(--gold)}
.marquee__item.c-coral{color:var(--coral-deep)}.marquee__item.c-mint{color:var(--mint-deep)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- Stats band ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin-top:3rem}
.stat{text-align:center;padding:1.6rem 1rem;border-radius:var(--radius);background:#fff;border:1px solid var(--line)}
.stat .num{font-family:var(--serif);font-size:clamp(2.4rem,5vw,3.6rem);font-weight:600;line-height:1;
  background:linear-gradient(120deg,var(--coral-deep),var(--gold-ink) 60%,var(--mint-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.stat .lbl{margin-top:.5rem;font-weight:700;font-size:.86rem;color:var(--ink-soft);letter-spacing:.02em}
@media(max-width:760px){.stats{grid-template-columns:1fr 1fr}}

/* ---------- Wave dividers ---------- */
.wave{display:block;width:100%;height:auto;line-height:0}
.wave svg{display:block;width:100%;height:clamp(40px,6vw,90px)}

/* ---------- Events gallery: appear immediately + Ken Burns ---------- */
.kk-gallery figure{animation:galleryPop .7s var(--ease) both}
.kk-gallery figure:nth-child(1){animation-delay:.04s}
.kk-gallery figure:nth-child(2){animation-delay:.12s}
.kk-gallery figure:nth-child(3){animation-delay:.20s}
.kk-gallery figure:nth-child(4){animation-delay:.28s}
.kk-gallery figure:nth-child(5){animation-delay:.36s}
.kk-gallery figure:nth-child(6){animation-delay:.44s}
.kk-gallery figure:nth-child(7){animation-delay:.52s}
.kk-gallery figure:nth-child(8){animation-delay:.60s}
.kk-gallery figure:nth-child(9){animation-delay:.68s}
@keyframes galleryPop{0%{opacity:0;transform:scale(.86) translateY(22px)}100%{opacity:1;transform:none}}
.kk-gallery img{animation:kenburns 16s ease-in-out infinite alternate}
.kk-gallery figure:nth-child(3n) img{animation-duration:20s;animation-direction:alternate-reverse}
.kk-gallery figure:nth-child(3n+1) img{animation-duration:18s}
@keyframes kenburns{from{transform:scale(1.01)}to{transform:scale(1.13)}}
.kk-gallery figure::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.45),transparent 38%);
  transform:translateX(-120%);}
.kk-gallery figure:hover::after{animation:galleryShine 1s var(--ease)}
@keyframes galleryShine{to{transform:translateX(120%)}}

/* ---------- Timeline: animated years + pulsing dots ---------- */
.reveal.in .tl-year{animation:yearPop .75s var(--ease) both}
@keyframes yearPop{0%{opacity:0;transform:scale(.3) rotate(-9deg)}55%{transform:scale(1.16) rotate(2deg)}100%{opacity:1;transform:none}}
.reveal.in .tl-body::before{animation:dotPulse 1.2s ease .12s 1}
@keyframes dotPulse{0%,100%{box-shadow:0 0 0 5px var(--cream)}50%{box-shadow:0 0 0 11px rgba(250,179,178,.55),0 0 0 5px var(--cream)}}

/* ---------- Reveal helpers (in addition to .reveal) ---------- */
.pop{opacity:0;transform:scale(.9);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.pop.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .aurora i,.balloon,.photo-card,.hero-balloon-float,.marquee__track,.kin .word>span,
  .eyebrow-pop,.hero-cine .lead,.hero-cine .hero-tagline,.hero-cine .hero-actions,.scroll-cue,
  .kk-gallery figure,.kk-gallery img,.reveal.in .tl-year{
    animation:none!important;opacity:1!important;transform:none!important}
  .scroll-progress{display:none}
}