/* ═════════════════════════════════════════════════════════════
   BagLinsen — lyst tema (lægges oven på bl.css)
   Fjern <link ... bl-light.css> i siderne for at gå tilbage til mørkt.
   På lys baggrund må der gerne være skygger og glød.
   ═════════════════════════════════════════════════════════════ */
:root {
  --bg: #f5f5f7;
  --s1: #ffffff;
  --s2: #f0f0f3;
  --s3: #e6e6eb;
  --text: #1d1d1f;
  --grey: #6e6e73;
  --grey-2: #515154;
  --line: rgba(0, 0, 0, 0.08);
  --sh-1: 0 2px 6px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.08);
  --sh-2: 0 4px 10px rgba(0, 0, 0, 0.06), 0 26px 60px rgba(0, 0, 0, 0.14);
  --glow: 0 30px 90px rgba(255, 94, 98, 0.22), 0 10px 40px rgba(255, 162, 76, 0.16);
}
body { background: var(--bg); color: var(--text); }
::selection { color: #fff; }
.muted { color: var(--grey); }

/* Iris covers in the page colour */
.iris { background: var(--bg); }

/* ── Nav: white glass ───────────────────────────────────────── */
/* Lyst glas som standard; over showreelen (hero-dark) bliver bjælken mørkt glas */
.nav, .nav.solid { background: rgba(255, 255, 255, 0.72); backdrop-filter: saturate(180%) blur(22px); -webkit-backdrop-filter: saturate(180%) blur(22px); border-color: rgba(0, 0, 0, 0.06); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.08); }
.hero-dark .nav:not(.solid) { background: rgba(18, 16, 18, 0.32); border-color: rgba(255, 255, 255, 0.14); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); }
/* Mobil: ingen glas-sløring i headeren (for tungt over video på telefoner) — næsten ugennemsigtig baggrund i stedet */
@media (max-width: 820px) {
  .nav, .nav.solid { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255, 255, 255, 0.94); }
  .hero-dark .nav:not(.solid) { background: rgba(18, 16, 18, 0.62); }
  .hero-dark .nav:not(.solid) .menu-btn { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.nav-links a { color: rgba(29, 29, 31, 0.72); }
.nav-links a:hover { color: var(--text); background: rgba(0, 0, 0, 0.05); }
.nav-links a[aria-current="page"] { color: var(--text); background: rgba(0, 0, 0, 0.07); }
.nav-cta { background: var(--sun); color: #fff; box-shadow: 0 6px 18px rgba(255, 94, 98, 0.28); }
.menu-btn { background: rgba(0, 0, 0, 0.05); box-shadow: none; }
.menu-btn i::before, .menu-btn i::after { background: var(--text); }
.menu { background: var(--bg); }
/* Over the dark showreel the nav stays white */
.hero-dark .nav:not(.solid) .logo, .hero-dark .nav:not(.solid) .nav-links a { color: rgba(255, 255, 255, 0.85); }
.hero-dark .nav:not(.solid) .nav-links a:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }

.hero-dark .nav:not(.solid) .menu-btn { background: rgba(255, 255, 255, 0.18); box-shadow: none; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.hero-dark .nav:not(.solid) .menu-btn i::before, .hero-dark .nav:not(.solid) .menu-btn i::after { background: #fff; }

/* ── Buttons ────────────────────────────────────────────────── */
.btn-light { background: var(--text); color: #fff; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18); }
.btn-glass { background: #fff; color: var(--text); box-shadow: var(--sh-1); }
.btn-glass:hover { background: #fff; box-shadow: var(--sh-2); }
.btn-sun { box-shadow: 0 10px 30px rgba(255, 94, 98, 0.35); }
.round { background: #fff; color: var(--text); box-shadow: var(--sh-1); }
.round:hover { background: #fff; box-shadow: var(--sh-2); }
/* On top of video/photo the buttons stay light-on-dark glass */
.pin .btn-light, .feature .btn-light, .p-hero .btn-light, .sheet .btn-light { background: #fff; color: #000; }
.pin .btn-glass, .p-hero .btn-glass { background: rgba(255, 255, 255, 0.18); color: #fff; box-shadow: none; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.pin .btn-glass:hover, .p-hero .btn-glass:hover { background: rgba(255, 255, 255, 0.28); }
.pin .round, .sheet .round, .lb .round { background: rgba(255, 255, 255, 0.18); color: #fff; box-shadow: none; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.kicker { background: rgba(255, 255, 255, 0.16); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.kicker .dot { box-shadow: 0 0 0 4px rgba(255, 94, 98, 0.3), 0 0 18px rgba(255, 94, 98, 0.8); animation: glowdot 2s ease-in-out infinite; }
@keyframes glowdot { 50% { box-shadow: 0 0 0 8px rgba(255, 94, 98, 0), 0 0 24px rgba(255, 94, 98, 0.9); } }

/* ── Hero: video card floats on white ───────────────────────── */
.pin .stage { background: var(--bg); }
.pin .fw { position: absolute; inset: 0; }
/* Fast skygge på kortets slutposition; kun dens opacity animeres (ingen filter på videoen) */
.pin .cast { position: absolute; inset: 12vh 7vw; border-radius: 32px; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.32); opacity: 0; pointer-events: none; will-change: opacity; }
@media (max-width: 820px) { .pin .cast { inset: 16vh 14px; border-radius: 22px; } }
.pin .copy { color: #fff; }
.feature { color: #fff; }
.pin .after span { color: var(--grey); }
.pin .after .btn-light { background: var(--text); color: #fff; }
.cue { border-color: rgba(255, 255, 255, 0.6); }

/* ── Statement & marquee ────────────────────────────────────── */
.statement .w { color: rgba(29, 29, 31, 0.13); }
.statement .w.lit { color: var(--text); }
.marquee-track span { color: #a1a1a6; }
.marquee-track span:hover { color: var(--text); }

/* ── Cards ──────────────────────────────────────────────────── */
.card .art { box-shadow: var(--sh-1); transition: transform 0.7s var(--ease), box-shadow 0.7s var(--ease); }
@media (hover: hover) {
  .card:hover .art { transform: scale(1.04) translateY(-4px); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08), 0 18px 34px rgba(0, 0, 0, 0.16); }
}
.card .meta span { color: var(--grey); }
.progress { background: rgba(0, 0, 0, 0.08); }
.rail-arrow { background: #fff; color: var(--text); box-shadow: var(--sh-2); }

/* ── Feature + scrub ────────────────────────────────────────── */
.feature { box-shadow: var(--sh-2), var(--glow); }
.scrub .lead, .fact span { color: var(--grey-2); }
.device { box-shadow: 0 50px 100px rgba(0, 0, 0, 0.28), var(--glow); background: linear-gradient(150deg, #3a3a3d, #1c1c1e 45%, #2c2c2f); }
.device .bar { background: rgba(255, 255, 255, 0.25); }

/* ── Bento, stats, steps: white cards with soft shadows ─────── */
.b { box-shadow: var(--sh-1); transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease); }
.b:hover { box-shadow: var(--sh-2); }
.b, .b h3 { color: #fff; }
.b .go { background: rgba(255, 255, 255, 0.2); color: #fff; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.b:hover .go { background: #fff; color: #000; }
.stat, .step { background: #fff; box-shadow: var(--sh-1); }
.stat span, .step p { color: var(--grey); }

/* ── Photo strip ────────────────────────────────────────────── */
.strip a { box-shadow: var(--sh-1); }

/* ── Contact: sunset glow behind ────────────────────────────── */
.cta::before { content: ''; position: absolute; left: 50%; top: -6%; width: min(1300px, 150vw); height: 820px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(255, 94, 98, 0.28), rgba(255, 162, 76, 0.14) 55%, transparent); pointer-events: none; }
.form { background: #fff; box-shadow: var(--sh-2); }
.form input, .form textarea { background: var(--bg); color: var(--text); }
.form input:focus, .form textarea:focus { background: #fff; box-shadow: 0 0 0 4px rgba(255, 94, 98, 0.15); }
.form input::placeholder, .form textarea::placeholder { color: #86868b; }

/* ── Footer ─────────────────────────────────────────────────── */
.foot { background: #fff; }

/* ── Project page: the hero is media, so text stays white ─── */
.p-hero::after { background: linear-gradient(0deg, var(--bg) 0%, rgba(0, 0, 0, 0.55) 14%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0.45) 100%); }
.p-hero .wrap { color: #fff; }
.p-hero .eyebrow { color: rgba(255, 255, 255, 0.85); }
.p-meta span { background: rgba(255, 255, 255, 0.18); color: #fff; box-shadow: none; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.p-hero .btn-light { background: #fff; color: #000; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); }
.p-player { box-shadow: var(--sh-2); }
.p-player .center img.inner { box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45); }
.bigplay { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); }
.spec dt { color: var(--grey); }
.deliver li { color: var(--grey-2); }
.next { box-shadow: var(--sh-2); }
.next .wrap { color: #fff; }

/* ── Gallery ────────────────────────────────────────────────── */
.masonry a { box-shadow: var(--sh-1); }
.masonry:hover a img { filter: brightness(0.75) saturate(0.8); }

/* ── Om mig ─────────────────────────────────────────────────── */
.portrait { box-shadow: var(--sh-2); }
.about-card { background: #fff; box-shadow: var(--sh-1); }
.about-card .portrait { box-shadow: none; }
.about .lead { color: var(--grey-2); }

/* ── Priser ─────────────────────────────────────────────────── */
.plan { background: #fff; border-color: transparent; box-shadow: var(--sh-1); }
.plan.on { border-color: rgba(255, 94, 98, 0.55); box-shadow: var(--sh-2), 0 20px 70px rgba(255, 94, 98, 0.18); }
.plan .btn-light { background: var(--text); color: #fff; }
.kind { background: #fff; box-shadow: var(--sh-1); }
.chip { background: #f0f0f3; color: var(--text); }
.chip:hover { background: #e6e6eb; }
.incl li span:first-child { color: var(--grey); }
.calc-card { background: #fff; border-color: transparent; box-shadow: var(--sh-2); }
.seg, .stepper { background: var(--bg); }
.seg button { color: var(--grey); }
.seg button.on { background: var(--text); color: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); }
.stepper button:hover { background: var(--s3); }
.toggle { color: var(--grey-2); }
.toggle input { background: var(--s3); }
.toggle input::after { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); }
.calc-foot { color: var(--grey); }
.faq summary i { background: #fff; box-shadow: var(--sh-1); }
.faq summary i::before, .faq summary i::after { background: var(--text); }
.faq details[open] summary i::before, .faq details[open] summary i::after { background: #fff; }
.faq details p { color: var(--grey-2); }

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .pin .after .btn-light { background: var(--text); }
}

/* ═════════════════════════════════════════════════════════════
   Glas (Apple-agtigt): frostet, gennemskinnelig flade med lys kant.
   Bruges kun hvor der er farve eller billede bagved at sløre.
   ═════════════════════════════════════════════════════════════ */
:root {
  --glass-light: linear-gradient(140deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.38) 100%);
  --glass-dark: linear-gradient(140deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.08) 100%);
  --glass-blur: blur(26px) saturate(180%);
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.45);
  --glass-edge-dark: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

/* Light glass cards */
/* Soft sunset glow behind glass cards — fades out on every side, never cut */
main { overflow-x: clip; }
.stats, .steps, .calc { position: relative; isolation: isolate; }
.stats::before, .steps::before, .calc::before {
  content: ''; position: absolute; z-index: -1; inset: -30% -8%; pointer-events: none;
  background:
    radial-gradient(28% 48% at 22% 50%, rgba(255, 162, 76, 0.55), transparent 100%),
    radial-gradient(30% 52% at 50% 52%, rgba(255, 94, 98, 0.4), transparent 100%),
    radial-gradient(28% 48% at 78% 48%, rgba(232, 69, 155, 0.4), transparent 100%);
  filter: blur(42px);
  -webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 45%, transparent 100%);
  animation: drift 18s ease-in-out infinite alternate;
}
.steps::before { animation-duration: 22s; animation-direction: alternate-reverse; }
@keyframes drift {
  0% { transform: translate3d(-2%, 0, 0) scale(1); }
  50% { transform: translate3d(1.5%, -3%, 0) scale(1.04); }
  100% { transform: translate3d(3%, 2%, 0) scale(0.98); }
}
@media (prefers-reduced-motion: reduce) { .stats::before, .steps::before, .calc::before { animation: none; } }

.stat, .step, .calc-card {
  background: var(--glass-light);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 0;
  box-shadow: var(--glass-edge), 0 14px 36px rgba(180, 70, 60, 0.07);
}
.form {
  background: var(--glass-light);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 0;
  box-shadow: var(--glass-edge), 0 10px 40px rgba(0, 0, 0, 0.08);
}
.stat span, .step p { color: #3a3a3c; }
.form input, .form textarea { background: rgba(255, 255, 255, 0.6); }
.cta::after {
  content: ''; position: absolute; left: 50%; bottom: 4%; width: min(1100px, 130vw); height: 520px; transform: translateX(-50%); z-index: -1; pointer-events: none;
  background: radial-gradient(40% 55% at 30% 50%, rgba(255, 162, 76, 0.4), transparent 70%), radial-gradient(40% 55% at 70% 50%, rgba(232, 69, 155, 0.35), transparent 70%);
  filter: blur(30px);
}
.cta { isolation: isolate; }
.cta::before { z-index: -1; }

/* Dark glass panels on top of video/photo */
.b::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.18) 42%, rgba(0, 0, 0, 0.12) 60%, rgba(0, 0, 0, 0.55) 100%); }
.feature-body {
  background: var(--glass-dark);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge-dark), 0 10px 30px rgba(0, 0, 0, 0.18);
}
.feature::after { background: linear-gradient(90deg, rgba(0, 0, 0, 0.25), transparent 60%); }
.feature-body { padding: clamp(24px, 2.8vw, 38px); border-radius: 28px; left: clamp(18px, 3vw, 40px); bottom: clamp(18px, 3vw, 40px); }

@media (max-width: 820px) {
  .feature-body { left: 14px; right: 14px; bottom: 14px; }
  .feature::after { background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), transparent 60%); }
}

/* Klippetidslinjen: mørkt redigeringsprogram, der svæver på den lyse side */
.editor { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 40px 90px rgba(0, 0, 0, 0.18), 0 30px 100px rgba(255, 94, 98, 0.12); }

/* Film window in the light theme: white card, dark buttons */
.film-box { background: #fff; box-shadow: 0 40px 120px rgba(0, 0, 0, 0.35); }
.film-box .btn-light { background: var(--text); color: #fff; }
.film-box .btn-glass { background: var(--s2); color: var(--text); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.film-meta span { background: #f0f0f3; color: #515154; }

/* Duration badge on cards: light frosted pill instead of a black block */
.card .dur { background: rgba(255, 255, 255, 0.78); color: #1d1d1f; backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); font-weight: 600; }

/* Film window navigation in the light theme */
.film-nav .round { background: #f0f0f3; color: var(--text); box-shadow: none; }
.film-nav .round:hover { background: #e6e6eb; }
.sheet .film-step { background: rgba(255, 255, 255, 0.92); color: #1d1d1f; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); backdrop-filter: none; -webkit-backdrop-filter: none; }
.sheet .film-step:hover { background: #fff; transform: scale(1.06); }

/* Effekt-kortene i det lyse tema */
.fx-card { background: radial-gradient(90% 70% at 100% 0%, rgba(255, 162, 76, 0.10), transparent 60%), #fff; box-shadow: var(--sh-1); }
.chart { background: #f5f5f7; }