/* Fonturi locale (merg offline) */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/fraunces-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/fraunces-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --bg:#14110f; --ink:#f3ece2; --muted:#b9ad9d; --accent:#d97757; --accent2:#7fb3a6; --line:#3a312b;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#000;color:var(--ink);font-family:var(--sans);-webkit-user-select:none;user-select:none;touch-action:pan-y}

/* Scena fixa 1920x1080, scalata din JS */
#stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;overflow:hidden;background:#10173a}

/* Cer: straturi cu aparitie/disparitie lina */
#skies,.sky{position:absolute;inset:0}
.sky{opacity:0;transition:opacity 1.8s ease}
.sky.on{opacity:1}
.stars i{position:absolute;border-radius:50%;background:#fff;opacity:.85}
.sky.on .stars i{animation:twinkle 3.2s ease-in-out infinite}
.moon{position:absolute;left:130px;top:120px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fffbe8,#e9dfb8 70%);box-shadow:0 0 90px 30px rgba(255,244,200,.25)}
.sun{position:absolute;width:260px;height:260px;border-radius:50%;left:760px;background:radial-gradient(circle,#ffe8b0 0%,#ffb86b 55%,transparent 72%)}
.sun.dawn{top:480px}
.sun.dusk{top:520px;left:1200px}

/* Camera: straturile se misca cu tranzitie */
#far,#mid,#world{position:absolute;left:0;top:0;transform-origin:0 0;transition:transform 1.8s cubic-bezier(.7,0,.15,1)}
#far svg,#mid svg,#world svg{overflow:visible}
#vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 55% 55%,transparent 55%,rgba(0,0,0,.45) 100%)}

/* Animatii in lume */
@keyframes rise{from{opacity:0;transform:translateY(24px)}}
@keyframes popup{from{opacity:0;transform:scale(.3)}}
@keyframes growY{from{transform:scaleY(0)}}
@keyframes fade{from{opacity:0}}
@keyframes twinkle{50%{opacity:.25}}
@keyframes cloudmove{from{transform:translateX(0)}to{transform:translateX(160px)}}
@keyframes swing{from{transform:rotate(-14deg)}to{transform:rotate(10deg)}}
@keyframes fly{0%{transform:translate(0,0);opacity:0}15%{opacity:1}80%{opacity:1}100%{transform:translate(300px,-40px);opacity:0}}
@keyframes flick{50%{opacity:.35}}
@keyframes halo{50%{transform:scale(1.25)}}

.cloud{animation:cloudmove 50s ease-in-out infinite alternate}
.st.on .glow{animation:flick 4s ease-in-out infinite}
.st.on .tw{animation:flick 3s ease-in-out infinite}
#traveler .halo{animation:halo 2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}

/* Animatiile popasurilor ruleaza doar cand popasul e activ (.on). Starea de baza = starea finala. */
.st.on .tk{animation:popup .6s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--i)*.22s + .9s);transform-box:fill-box;transform-origin:center bottom}
.st.on .qm{animation:flick 1.2s steps(1) infinite;animation-delay:2.4s}
.st.on .pole{animation:growY .9s cubic-bezier(.2,.8,.2,1) both;transform-box:fill-box;transform-origin:center bottom;animation-delay:calc(var(--i)*.18s + 1s)}
.st.on .pen{animation:fade .5s both;animation-delay:calc(var(--i)*.18s + 1.7s)}
.st.on .bubble{animation:rise .6s both;animation-delay:.9s}
.st.on .tower{animation:fade 1.2s both;animation-delay:.6s}
.st.on .ghost{animation:flick 2.2s ease-in-out infinite;animation-delay:1.2s}
.st.on .book{animation:fly 4s ease-in infinite;animation-delay:calc(var(--i)*.8s)}
.st.on .beam{animation:swing 3.5s ease-in-out infinite alternate;transform-origin:0 0}
.st.on .pencil{animation:flick 2s ease-in-out infinite}

/* --- animatii ale popasurilor --- */
@keyframes smoke{0%{opacity:0;transform:translate(0,0) scale(.6)}20%{opacity:.5}100%{opacity:0;transform:translate(26px,-110px) scale(2.2)}}
@keyframes blade{0%{opacity:0;transform:translateX(-340px)}10%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translateX(340px)}}
@keyframes sentence{0%{opacity:0}12%{opacity:1}70%{opacity:1}100%{opacity:0}}
@keyframes thinkBig{0%{transform:scaleY(0)}18%{transform:scaleY(.55)}34%{transform:scaleY(.2)}52%{transform:scaleY(.8)}68%{transform:scaleY(.45)}84%{transform:scaleY(1.04)}100%{transform:scaleY(1)}}
@keyframes thinkSmall{0%{transform:scaleY(0)}18%{transform:scaleY(5)}34%{transform:scaleY(2)}52%{transform:scaleY(6)}68%{transform:scaleY(3.5)}84%{transform:scaleY(.8)}100%{transform:scaleY(1)}}
@keyframes lens{from{transform:translateX(0)}to{transform:translateX(380px)}}
@keyframes fogdrift{from{transform:translateX(-40px)}to{transform:translateX(50px)}}
@keyframes write{0%{transform:translate(0,0)}50%{transform:translate(4px,10px)}100%{transform:translate(-4px,0)}}
@keyframes burst{0%{opacity:1;transform:scale(.1)}30%{opacity:0;transform:scale(1.5)}100%{opacity:0;transform:scale(1.5)}}
@keyframes chipfly{0%{opacity:0;transform:translate(-10px,12px)}15%{opacity:1}80%{opacity:1;transform:translate(120px,-8px)}100%{opacity:0;transform:translate(132px,-12px)}}
@keyframes more{50%{transform:translateX(7px);opacity:1}}
.smoke,.blade,.sent,.fw,.chip{opacity:0}
.st.on .smoke{animation:smoke 3.4s ease-out infinite;animation-delay:calc(var(--i)*1.1s)}
.st.on .caret{animation:flick 1s steps(1) infinite}
.st.on .sent{animation:sentence 1.7s both}
.st.on .blade{animation:blade .95s cubic-bezier(.5,0,.5,1) .25s both}
.st.on .pole{animation:thinkSmall 2.6s ease-in-out both;transform-box:fill-box;transform-origin:center bottom;animation-delay:calc(var(--i)*.08s + .9s)}
.st.on .pole.big{animation-name:thinkBig}
.st.on .pen{animation:fade .5s both;animation-delay:calc(var(--i)*.15s + 3.7s)}
.st.on .fog{animation:fogdrift 7s ease-in-out infinite alternate}
.st.on .lens{animation:lens 3.2s ease-in-out 1.8s infinite alternate}
.st.on .pencil{animation:write .5s ease-in-out infinite}
.st.on .fw{animation:burst 4.2s ease-out infinite;transform-box:fill-box;transform-origin:center}
.st.on .chip{animation:chipfly 1.25s ease-in-out both}
.shd{transform:translateX(var(--sh,0px));transition:transform 1.8s ease}
.spark{position:absolute;left:0;top:0;width:10px;height:10px;border-radius:50%;background:#ffe9a8;opacity:0;pointer-events:none}

/* Navigare pe harta (puncte sus) */
#dots{position:absolute;right:56px;top:46px;display:flex;gap:14px;z-index:3}
#dots button{width:18px;height:18px;border-radius:50%;border:2px solid rgba(243,236,226,.7);background:rgba(20,17,15,.35);cursor:pointer;-webkit-appearance:none;appearance:none;padding:0;transition:all .4s}
#dots button.done{background:rgba(217,119,87,.8);border-color:rgba(217,119,87,.8)}
#dots button.cur{background:#fff6d8;border-color:#fff6d8;transform:scale(1.5);box-shadow:0 0 14px #ffe9a8}

/* Card cu textul slide-ului */
#card{position:absolute;left:90px;bottom:120px;width:740px;padding:44px 52px 28px;border-radius:30px;background:rgba(15,12,10,.86);border:1px solid rgba(243,236,226,.12);z-index:3;opacity:0}
#card.in{animation:rise .7s both;opacity:1}
#card .kicker{font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--accent);font-size:22px;letter-spacing:4px;margin-bottom:14px;min-height:26px}
#card h1{font-family:var(--serif);font-weight:500;font-size:62px;line-height:1.08;letter-spacing:-.5px;margin-bottom:26px}
#card .subtitle{font-size:34px;color:var(--muted);margin-bottom:10px}
#card ul{list-style:none}
#card li{font-size:34px;line-height:1.35;padding-left:40px;position:relative;margin-bottom:22px}
#card li::before{content:"";position:absolute;left:0;top:.5em;width:15px;height:15px;border-radius:50%;background:var(--accent)}
#card li.step{opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s}
#card li.step.shown{opacity:1;transform:none}
#card ul:empty{display:none}
#card .more{position:absolute;right:36px;bottom:20px;font-size:28px;color:var(--accent);opacity:.7;animation:more 1.4s ease-in-out infinite}
#card .more[hidden]{display:none}
#card.big .more{position:static;display:block;margin-top:14px;font-size:24px;letter-spacing:2px;color:var(--muted);animation:none}
#card .restart{margin-top:26px;font:inherit;font-size:30px;padding:14px 34px;border-radius:16px;border:2px solid var(--accent);background:rgba(217,119,87,.18);color:var(--ink);cursor:pointer;-webkit-appearance:none;appearance:none}
#card .restart:hover{background:rgba(217,119,87,.38)}
/* varianta mare, centrata (titlu / final) */
#card.big{left:50%;bottom:auto;top:90px;width:1300px;margin-left:-650px;text-align:center;background:rgba(15,12,10,.7)}
#card.big h1{font-size:104px;margin-bottom:18px}
#card.big .kicker{display:none}
#card.big .subtitle{font-size:42px}

/* Controale */
#progress{position:fixed;left:0;right:0;bottom:0;height:6px;background:rgba(255,255,255,.08);z-index:5}
#bar{height:100%;width:0;background:var(--accent);transition:width .4s}
#controls{position:fixed;left:16px;right:16px;bottom:16px;display:flex;align-items:center;gap:10px;z-index:5;opacity:.55;transition:opacity .3s}
#controls:hover,#controls:focus-within{opacity:1}
#controls button{width:48px;height:48px;border-radius:12px;border:1px solid var(--line);background:rgba(20,17,15,.85);color:var(--ink);font-size:22px;cursor:pointer;-webkit-appearance:none;appearance:none}
#controls button:hover{border-color:var(--accent)}
#counter{color:var(--muted);font-size:18px;min-width:70px;text-align:center}
#sound{margin-left:auto}
#sound.off{opacity:.4}

/* Ecrane tactile: fara animatiile continue de fundal */
.lite .cloud,.lite .stars i,.lite .st .glow,.lite .st .tw,.lite .st .book,.lite .st .beam,.lite .st .pencil,.lite .st .ghost,.lite .st .qm,.lite #traveler .halo,.lite .sun,.lite .st .smoke,.lite .st .caret,.lite .st .fog,.lite .st .lens,.lite .st .fw,.lite #card .more{animation:none!important}

.phone .moon{box-shadow:none}
.phone #vignette{display:none}

/* Telefon in portrait: cerem rotirea */
#rotate{display:none;position:fixed;inset:0;z-index:9;background:#14110f;color:var(--ink);text-align:center;align-items:center;justify-content:center;font-size:30px;line-height:1.5;font-family:var(--serif)}
#rotate div{font-size:34px}
#rotate small{font-size:18px;color:var(--muted);font-family:var(--sans)}
@media (orientation:portrait) and (max-width:700px){#rotate{display:flex}}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  #card{opacity:1}
}