/* ==========================================================================
   OM MIG — billedet i skår, der samler sig
   ========================================================================== */

#v-om{overflow:hidden;padding:0}
.om-scroll{position:absolute;inset:0;overflow-x:hidden;overflow-y:auto;padding:0 var(--side)}   /* rullen sidder her, så CRT-laget (et søskende til dette) står fast over hele skærmen */
.om{min-height:100%;display:flex;align-items:flex-start;justify-content:center;gap:clamp(48px,7vw,130px);padding:4px clamp(10px,3vw,50px) 40px}
.om>.om-tekst{margin-block:auto}
.om{overflow:visible}   /* skårene må flyve ud over kanten af .om uden at blive skåret over med en lige streg (#v-om skjuler det, der går uden for siden, og giver ingen rullepanel) */

/* ---------- Billedet ---------- */
.om-bild{--h:min(calc(100vh - 330px),660px);--ym:max(10px,calc((100vh - 134px - var(--h))/2));position:sticky;top:var(--ym);align-self:flex-start;margin-block:var(--ym) 0;flex:none;aspect-ratio:3/4;height:var(--h);min-height:300px;cursor:default}   /* står stille midt på skærmen, mens den lange tekst ruller */
.om-hel,.om-skaar i{position:absolute;inset:0;background-size:100% 100%;background-repeat:no-repeat}
.om-hel{opacity:0;transition:opacity .25s}                                   /* hele billedet under skårene: skjuler de fine sømme, når det er samlet */
.om-skaar i{
  display:block;
  translate:calc(var(--tx) + var(--ax,0%)) calc(var(--ty) + var(--ay,0%));rotate:calc(var(--ro) + var(--ar,0deg));
  opacity:.82;
  transition:translate .9s cubic-bezier(.2,.8,.2,1),rotate .9s cubic-bezier(.2,.8,.2,1),opacity .9s;
  animation:om-ryst var(--w) ease-in-out var(--wd) infinite alternate;       /* de ryster en smule: blikfang */
  will-change:translate,rotate
}
@keyframes om-lys{0%{filter:brightness(1) saturate(1)}22%{filter:brightness(2.1) saturate(1.25) sepia(.35)}100%{filter:brightness(1) saturate(1)}}   /* hver trekant lyser op for sig, når den sætter sig på plads */
@keyframes om-ryst{from{transform:translate(0,0)}to{transform:translate(var(--wx),var(--wy))}}

.samlet .om-skaar i{
  translate:0 0;rotate:0deg;opacity:1;
  animation:om-lys .75s ease-out calc(var(--d) + .8s) both;
  transition:translate .95s cubic-bezier(.2,.8,.2,1) var(--d),rotate .95s cubic-bezier(.2,.8,.2,1) var(--d),opacity .5s var(--d)
}

.samlet .om-hel{opacity:1;transition:opacity .6s 1.35s}

/* Guldrevnerne (kintsugi): viser, hvor det var gået i stykker */
.om-revner{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;opacity:0;transition:opacity .3s}
.om-revner path{fill:none;stroke:var(--sol);stroke-width:1px;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 3px rgba(246,203,69,.55))}
.samlet .om-revner{opacity:.55;transition:opacity 1.4s ease 1.2s}

/* ---------- Teksten ---------- */
.om-tekst{position:relative;z-index:2;flex:0 1 600px;min-width:0;padding:44px 0 8px;outline:0;cursor:default}
.om-tekst:focus-visible{outline:2px solid var(--hvid);outline-offset:14px}
.om-tekst h1{font-family:var(--brod);font-weight:200;font-size:clamp(44px,4.6vw,76px);letter-spacing:-.035em;margin:14px 0 0;line-height:.98;color:var(--hvid)}
.om-p{font-size:clamp(15px,.7vw + 8px,18px);font-weight:300;line-height:1.55;color:var(--daempet);margin-top:1.05em;max-width:52ch;transition:color .8s}
.om-stor{font-size:clamp(19px,1.2vw + 8px,27px);font-weight:300;line-height:1.28;color:var(--hvid);margin-top:1.3em;letter-spacing:-.01em}
.om-slut{color:var(--tekst)}
.om-sign{display:block;margin-top:.25em;font-size:1.1em;color:var(--perg)}
.om-pen{font-family:var(--pen);font-size:clamp(21px,1.3vw + 8px,27px);line-height:1.15;color:var(--sol);margin-top:1.1em;transform:rotate(-1deg);transform-origin:left center}
.samlet .om-p{color:var(--tekst)}

/* Tuschstreg under det vigtigste, og gul markering på invitationen */
.ink-m{background:linear-gradient(transparent 88%,var(--sol) 88% 94%,transparent 94%) no-repeat;background-size:0% 100%;transition:background-size 1.2s var(--langsom) .6s}
.om-tekst .ink-m,.samlet .ink-m{background-size:100% 100%}
.om-link{color:var(--sol);font-weight:400;text-decoration:none;cursor:pointer;background:linear-gradient(transparent 80%,rgba(246,203,69,.5) 80% 92%,transparent 92%);animation:om-puls 2.2s ease-in-out infinite;transition:background-color .25s,color .25s}
.om-link:hover,.om-link:focus-visible{background-color:rgba(246,203,69,.28);color:#fff;animation:none;outline:0}
.samlet .om-link{animation:none}
/* Håndskrevet note over linket: det er en mulighed, ikke bare pynt */
.om-cta{margin-top:3.1em}
.om-note{position:absolute;left:3.2em;margin-top:-1.75em;font-family:var(--pen);font-size:clamp(19px,1.2vw + 6px,24px);line-height:1;color:var(--sol);white-space:nowrap;transform:rotate(-2.5deg);transform-origin:left bottom;pointer-events:none;text-shadow:0 1px 10px rgba(6,10,30,.7)}
.om-note svg{position:absolute;left:-.4em;top:100%;width:17px;height:20px;fill:none;stroke:var(--sol);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-top:-4px}
@keyframes om-puls{0%,100%{background-color:transparent}50%{background-color:rgba(246,203,69,.2)}}

/* Håndskrevet vink: får folk til at holde musen over teksten */
.om-hint{position:absolute;right:0;top:78px;font-family:var(--pen);font-size:clamp(20px,1.5vw,26px);line-height:1;color:var(--sol);transform:rotate(3deg);transform-origin:right bottom;pointer-events:none;
  display:flex;flex-direction:row-reverse;align-items:flex-end;gap:8px;text-shadow:0 1px 10px rgba(6,10,30,.7);animation:om-vink 2.4s ease-in-out infinite;transition:opacity .8s 1s}   /* kommer igen, når billedet går i stykker */
.om-hint svg{width:38px;height:26px;margin-bottom:-12px;fill:none;stroke:var(--sol);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transform:scaleX(-1)}
.om-hint-tryk{display:none}
@media (hover:none){.om-hint-mus{display:none}.om-hint-tryk{display:inline}}
/* Telefon: "eller på billedet" til højre på samme linje, med en pil op mod billedet (et tryk på billedet samler det også) */
.om-eller{display:none;align-items:flex-end;gap:2px;margin-left:auto;color:var(--sol)}
.om-hint .om-eller svg{width:20px;height:27px;margin:0 0 -6px;transform:none;fill:none;stroke:var(--sol);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@keyframes om-vink{0%,100%{transform:rotate(3deg) translateY(0)}50%{transform:rotate(3deg) translateY(-5px)}}
@keyframes om-vink-v{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(-3deg) translateY(-5px)}}
.samlet .om-hint{opacity:0;transition:opacity .4s}


/* Fornemmelsen af at blive hel: billedet spænder og ryster mere og mere, mens skårene trækkes sammen, og får et gyldent glimt, når det sidder fast (så står det stille) */
.om-bild::after{content:"";position:absolute;inset:-10%;pointer-events:none;opacity:0;mix-blend-mode:screen;background:radial-gradient(ellipse at center,rgba(246,203,69,.55),rgba(246,203,69,.18) 45%,transparent 70%)}
.samlet .om-bild{animation:om-spaend 1.3s linear forwards}
@keyframes om-spaend{
  0%{transform:translate(0,0)}8%{transform:translate(.4px,-.3px)}16%{transform:translate(-.6px,.5px)}24%{transform:translate(.8px,.6px)}32%{transform:translate(-1px,-.7px)}
  40%{transform:translate(1.2px,.8px)}48%{transform:translate(-1.4px,-1px)}56%{transform:translate(1.6px,1.1px)}64%{transform:translate(-1.9px,-1.2px)}
  72%{transform:translate(2.1px,1.4px) scale(1.002)}80%{transform:translate(-2.4px,-1.5px) scale(1.004)}88%{transform:translate(2.6px,1.7px) scale(1.007)}92%{transform:translate(-1.4px,-.8px) scale(1.006)}100%{transform:translate(0,0) scale(1)}
}
.slag .om-bild::after{animation:om-glimt .9s ease-out both}
@keyframes om-glimt{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.samlet .om-bild,.slag .om-bild::after,.samlet .om-skaar i{animation:none}}

/* Telefon: ingen faste lag, ingen filter og ingen uendelig rysten pr. skår (se om.js) */
.enkel .om-skaar i{will-change:auto;animation:none;opacity:.9}
.enkel.samlet .om-skaar i{animation:none;opacity:1;transition:translate .8s cubic-bezier(.2,.8,.2,1) calc(var(--d)*.6),rotate .8s cubic-bezier(.2,.8,.2,1) calc(var(--d)*.6),opacity .4s}

@media (prefers-reduced-motion:reduce){
  .om-skaar i{animation:none}
  .om-hint,.om-link{animation:none}
}

/* ---------- Mellemstore og smalle skærme ---------- */
@media (max-width:1000px){
  .om{gap:clamp(24px,4vw,48px)}
  .om-bild{--h:min(calc(100vh - 250px),560px)}
  .om-tekst{flex-basis:420px}
}
@media (max-width:820px){
  .om{flex-direction:column;justify-content:flex-start;align-items:center;gap:22px;padding:4px 0 28px}
  .om>*{margin-block:0}
  .om>.om-tekst{margin-block:0}
  .om-bild{position:relative;top:auto;align-self:center;height:auto;width:min(60vw,calc(40vh*.75),300px);max-height:none;min-height:0;margin:30px 0 44px}
  .om-tekst{flex:none;width:100%;padding-top:52px}
  .om-tekst h1{font-size:46px}
  .om-hint{right:0;left:0;top:6px;flex-direction:row;transform:rotate(-3deg);transform-origin:left bottom;animation-name:om-vink-v}
  .om-hint svg{transform:none}
  .om-hint .om-eller svg{transform:none}
  @media (hover:none){.om-eller{display:flex}}
  .om-scroll{padding-inline:16px}
}

/* Faner i bunden på telefon: se mobil.css */
#tabs button{white-space:nowrap}
.om-nb{white-space:nowrap}