/* ==========================================================================
   Hvelv-laes v2 — scenen "Kilderne strømmer ind"
   Fast overlay over hele appen; toner væk når døren er oppe.
   ========================================================================== */
.hvl{position:fixed;inset:0;z-index:130;overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 38%, #12333a 0%, #0c2429 42%, #071418 100%);
  transition:opacity .6s ease}
/* svage sonar-ringe i mørket + vignette */
.hvl::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-radial-gradient(circle at 50% 46%, transparent 0 118px, rgba(126,180,190,.045) 118px 119px)}
.hvl::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 45%, transparent 55%, rgba(3,10,12,.6) 100%)}
.hvl.ud{opacity:0;pointer-events:none}

/* gyldent lys bag døren */
.hvl-lys{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:1;
  background:radial-gradient(ellipse 66% 40% at 50% 43%, rgba(255,219,142,.92), rgba(255,198,108,.42) 42%, transparent 68%);
  transition:opacity .8s ease-out .15s}
.hvl.aabner .hvl-lys{opacity:1}
.hvl.ud .hvl-lys{opacity:0;transition:opacity 1s ease}

/* ordmærke */
.hvl-krom{position:absolute;top:30px;left:0;right:0;text-align:center;z-index:4;
  animation:hvlNed .7s ease-out .15s backwards;
  transition:opacity .45s ease}
.hvl-krom .wm{display:inline-flex;align-items:center;gap:10px}
.hvl-krom .wm span{font-weight:600;font-size:13px;letter-spacing:9px;
  padding-left:9px;color:rgba(239,230,210,.92)}
.hvl-krom .sub{display:block;margin-top:7px;
  font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:9px;
  letter-spacing:3.5px;color:rgba(239,230,210,.38)}
.hvl.aabner .hvl-krom,.hvl.aabner .hvl-chip,.hvl.aabner .hvl-traade,
.hvl.aabner .hvl-status2,.hvl.aabner .hvl-badge2{opacity:0}
@keyframes hvlNed{from{opacity:0;transform:translateY(-8px)}}

/* døren */
.hvl-hvelv{position:absolute;z-index:6;left:50%;top:46%;width:300px;height:300px;
  transform:translate(-50%,-50%);
  animation:hvlVaultIn .85s cubic-bezier(.34,1.56,.64,1) .1s backwards;
  transition:transform 1.05s cubic-bezier(.75,.02,.2,1)}
@keyframes hvlVaultIn{from{opacity:0;transform:translate(-50%,-50%) scale(.92)}}
.hvl.aabner .hvl-hvelv{transform:translate(-50%,calc(-50% - 135vh))}
.hvl-vaultsvg{width:100%;height:100%;display:block}
.hvl-rivet{fill:#0b2025;stroke:#33555e;stroke-width:1}
.hvl-hjul2{transform-box:fill-box;transform-origin:center;
  transition:transform 1.15s cubic-bezier(.34,1.56,.64,1)}
.hvl.drejer .hvl-hjul2{transform:rotate(360deg)}
.hvl-nogl{transition:opacity .35s ease}
.hvl-dorgl{transition:opacity .9s ease}
.hvl.drejer .hvl-dorgl{opacity:.3}
.hvl.aabner .hvl-dorgl{opacity:.95}

/* kilde-chips rundt om døren */
.hvl-chip{position:absolute;z-index:4;display:inline-flex;align-items:center;gap:7px;
  transform:translate(-50%,-50%);
  padding:8px 13px;border-radius:999px;
  border:1px solid rgba(231,181,88,.34);color:#e7b558;
  background:rgba(7,19,23,.66);
  font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:10px;
  letter-spacing:1.6px;text-transform:uppercase;white-space:nowrap;
  opacity:.42;transition:opacity .45s ease,transform .5s cubic-bezier(.34,1.56,.64,1);
  animation:hvlChipIn .65s cubic-bezier(.34,1.56,.64,1) var(--d,0s) backwards}
.hvl-chip i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.5}
.hvl-chip.aktiv{opacity:1;transform:translate(-50%,-50%) scale(1.08)}
.hvl-chip.aktiv i{opacity:1;box-shadow:0 0 10px 2px rgba(231,181,88,.6)}
.hvl-chip.fed{opacity:.9}
.hvl-chip.fed i{opacity:.9}
@keyframes hvlChipIn{from{opacity:0;transform:translate(-50%,-50%) scale(.7)}}

/* lys-trådene ind i nøglehullet */
.hvl-traade{position:absolute;inset:0;width:100%;height:100%;z-index:7;
  pointer-events:none;transition:opacity .45s ease}
.hvl-ghost{fill:none;stroke:rgba(230,216,188,.07);stroke-width:1.3;
  stroke-linecap:round;stroke-dasharray:.4 6}
.hvl-energy{fill:none;stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:100;stroke-dashoffset:100}
.hvl-energy.levende{stroke-dasharray:1.8 5.2;
  animation:hvlFlow 1.15s linear infinite;opacity:.68;transition:opacity .5s ease}
.hvl-traade.boost .hvl-energy.levende{opacity:.9}
@keyframes hvlFlow{to{stroke-dashoffset:-6.8}}
.hvl-tdot{opacity:0;transition:opacity .2s ease}

/* statuslinjen */
.hvl-status2{position:absolute;top:83.5%;left:0;right:0;text-align:center;z-index:4;
  font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:13px;
  letter-spacing:.6px;color:#e9dfc8;
  animation:hvlNed .6s ease-out .55s backwards;transition:opacity .45s ease}
.hvl-caret{color:#e3b45b;margin-left:3px}

/* AES-badget */
.hvl-badge2{position:absolute;left:50%;transform:translateX(-50%);z-index:4;
  bottom:calc(env(safe-area-inset-bottom,0px) + 20px);
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;
  border:1px solid rgba(239,230,210,.14);
  font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:9.5px;
  letter-spacing:1.8px;color:rgba(239,230,210,.52);white-space:nowrap;
  animation:hvlNed .6s ease-out .7s backwards;transition:opacity .45s ease}
.hvl-badge2 svg{color:#e3b45b;opacity:.85}

@media (prefers-reduced-motion:reduce){
  .hvl,.hvl::before,.hvl::after,.hvl *{animation:none!important;transition:none!important}
}

/* ==========================================================================
   Have-broen — kun naar appen kommer direkte fra login-ceremonien.
   Ikke et nyt show, men havens stille fortsaettelse paa cream papir,
   mens kilderne lander. Samme haender, samme aerlighed, andet sprog.
   ========================================================================== */
.hvl-have{background:
  radial-gradient(130% 105% at 50% 28%, #FBF8F1 0%, #F6F4EF 46%, #EEEAE0 100%);
  animation:hvlHaveIn .45s ease-out;
  transition:opacity .55s ease,transform .55s ease}
.hvl-have::before{background:repeating-radial-gradient(circle at 50% 42%,
  transparent 0 118px, rgba(22,86,92,.032) 118px 119px)}
.hvl-have::after{background:radial-gradient(120% 100% at 50% 45%,
  transparent 58%, rgba(120,105,70,.13) 100%)}
.hvl-have.ud{opacity:0;transform:scale(1.045)}
@keyframes hvlHaveIn{from{opacity:0}}

/* solen der staar op bag bedet, naar tavlen er klar */
.hvl-have-solglød{position:absolute;left:50%;top:44%;width:min(720px,130vw);
  height:min(500px,62vh);transform:translate(-50%,-50%);pointer-events:none;z-index:2;
  opacity:0;background:radial-gradient(ellipse 58% 52% at 50% 58%,
    rgba(240,197,110,.55), rgba(240,197,110,.16) 46%, transparent 70%);
  transition:opacity .9s ease}
.hvl-have.solop .hvl-have-solglød{opacity:1}

/* lysfnug over bedet */
.hvl-have-fnug{position:absolute;width:var(--dst,1.8px);height:var(--dst,1.8px);
  border-radius:50%;background:rgba(202,161,74,.55);
  animation:hvlStoev var(--dd,13s) linear var(--ds,0s) infinite}

/* ordmaerket — blaek paa papir */
.hvl-have-krom{position:absolute;top:34px;left:0;right:0;text-align:center;z-index:6;
  animation:hvlNed .7s ease-out .1s backwards}
.hvl-have-krom .wm{display:inline-flex;align-items:center;gap:10px}
.hvl-have-krom .wm span{font-weight:600;font-size:13px;letter-spacing:9px;
  padding-left:9px;color:#1D2629}
.hvl-have-krom .sub{display:block;margin-top:7px;
  font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:9px;
  letter-spacing:3.5px;color:#8A857A}

/* bedet */
.hvl-have-scene{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);
  width:min(680px,96vw);z-index:5}
.hvl-have-bed{width:100%;height:auto;display:block;overflow:visible}
.hvl-have-muld{fill:none;stroke:#DCD5C4;stroke-width:2.5;stroke-linecap:round}
.hvl-have-graes{fill:none;stroke:#9AA98B;stroke-width:2;stroke-linecap:round;opacity:.55}
.hvl-have-rodlinje{fill:none;stroke:#CAA14A;stroke-width:2.4;stroke-linecap:round;
  stroke-dasharray:440;stroke-dashoffset:440;
  transition:stroke-dashoffset .7s cubic-bezier(.45,.02,.23,1);
  filter:drop-shadow(0 0 4px rgba(202,161,74,.45))}

/* planterne: knop der venter, staengel der groer, krone der springer ud */
.hvl-have-plante .knop{animation:hvlKnop 2.2s ease-in-out infinite;transition:opacity .3s ease}
@keyframes hvlKnop{0%,100%{opacity:.45}50%{opacity:.95}}
.hvl-have-plante .svaelg{transform-box:fill-box;transform-origin:50% 100%}
.hvl-have-plante.groet .svaelg{animation:hvlHaveSway var(--sws,5.4s) ease-in-out
  var(--swd,0s) infinite alternate}
@keyframes hvlHaveSway{from{transform:rotate(-1.7deg)}to{transform:rotate(1.7deg)}}
.hvl-have-plante .stængel{fill:none;stroke:#3A5A4B;stroke-width:3.2;
  stroke-linecap:round;stroke-dasharray:150;stroke-dashoffset:150;
  transition:stroke-dashoffset .62s cubic-bezier(.45,.02,.23,1)}
.hvl-have-plante .blad{fill:#5E8263;transform:scale(0);transform-box:fill-box;
  transform-origin:0% 100%;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1) .24s}
.hvl-have-plante .blad.venstre{transform-origin:100% 100%}
.hvl-have-plante .krone{transform:scale(0);transform-box:fill-box;transform-origin:center;
  transition:transform .6s cubic-bezier(.34,1.56,.64,1) .4s}
.hvl-have-plante.groet .stængel{stroke-dashoffset:0}
.hvl-have-plante.groet .blad{transform:scale(1)}
.hvl-have-plante.groet .krone{transform:scale(1)}
.hvl-have-plante.groet .knop{opacity:0;animation:none}
.hvl-have-plante .plante-navn{font-family:'Spline Sans Mono',ui-monospace,monospace;
  font-size:9px;letter-spacing:1.6px;fill:#A39E92;text-anchor:middle;
  transition:fill .4s ease}
.hvl-have-plante.groet .plante-navn{fill:#1D2629}

/* statuslinje og badge — blaek paa papir */
.hvl-have-status{position:absolute;top:76.5%;left:0;right:0;text-align:center;z-index:6;
  font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:13px;
  letter-spacing:.6px;color:#4A5457}
.hvl-have-status .hvl-caret{color:#CAA14A;margin-left:3px}
.hvl-have-badge{position:absolute;left:50%;transform:translateX(-50%);z-index:6;
  bottom:calc(env(safe-area-inset-bottom,0px) + 20px);
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;border:1px solid rgba(29,38,41,.16);
  font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:9.5px;
  letter-spacing:1.8px;color:rgba(29,38,41,.55);white-space:nowrap}
.hvl-have-badge svg{color:#A8842F}

/* stille udgave (reduced motion): fuldt udgroet, men daempet —
   kilderne toner frem uden bevaegelse, naar de lander */
.hvl-have-stille .stængel{stroke-dashoffset:0}
.hvl-have-stille .blad,.hvl-have-stille .krone{transform:scale(1)}
.hvl-have-stille .hvl-have-plante{opacity:.36}
.hvl-have-stille .hvl-have-plante.groet{opacity:1}
.hvl-have-stille .knop{display:none}

/* ==========================================================================
   v3: scenen staar ALDRIG stille — stoev, tomgang, fremdriftsring, 3D-dybde
   ========================================================================== */

/* stoev i moerket: smaa lysfnug der driver langsomt opad og blinker svagt */
.hvl-stoevlag{position:absolute;inset:0;pointer-events:none;z-index:1}
.hvl-stoev{position:absolute;width:var(--dst,1.6px);height:var(--dst,1.6px);
  border-radius:50%;background:rgba(231,181,88,.7);
  animation:hvlStoev var(--dd,12s) linear var(--ds,0s) infinite}
@keyframes hvlStoev{
  0%{transform:translateY(0);opacity:0}
  12%{opacity:.75}
  55%{opacity:.5}
  100%{transform:translateY(-16vh);opacity:0}
}

/* hjulet i tomgang: et langsomt, roligt drej mens vi venter — erstattes
   af det rigtige drej naar faerdig() fjerner klassen */
.hvl-idle .hvl-hjul2{animation:hvlTomgang 26s linear infinite}
@keyframes hvlTomgang{to{transform:rotate(360deg)}}
.hvl-idle .hvl-hjul2,.hvl-hjul2{transform-box:fill-box;transform-origin:center}

/* noeglehullet pulserer sagte hele tiden — det lever. Pulsen ligger paa
   filter, saa den ikke overskriver den glød, traadene bygger op. */
.hvl-nogl{animation:hvlPuls 2.6s ease-in-out infinite}
@keyframes hvlPuls{0%,100%{filter:brightness(1)}50%{filter:brightness(1.5)}}
.hvl.drejer .hvl-nogl,.hvl.aabner .hvl-nogl{animation:none}

/* fremdriftsringen omkring pladen — kravler altid fremad */
.hvl-frem{stroke:#e3b45b;stroke-width:3;stroke-linecap:round;
  transform:rotate(-90deg);transform-origin:150px 150px;
  filter:drop-shadow(0 0 5px rgba(231,181,88,.65))}

/* spøgelses-traadene shimmerer svagt, saa selv "ventende" stier lever */
.hvl-ghost{animation:hvlGhost 3.4s linear infinite}
@keyframes hvlGhost{to{stroke-dashoffset:-6.4}}

/* 3D-rummet: perspektivet, og lagene i hver sit dybdeplan */
.hvl{perspective:950px}
.hvl-rum{position:absolute;inset:0;transform-style:preserve-3d;z-index:5;
  transition:transform .1s linear}
.hvl-chip{transform:translate(-50%,-50%) translateZ(46px)}
.hvl-chip.aktiv{transform:translate(-50%,-50%) translateZ(46px) scale(1.08)}
.hvl-traade{transform:translateZ(22px)}
.hvl-hvelv{transform-style:preserve-3d}
.hvl.drejer .hvl-hvelv,.hvl.aabner .hvl-hvelv{transform-style:flat}