/* Animationslag oven på den oprindelige style.css ("mellemvejen").
   Alt bevægelse er slået fra under prefers-reduced-motion nederst i filen. */

/* ── Filmisk sideskift: browserens cross-document View Transitions ───────── */
@view-transition { navigation: auto; }

header[role='banner'] { view-transition-name: site-header; }
::view-transition-old(site-header),
::view-transition-new(site-header) { animation: none; }

::view-transition-old(root) {
  animation: 420ms cubic-bezier(0.4, 0, 1, 1) both m-page-out;
}
::view-transition-new(root) {
  animation: 700ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both m-page-in;
}
@keyframes m-page-out {
  to { opacity: 0; transform: translateY(-36px) scale(0.985); filter: blur(6px); }
}
@keyframes m-page-in {
  from { opacity: 0; transform: translateY(48px); clip-path: inset(12% 0 0 0 round 24px); }
  to { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 0); }
}

/* ── Blød scroll (Lenis) må ikke kæmpe med native smooth scroll ───────────── */
html.lenis-on { scroll-behavior: auto; }
html.lenis-on body { height: auto; }

/* ── Scroll-indikator ─────────────────────────────────────────────────────── */
.m-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 1100;
  background: linear-gradient(90deg, var(--accent), #6fc3f7);
  transform: scaleX(0); transform-origin: left; pointer-events: none;
}

/* ── Hero: netværket erstatter portrættet ─────────────────────────────────── */
.hero-bg .hero-network { position: absolute; inset: 0; }
.hero-bg .hero-network canvas { width: 100% !important; height: 100% !important; display: block; }
.hero-bg.m-network::after {
  background:
    radial-gradient(60% 70% at 78% 50%, rgba(59, 159, 212, 0.16) 0%, transparent 70%),
    linear-gradient(100deg, rgba(10, 22, 40, 0.96) 0%, rgba(10, 22, 40, 0.75) 42%, rgba(10, 22, 40, 0.15) 100%);
}
@media (max-width: 900px) {
  .hero-bg.m-network::after {
    background: linear-gradient(180deg, rgba(10, 22, 40, 0.92) 0%, rgba(10, 22, 40, 0.7) 60%, rgba(10, 22, 40, 0.35) 100%);
  }
}

/* ── Undersiders topsektion: en langsomt drivende lysflade ────────────────── */
.page-header { position: relative; overflow: hidden; isolation: isolate; }
.page-header::before {
  content: ''; position: absolute; inset: -40%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(35% 45% at 70% 40%, rgba(59, 159, 212, 0.22), transparent 70%),
    radial-gradient(30% 40% at 25% 70%, rgba(26, 95, 138, 0.25), transparent 70%);
  animation: m-drift 18s ease-in-out infinite alternate;
}
@keyframes m-drift {
  from { transform: translate3d(-4%, -2%, 0) rotate(0deg); }
  to { transform: translate3d(4%, 3%, 0) rotate(8deg); }
}

/* ── Opgraderet reveal: blødere kurve og en svag uskarphed ind ────────────── */
.reveal {
  transform: translateY(36px);
  filter: blur(6px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.visible { filter: none; }

/* Linjer fra SplitText skal kunne maskeres */
.m-line { padding-bottom: 0.06em; }

/* ── Kort: spotlight der følger musen + let 3D-hældning (sat fra JS) ──────── */
.m-spot { position: relative; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease; will-change: transform; }
.m-spot::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(111, 195, 247, 0.14), transparent 45%);
  transition: opacity 0.35s ease;
}
.m-spot:hover::after { opacity: 1; }
.m-spot:hover { box-shadow: 0 24px 60px -24px rgba(59, 159, 212, 0.45); }

/* Magnetiske knapper skal glide tilbage blødt */
.btn-primary { transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow var(--transition), background var(--transition); }

/* ── Reduceret bevægelse: alt står stille, intet skjules ──────────────────── */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .page-header::before { animation: none; }
  .reveal { filter: none; transition: none; }
  .m-progress { display: none; }
}

/* Om: citatet følger med, mens man læser missionen */
@media (min-width: 900px) {
  .about-grid .about-visual { position: sticky; top: 140px; align-self: start; }
}

/* ── Hero-visuals (afprøvning: ?hero=kort|stak|sekskant|printplade) ──────── */
.hero-bg .hero-visual-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Stak */
.hero-bg .stack-stage { position: absolute; inset: 0; display: grid; place-items: center; perspective: 1600px; }
.stack-scene { --rx: 58deg; --rz: -42deg; position: relative; width: 400px; height: 400px; transform-style: preserve-3d;
  transform: translateX(min(24vw, 360px)) rotateX(var(--rx)) rotateZ(var(--rz)); }
@media (max-width: 900px) { .stack-scene { width: 260px; height: 260px; transform: translateY(26vh) rotateX(var(--rx)) rotateZ(var(--rz)); } }
.stack-layer { position: absolute; inset: 0; border-radius: 26px; transform-style: preserve-3d; opacity: 0;
  background: linear-gradient(135deg, rgba(26,95,138,0.5), rgba(16,40,74,0.72)); border: 1px solid rgba(111,195,247,0.42);
  box-shadow: 0 0 40px rgba(59,159,212,0.22), inset 0 0 30px rgba(111,195,247,0.07);
  transition: transform 2s cubic-bezier(.16,1,.3,1), opacity 1.6s ease; }
.stack-layer.in { opacity: 1; }
.stack-grid { position: absolute; inset: 18px; border-radius: 16px; background-image: linear-gradient(rgba(111,195,247,0.11) 1px, transparent 1px), linear-gradient(90deg, rgba(111,195,247,0.11) 1px, transparent 1px); background-size: 28px 28px; }
.stack-leds { position: absolute; left: 24px; bottom: 22px; display: flex; gap: 8px; }
.stack-leds i { width: 9px; height: 9px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 10px #2ecc71; animation: stack-blink 4.5s ease-in-out infinite; }
.stack-leds i:nth-child(2) { background: #6fc3f7; box-shadow: 0 0 10px #6fc3f7; animation-delay: 1.2s; }
.stack-leds i:nth-child(3) { animation-delay: 2.6s; }
@keyframes stack-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.stack-label { position: absolute; left: 50%; top: 50%; white-space: nowrap; font: 600 14px Inter, system-ui, sans-serif; color: #f0f4f8; letter-spacing: 0.02em;
  transform: translate(-50%, -50%) rotateZ(42deg) rotateX(-58deg); text-shadow: 0 2px 12px rgba(0,0,0,0.6); }
.stack-packet { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px #6fc3f7, 0 0 4px #fff; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .stack-leds i { animation: none; }
}

/* Hero med visual: teksten står til venstre i den fulde container, visualen får højre halvdel */
@media (min-width: 901px) {
  .hero:has(.m-network) > .container { width: 100%; }
}

/* Mobil: visualen bliver en dæmpet baggrundsstruktur bag teksten */
@media (max-width: 900px) {
  .hero-bg .hero-visual-canvas, .hero-bg .stack-stage { opacity: 0.35; }
}

/* ── Forsiden: logoet sidder i chippen og flyver op i menuen ved scroll ──── */
.logo-flight-img {
  position: fixed; left: 0; top: 0; z-index: 1001; height: auto; pointer-events: none; opacity: 0;
  transform-origin: center; will-change: transform, width;
  filter: drop-shadow(0 0 18px rgba(111, 195, 247, 0.45));
}
html.logo-flight .nav-logo img { transition: height var(--transition), opacity 0s; }
html.logo-flight:not(.logo-in-menu) .nav-logo img { opacity: 0; }