/* ============================================================
   GoZaanstad FX — global motion & special-effects layer.
   Safe: only animates opacity/transform/filter. Respects
   prefers-reduced-motion. Loaded on every public page.
   ============================================================ */

/* ---------- Scroll reveal (fly / float in) — BOLD ---------- */
.fx-reveal{
  opacity:0;
  transform:translateY(90px) scale(.92);
  transition:opacity 1s cubic-bezier(.16,1,.3,1),
             transform 1.1s cubic-bezier(.16,1,.3,1),
             filter 1s ease;
  will-change:opacity,transform;
}
.fx-reveal.fx-left  { transform:translateX(-120px) translateY(24px) rotate(-2deg); }
.fx-reveal.fx-right { transform:translateX(120px)  translateY(24px) rotate(2deg); }
.fx-reveal.fx-zoom  { transform:translateY(50px) scale(.78); }
.fx-reveal.fx-blur  { transform:translateY(50px); filter:blur(18px); }
.fx-reveal.fx-rotate{ transform:translateY(80px) rotate(-6deg) scale(.9); }
.fx-reveal.fx-flip  { transform:perspective(1000px) rotateX(34deg) translateY(60px); transform-origin:bottom; }
.fx-reveal.fx-in{ opacity:1 !important; transform:none !important; filter:none !important; }

/* ---------- Ken-Burns slow zoom on big imagery ---------- */
.fx-kb{ overflow:hidden; }
.fx-kb > img, img.fx-kb{ animation:fxKenBurns 20s ease-in-out infinite alternate; }
@keyframes fxKenBurns{ 0%{transform:scale(1.03)} 100%{transform:scale(1.15)} }

/* ---------- Gentle floating bob (icons / emoji / badges) ---------- */
.fx-bob{ animation:fxBob 4s ease-in-out infinite; }
.fx-bob:nth-child(2n){ animation-duration:5s; animation-delay:.4s; }
.fx-bob:nth-child(3n){ animation-duration:5.8s; animation-delay:.8s; }
@keyframes fxBob{ 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-14px) rotate(3deg)} }

/* ---------- Parallax helper ---------- */
.fx-parallax{ will-change:transform; }

/* ---------- Ambient floating bubbles (per-section, contained) ---------- */
.fx-bubbles{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.fx-bubbles + *{ position:relative; z-index:1; }
.fx-bubble{
  position:absolute; bottom:-100px; border-radius:50%;
  background:radial-gradient(circle at 32% 30%, rgba(0,212,255,.38), rgba(124,58,237,.08) 70%);
  filter:blur(1px); opacity:0; animation:fxRise linear infinite;
}
@keyframes fxRise{
  0%{ transform:translateY(0) translateX(0) scale(.7); opacity:0; }
  12%{ opacity:.8; }
  85%{ opacity:.65; }
  100%{ transform:translateY(-122vh) translateX(48px) scale(1.15); opacity:0; }
}

/* ---------- Card lift on hover (universal polish) ---------- */
.fx-lift{ transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease; }
.fx-lift:hover{ transform:translateY(-8px) scale(1.015); box-shadow:0 22px 60px rgba(0,0,0,.4); }

/* ---------- Scroll progress bar (top of page) ---------- */
.fx-progress{
  position:fixed; top:0; left:0; height:4px; width:0; z-index:2000;
  background:linear-gradient(90deg,#00d4ff,#7c3aed,#f59e0b);
  box-shadow:0 0 14px rgba(0,212,255,.6); transition:width .1s linear; pointer-events:none;
}

@media (prefers-reduced-motion: reduce){
  .fx-reveal{ opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; }
  .fx-kb > img, img.fx-kb, .fx-bob, .fx-bubble{ animation:none !important; }
  .fx-progress{ display:none; }
}

/* ---------- Scatter storytelling reveal (random drift-in) ---------- */
.fx-scatter{
  opacity:0;
  transform:translate(var(--fxx,0px), var(--fxy,70px)) rotate(var(--fxr,0deg)) scale(.86);
  transition:opacity 1s cubic-bezier(.16,1,.3,1), transform 1.2s cubic-bezier(.16,1,.3,1);
  will-change:opacity,transform;
}
.fx-scatter.fx-scatter-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .fx-scatter{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ---------- Pop-in (one-by-one storytelling reveal) ---------- */
.fx-pop{
  opacity:0;
  transform:translateY(70px) scale(.82) rotate(var(--pr,0deg));
  filter:blur(6px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .95s cubic-bezier(.34,1.56,.64,1), filter .7s ease;
  will-change:opacity,transform;
}
.fx-pop.fx-pop-in{ opacity:1; transform:none; filter:none; }

/* ---------- Continuous "floating in the air" ---------- */
.fx-float{ animation:fxFloat var(--fd,7s) ease-in-out infinite; animation-delay:var(--fdelay,0s); }
@keyframes fxFloat{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-13px) rotate(var(--frot,1.5deg)); }
}

/* ---------- Fly-in chapters (Built by locals / story) ---------- */
.fx-fly{ opacity:0; transition:opacity .85s cubic-bezier(.16,1,.3,1), transform 1.05s cubic-bezier(.16,1,.3,1); will-change:opacity,transform; }
.fx-fly.fly-l{ transform:translateX(-110px) translateY(34px) rotate(-6deg); }
.fx-fly.fly-r{ transform:translateX(110px)  translateY(34px) rotate(6deg); }
.fx-fly.fly-u{ transform:translateY(80px) scale(.9); }
.fx-fly.fx-fly-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .fx-pop,.fx-fly{ opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; }
  .fx-float{ animation:none !important; }
}

/* ============================================================
   CITY STORY — pinned one-by-one cinematic city reveal
   ============================================================ */
.cstory{ position:relative; background:#070b12; }
.cstory-track{ position:relative; height:calc((var(--n,10) + 1.3) * 62vh); }
.cstory-stage{ position:sticky; top:64px; height:calc(100vh - 64px); overflow:hidden; }
.cstory-deck{ position:absolute; inset:0; transition:opacity .5s ease; }
.cstory-card{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:18px;
  opacity:0; transform:translateY(80px) scale(.92); pointer-events:none;
  transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}
.cstory-card.active{ opacity:1; transform:none; pointer-events:auto; }
.cstory-card.past  { opacity:0; transform:translateY(-90px) scale(.9) rotate(-1deg); }
.cstory-card.future{ opacity:0; transform:translateY(90px)  scale(.9) rotate(1deg); }
.cstory-panel{
  position:relative; width:min(900px,94vw); height:min(72vh,640px);
  border-radius:30px; overflow:hidden; border:1px solid rgba(255,255,255,.14);
  box-shadow:0 40px 120px rgba(0,0,0,.55);
}
.cstory-bg{ position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.06); animation:fxKenBurns 18s ease-in-out infinite alternate; }
.cstory-panel::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(4,7,12,.95) 2%, rgba(4,7,12,.55) 40%, rgba(4,7,12,.08) 72%, rgba(4,7,12,.3) 100%); }
.cstory-inner{ position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; justify-content:flex-end; gap:10px; padding:clamp(22px,4vw,48px); }
.cstory-region{ font:700 .78rem/'1' 'Space Grotesk',sans-serif; letter-spacing:.2em; text-transform:uppercase; color:var(--accent,#00d4ff); }
.cstory-name{ font-family:'Playfair Display',serif; font-weight:900; font-size:clamp(2.4rem,7vw,5rem); line-height:1; color:#fff; margin:0; text-shadow:0 6px 34px rgba(0,0,0,.55); }
.cstory-emoji{ font-size:.8em; }
.cstory-intro{ font-size:clamp(1rem,2vw,1.3rem); line-height:1.6; color:rgba(255,255,255,.92); max-width:640px; text-shadow:0 2px 16px rgba(0,0,0,.5); }
.cstory-view{ align-self:flex-start; margin-top:8px; display:inline-flex; align-items:center; gap:8px; padding:13px 26px; border-radius:100px; background:#fff; color:#0a0f1a; font-weight:800; text-decoration:none; transition:transform .2s, box-shadow .2s; }
.cstory-view:hover{ transform:translateY(-3px); box-shadow:0 16px 44px rgba(255,255,255,.28); }
.cstory-hud{ position:absolute; top:18px; right:22px; z-index:3; font-weight:800; color:rgba(255,255,255,.9); background:rgba(0,0,0,.4); backdrop-filter:blur(8px); padding:7px 15px; border-radius:100px; font-size:.92rem; }
.cstory-hud-hint{ font-weight:500; opacity:.65; font-size:.78rem; margin-left:4px; }
.cstory-finale{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; padding:24px; opacity:0; transform:scale(.96); pointer-events:none; transition:opacity .6s ease, transform .6s ease; }
.cstory-finale.show{ opacity:1; transform:none; pointer-events:auto; }
.cstory-finale-h{ font-family:'Playfair Display',serif; font-weight:900; font-size:clamp(1.9rem,5vw,3.2rem); color:#fff; text-align:center; }
.cstory-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px; width:min(1080px,94vw); max-height:calc(100vh - 200px); overflow:auto; }
.cstory-mini{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:20px 12px; border-radius:18px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); color:#fff; text-decoration:none; transition:transform .25s, border-color .25s, background .25s; }
.cstory-mini:hover{ transform:translateY(-6px) scale(1.05); border-color:var(--accent,#00d4ff); background:rgba(255,255,255,.1); }
.cstory-mini-em{ font-size:1.9rem; }
.cstory-mini-name{ font-weight:700; font-size:.95rem; }
.cstory-static{ padding:40px 20px 60px; }
.cstory-static .cstory-finale-h{ margin-bottom:22px; }
@media (prefers-reduced-motion: reduce){ .cstory-bg{ animation:none; } }

/* ---------- CITY STORY — extra feeling ---------- */
.cstory-deck{ z-index:1; perspective:1500px; }
.cstory-card{ transition:opacity .85s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1), filter .8s ease; }
.cstory-card.future{ opacity:0; transform:translateY(100px) scale(.88) rotateX(14deg); filter:blur(9px); }
.cstory-card.past  { opacity:0; transform:translateY(-100px) scale(.88) rotateX(-14deg); filter:blur(9px); }
.cstory-card.active{ opacity:1; transform:none; filter:none; }
/* animated accent glow behind the active card */
.cstory-glow{ position:absolute; inset:-10% -10% 0 -10%; z-index:0; pointer-events:none; transition:background .8s ease; animation:csGlow 9s ease-in-out infinite; }
@keyframes csGlow{ 0%,100%{ opacity:.7; transform:scale(1); } 50%{ opacity:1; transform:scale(1.08); } }
/* giant ghost emoji watermark */
.cstory-ghost{ position:absolute; right:-2%; top:-6%; z-index:1; font-size:min(40vh,420px); line-height:1; opacity:.12; filter:grayscale(.2); pointer-events:none; transform:rotate(-8deg); }
.cstory-inner{ z-index:2 !important; }
/* "not Zaanstad" badge */
.cstory-out{ align-self:flex-start; display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:rgba(245,158,11,.22); border:1px solid rgba(245,158,11,.5); padding:6px 12px; border-radius:100px; margin-bottom:6px; backdrop-filter:blur(4px); }
/* vertical progress rail */
.cstory-rail{ position:absolute; left:18px; top:50%; transform:translateY(-50%); z-index:3; display:flex; flex-direction:column; gap:10px; }
@media(max-width:680px){ .cstory-rail{ display:none; } }
.cstory-dot{ width:10px; height:10px; border-radius:50%; border:none; padding:0; cursor:pointer; background:rgba(255,255,255,.28); transition:all .3s ease; }
.cstory-dot.on{ background:#fff; transform:scale(1.7); box-shadow:0 0 14px rgba(255,255,255,.6); }
/* finale tweaks */
.cstory-finale-note{ max-width:680px; text-align:center; color:rgba(255,255,255,.7); font-size:.92rem; line-height:1.6; margin:4px auto 0; }
.cstory-mini{ position:relative; }
.cstory-mini.is-out{ border-style:dashed; }
.cstory-mini-tag{ font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--gold,#f59e0b); }
/* per-city theme emoji on the big card */
.cstory-bigemoji{ font-size:clamp(2.6rem,6vw,4rem); line-height:1; margin-bottom:4px; filter:drop-shadow(0 6px 18px rgba(0,0,0,.5)); }

/* ---------- Map pin polish (map page only) ---------- */
.gz-pin{ cursor:pointer; }
.gz-pin:hover{ transform:translateY(-4px) scale(1.1); z-index:650; }
.gz-pin.featured svg{ animation:gzPinGlow 2.8s ease-in-out infinite; }
@keyframes gzPinGlow{ 0%,100%{ filter:drop-shadow(0 0 0 transparent); } 50%{ filter:drop-shadow(0 0 9px currentColor); } }

/* ---------- Welcome flourish over the cities ---------- */
.gz-confetti{ position:absolute; bottom:-40px; z-index:5; pointer-events:none; opacity:0; will-change:transform,opacity; animation:gzConf 2.6s ease-out forwards; }
@keyframes gzConf{ 0%{opacity:0; transform:translateY(0) rotate(0)} 12%{opacity:1} 100%{opacity:0; transform:translateY(-92vh) rotate(var(--cr,40deg))} }
@media (prefers-reduced-motion: reduce){ .gz-confetti{ display:none } }