/* ===== Kontaktskjema: panelet brettes til et papirfly ved innsending =====
   Lastes kun av kontakt.html. Selvstendig blokk — ingen avhengigheter.

   Hele animasjonen er ETT ark. Silhuetten endres med clip-path gjennom tre
   brett, skyggeleggingen ligger som barn inne i arket (og klippes derfor med
   det), og det samme elementet flyr av gårde. Ingen krysstoning til et annet
   objekt, ingen løse elementer oppå.

   Bevisst unntak fra «bare transform og opacity»: clip-path animeres. Uten
   det finnes ingen måte å la ett og samme element endre form, og det var
   nettopp mangelen på kontinuitet som gjorde forrige forsøk dårlig.
   clip-path utløser paint, ikke layout, og dette er en engangs 2,3-sekunders
   animasjon på ett element. */

.sendbox{
  position:relative;
  /* Merkevarens easinger. tokens.css lastes ikke på denne siden. */
  --fly-out:cubic-bezier(0.23,1,0.32,1);
  --fly-inout:cubic-bezier(0.77,0,0.175,1);
}

/* Honeypot. Utenfor skjermen framfor display:none — boter hopper gjerne
   over skjulte felt, men fyller ut dette. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Brettets fire faser ----------
   Alle fire har nøyaktig 10 punkter i samme rekkefølge rundt formen, ellers
   nekter clip-path å interpolere. Punkter som ikke finnes ennå ligger oppå
   hverandre (de tre første er alle nesen fra og med fase 2). */

@keyframes sheet-fold{
  /* Helt ark */
  0%, 3%{
    clip-path:polygon(0% 0%, 50% 0%, 100% 0%, 100% 33%, 100% 66%,
                      100% 100%, 50% 100%, 0% 100%, 0% 66%, 0% 33%);
  }
  /* Brett 1: de to øverste hjørnene inn mot midtlinjen — nesen dannes */
  27%, 37%{
    clip-path:polygon(50% 0%, 50% 0%, 50% 0%, 100% 22%, 100% 66%,
                      100% 100%, 50% 100%, 0% 100%, 0% 66%, 0% 22%);
  }
  /* Brett 2: arket brettes på langs, høyre halvdel over den venstre */
  61%, 71%{
    clip-path:polygon(50% 0%, 50% 0%, 50% 0%, 50% 22%, 50% 66%,
                      50% 100%, 25% 100%, 0% 100%, 0% 66%, 0% 22%);
  }
  /* Brett 3: vingen brettes ned — dartsilhuetten står ferdig */
  95%, 100%{
    clip-path:polygon(50% 0%, 50% 0%, 50% 0%, 50% 40%, 50% 78%,
                      44% 100%, 30% 84%, 0% 100%, 12% 64%, 30% 32%);
  }
}

/* Arket flyttes gradvis mot midten mens det smalner, holder stille et
   øyeblikk, og flyr så av gårde. Egen easing på siste etappe. */
@keyframes paper-move{
  0%, 12%{ transform:translateX(0) rotate(0deg) scale(1) }
  62%{ transform:translateX(25%) rotate(3deg) scale(1) }
  70%{ transform:translateX(25%) rotate(3deg) scale(1);
       animation-timing-function:cubic-bezier(0.23,1,0.32,1) }
  100%{ transform:translateX(86%) translateY(-78%) rotate(34deg) scale(.32) }
}

@keyframes fly-fade-in{ to{ opacity:1 } }

/* ---------- Skjemaet blir til et ark ---------- */
/* Feltene fader ut og hjørnene rettes ut: panelet blir papir. Først da
   begynner brettingen, så clip-path aldri kutter av en avrundet kant. */
.sendbox .form{transition:opacity .20s ease}
.sendbox.is-sending .form,
.sendbox.is-sent .form{opacity:0;pointer-events:none}

.fly{position:absolute;inset:0;overflow:hidden;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .12s ease,visibility 0s .12s}
.sendbox.is-sending .fly{opacity:1;visibility:visible;
  transition:opacity .12s ease,visibility 0s}

/* drop-shadow følger clip-path, i motsetning til box-shadow. Det er dette
   som gir det brettede arket kant og tyngde — siden er hvit, så uten det
   ville en hvit dart vært usynlig. */
.fly__paper{position:absolute;inset:0;
  filter:drop-shadow(0 16px 24px rgba(4,22,53,.22));
  will-change:transform}
.sendbox.is-sending .fly__paper{
  animation:paper-move 2.15s var(--fly-inout) .20s both}

.fly__sheet{position:absolute;inset:0;overflow:hidden;
  /* Et snev av tone, ellers leses ikke papiret mot den hvite siden. */
  background:linear-gradient(158deg,#FFF 0%,#F6F8FC 100%);
  border:1px solid var(--line);border-radius:18px;
  transition:border-radius .20s ease;
  will-change:clip-path}
.sendbox.is-sending .fly__sheet{border-radius:0;
  animation:sheet-fold 1.30s var(--fly-inout) .20s both}

/* Skyggelegging. Barn av arket, så clip-path klipper dem med — de kan ikke
   løsne fra formen slik løse elementer gjorde. */
.fly__crease,.fly__shade{position:absolute;inset:0;opacity:0;pointer-events:none}

/* Fals på langs, kommer fram idet arket brettes dobbelt. */
.fly__crease{background:linear-gradient(90deg,
  rgba(4,22,53,0) 40%, rgba(4,22,53,.13) 49.5%,
  rgba(4,22,53,.03) 50.5%, rgba(4,22,53,0) 60%)}
.sendbox.is-sending .fly__crease{animation:fly-fade-in .34s ease .62s both}

/* Antydning av et lag papir over et annet, så dartens flate får dybde. */
.fly__shade{background:linear-gradient(112deg,
  rgba(4,22,53,.11) 0%, rgba(4,22,53,.04) 38%, rgba(4,22,53,0) 62%)}
.sendbox.is-sending .fly__shade{animation:fly-fade-in .40s ease 1.00s both}

/* ---------- Tregt nettverk ---------- */
/* Arket er ute av panelet og klippet bort når flyvningen er ferdig, så uten
   dette ville en treg sending etterlatt en tom boks uten forklaring. */
.sending{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  text-align:center;color:var(--gray-muted);font-size:.95rem;
  opacity:0;transition:opacity .3s ease}
.sendbox.is-waiting .sending{opacity:1}
.sendbox.is-sent .sending,
.sendbox.is-failing .sending{opacity:0}

/* ---------- Bekreftelsen ---------- */
/* Ligger der panelet lå, så siden ikke hopper når skjemaet forsvinner. */
.sent{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:center;gap:16px;
  padding:clamp(24px,4vw,40px);background:var(--white);border:1px solid var(--line);
  border-radius:18px;box-shadow:0 20px 50px -36px rgba(4,22,53,.4);
  opacity:0;visibility:hidden;transform:scale(.96) translateY(10px);
  transition:opacity .34s var(--fly-out),transform .38s var(--fly-out),visibility 0s .38s}
.sendbox.is-sent .sent{opacity:1;visibility:visible;transform:none;
  transition:opacity .34s var(--fly-out),transform .38s var(--fly-out),visibility 0s}
.sendbox.is-sent .fly{opacity:0;visibility:hidden;
  transition:opacity .24s ease,visibility 0s .24s}

.sent__ico{width:44px;height:44px;border-radius:12px;background:var(--blue-tint);
  color:var(--blue-strong);display:inline-flex;align-items:center;justify-content:center}
.sent__ico svg{width:21px;height:21px}
.sent h3{font-family:var(--display);font-weight:600;color:var(--navy);font-size:1.3rem}
.sent p{color:var(--gray-muted);max-width:38ch;font-size:.98rem;line-height:1.6}

/* ---------- Feil: arket kommer tilbake og bretter seg ut ---------- */
/* Samme keyframes spilt baklengs. Fordi vi alltid venter til flyvningen er
   ferdig før reversen starter, er sluttilstanden kjent, og `reverse` treffer
   presist uten en egen sekvens. */
.sendbox.is-failing .fly{opacity:1;visibility:visible;transition:none}
.sendbox.is-failing .fly__paper{animation:paper-move .62s var(--fly-out) reverse both}
.sendbox.is-failing .fly__sheet{animation:sheet-fold .62s var(--fly-inout) reverse both;
  border-radius:0}
.sendbox.is-failing .fly__crease{animation:fly-fade-in .24s ease reverse both}
.sendbox.is-failing .fly__shade{animation:fly-fade-in .24s ease reverse both}

.form__err{display:none;margin-top:16px;padding:14px 16px;border-radius:10px;
  background:rgba(178,58,72,.07);border:1px solid rgba(178,58,72,.26);
  color:#8E2B37;font-size:.94rem;line-height:1.55}
.form__err.show{display:block}
.form__err a{color:#8E2B37;text-decoration:underline}

/* ---------- Redusert bevegelse ---------- */
/* Ingen bretting, ingen flyvning. Opasiteten beholdes fordi den forklarer
   hva som skjedde; all bevegelse droppes. */
@media(prefers-reduced-motion:reduce){
  .fly{display:none}
  .sent{transform:none;transition:opacity .20s ease,visibility 0s .20s}
  .sendbox.is-sent .sent{transform:none;transition:opacity .20s ease,visibility 0s}
}