@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300&family=Inter:wght@300;400;500;600&display=swap');

:root{
  --night:#060f0e;
  --deep:#0a1a18;
  --moss:#4e7a5c;
  --sage:#8fb79a;
  --cream:#e8e4d6;
  --gold:#c9a24a;
  --shell:#0b1917;
  --ink:#e8e4d6;
  --ink2:#8fb79a;
}
/* op de vijver volgt de tekst het licht van het moment */
body.on-pond #nav .brand{color:var(--ink)}
body.on-pond #nav a.tab{color:var(--ink2)}
body.on-pond #nav a.tab.active{color:var(--gold)}
body.on-pond #nav{background:none}
#hero h1{color:var(--ink);transition:color 2s}
#hero .sub{color:var(--ink2) !important}
#weatherline{color:#cfe0d4 !important}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--night);
  color:var(--cream);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
button{font-family:inherit;cursor:pointer}

/* ============ nav ============ */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;gap:.2rem;
  padding:.85rem clamp(.9rem,3vw,2rem);
  background:linear-gradient(to bottom, rgba(4,11,10,.72), rgba(4,11,10,0));
  pointer-events:none;
}
#nav .brand{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.05rem;letter-spacing:.09em;font-weight:300;
  margin-right:auto;opacity:.92;pointer-events:auto;
  text-decoration:none;color:var(--cream);
}
#nav a.tab{
  pointer-events:auto;
  color:var(--sage);text-decoration:none;
  font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.5rem .72rem;border-radius:2px;
  opacity:.6;transition:opacity .25s,color .25s;
}
#nav a.tab:hover{opacity:1}
#nav a.tab.active{opacity:1;color:var(--gold)}
@media(max-width:560px){
  #nav{gap:0;padding:.7rem .7rem}
  #nav .brand{font-size:.95rem}
  #nav a.tab{font-size:.56rem;letter-spacing:.12em;padding:.45rem .42rem}
}

/* ============ views ============ */
.view{position:fixed;inset:0;opacity:0;pointer-events:none;transition:opacity .45s}
.view.active{opacity:1;pointer-events:auto}

/* ============ pond ============ */
#pond{overflow:hidden}
#sky{position:absolute;inset:0;transition:background 2s}
#pond-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#water{
  position:absolute;left:0;right:0;bottom:0;height:46%;
  border-top:1px solid rgba(143,183,154,.16);
  transition:background 2s;
}
#water::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(to bottom, rgba(143,183,154,.05) 0 1px, transparent 1px 8px);
  animation:drift 10s linear infinite;
}
@keyframes drift{to{transform:translateY(8px)}}
#ice{
  position:absolute;left:0;right:0;bottom:0;height:46%;opacity:0;
  background:linear-gradient(to bottom, rgba(214,235,238,.30), rgba(160,200,208,.10));
  transition:opacity 2s;
}
#ice::after{
  content:'';position:absolute;inset:0;opacity:.2;
  background:
    linear-gradient(72deg, transparent 49.7%, rgba(255,255,255,.45) 50%, transparent 50.3%),
    linear-gradient(158deg, transparent 39.8%, rgba(255,255,255,.3) 40%, transparent 40.2%),
    linear-gradient(18deg, transparent 69.8%, rgba(255,255,255,.25) 70%, transparent 70.2%);
}



#hero{
  position:absolute;left:0;right:0;top:clamp(10%,13vh,16%);
  text-align:center;pointer-events:none;z-index:5;
}
#hero h1{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;
  font-size:clamp(2.4rem,8.5vw,5.4rem);letter-spacing:.055em;line-height:1;
  text-shadow:0 2px 30px rgba(0,0,0,.5);
}
#hero .sub{
  margin-top:1rem;font-size:.66rem;letter-spacing:.42em;text-transform:uppercase;
  color:var(--sage);opacity:.72;
}
#hero .rule{width:44px;height:1px;background:var(--gold);opacity:.45;margin:1.2rem auto 0}

#stage{
  position:absolute;left:50%;bottom:9%;transform:translateX(-50%);
  width:min(96vw,860px);z-index:6;
}
#stage svg{display:block;width:100%;height:auto;overflow:visible}
.frog-g{cursor:pointer;transform-box:fill-box;transform-origin:50% 100%}
.frog-g.hop{animation:hopf .45s cubic-bezier(.3,1.4,.5,1)}
@keyframes hopf{
  0%{transform:translateY(0)}
  22%{transform:translateY(5px) scaleY(.9)}
  55%{transform:translateY(-24px) scaleY(1.07)}
  100%{transform:translateY(0)}
}
.throat{animation:breathe 3.6s ease-in-out infinite;transform-origin:center}
@keyframes breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.08)}}
.lid{transform-box:fill-box;transform-origin:50% 0%;transform:scaleY(0);transition:transform .8s}
.lid.shut{animation:blinkonce .22s}
@keyframes blinkonce{0%,100%{transform:scaleY(0)}50%{transform:scaleY(1)}}

#weatherline{
  position:absolute;left:0;right:0;bottom:2.2%;text-align:center;
  font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--sage);opacity:.42;pointer-events:none;z-index:5;
}

/* frog card */
#card{
  position:fixed;z-index:70;left:50%;bottom:-40%;transform:translateX(-50%);
  width:min(92vw,420px);
  background:rgba(7,19,17,.94);backdrop-filter:blur(16px);
  border:1px solid rgba(143,183,154,.18);border-radius:4px;
  padding:1.5rem 1.6rem 1.7rem;
  transition:bottom .5s cubic-bezier(.22,1,.36,1),opacity .4s;
  opacity:0;
}
#card.open{bottom:4%;opacity:1}
#card .who{font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);opacity:.85}
#card h3{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:1.9rem;margin:.35rem 0 .7rem}
#card p{font-size:.88rem;line-height:1.72;color:var(--sage);font-weight:300}
#card .meta{margin-top:1.1rem;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(143,183,154,.5)}
#card .x{position:absolute;top:.8rem;right:.9rem;background:none;border:0;color:var(--sage);opacity:.5;font-size:1.1rem;line-height:1}
#card .x:hover{opacity:1}

/* ============ shared panel chrome ============ */
.panel{
  position:absolute;inset:0;
  background:radial-gradient(130% 90% at 50% 0%, #102a26 0%, var(--shell) 55%, var(--night) 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:4.6rem 1rem 1.4rem;
  overflow-y:auto;
}
@media(max-height:760px){ .panel h2{font-size:1.4rem} .panel .note{display:none} }
.panel h2{
  font-family:'Cormorant Garamond',serif;font-weight:300;
  font-size:clamp(1.6rem,4.4vw,2.4rem);letter-spacing:.03em;
}
.panel .note{
  margin-top:.5rem;font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--sage);opacity:.55;text-align:center;
}

/* ============ game ============ */
#game .wrap{display:flex;flex-direction:column;align-items:center;gap:.8rem;width:100%}
#gcanvas{
  border:1px solid rgba(143,183,154,.16);border-radius:3px;
  background:#071412;touch-action:none;
  width:min(94vw,520px);height:auto;display:block;
}
#hud{
  display:flex;gap:1.6rem;align-items:baseline;
  font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sage);
}
#hud b{color:var(--cream);font-weight:500;letter-spacing:.1em}
#gmsg{
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);opacity:.8;min-height:1.1em;text-align:center;
}
#pad{display:none;gap:.5rem;grid-template-columns:repeat(3,56px);justify-items:center}
#pad button{
  width:56px;height:46px;background:rgba(143,183,154,.08);
  border:1px solid rgba(143,183,154,.2);border-radius:3px;
  color:var(--sage);font-size:1rem;
}
#pad button:active{background:rgba(201,162,74,.2)}
@media(hover:none){#pad{display:grid}}

/* ============ choir ============ */
#choir .pads{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,2.2vw,18px);
  width:min(90vw,440px);margin-top:2rem;
}
.pad{
  position:relative;aspect-ratio:1/.82;border:0;background:none;padding:0;
}
.pad svg{width:100%;height:100%;display:block;transition:transform .12s}
.pad:active svg,.pad.lit svg{transform:scale(.93)}
.pad .glow{opacity:0;transition:opacity .35s}
.pad.lit .glow{opacity:1}
#choirmsg{
  margin-top:1.8rem;min-height:2.6em;text-align:center;
  font-family:'Cormorant Garamond',serif;font-size:1.1rem;font-style:italic;
  color:var(--gold);opacity:0;transition:opacity 1s;max-width:34ch;line-height:1.5;
}
#choirmsg.show{opacity:.95}
#seq{display:flex;gap:6px;margin-top:1.4rem;opacity:.3}
#seq i{width:6px;height:6px;border-radius:50%;background:var(--sage)}
#seq i.on{background:var(--gold);box-shadow:0 0 8px rgba(201,162,74,.8)}

/* ============ kapitaal ============ */
#clicker .panel{justify-content:center;gap:3.2rem}
#clickfrog{
  width:min(80vw,420px);cursor:pointer;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.5));
}
#clickfrog svg{display:block;width:100%;height:auto;transition:transform .12s}
#clickfrog:active svg{transform:scale(.97)}
#tl{width:min(88vw,620px);position:relative;padding-top:1.6rem;user-select:none;-webkit-user-select:none}
#tl-date{
  position:absolute;top:0;transform:translateX(-50%);
  font-size:.62rem;letter-spacing:.18em;color:var(--gold);
  opacity:0;transition:opacity .3s;white-space:nowrap;font-variant-numeric:tabular-nums;
}
#tl.drag #tl-date{opacity:.9}
#tl-track{position:relative;height:2px;background:rgba(143,183,154,.16);cursor:pointer;touch-action:none}
#tl-track::before{content:'';position:absolute;left:0;right:0;top:-14px;bottom:-14px}
#tl-fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(to right,rgba(201,162,74,.15),rgba(201,162,74,.75))}
#tl-knob{
  position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 4px rgba(201,162,74,.15),0 0 14px rgba(201,162,74,.55);
}
#tl:not(.drag) #tl-knob{animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(201,162,74,.06),0 0 18px rgba(201,162,74,.7)}}
#tl-ticks i{position:absolute;top:-4px;width:1px;height:10px;background:rgba(143,183,154,.35)}
#tl-ticks span{
  position:absolute;top:14px;transform:translateX(-50%);
  font-size:.58rem;letter-spacing:.16em;color:var(--sage);opacity:.5;font-variant-numeric:tabular-nums;
}

/* ============ wauw ============ */
.frog-g.enter{animation:rise 1s cubic-bezier(.2,1.3,.4,1) both}
@keyframes rise{
  0%{transform:translateY(46px) scaleY(.6);opacity:0}
  55%{opacity:1}
  100%{transform:translateY(0) scaleY(1);opacity:1}
}
.frog-g.gulp{animation:gulp .38s ease-out}
@keyframes gulp{
  0%{transform:scale(1)} 35%{transform:scale(1.06,.94)} 70%{transform:scale(.98,1.03)} 100%{transform:scale(1)}
}
#bug .wing{transform-box:fill-box;transform-origin:50% 100%;animation:flap .06s linear infinite alternate}
@keyframes flap{to{transform:scaleY(.25)}}
#hero h1{animation:reveal 2.2s cubic-bezier(.2,.7,.2,1) both}
@keyframes reveal{
  from{opacity:0;letter-spacing:.32em;filter:blur(10px)}
  to{opacity:1;letter-spacing:.055em;filter:blur(0)}
}
#hero .sub,#hero .rule{animation:fadein 1.4s 1.2s both}
#weatherline{animation:fadein 1.4s 2.4s both}
@keyframes fadein{from{opacity:0}}
#pond{cursor:default}

.sac{transform-box:fill-box;transform-origin:50% 10%;transform:scale(.25,.15);opacity:0}
.croak .sac{animation:sac .6s ease-out}
@keyframes sac{
  0%{transform:scale(.25,.15);opacity:0}
  18%{transform:scale(1.2,1.25);opacity:1}
  34%{transform:scale(.7,.6);opacity:1}
  52%{transform:scale(1.15,1.2);opacity:1}
  100%{transform:scale(.25,.15);opacity:0}
}

/* ============ diepte ============ */
.px{will-change:translate}
#far{position:absolute;left:-2%;width:104%;bottom:46%;height:clamp(28px,6.5vh,64px);pointer-events:none}
#far-ref{position:absolute;left:-2%;width:104%;top:54%;height:clamp(28px,6.5vh,64px);
  transform:scaleY(-1);opacity:.22;filter:blur(1.4px);pointer-events:none}
#water{border-top:0 !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.reeds{position:absolute;bottom:46%;width:max(200px,32vw);height:min(30vh,250px);pointer-events:none;overflow:visible}
#reeds-l,#reeds-l-ref{left:-1%}
#reeds-r,#reeds-r-ref{right:-1%}
.reeds.ref{bottom:auto;top:54%;transform:scaleY(-1);opacity:.2;filter:blur(1.2px);
  -webkit-mask-image:linear-gradient(to top,#000 0%,transparent 75%);mask-image:linear-gradient(to top,#000 0%,transparent 75%)}
.fore{position:absolute;bottom:-2%;width:min(30vw,300px);height:min(48vh,420px);pointer-events:none;
  filter:blur(2.5px);z-index:8}
#fore-l{left:-3%}
#fore-r{right:-3%}
@media(max-width:600px){ .fore{width:34vw;height:30vh;filter:blur(1.8px)} .reeds{width:46vw;height:22vh} }

.reflect{opacity:.32}

/* geluidsknop */
#sound{
  position:absolute;right:clamp(14px,2.4vw,28px);bottom:clamp(14px,2.4vw,24px);z-index:20;
  width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--btnbg, rgba(4,12,11,.35));backdrop-filter:blur(8px);
  border:1px solid rgba(232,228,214,.18);color:var(--ink);
  transition:background .3s,border-color .3s,opacity .3s;opacity:.75;
}
#sound:hover{opacity:1;border-color:var(--gold)}
#sound .w1,#sound .w2{display:none}
#sound.on .w1,#sound.on .w2{display:block}
#sound.on .off{display:none}
#sound.on .w1{animation:wave 1.6s ease-in-out infinite}
#sound.on .w2{animation:wave 1.6s .25s ease-in-out infinite}
@keyframes wave{50%{opacity:.25}}
#sound:not(.on):not(.seen){animation:ping 2.8s 3.5s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(201,162,74,.45)}70%,100%{box-shadow:0 0 0 14px rgba(201,162,74,0)}}

/* ============ vangen ============ */
#catch{background:#061210}
#cbg{position:absolute;inset:0;width:100%;height:100%}
#ccv{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;z-index:2}
#cfrog{
  position:absolute;left:50%;bottom:2%;transform:translateX(-50%);
  width:min(56vw,300px);pointer-events:none;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.55));
}
#cfrog svg{display:block;width:100%;height:auto;overflow:visible}
#cfrog.stung{animation:sting .9s}
@keyframes sting{
  0%,100%{transform:translateX(-50%)}
  10%,30%,50%,70%{transform:translateX(calc(-50% - 6px))}
  20%,40%,60%,80%{transform:translateX(calc(-50% + 6px))}
}
#chud{
  position:absolute;z-index:3;top:64px;left:0;right:0;display:flex;justify-content:center;gap:2.4rem;
  font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--sage);pointer-events:none;
}
#chud b{color:var(--cream);font-weight:500;letter-spacing:.06em;font-size:.8rem;margin-left:.3rem}
#chud .time b{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:300;color:var(--gold);margin:0}
#chud{align-items:center}
#cmsg{
  position:absolute;z-index:3;left:50%;top:40%;transform:translate(-50%,-50%);
  text-align:center;pointer-events:none;transition:opacity .4s;width:90vw;
}
#cmsg.hide{opacity:0}
#cmsg h2{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(2rem,6vw,3.2rem);letter-spacing:.03em}
#cmsg .big{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:clamp(4rem,14vw,7rem);line-height:1;color:var(--cream)}
#cmsg p{margin-top:.8rem;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--sage);opacity:.75}
#cmsg p.go{margin-top:2rem;color:var(--gold);opacity:.9;animation:breath 2.2s ease-in-out infinite}
@keyframes breath{50%{opacity:.35}}
#cmsg .legend{display:flex;justify-content:center;gap:1.1rem;align-items:center;margin-top:1.4rem}
#cmsg .legend i{display:inline-block;width:9px;height:7px;border-radius:50%;margin-right:-.6rem}
#cmsg .lf{background:#18211e;box-shadow:0 0 0 1px rgba(143,183,154,.4)}
#cmsg .ld{background:#3d8fa0;width:16px !important;height:4px !important}
#cmsg .lg{background:#e2bf5c;box-shadow:0 0 8px rgba(226,191,92,.8)}
#cmsg .lw{background:repeating-linear-gradient(90deg,#e0b43a 0 2px,#1a1712 2px 4px)}
@media(max-width:560px){ #chud{gap:1.3rem;top:58px} }

@media(max-width:600px){
  .fore{width:30vw;height:17vh}
  #weatherline{left:0;right:58px;padding-left:14px;text-align:left;font-size:.5rem;letter-spacing:.16em;bottom:24px}
}

/* ============ weer ============ */
#cloudshade{position:absolute;inset:0;opacity:0;transition:opacity 3s;pointer-events:none}
#mist{position:absolute;left:-30%;right:-30%;top:34%;height:46%;opacity:0;transition:opacity 4s;pointer-events:none;z-index:7}
#mist i{position:absolute;left:0;right:0;height:42%;border-radius:50%;
  background:radial-gradient(ellipse at center, var(--mist,rgba(255,255,255,.4)) 0%, transparent 70%);
  filter:blur(18px);animation:mistdrift 38s ease-in-out infinite alternate}
#mist i:nth-child(1){top:8%}
#mist i:nth-child(2){top:34%;animation-duration:52s;animation-direction:alternate-reverse}
#mist i:nth-child(3){top:60%;animation-duration:44s}
@keyframes mistdrift{from{transform:translateX(-9%)}to{transform:translateX(9%)}}
#flash{position:absolute;inset:0;background:#eef3ff;opacity:0;pointer-events:none;z-index:9;mix-blend-mode:screen}
.sway{transform-box:fill-box;transform-origin:50% 100%}
.windy .sway{animation:sway 2.4s ease-in-out infinite alternate}
.windy .sway.slow{animation-duration:3.6s}
@keyframes sway{from{transform:skewX(-5deg)}to{transform:skewX(3deg)}}
.rainy .frog-g .lid{transform:scaleY(.48)}

/* ============ pasen ============ */
.egg{cursor:pointer}
.eggin{transform-box:fill-box;transform-origin:50% 100%}
.eggin.wob{animation:wob .7s ease-out}
@keyframes wob{0%,100%{transform:rotate(0)}20%{transform:rotate(-16deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-7deg)}80%{transform:rotate(3deg)}}
.bob{transform-box:fill-box;animation:bob 3.2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(3px)}}
#hero .rule{margin-top:1.4rem}