/* ═══════════ Zeltoria World — full-bleed illustrated scroll ═══════════
   Structure: each .panel is 100vh+ of continuous illustrated art (SVG layers),
   text blocks slide over the art. Panels stack and reveal like the reference. */
:root {
  --ink: #ffffff;
  --soft: rgba(255,255,255,.82);
  --dim: rgba(255,255,255,.66);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Outfit", system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); color: var(--ink); background: #0d0620; overflow-x: hidden; -webkit-font-smoothing: antialiased; }

/* ── nav ── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  display: flex; align-items: center;
  padding: 1.1rem clamp(1rem, 4vw, 2.6rem);
}
.brand { font-weight: 600; font-size: 1.15rem; color: #fff; text-decoration: none; letter-spacing: .02em; }
.nav-links { display: none; margin: 0 auto; gap: clamp(1.4rem, 4vw, 3.4rem); }
.nav-links a { color: rgba(255,255,255,.85); text-decoration: none; font-size: .95rem; text-shadow: 0 1px 12px rgba(0,0,0,.4); }
.nav-links a:hover { color: #fff; }
.lang-btn {
  margin-left: auto; padding: .55rem 1.15rem; background: transparent;
  border: 1px solid rgba(255,255,255,.55); border-radius: 2px;
  color: #fff; font: 500 .88rem var(--sans); cursor: pointer; letter-spacing: .04em;
  transition: background .2s;
}
.lang-btn:hover { background: rgba(255,255,255,.12); }
@media (min-width: 820px) { .nav-links { display: flex; } .lang-btn { margin-left: 0; } }

/* ── panel = one full-screen illustrated scene ── */
.panel {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
}
/* panels overlap slightly like the video's continuous world */
.panel + .panel { margin-top: -2px; }

/* ── art container: absolutely-positioned SVG layers, full bleed ── */
.art { position: absolute; inset: 0; z-index: 0; }
.art-layer { position: absolute; inset: -6% -4%; will-change: transform; }
.art-layer svg { width: 100%; height: 100%; display: block; }

/* ── text pin ── */
.pin {
  position: relative; z-index: 5;
  align-self: center;
  max-width: min(92vw, 560px);
  padding: clamp(4.5rem, 10vh, 7rem) clamp(1.2rem, 5vw, 3rem);
  text-shadow: 0 2px 30px rgba(10, 4, 30, .55);
}
.pin-left { justify-self: start; margin-left: clamp(0px, 4vw, 5rem); }
.pin-right { justify-self: end; margin-right: clamp(0px, 4vw, 5rem); text-align: left; }
.pin-center { justify-self: center; text-align: center; }
@media (max-width: 719px) {
  .pin { justify-self: center !important; margin: 0 !important; max-width: min(94vw, 560px); }
}

.pin-eyebrow { font-size: .95rem; font-weight: 500; color: rgba(255,255,255,.92); margin-bottom: clamp(1rem, 3vh, 2.2rem); text-shadow: 0 1px 16px rgba(0,0,0,.5); }
.pin-num { font-size: .85rem; letter-spacing: .18em; color: rgba(255,255,255,.75); text-transform: uppercase; margin-bottom: .8rem; }
.giant {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(4.2rem, 17vw, 10.5rem);
  line-height: .9;
  letter-spacing: .01em;
  color: #fff;
  text-shadow: 0 6px 60px rgba(20, 8, 50, .45);
}
.serif-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(3rem, 9vw, 5.4rem);
  line-height: 1;
  color: #fff;
}
.pin-rule { width: 130px; height: 1px; background: rgba(255,255,255,.75); margin: clamp(1rem, 2.6vh, 1.8rem) 0; }
.pin-body { color: var(--soft); text-shadow: 0 1px 14px rgba(10,4,30,.8), 0 0 34px rgba(10,4,30,.55); font-weight: 300; font-size: clamp(.95rem, 2.4vw, 1.05rem); line-height: 1.72; max-width: 50ch; }
.btn-white {
  display: inline-flex; align-items: center; gap: .7rem;
  margin-top: clamp(1.4rem, 3.4vh, 2.2rem);
  padding: .95rem 1.6rem;
  background: #fff; color: #1a1030;
  font: 500 .95rem var(--sans); text-decoration: none;
  border-radius: 3px;
  box-shadow: 0 10px 40px rgba(10,4,30,.35);
  transition: transform .25s ease, box-shadow .25s ease;
}
.btn-white:hover { transform: translateY(-2px); box-shadow: 0 16px 50px rgba(10,4,30,.45); }
.btn-white .tri { font-size: .7rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.3rem; max-width: 52ch; }
.chips span {
  font-size: .78rem; padding: .4rem .8rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.4); color: #fff;
  background: rgba(255,255,255,.1); backdrop-filter: blur(6px);
}

/* ── tracks ── */
.tracks { list-style: none; margin-top: 1.2rem; display: grid; gap: .4rem; max-height: 300px; overflow-y: auto; max-width: 52ch; }
.tracks li {
  display: flex; gap: .8rem; align-items: center;
  padding: .7rem .95rem; border-radius: 6px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.16); background: rgba(13,6,32,.35);
  backdrop-filter: blur(8px); font-size: .92rem;
  transition: background .2s, border-color .2s;
}
.tracks li:hover { background: rgba(255,255,255,.12); }
.tracks li.playing { border-color: #f0abfc; background: rgba(217,70,239,.18); }
.tracks li.empty { cursor: default; color: var(--dim); }
.tracks .t-num { font-size: .78rem; opacity: .7; }

/* ── player ── */
.player {
  position: fixed; z-index: 100;
  left: 50%; transform: translateX(-50%);
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: .7rem;
  width: min(94vw, 430px);
  padding: .55rem .7rem; border-radius: 999px;
  background: rgba(16, 8, 38, .72);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 20px 60px rgba(5,2,16,.55);
}
@media (min-width: 820px) { .player { left: 2rem; transform: none; width: 330px; } }
.pl-btn {
  display: grid; place-items: center; width: 38px; height: 38px; flex: none;
  border: 0; border-radius: 50%; cursor: pointer; color: #fff;
  background: linear-gradient(135deg, #8b5cf6, #d946ef);
}
.pl-btn.ghost { background: rgba(255,255,255,.14); }
.pl-info { flex: 1; min-width: 0; }
.pl-title { font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-bar { height: 3px; margin-top: .38rem; border-radius: 2px; background: rgba(255,255,255,.18); overflow: hidden; cursor: pointer; }
.pl-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #a78bfa, #f0abfc); }

/* ── footer ── */
.foot { text-align: center; padding: 2.4rem 1rem max(3rem, env(safe-area-inset-bottom)); background: #0d0620; color: rgba(255,255,255,.6); font-size: .85rem; }

/* ── reveal animations ── */
.pin > * { opacity: 0; transform: translateY(40px); transition: opacity 1s cubic-bezier(.22,.8,.3,1), transform 1s cubic-bezier(.22,.8,.3,1); }
.panel.seen .pin > * { opacity: 1; transform: none; }
.panel.seen .pin > *:nth-child(2) { transition-delay: .12s; }
.panel.seen .pin > *:nth-child(3) { transition-delay: .22s; }
.panel.seen .pin > *:nth-child(4) { transition-delay: .32s; }
.panel.seen .pin > *:nth-child(5) { transition-delay: .42s; }
.art-layer { opacity: 0; transform: scale(1.06); transition: opacity 1.4s ease, transform 1.8s ease; }
.panel.seen .art-layer { opacity: 1; transform: none; }
.panel.seen .art-layer:nth-child(2) { transition-delay: .1s; }
.panel.seen .art-layer:nth-child(3) { transition-delay: .2s; }
.panel.seen .art-layer:nth-child(4) { transition-delay: .3s; }
.panel.seen .art-layer:nth-child(5) { transition-delay: .4s; }

/* ── continuous ambient animations (always running) ── */
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-220px); } }
@keyframes driftSlow { from { transform: translateX(0); } to { transform: translateX(-140px); } }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes flock { 0%,100% { transform: translate(0,0); } 50% { transform: translate(26px,-16px); } }
@keyframes fallFlow { from { transform: translateY(-30px); } to { transform: translateY(30px); } }
@keyframes shimmer { 0%,100% { opacity: .12; } 50% { opacity: .3; } }
@keyframes ripple { 0%,100% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.06); opacity: .8; } }
@keyframes twinkle { 0%,100% { opacity: .4; } 50% { opacity: 1; } }
@keyframes sunPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes noteFloat { 0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  15% { opacity: .9; } 80% { opacity: .8; } 100% { transform: translateY(-260px) rotate(14deg); opacity: 0; } }
@keyframes sway { 0%,100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes glowPulse { 0%,100% { opacity: .55; } 50% { opacity: .95; } }

/* clouds drift & loop */
#hero .art-layer:nth-child(2) svg { animation: drift 60s linear infinite; }
#about .art-layer:nth-child(2) svg { animation: driftSlow 90s linear infinite; }

/* birds flap across the sky */
#hero .art-layer:nth-child(3) svg { animation: flock 9s ease-in-out infinite, bob 6s ease-in-out infinite; }

/* sun breathes */
#hero .art-layer:nth-child(1) { animation: sunPulse 10s ease-in-out infinite; transform-origin: 68% 42%; }
#music .art-layer:nth-child(1) { animation: sunPulse 12s ease-in-out infinite; transform-origin: 50% 65%; }
#about .art-layer:nth-child(1) { animation: sunPulse 12s ease-in-out infinite; transform-origin: 50% 70%; }

/* night stars twinkle */
#anime .art-layer:nth-child(1) svg { animation: twinkle 4s ease-in-out infinite; }
#gaming .art-layer:nth-child(1) svg { animation: twinkle 5s ease-in-out infinite; }

/* waterfalls flow */
#anime .art-layer:nth-child(2) svg { animation: fallFlow 1.6s linear infinite; }
#anime .art-layer:nth-child(1) svg { animation: twinkle 6s ease-in-out infinite; }
#gaming .art-layer:nth-child(2) svg { animation: fallFlow 2s linear infinite; }

/* light rays shimmer */
#anime .art-layer:nth-child(3) { animation: shimmer 6s ease-in-out infinite; }
#anime .art-layer:nth-child(3) svg { animation: sway 7s ease-in-out infinite; transform-origin: 50% 100%; }

/* lake glints ripple */
#hero .art-layer:nth-child(5) svg { animation: ripple 8s ease-in-out infinite; transform-origin: 50% 80%; }
#hero .art-layer:nth-child(4) svg { animation: sway 14s ease-in-out infinite; transform-origin: 50% 100%; }

/* deer & fisher gently bob (breathing life) */
#gaming .art-layer:nth-child(5) svg { animation: bob 7s ease-in-out infinite; }
#anime .art-layer:nth-child(4) svg { animation: bob 9s ease-in-out infinite; }
#hero .art-layer:nth-child(7) svg { animation: bob 10s ease-in-out infinite; }

/* plants & grass sway in the wind */

#gaming .art-layer:nth-child(4) svg { animation: sway 8s ease-in-out infinite; transform-origin: 50% 100%; }
#hero .art-layer:nth-child(6) svg { animation: sway 9s ease-in-out infinite; transform-origin: 50% 100%; }

/* music notes float upward */
#music .art-layer:nth-child(3) svg { animation: bob 5s ease-in-out infinite; }
#music .art-layer:nth-child(3) { animation: noteFloat 7s ease-in-out infinite; }

/* glow pulses on gradient buttons */


@media (prefers-reduced-motion: reduce) {
  .art-layer svg, .art-layer { animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .pin > *, .art-layer { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}

/* ── learn-more link (Noto style) ── */
.learn { text-shadow: 0 1px 12px rgba(10,4,30,.8); display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.4rem;
  color: #fff; text-decoration: none; font-size: .95rem; opacity: .9; }
.learn:hover { opacity: 1; }
.learn .dash { width: 26px; height: 1px; background: #fff; display: inline-block; }
.bars { letter-spacing: .2em; opacity: .8; margin-right: .3rem; }