/* Animationer til det nye jyskss.dk (dev.jyskss.dk), kopieret fra erab.jyskss.dk/kode 2026-10-21, så de to
   sites har samme bevægelser. Lægges i assets/ af build_site.py.
   Designets elementer har kun inline-stil, så reglerne rammer dem på tag og på stumper af deres style-attribut.
   Hover-bevægelser bruger translate/scale (ikke transform), så de ikke slås med fremkaldelsen ved scroll.
   Alt er slået fra nederst for brugere, der har bedt om mindre bevægelse. */

html { background: #0B0B0A; scroll-behavior: smooth; }

/* Sideskift: blød overgang mellem siderne i browsere, der kan det */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }

/* Indgang: siden toner frem, når anim.js har gjort elementerne klar (.js og .rv-ready sættes på <html>) */
.js body { opacity: 0; }
.js.rv-ready body { opacity: 1; transition: opacity .5s ease-out; }
@keyframes headIn { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
.js.rv-ready header { animation: headIn .7s cubic-bezier(.2, .7, .2, 1) both; }

/* Fremkaldelse ved scroll: anim.js sætter data-rv på indholdet og .rv-in, når det kommer ind i billedet */
.js [data-rv] {
  opacity: 0; transform: translateY(26px);
  transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--rv-d, 0ms);
}
.js [data-rv="head"] { transform: translateY(46px); }
.js [data-rv].rv-in { opacity: 1; transform: none; }
/* Billeder afsløres nedefra og op. Skjult med opacity indtil da; selve afsløringen er en animation, som først
   starter med .rv-in. */
@keyframes wipeUp { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
.js [data-rv="photo"] { opacity: 0; transform: none; transition: none; }
.js [data-rv="photo"].rv-in {
  opacity: 1; animation: wipeUp 1.1s cubic-bezier(.7, 0, .2, 1) both; animation-delay: var(--rv-d, 0ms);
}

/* Forsidens store foto bevæger sig ganske langsomt */
@keyframes kenBurns { from { scale: 1; } to { scale: 1.07; } }
.hero-photo img { animation: kenBurns 24s ease-in-out infinite alternate; }

/* Filmiske billedflader (2026-10-15): hero og bånd i fuld bredde med et stort foto, der zoomer langsomt, og en mørk
   toning bag teksten. Zoomen sidder på rammen (.cine-bg), fordi selve billedet får anim.js' afsløring nedefra. */
.cine { position: relative; overflow: hidden; isolation: isolate; background: #0B0B0A; }
.cine-bg { position: absolute; inset: 0; z-index: -2; transform-origin: 60% 45%;
           animation: cineZoom 30s ease-in-out infinite alternate; }
.cine-bg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cine::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(11,11,10,.94) 0%, rgba(11,11,10,.72) 36%, rgba(11,11,10,.22) 72%, rgba(11,11,10,.08) 100%),
              linear-gradient(0deg, #0B0B0A 0%, rgba(11,11,10,0) 34%); }
.cine-band::before {
  background: linear-gradient(0deg, rgba(11,11,10,.92) 0%, rgba(11,11,10,.35) 55%, rgba(11,11,10,.45) 100%),
              linear-gradient(90deg, rgba(11,11,10,.6) 0%, rgba(11,11,10,0) 60%); }
/* Bånd med teksten til højre (forsiden, montagen ved fjorden): motivet står til venstre for midten og skal ikke
   dækkes; toningen kommer derfor fra højre. På mobil står teksten nederst som i de andre bånd. */
.cine-band.cine-right::before {
  background: linear-gradient(180deg, rgba(11,11,10,.6) 0%, rgba(11,11,10,0) 22%),
              linear-gradient(0deg, rgba(11,11,10,.85) 0%, rgba(11,11,10,0) 45%),
              linear-gradient(270deg, rgba(11,11,10,.9) 0%, rgba(11,11,10,.62) 34%, rgba(11,11,10,0) 62%); }
@keyframes cineZoom { from { scale: 1.02; translate: 0 0; } to { scale: 1.13; translate: -1.6% -1.2%; } }
@media (max-width: 760px) {
  .cine::before, .cine-band::before { background: linear-gradient(0deg, rgba(11,11,10,.96) 0%, rgba(11,11,10,.7) 55%, rgba(11,11,10,.4) 100%); }
}
/* Montagen på tablet og mobil: teksten til højre ville dække skorstenen. Billedet fylder i stedet de øverste tre
   fjerdedele, og teksten står nederst i fuld bredde, så montørerne står over teksten. */
@media (max-width: 1100px) {
  .cine-right .cine-bg { bottom: 26%; }
  .cine-band.cine-right::before { background: linear-gradient(0deg, rgba(11,11,10,.97) 0%, rgba(11,11,10,.92) 30%, rgba(11,11,10,.35) 58%, rgba(11,11,10,.12) 100%); }
  .cine-side { align-self: stretch !important; max-width: none !important; }
  /* Produkter-heroen har meget tekst: billedet står som blok øverst og teksten under, så teknikerne ikke dækkes */
  .cine-right.cine-tall .cine-bg { position: relative; inset: auto; height: min(80vw, 600px); flex: 0 0 auto; }
}
/* ... og på større skærme fylder billedet de venstre to tredjedele og toner ud mod teksten til højre */
@media (min-width: 1101px) {
  .cine-right.cine-tall .cine-bg { right: 36%; -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent);
                                   mask-image: linear-gradient(90deg, #000 70%, transparent); }
  .cine-right.cine-tall .cine-bg img { object-position: 58% 40% !important; }
}
@media (min-width: 1101px) and (max-width: 1300px) {
  .cine-right.cine-tall .cine-bg img { object-position: 76% 40% !important; }
}
/* Videoer: sort-hvid som fotos, farve når man peger på dem */
video[style*="grayscale"] { transition: filter .7s ease; }
figure:hover video[style*="grayscale"] { filter: grayscale(0) contrast(1.02) brightness(1) !important; }

/* De orange lyspunkter pulserer */
@keyframes glow { 0%, 100% { opacity: 1; scale: 1; } 50% { opacity: .45; scale: .78; } }
span[style*="border-radius: 50%"][style*="box-shadow"] { animation: glow 2.4s ease-in-out infinite; }

/* Scroll-linje øverst */
.rv-bar {
  position: fixed; left: 0; top: 0; width: 100%; height: 3px; background: #E8900F;
  transform: scaleX(0); transform-origin: 0 50%; z-index: 100; pointer-events: none;
}

/* Knapper: løfter sig, og pilen rykker frem */
a[style*="clip-path"] { transition: translate .25s cubic-bezier(.2, .7, .2, 1), filter .25s; }
a[style*="clip-path"]:hover { translate: 0 -2px; filter: brightness(1.08); }
a svg { transition: translate .3s cubic-bezier(.2, .7, .2, 1); }
a:hover svg { translate: 5px 0; }
button { transition: background-color .25s, color .25s, border-color .25s; }

/* Hovedmenuen: streg, der tegnes under punktet */
.nav-desk a { position: relative; }
.nav-desk a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: #E8900F;
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.nav-desk a:hover::after, .nav-desk a:focus-visible::after { transform: scaleX(1); }

/* Kort: løfter sig og får orange kant */
article, a[style*="border: 1px solid #2A2825"], a[style*="border: 1px solid #3A3733"] {
  transition: border-color .3s, translate .3s cubic-bezier(.2, .7, .2, 1), background-color .3s;
}
article:hover, a[style*="border: 1px solid #2A2825"]:hover, a[style*="border: 1px solid #3A3733"]:hover {
  border-color: #E8900F !important; translate: 0 -3px;
}

/* Fotos: sort-hvid bliver til farve, når man peger på dem */
img[style*="grayscale"] { transition: filter .7s ease; }
a:hover img[style*="grayscale"], article:hover img[style*="grayscale"], figure:hover img[style*="grayscale"] {
  filter: grayscale(0) contrast(1.02) brightness(1) !important;
}

/* Formularfelter */
input, textarea, select { transition: border-color .2s, box-shadow .2s; }
input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px rgba(232, 144, 15, .25); }
label.chip { transition: translate .2s cubic-bezier(.2, .7, .2, 1), border-color .2s, background-color .2s; }
label.chip:hover { translate: 0 -1px; }

@media print {
  .js body, .js [data-rv] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .rv-bar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js body, .js [data-rv] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .rv-bar { display: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}