/* ==========================================================
   MiniSmuk – styles
   ========================================================== */

:root {
  --forest: #0f2e1f;
  --forest-2: #17402b;
  --leaf: #4f9a5c;
  --leaf-soft: #7cc08a;
  --cream: #fbf1dc;
  --cream-2: #f5e6c6;
  --coral: #ff6b5e;
  --pink: #ff7fa6;
  --pink-deep: #e2457a;
  --sun: #ffd84d;
  --lilac: #b9a1f5;
  --lilac-deep: #7a55d6;
  --ink: #0f2e1f;

  --font-display: "Knewave", "Shantell Sans", "Comic Sans MS", system-ui, sans-serif;
  --font-fun: "Shantell Sans", "Comic Sans MS", system-ui, sans-serif;
  --font-body: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-hand: "Gochi Hand", "Shantell Sans", cursive;

  --gutter: clamp(16px, 4vw, 48px);
  --section-space: clamp(56px, 7vw, 104px);
  --radius: 28px;
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --shadow: 0 18px 40px -18px rgba(5, 25, 15, .55);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; font-synthesis: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1.02rem, .95rem + .3vw, 1.15rem);
  line-height: 1.6;
  overflow-x: hidden;
  overflow-x: clip; /* clip laver ikke body til en scroll-container, så sticky virker */
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.05; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }

:focus-visible {
  outline: 4px solid var(--sun);
  outline-offset: 4px;
  border-radius: 8px;
}
.section--cream :focus-visible, .section--pink :focus-visible { outline-color: var(--lilac-deep); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--sun); color: var(--forest); padding: 12px 18px;
  border-radius: 999px; font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 16px; }

.container { width: min(1200px, 100%); margin: 0 auto; padding: 0 var(--gutter); }
.container--narrow { width: min(860px, 100%); }

/* ---------- Farver ---------- */
.c-cream { color: var(--cream); }
.c-cream-soft { color: rgba(251, 241, 220, .86); }
.c-pink { color: var(--pink); }
.c-pinkd { color: var(--pink-deep); }
.c-sun { color: var(--sun); }
.c-coral { color: var(--coral); }
.c-forest { color: var(--forest); }
.c-lilacd { color: var(--lilac-deep); }
.c-cream-on-pink { color: var(--cream); text-shadow: 0 3px 0 rgba(15, 46, 31, .25); }

/* ---------- Typografi ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 1.6rem + 4.6vw, 5.4rem);
  line-height: 1.02;
  letter-spacing: .005em;
  text-transform: uppercase;
  text-wrap: balance;
}
.display > span { display: inline-block; }
.lead { font-size: clamp(1.1rem, 1rem + .45vw, 1.35rem); line-height: 1.55; }
.kicker {
  font-weight: 800; text-transform: uppercase; letter-spacing: .14em; font-size: .85rem;
  color: var(--coral); margin-bottom: .8rem;
}
.prose p { max-width: 54ch; }

/* ---------- Knapper ---------- */
.btn {
  --btn-bg: var(--coral); --btn-fg: var(--forest);
  display: inline-flex; align-items: center; gap: .6em;
  padding: .9em 1.5em; border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-body); font-weight: 800; font-size: 1rem;
  text-transform: uppercase; letter-spacing: .04em; text-decoration: none;
  border: 3px solid transparent;
  box-shadow: 0 6px 0 rgba(15, 46, 31, .28);
  transition: transform .35s var(--ease-bounce), box-shadow .25s ease, background-color .2s;
  -webkit-tap-highlight-color: transparent;
}
.btn svg { width: 1.2em; height: 1.2em; transition: transform .35s var(--ease-bounce); }
.btn:hover, .btn:focus-visible { transform: translateY(-3px) rotate(-1.5deg) scale(1.03); box-shadow: 0 10px 0 rgba(15, 46, 31, .28); }
.btn:hover svg, .btn:focus-visible svg { transform: translateX(5px); }
.btn:active { transform: translateY(3px) scale(.97); box-shadow: 0 2px 0 rgba(15, 46, 31, .28); transition-duration: .08s; }
.btn:focus-visible { outline: 4px solid var(--sun); outline-offset: 4px; }
.btn--sm { padding: .6em 1.1em; font-size: .85rem; }
.btn--lg { padding: 1.05em 1.9em; font-size: clamp(1rem, .9rem + .35vw, 1.2rem); }
.btn--sun { --btn-bg: var(--sun); }
.btn--forest { --btn-bg: var(--forest); --btn-fg: var(--cream); }
.btn--forest:focus-visible { outline-color: var(--forest); }

.link-arrow {
  display: inline-flex; align-items: center; gap: .4em; font-weight: 700;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
  text-decoration-color: var(--coral);
}
.link-arrow svg { width: 1.1em; height: 1.1em; transition: transform .3s var(--ease-bounce); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- Håndskrift og doodles ---------- */
.doodle { position: absolute; pointer-events: none; }
.hand-note {
  position: absolute; margin: 0; z-index: 3;
  font-family: var(--font-hand); color: var(--cream);
  font-size: clamp(1.05rem, .9rem + .5vw, 1.45rem); line-height: 1.1;
  text-transform: uppercase; transform: rotate(-8deg);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
}
.hand-note svg { width: 1em; height: 1em; display: inline-block; vertical-align: -.1em; color: var(--pink); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  transition: background-color .35s ease, box-shadow .35s ease, transform .4s var(--ease-out);
}
.site-header.is-scrolled { background: rgba(15, 46, 31, .94); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .7); }
@supports (backdrop-filter: blur(8px)) {
  .site-header.is-scrolled { background: rgba(15, 46, 31, .82); backdrop-filter: blur(10px); }
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  width: min(1320px, 100%); margin: 0 auto; padding: 14px var(--gutter);
}
.logo {
  position: relative; display: inline-block;
  font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 1.4rem + 1vw, 2.3rem);
  color: var(--cream); text-decoration: none; letter-spacing: -.02em; line-height: 1;
  transform: rotate(-3deg);
  transition: transform .4s var(--ease-bounce);
}
.logo span { color: var(--pink); }
.logo:hover { transform: rotate(2deg) scale(1.04); }
.logo__heart { position: absolute; width: .5em; height: .5em; right: -.45em; top: -.25em; color: var(--sun); }
.logo--footer { transform: none; margin-bottom: .6rem; }

.nav { display: flex; align-items: center; gap: clamp(16px, 2.5vw, 36px); }
.nav__list { display: flex; gap: clamp(14px, 2.2vw, 32px); }
.nav__list a {
  position: relative; color: var(--cream); text-decoration: none;
  font-weight: 700; font-size: .88rem; text-transform: uppercase; letter-spacing: .08em; padding: 6px 0;
}
.nav__list a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px;
  background: var(--sun); transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease-out);
}
.nav__list a:hover::after, .nav__list a:focus-visible::after, .nav__list a[aria-current="true"]::after { transform: scaleX(1); }

.nav-toggle {
  display: none; width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: var(--coral); cursor: pointer; position: relative; z-index: 2;
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  position: absolute; left: 13px; width: 22px; height: 3px; border-radius: 3px; background: var(--forest);
  transition: transform .35s var(--ease-bounce), top .25s ease, opacity .2s;
}
.nav-toggle__bars { top: 22.5px; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; left: 0; }
.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: 0; z-index: 1;
    flex-direction: column; justify-content: center; gap: 36px;
    background: var(--forest);
    clip-path: circle(0 at calc(100% - 40px) 38px);
    visibility: hidden;
    transition: clip-path .6s var(--ease-out), visibility 0s linear .6s;
  }
  .nav.is-open { clip-path: circle(150% at calc(100% - 40px) 38px); visibility: visible; transition: clip-path .6s var(--ease-out), visibility 0s; }
  .nav__list { flex-direction: column; align-items: center; gap: 18px; }
  .nav__list a { font-family: var(--font-display); font-size: 2.1rem; text-transform: uppercase; letter-spacing: 0; }
  .nav__list li:nth-child(5n+1) a { color: var(--pink); }
  .nav__list li:nth-child(5n+2) a { color: var(--sun); }
  .nav__list li:nth-child(5n+4) a { color: var(--lilac); }
  .nav .btn { font-size: 1.1rem; }
}

/* ---------- HERO ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: radial-gradient(120% 90% at 20% 10%, var(--forest-2) 0%, var(--forest) 55%);
  color: var(--cream);
  padding: clamp(96px, 12vw, 130px) 0 clamp(120px, 12vw, 170px);
  min-height: min(100svh, 980px);
}
.hero__inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center;
  gap: clamp(16px, 3vw, 48px);
  width: min(1320px, 100%); margin: 0 auto; padding: 0 var(--gutter);
}
.hero__copy { position: relative; z-index: 3; }
.hero__title {
  position: relative;
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(3.3rem, 1.4rem + 7vw, 8rem);
  line-height: .9; letter-spacing: 0;
  margin-right: -8vw; /* overlapper billedet en smule, som i referencen */
}
.hero__title .line { display: block; white-space: nowrap; }
.hero__title .word { display: inline-block; text-shadow: 0 4px 0 rgba(0, 0, 0, .22); }
/* Legende bogstaver (deles op i js/main.js) */
.w { display: inline-block; white-space: nowrap; }
.ch { display: inline-block; transform: translateY(var(--y, 0)) rotate(var(--r, 0deg)); }
.ch--i { text-transform: none; }
.hero__title .line:nth-child(3) { margin-left: -.04em; }
.hero__title .line:nth-child(4) { margin-left: .22em; }
.hero__sun {
  position: relative; display: inline-block; vertical-align: top;
  width: .62em; height: .62em; margin-left: .12em; margin-top: -.08em; color: var(--sun);
}
.hero__meta {
  margin: clamp(18px, 2.4vw, 30px) 0 clamp(22px, 2.8vw, 34px);
  font-weight: 800; font-size: clamp(1.05rem, .95rem + .55vw, 1.45rem);
  text-transform: uppercase; letter-spacing: .06em;
}
.hero__meta .dot { color: var(--pink); margin: 0 .35em; }
.hero__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.hero__small { margin: 0; font-size: .95rem; color: rgba(251, 241, 220, .85); }
.hero__small a { color: var(--sun); font-weight: 700; text-underline-offset: 3px; }

.hero__media { position: relative; z-index: 1; }
.hero__photo {
  position: relative; overflow: hidden;
  border-radius: 46% 54% 40% 60% / 38% 44% 56% 62%;
  aspect-ratio: 5 / 4.6;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8);
  margin-right: calc(var(--gutter) * -1.6);
}
.hero__photo::after { /* let farvetoning så teksten ved siden af står stærkt */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(15, 46, 31, .55) 0%, rgba(15, 46, 31, 0) 35%),
              linear-gradient(0deg, rgba(15, 46, 31, .35), rgba(15, 46, 31, 0) 40%);
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transform-origin: 60% 40%; }

.badge-circle {
  position: absolute; z-index: 4; right: 4%; top: -4%;
  width: clamp(130px, 14vw, 200px); aspect-ratio: 1; border-radius: 50%;
  background: var(--lilac); color: var(--forest);
  display: grid; place-content: center; text-align: center; padding: 14px;
  font-family: var(--font-hand); text-transform: uppercase;
  font-size: clamp(.95rem, .75rem + .6vw, 1.3rem); line-height: 1.02;
  transform: rotate(10deg);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5);
}
.badge-circle__dancer { width: 38%; height: auto; aspect-ratio: 60/70; margin: 6px auto 0; color: var(--forest); }
.hand-note--a { left: 2%; bottom: 10%; }
.hand-note--b { right: 0%; bottom: -2%; transform: rotate(-6deg); }

.scroll-cue {
  position: absolute; z-index: 4; left: 50%; bottom: clamp(70px, 8vw, 110px);
  width: 34px; height: 54px; margin-left: -17px;
  border: 3px solid var(--cream); border-radius: 20px; opacity: .85;
}
.scroll-cue span {
  position: absolute; left: 50%; top: 9px; width: 6px; height: 10px; margin-left: -3px;
  border-radius: 3px; background: var(--sun);
}

/* Bølger */
.wave { position: absolute; left: 0; width: 100%; display: block; pointer-events: none; }
.wave--hero { bottom: -1px; height: clamp(60px, 8vw, 120px); z-index: 3; }
.wave--hero .wave__back { fill: var(--pink); }
.wave--hero .wave__front { fill: var(--sun); }
.wave--to-forest { bottom: -1px; height: clamp(50px, 6vw, 100px); fill: var(--forest); }
.wave--to-cream { bottom: -1px; height: clamp(50px, 6vw, 100px); fill: var(--cream); }
.wave--top { top: -1px; height: clamp(40px, 5vw, 80px); fill: var(--cream); }
.wave--top-cream { fill: var(--cream); }
.wave--bottom { bottom: -1px; height: clamp(40px, 5vw, 80px); fill: var(--cream); }

/* ---------- Tekstbånd ---------- */
.ribbon {
  position: relative; z-index: 4; overflow: hidden;
  background: var(--sun); color: var(--forest);
  padding: 14px 0 18px; margin-top: -2px;
  border-bottom: 6px solid var(--pink);
}
.ribbon__track { display: flex; align-items: center; gap: 22px; width: max-content; }
.ribbon__track span {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase; white-space: nowrap;
  font-size: clamp(1.3rem, 1rem + 1.2vw, 2rem); line-height: 1;
}
.ribbon__track svg { width: 26px; height: 26px; flex: none; color: var(--lilac-deep); }
.ribbon__track svg:nth-of-type(3n) { color: var(--coral); }

/* ---------- Sektioner ---------- */
.section { position: relative; padding: var(--section-space) 0 calc(var(--section-space) + 28px); }
.section--cream { background: var(--cream); color: var(--ink); }
.section--forest { background: var(--forest); color: var(--cream); }
.section--pink { background: var(--pink); color: var(--forest); }

/* 2. Velkommen */
.welcome__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.welcome__copy { position: relative; }
.welcome__copy .display { margin-bottom: clamp(24px, 3vw, 36px); }
.welcome__star { width: 54px; height: 54px; color: var(--coral); right: 6%; top: -30px; }
.facts { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 34px; }
.facts li {
  background: #fff8ea; border: 2px solid var(--forest); border-radius: 999px;
  padding: 8px 18px; font-size: .95rem;
}
.facts li:nth-child(2) { transform: rotate(-2deg); background: #ffe8ef; }
.facts li:nth-child(3) { transform: rotate(1.5deg); background: #efe8ff; }
.welcome__media { position: relative; }
.blob-photo {
  position: relative; overflow: hidden; aspect-ratio: 1 / 1;
  border-radius: 58% 42% 50% 50% / 46% 54% 46% 54%;
  box-shadow: 22px 22px 0 var(--coral);
}
.blob-photo img { width: 100%; height: 100%; object-fit: cover; }
.welcome__note { right: -4px; top: -40px; transform: rotate(8deg); }
.welcome__leaf { width: 70px; height: 120px; left: -36px; bottom: -30px; color: var(--leaf); transform: rotate(-18deg); }

/* 3. Oplevelsen */
.experience__intro {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: end;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.experience__intro .lead { margin: 0; max-width: 46ch; }
.exp-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.4vw, 32px); }
.exp-card {
  --accent: var(--pink);
  position: relative; display: flex; flex-direction: column;
  background: var(--forest-2); border-radius: var(--radius); overflow: hidden;
  border: 3px solid var(--accent);
  transition: transform .45s var(--ease-bounce), box-shadow .3s;
}
.exp-card:nth-child(even) { margin-top: 48px; }
.exp-card:hover { transform: translateY(-8px) rotate(-1.2deg); box-shadow: 10px 12px 0 var(--accent); }
.exp-card--sun { --accent: var(--sun); }
.exp-card--lilac { --accent: var(--lilac); }
.exp-card--coral { --accent: var(--coral); }
.exp-card__img { aspect-ratio: 4 / 3.4; overflow: hidden; }
.exp-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.exp-card:hover .exp-card__img img { transform: scale(1.06); }
.exp-card__body { padding: 22px 22px 26px; }
.exp-card h3 { font-family: var(--font-fun); font-variation-settings: "BNCE" 50, "INFM" 100; font-weight: 800; font-size: 1.35rem; color: var(--accent); margin-bottom: .5rem; }
.exp-card p { margin: 0; font-size: 1rem; color: rgba(251, 241, 220, .88); }

/* 4. Program */
.program__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-bottom: clamp(40px, 5vw, 64px); }
.program__head .kicker { width: 100%; margin: 0; }
.status-pill {
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
  background: var(--sun); color: var(--forest); border-radius: 999px; padding: 10px 20px;
  font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: .9rem;
  transform: rotate(-2deg);
}
.status-pill::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 0 4px rgba(79, 154, 92, .25); }
.status-pill.is-soldout::before { background: var(--coral); box-shadow: 0 0 0 4px rgba(255, 107, 94, .25); }
.status-pill--dark { background: var(--forest); color: var(--cream); }

.acts { border-top: 3px solid var(--forest); }
.act {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 32px;
  padding: clamp(20px, 2.6vw, 30px) 0; border-bottom: 3px solid var(--forest);
}

.act__name {
  margin: 0; font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.7rem, 1.1rem + 2.6vw, 3.4rem); line-height: 1;
  transition: transform .4s var(--ease-bounce), color .2s;
}
.act:nth-child(4n+1) .act__name { color: var(--forest); }
.act:nth-child(4n+2) .act__name { color: var(--coral); }
.act:nth-child(4n+3) .act__name { color: var(--lilac-deep); }
.act:nth-child(4n+4) .act__name { color: var(--pink-deep); }
.act:hover .act__name { transform: translateX(10px) rotate(-1deg); }
.act__detail { display: block; font-family: var(--font-body); font-weight: 500; text-transform: none; font-size: 1rem; color: var(--forest); margin-top: 8px; }
.act__when {
  justify-self: end; white-space: nowrap;
  font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: .9rem;
  border: 2px solid var(--forest); border-radius: 999px; padding: 8px 16px;
}
.program__note { margin-top: 28px; font-family: var(--font-hand); font-size: 1.4rem; color: var(--forest); }

/* 5. Billetter */
.tickets { padding-top: calc(var(--section-space) + 20px); }
.tickets__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: clamp(36px, 5vw, 56px); }
.invite {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(28px, 4vw, 64px);
  background: var(--cream); border-radius: var(--radius); padding: clamp(26px, 4vw, 52px);
  box-shadow: 12px 12px 0 var(--forest);
  margin-bottom: clamp(36px, 4.5vw, 56px);
}
.invite h3 { font-family: var(--font-fun); font-variation-settings: "BNCE" 50, "INFM" 100; font-weight: 800; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); margin-bottom: .7rem; color: var(--pink-deep); }
.invite p { margin: 0; }
.steps { display: grid; gap: 18px; counter-reset: s; }
.steps li { display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; align-items: start; }
.steps__n {
  grid-row: span 2; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-fun); font-weight: 800; font-size: 1.5rem;
  background: var(--sun); color: var(--forest); transform: rotate(-6deg);
}
.steps li:nth-child(2) .steps__n { background: var(--lilac); transform: rotate(5deg); }
.steps li:nth-child(3) .steps__n { background: var(--coral); }
.steps strong { font-size: 1.15rem; line-height: 1.3; }
.steps span:last-child { font-size: 1rem; }

.ticket-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 30px); align-items: stretch; margin-bottom: clamp(36px, 4.5vw, 56px); }
.ticket {
  position: relative; display: flex; flex-direction: column;
  background: var(--forest); color: var(--cream); border-radius: var(--radius);
  padding: 30px 28px 32px;
  transition: transform .45s var(--ease-bounce);
}
.ticket::before, .ticket::after { /* billet-hak */
  content: ""; position: absolute; top: 58%; width: 26px; height: 26px; border-radius: 50%; background: var(--pink);
}
.ticket::before { left: -13px; }
.ticket::after { right: -13px; }
.ticket:hover { transform: translateY(-6px) rotate(-1deg); }
.ticket--highlight { background: var(--cream); color: var(--forest); transform: rotate(1.5deg); }
.ticket--highlight:hover { transform: translateY(-6px) rotate(2.5deg); }
.ticket__name { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; text-transform: uppercase; color: var(--sun); }
.ticket--highlight .ticket__name { color: var(--coral); }
.ticket__price { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); line-height: 1; margin: 18px 0 4px; }
.ticket__price small { font-family: var(--font-body); font-size: 1rem; font-weight: 700; margin-left: 4px; }
.ticket__unit { font-size: .95rem; opacity: .85; margin-bottom: 18px; }
.ticket__note { margin: auto 0 0; padding-top: 18px; border-top: 2px dashed currentColor; font-size: 1rem; }
.ticket__flag {
  position: absolute; top: -14px; right: 18px; transform: rotate(6deg);
  background: var(--sun); color: var(--forest); font-family: var(--font-hand); font-size: 1.15rem;
  padding: 4px 14px; border-radius: 999px;
}

.tickets__bottom { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.includes h3 { font-family: var(--font-fun); font-variation-settings: "BNCE" 50, "INFM" 100; font-weight: 800; font-size: 1.6rem; margin-bottom: 16px; }
.includes ul { display: grid; gap: 10px; }
.includes li { position: relative; padding-left: 36px; }
.includes li::before {
  content: ""; position: absolute; left: 0; top: .25em; width: 22px; height: 22px; border-radius: 50%;
  background: var(--forest) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23ffd84d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.includes__addon { margin: 16px 0 0; font-weight: 700; }
.includes__addon:empty { display: none; }
.tickets__cta { background: rgba(255, 255, 255, .28); border-radius: var(--radius); padding: 30px; }
.tickets__fine { font-size: .95rem; margin: 16px 0 0; }

/* 6. Praktisk */
.practical .display { margin-bottom: clamp(40px, 5vw, 64px); }
.practical__grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(36px, 5vw, 80px); align-items: start; }
.info-list { display: grid; gap: clamp(26px, 3vw, 36px); }
.info { display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start; }
.info h3 { font-family: var(--font-fun); font-variation-settings: "BNCE" 50, "INFM" 100; font-weight: 800; font-size: 1.35rem; margin-bottom: .35rem; }
.info p { margin: 0 0 .4rem; max-width: 52ch; }
.info__icon { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; color: var(--forest); transform: rotate(-5deg); }
.info:nth-child(even) .info__icon { transform: rotate(5deg); }
.info__icon svg { width: 30px; height: 30px; }
.info__icon--coral { background: var(--coral); }
.info__icon--sun { background: var(--sun); }
.info__icon--lilac { background: var(--lilac); }
.info__icon--pink { background: var(--pink); }
.map-card {
  position: sticky; top: 110px;
  background: #fff8ea; border: 3px solid var(--forest); border-radius: var(--radius);
  padding: 16px; transform: rotate(2deg); box-shadow: -12px 12px 0 var(--lilac);
}
.map-card img { border-radius: 18px; width: 100%; }
.map-card figcaption { padding: 14px 6px 4px; font-size: .95rem; }

/* 7. Tilbageblik */
.lookback__head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px 64px; align-items: end; margin-bottom: clamp(32px, 4vw, 52px); }
.lookback__head .lead { margin: 0; }
.lookback__video { position: relative; max-width: 960px; margin: 0 auto clamp(56px, 7vw, 96px); }
.lookback__video video {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000;
  border-radius: var(--radius); border: 4px solid var(--sun);
  box-shadow: 16px 16px 0 var(--pink);
}
.lookback__note { left: -10px; top: -46px; transform: rotate(-10deg); }
.past-artists { text-align: center; margin-bottom: clamp(48px, 6vw, 80px); }
.past-artists h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem); color: var(--cream); }
.past-artists__sub { margin: 8px 0 26px; color: rgba(251, 241, 220, .8); }
.past-artists ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 14px; max-width: 900px; margin: 0 auto; padding-top: 8px; }

/* 8. FAQ */
.faq .display { margin-bottom: clamp(36px, 5vw, 56px); }
.faq__list { display: grid; gap: 14px; }
.faq__item { background: #fff8ea; border: 3px solid var(--forest); border-radius: 22px; overflow: hidden; transition: box-shadow .3s, transform .3s var(--ease-bounce); }
.faq__item[open] { box-shadow: 8px 8px 0 var(--pink); }
.faq__item:nth-child(even)[open] { box-shadow: 8px 8px 0 var(--sun); }
.faq__item summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 20px 64px 20px 24px; font-weight: 800; font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; position: absolute; right: 18px; top: 50%; width: 34px; height: 34px; margin-top: -17px;
  display: grid; place-items: center; border-radius: 50%; background: var(--coral);
  font-family: var(--font-fun); font-weight: 800; font-size: 1.5rem; line-height: 1;
  transition: transform .4s var(--ease-bounce);
}
.faq__item[open] summary::after { transform: rotate(135deg); background: var(--sun); }
.faq__item summary:focus-visible { outline-offset: -6px; }
.faq__a { padding: 0 24px 22px; }
.faq__a p { margin: 0; max-width: 62ch; }
.faq__a a { font-weight: 700; text-decoration-color: var(--coral); text-decoration-thickness: 2px; }

/* 9. Afslutning */
.outro { overflow-x: clip; padding-top: calc(var(--section-space) + 10px); padding-bottom: var(--section-space); }
.outro__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.outro__photo { position: relative; max-width: 420px; }
.outro__photo img { border-radius: 200px 200px var(--radius) var(--radius); border: 4px solid var(--cream); transform: rotate(-3deg); }
.outro__flower { width: 76px; height: 76px; right: -26px; top: 40px; color: var(--pink); }
.outro__copy .display { margin-bottom: 26px; }
.signature { font-family: var(--font-hand); font-size: 1.8rem; color: var(--pink); margin: 18px 0 32px; }
.signature span { white-space: nowrap; }
.signature svg { width: .9em; height: .9em; vertical-align: -.1em; }

/* Footer */
.site-footer { background: #0a2216; color: var(--cream); padding: 64px 0 28px; }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; }
.site-footer__h { font-size: .85rem; text-transform: uppercase; letter-spacing: .14em; color: var(--sun); margin-bottom: 14px; }
.site-footer__list { display: grid; gap: 8px; }
.site-footer__list a { text-decoration: none; border-bottom: 2px solid rgba(255, 127, 166, .5); }
.site-footer__list a:hover { border-color: var(--pink); }
.site-footer__bottom { text-align: center; margin: 48px 0 0; padding: 22px var(--gutter) 0; border-top: 1px solid rgba(251, 241, 220, .15); font-size: .9rem; color: rgba(251, 241, 220, .7); }
.site-footer__bottom svg { width: 1em; height: 1em; color: var(--pink); vertical-align: -.15em; }

/* ==========================================================
   Responsiv
   ========================================================== */
@media (max-width: 1100px) {
  .exp-cards { grid-template-columns: repeat(2, 1fr); }
  .exp-card:nth-child(even) { margin-top: 0; }
  .exp-card:nth-child(2), .exp-card:nth-child(4) { transform: translateY(36px); }
  .exp-card:nth-child(2):hover, .exp-card:nth-child(4):hover { transform: translateY(28px) rotate(-1.2deg); }
  .exp-cards { padding-bottom: 36px; }
}

@media (max-width: 900px) {
  .hero { min-height: 0; padding-top: 96px; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__title { margin-right: 0; font-size: clamp(3.3rem, .9rem + 12.5vw, 6.5rem); }
  .hero__media { margin-top: 28px; }
  .hero__photo { margin-right: 0; aspect-ratio: 4 / 3.3; }
  .badge-circle { top: -40px; right: 0; }
  .hand-note--a { left: 4%; bottom: 8%; }
  .hand-note--b { display: none; }
  .scroll-cue { display: none; }

  .welcome__grid, .experience__intro, .practical__grid, .lookback__head, .tickets__bottom, .outro__grid, .invite { grid-template-columns: 1fr; }
  .welcome__media { max-width: 520px; margin: 20px auto 0; width: 100%; }
  .ticket-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
  .ticket--highlight { transform: none; }
  .map-card { position: relative; top: 0; max-width: 520px; transform: rotate(1deg); }
  .outro__photo { max-width: 320px; margin: 0 auto; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__grid > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .exp-cards { grid-template-columns: 1fr; padding-bottom: 0; }
  .exp-card:nth-child(2), .exp-card:nth-child(4) { transform: none; }
  .exp-card:nth-child(2):hover, .exp-card:nth-child(4):hover { transform: translateY(-8px) rotate(-1.2deg); }
  .act { grid-template-columns: 1fr; }
  .act__when { justify-self: start; }
  .blob-photo { box-shadow: 12px 12px 0 var(--coral); }
  .welcome__note { right: 6px; top: -34px; }
  .lookback__video video { box-shadow: 8px 8px 0 var(--pink); }
  .lookback__note { left: auto; right: 0; top: -48px; }
  .invite { box-shadow: 8px 8px 0 var(--forest); }
  .site-footer__grid { grid-template-columns: 1fr; }
  .btn--lg { width: 100%; justify-content: center; }
  .hero__actions .btn--lg { width: auto; }
}

/* ==========================================================
   Animationer
   Kun aktiv når JS kører (.js) og brugeren ikke har bedt om
   reduceret bevægelse.
   ========================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* Hero: overskriften kommer ind linje for linje */
  .js .hero__title .ch { opacity: 0; transform: translateY(.7em) rotate(calc(var(--r) * 5)) scale(.4); }
  .js .is-ready .hero__title .ch {
    opacity: 1; transform: translateY(var(--y)) rotate(var(--r));
    transition: transform .75s var(--ease-bounce), opacity .35s ease;
    transition-delay: calc(.1s + var(--i) * .16s + var(--n) * .035s);
  }

  .js .hero__meta, .js .hero__actions { opacity: 0; transform: translateY(18px); }
  .js .is-ready .hero__meta, .js .is-ready .hero__actions {
    opacity: 1; transform: none; transition: opacity .7s ease, transform .8s var(--ease-out);
  }
  .js .is-ready .hero__meta { transition-delay: .75s; }
  .js .is-ready .hero__actions { transition-delay: .9s; }

  .js .hero__photo { clip-path: circle(0% at 60% 50%); }
  .js .is-ready .hero__photo { clip-path: circle(80% at 50% 50%); transition: clip-path 1.4s var(--ease-out) .1s; }
  .hero__photo img { animation: kenburns 22s ease-in-out infinite alternate; }

  .js .badge-circle, .js .hand-note--a, .js .hand-note--b, .js .hero__sun { opacity: 0; }
  .js .is-ready .badge-circle { animation: pop-in .8s var(--ease-bounce) 1.1s both, bob 5s ease-in-out 2s infinite; }
  .js .is-ready .hero__sun { animation: pop-in .7s var(--ease-bounce) .8s both, sun-wiggle 4s ease-in-out 1.6s infinite; }
  .js .is-ready .hand-note--a { animation: scribble-in .7s var(--ease-out) 1.35s both; }
  .js .is-ready .hand-note--b { animation: scribble-in .7s var(--ease-out) 1.55s both; }
  .hero__sun .rays { transform-origin: 50px 50px; animation: spin 18s linear infinite; }
  .badge-circle__dancer { animation: dance 1.6s ease-in-out infinite; transform-origin: 50% 90%; }

  .wave--hero .wave__back { animation: wave-drift 9s ease-in-out infinite alternate; }
  .wave--hero .wave__front { animation: wave-drift 7s ease-in-out infinite alternate-reverse; }

  .btn--bounce { animation: nudge 4.5s ease-in-out 2.4s infinite; }
  .btn--bounce:hover, .btn--bounce:focus-visible { animation: none; }

  .scroll-cue span { animation: scroll-dot 1.8s ease-in-out infinite; }

  /* Tekstbånd */
  .ribbon__track { animation: marquee 38s linear infinite; }

  /* Små detaljer resten af siden: rolige */
  .welcome__star { animation: spin 16s linear infinite; }
  .outro__flower { animation: spin 20s linear infinite; }
  .welcome__leaf { animation: sway 7s ease-in-out infinite; transform-origin: 50% 100%; }

  /* Scroll-reveal */
  .js [data-reveal] {
    opacity: 0; transform: translateY(36px);
    transition: opacity .8s ease, transform .9s var(--ease-out);
    transition-delay: var(--d, 0s);
  }
  .js [data-reveal="left"] { transform: translateX(-48px) rotate(-2deg); }
  .js [data-reveal="right"] { transform: translateX(48px) rotate(2deg); }
  .js [data-reveal="scale"] { transform: scale(.9) rotate(-1.5deg); }
  .js [data-reveal="tilt"] { transform: translateY(60px) rotate(4deg); transition-timing-function: ease, var(--ease-bounce); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  /* Kort med egen hover-transform: lad hover tage over, når de er vist */
  .js .exp-card.is-in, .js .ticket.is-in { transition: opacity .8s ease, transform .45s var(--ease-bounce), box-shadow .3s; }
  .js .ticket--highlight.is-in { transform: rotate(1.5deg); }
  .js .ticket--highlight.is-in:hover { transform: translateY(-6px) rotate(2.5deg); }
  .js .exp-card.is-in:hover { transform: translateY(-8px) rotate(-1.2deg); }
  @media (max-width: 1100px) and (min-width: 601px) {
    .js .exp-card.is-in:nth-child(2), .js .exp-card.is-in:nth-child(4) { transform: translateY(36px); }
    .js .exp-card.is-in:nth-child(2):hover, .js .exp-card.is-in:nth-child(4):hover { transform: translateY(28px) rotate(-1.2deg); }
  }
  @media (max-width: 900px) { .js .ticket--highlight.is-in { transform: none; } }

  /* Display-overskrifter: ordene hopper på plads */
  .js .display[data-reveal] { opacity: 1; transform: none; }
  .js .display[data-reveal] .ch { opacity: 0; transform: translateY(.6em) rotate(calc(var(--r) * 4)) scale(.5); transition: opacity .3s ease, transform .7s var(--ease-bounce); transition-delay: calc(var(--n) * 28ms); }
  .js .display[data-reveal].is-in .ch { opacity: 1; transform: translateY(var(--y)) rotate(var(--r)); }


}

/* Hero-detaljer uden JS eller med reduceret bevægelse: vis alt med det samme */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .ribbon__track { flex-wrap: wrap; width: auto; justify-content: center; padding: 0 var(--gutter); row-gap: 8px; }
  .ribbon__track > :nth-child(n+15) { display: none; }
}

@keyframes kenburns { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.12) translate(-2%, -1.5%); } }
@keyframes pop-in { 0% { opacity: 0; transform: scale(.3) rotate(-20deg); } 100% { opacity: 1; } }
@keyframes scribble-in { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes bob { 0%, 100% { transform: rotate(10deg) translateY(0); } 50% { transform: rotate(6deg) translateY(-10px); } }
@keyframes sun-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg) scale(1.05); } 60% { transform: rotate(6deg); } }
@keyframes twinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(.75) rotate(45deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes dance { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg) translateY(-3px); } }
@keyframes sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }
@keyframes morph {
  0% { border-radius: 60% 40% 55% 45% / 55% 45% 55% 45%; transform: translate(0, 0); }
  100% { border-radius: 40% 60% 45% 55% / 45% 60% 40% 55%; transform: translate(14px, -10px); }
}
@keyframes wave-drift { from { transform: translateX(0); } to { transform: translateX(-3%) scaleY(1.08); } }
@keyframes nudge { 0%, 86%, 100% { transform: none; } 90% { transform: rotate(-3deg) scale(1.04); } 94% { transform: rotate(2deg) scale(1.04); } }
@keyframes scroll-dot { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(18px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes letter-jump { 0% { transform: translateY(var(--y)) rotate(var(--r)); } 40% { transform: translateY(-.22em) rotate(calc(var(--r) * -2.5)) scale(1.12); } 100% { transform: translateY(var(--y)) rotate(var(--r)); } }

.hero-wrap.is-offscreen *, .hero-wrap.is-offscreen *::before, .hero-wrap.is-offscreen *::after { animation-play-state: paused !important; }
.wave--hero { width: 106%; }

/* ==========================================================
   Runde 2: hero-varianter, galleri, kunstnerbobler
   ========================================================== */

.hero-wrap { position: relative; }
.hero[hidden] { display: none; }
.hero__deco { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero__deco .doodle, .hero__deco .blob { position: absolute; }

.blob { display: block; border-radius: 60% 40% 55% 45% / 55% 45% 55% 45%; }
.d-leaf { width: 74px; height: 130px; color: var(--leaf-soft); }
.d-burst { width: 170px; height: 170px; color: var(--lilac); }
.d-sparkle { width: 34px; height: 34px; color: var(--sun); }
.d-star { width: 42px; height: 42px; color: var(--coral); }
.d-note { width: 34px; height: 34px; color: var(--cream); opacity: .9; }
.d-squiggle { width: 140px; height: 24px; color: var(--sun); }

.confetti { position: absolute; inset: 0; }
.confetti i { position: absolute; width: 12px; height: 6px; border-radius: 3px; background: var(--pink); }
.confetti i:nth-child(1) { left: 44%; top: 10%; background: var(--sun); rotate: 25deg; }
.confetti i:nth-child(2) { left: 8%; top: 64%; background: var(--pink); rotate: -30deg; }
.confetti i:nth-child(3) { left: 52%; top: 78%; background: var(--lilac); rotate: 60deg; }
.confetti i:nth-child(4) { left: 36%; top: 30%; background: var(--coral); rotate: -10deg; width: 8px; height: 8px; border-radius: 50%; }
.confetti i:nth-child(5) { left: 92%; top: 58%; background: var(--sun); rotate: 80deg; }
.confetti i:nth-child(6) { left: 20%; top: 8%; background: var(--leaf-soft); rotate: -50deg; }

.hearts { position: absolute; left: 50%; bottom: 8%; width: 40%; height: 70%; pointer-events: none; z-index: 4; }
.float-heart { position: absolute; bottom: 0; width: 22px; height: 22px; color: var(--pink); opacity: 0; }
.float-heart:nth-child(1) { left: 0; }
.float-heart:nth-child(2) { left: 30%; color: var(--coral); width: 16px; height: 16px; }
.float-heart:nth-child(3) { left: 55%; color: var(--sun); }
.float-heart:nth-child(4) { left: 75%; width: 18px; height: 18px; }
.float-heart:nth-child(5) { left: 92%; color: var(--lilac); }

/* --- Skifter mellem hero-designs (preview) --- */
.hero-switch {
  position: fixed; left: 16px; bottom: 16px; z-index: 60;
  display: flex; align-items: center; gap: 6px;
  background: var(--forest); color: var(--cream); border: 2px solid var(--sun);
  border-radius: 999px; padding: 6px 8px 6px 14px; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .7);
  font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
.hero-switch button {
  width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--cream); cursor: pointer;
  background: transparent; color: var(--cream); font: 800 .95rem var(--font-body);
  transition: transform .3s var(--ease-bounce), background-color .2s;
}
.hero-switch button:hover { transform: rotate(-10deg) scale(1.1); }
.hero-switch button[aria-pressed="true"] { background: var(--sun); color: var(--forest); border-color: var(--sun); }

/* --- Video i tilbageblik --- */
.video-toggle {
  position: absolute; right: 18px; bottom: 18px; width: 50px; height: 50px; border-radius: 50%;
  border: 3px solid var(--cream); background: rgba(15, 46, 31, .85); cursor: pointer;
  transition: transform .3s var(--ease-bounce);
}
.video-toggle:hover { transform: scale(1.1) rotate(-8deg); }
.video-toggle__pause, .video-toggle__pause::before {
  position: absolute; top: 15px; width: 5px; height: 14px; border-radius: 2px; background: var(--cream);
}
.video-toggle__pause { left: 15px; }
.video-toggle__pause::before { content: ""; top: 0; left: 9px; }
.video-toggle.is-paused .video-toggle__pause { left: 18px; width: 0; height: 0; background: none; border-radius: 0; border-style: solid; border-width: 8px 0 8px 14px; border-color: transparent transparent transparent var(--cream); }
.video-toggle.is-paused .video-toggle__pause::before { display: none; }

/* --- Galleri --- */
.gallery-box { margin-bottom: clamp(48px, 6vw, 80px); }
.gallery__head { text-align: center; margin-bottom: 18px; }
.gallery__title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; color: var(--sun); font-size: clamp(2rem, 1.4rem + 2vw, 3rem); }
.gallery__sub { margin: 6px 0 0; color: rgba(251, 241, 220, .82); }
.gallery__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; margin-bottom: clamp(26px, 3vw, 40px); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.chip, .shuffle {
  display: inline-flex; align-items: center; gap: 6px;
  border: 2px solid var(--cream); border-radius: 999px; padding: 7px 14px;
  background: transparent; color: var(--cream); cursor: pointer;
  font: 700 .95rem var(--font-body);
  transition: transform .3s var(--ease-bounce), background-color .2s, color .2s;
}
.chip:hover, .shuffle:hover { transform: rotate(-3deg) scale(1.05); }
.chip[aria-pressed="true"] { background: var(--sun); border-color: var(--sun); color: var(--forest); }
.chip__count { font-size: .75rem; background: rgba(251, 241, 220, .2); border-radius: 999px; padding: 1px 7px; }
.chip[aria-pressed="true"] .chip__count { background: rgba(15, 46, 31, .15); }
.shuffle { border-color: var(--lilac); color: var(--lilac); }
.shuffle svg { width: 16px; height: 16px; }
.shuffle:active svg { rotate: 180deg; }

.pola-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.4vw, 32px); }
.pola-item { position: relative; }
.pola {
  display: block; width: 100%; padding: 10px 10px 0; border: 0; border-radius: 6px; cursor: zoom-in;
  background: #fffaf0; color: var(--forest); text-align: left;
  box-shadow: 0 14px 26px -14px rgba(0, 0, 0, .75);
  rotate: var(--t, 0deg);
  transition: rotate .45s var(--ease-bounce), transform .45s var(--ease-bounce), box-shadow .3s;
}
.pola::before {
  content: ""; position: absolute; top: -10px; left: 50%; width: 70px; height: 20px; margin-left: -35px;
  background: rgba(255, 216, 77, .8); rotate: -3deg; border-radius: 2px;
}
.pola-item:nth-child(3n+2) .pola::before { background: rgba(255, 127, 166, .8); rotate: 4deg; }
.pola-item:nth-child(3n) .pola::before { background: rgba(185, 161, 245, .8); }
.pola img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; border-radius: 3px; }
.pola__cap { display: block; font-family: var(--font-hand); font-size: 1.2rem; line-height: 1.15; padding: 8px 2px 12px; }
.pola__cap small { color: var(--coral); font-family: var(--font-body); font-weight: 800; font-size: .75rem; margin-left: 4px; }
.pola:hover, .pola:focus-visible { rotate: 0deg; transform: translateY(-8px) scale(1.04); box-shadow: 0 24px 40px -18px rgba(0, 0, 0, .8); position: relative; z-index: 2; }
.pola:focus-visible { outline: 4px solid var(--sun); outline-offset: 4px; }
.gallery__more { text-align: center; margin-top: clamp(26px, 3vw, 40px); }
.gallery__more [hidden] { display: none; }

.lightbox {
  width: min(1000px, 92vw); max-height: 92vh; padding: 0; border: 0; background: transparent; overflow: visible;
}
.lightbox::backdrop { background: rgba(10, 34, 22, .9); }
.lightbox__fig { margin: 0; background: #fffaf0; padding: 12px 12px 0; border-radius: 8px; rotate: -1deg; }
.lightbox__fig img { width: 100%; max-height: 74vh; object-fit: contain; background: #000; border-radius: 4px; }
.lightbox__fig figcaption { font-family: var(--font-hand); color: var(--forest); font-size: 1.4rem; padding: 10px 4px 14px; }
.lightbox__btn, .lightbox__close {
  position: absolute; width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--sun); color: var(--forest);
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .7); transition: transform .3s var(--ease-bounce);
}
.lightbox__btn svg { width: 26px; height: 26px; }
.lightbox__btn--prev { left: -22px; top: 45%; }
.lightbox__btn--prev svg { rotate: 180deg; }
.lightbox__btn--next { right: -22px; top: 45%; }
.lightbox__close { right: -14px; top: -18px; background: var(--coral); font-size: 1.3rem; font-weight: 800; }
.lightbox__btn:hover, .lightbox__close:hover { transform: scale(1.12) rotate(-6deg); }

/* --- Kunstnere med portrætbobler --- */
.artist { position: relative; --tint: var(--pink); }
.artist--sun { --tint: var(--sun); }
.artist--lilac { --tint: var(--lilac); }
.artist--coral { --tint: var(--coral); }
.artist__chip {
  border: 2px solid var(--tint); border-radius: 999px; padding: 8px 18px;
  background: transparent; color: var(--tint); cursor: pointer;
  font: 700 1rem var(--font-body);
  transition: transform .35s var(--ease-bounce), background-color .2s, color .2s;
}
.artist__chip:focus-visible, .artist.is-open .artist__chip { background: var(--tint); color: var(--forest); transform: rotate(-3deg) scale(1.06); }
.artist__bubble {
  position: absolute; left: 50%; bottom: calc(100% + 22px); z-index: 10; width: 150px;
  opacity: 0; pointer-events: none; transform-origin: 50% 120%;
  transform: translateX(-50%) scale(.2) rotate(-20deg);
  transition: opacity .2s ease, transform .5s var(--ease-bounce);
}
.artist__bubble img {
  width: 150px; height: 150px; border-radius: 50%; object-fit: cover;
  border: 5px solid var(--tint); background: var(--forest-2);
  box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .8);
}
.artist__bubble::before, .artist__bubble::after { /* tankeboble-prikker */
  content: ""; position: absolute; left: 50%; border-radius: 50%; background: var(--tint);
}
.artist__bubble::before { width: 14px; height: 14px; bottom: -14px; margin-left: -10px; }
.artist__bubble::after { width: 8px; height: 8px; bottom: -26px; margin-left: -2px; }
.artist__bubble-name {
  position: absolute; left: 50%; bottom: 4px; translate: -50% 0; rotate: -6deg; white-space: nowrap;
  background: var(--tint); color: var(--forest); font-family: var(--font-hand); font-size: 1rem;
  padding: 2px 10px; border-radius: 999px;
}
.artist__chip:focus-visible + .artist__bubble, .artist.is-open .artist__bubble {
  opacity: 1; transform: translateX(-50%) scale(1) rotate(-4deg);
}
@media (hover: hover) {
  .artist:hover .artist__chip { background: var(--tint); color: var(--forest); transform: rotate(-3deg) scale(1.06); }
  .artist:hover .artist__bubble { opacity: 1; transform: translateX(-50%) scale(1) rotate(-4deg); z-index: 11; }
}
.past-artists .hint { display: block; font-family: var(--font-hand); color: var(--sun); font-size: 1.15rem; margin-top: 4px; }
.past-artists ul { padding-top: 12px; }

/* --- Responsiv for de nye dele --- */
@media (max-width: 1200px) {
}
@media (max-width: 900px) {

  .pola-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .pola-grid { grid-template-columns: repeat(2, 1fr); gap: 16px 14px; }
  .pola { padding: 7px 7px 0; }
  .pola__cap { font-size: 1rem; padding: 6px 1px 9px; }
  .lightbox__btn--prev { left: 6px; top: auto; bottom: -66px; }
  .lightbox__btn--next { right: 6px; top: auto; bottom: -66px; }
  .lightbox__close { right: 4px; top: -60px; }
  .artist__bubble { width: 120px; }
  .artist__bubble img { width: 120px; height: 120px; }
  .hero-switch { left: 10px; bottom: 10px; padding-left: 10px; }
  .hero-switch__label { display: none; }
}

/* --- Bevægelse for de nye dele --- */
@media (prefers-reduced-motion: no-preference) {
  .blob { animation: morph 14s ease-in-out infinite alternate; }
  .blob:nth-child(2n) { animation-duration: 18s; animation-direction: alternate-reverse; }
  .d-leaf { animation: sway 6s ease-in-out infinite; transform-origin: 50% 100%; }
  .d-leaf--2 { animation-duration: 7.5s; animation-delay: -2s; }
  .d-burst { animation: spin 26s linear infinite; }
  .d-sparkle { animation: twinkle 2.8s ease-in-out infinite; }
  .d-sparkle--2 { animation-delay: -1.3s; }
  .d-star { animation: spin 14s linear infinite; }
  .d-note { animation: note-float 5s ease-in-out infinite; }
  .d-note--2 { animation-delay: -2.4s; }
  .d-squiggle { animation: sway 4s ease-in-out infinite; }
  .confetti i { animation: confetti-drift 7s ease-in-out infinite alternate; }
  .confetti i:nth-child(2n) { animation-duration: 9s; animation-delay: -3s; }
  .float-heart { animation: heart-rise 6s ease-in infinite; animation-delay: calc(var(--k) * 1.2s + 1.5s); }

  .pola-grid.is-dealt .pola-item { animation: deal .6s var(--ease-bounce) both; animation-delay: calc(var(--n) * 55ms); }
  .lightbox[open] .lightbox__fig { animation: pop-in .45s var(--ease-bounce); }
  .artist.is-open .artist__bubble img, .artist:hover .artist__bubble img { animation: bubble-wobble 2.4s ease-in-out .5s infinite; }
}

@keyframes note-float { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-14px) rotate(8deg); } }
@keyframes confetti-drift { from { transform: translate(0, 0); } to { transform: translate(10px, 18px) rotate(90deg); } }
@keyframes heart-rise { 0% { opacity: 0; transform: translateY(0) scale(.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-260px) translateX(20px) scale(1.2) rotate(20deg); } }
@keyframes drop-in { 0% { opacity: 0; transform: translateY(-80px) scale(.7) rotate(-20deg); } 100% { opacity: 1; transform: none; } }
@keyframes wobble { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(-6deg) scale(1.05); } }
@keyframes beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 30% { transform: scale(.96); } 45% { transform: scale(1.1); } }
@keyframes deal { 0% { opacity: 0; transform: translateY(50px) rotate(14deg) scale(.8); } 100% { opacity: 1; transform: none; } }
@keyframes bubble-wobble { 0%, 100% { transform: rotate(0) scale(1); } 33% { transform: rotate(4deg) scale(1.03); } 66% { transform: rotate(-3deg) scale(.98); } }
@keyframes pola-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.hand-note--dark { color: var(--forest); text-shadow: none; }
.hand-note--dark svg { color: var(--coral); }

/* ==========================================================
   Runde 3: nye heroes, citat-scene, loader
   ========================================================== */

/* Fælles: busk-klynger */
.bush { position: absolute; display: block; overflow: visible; }



/* --- Hero 3: Video i skærm --- */
.hero--v3 { background: radial-gradient(110% 90% at 80% 20%, #1f4a35 0%, var(--forest) 60%); }
.stripes {
  position: absolute; right: 0; top: 0; width: 58%; height: 100%;
  background: repeating-linear-gradient(115deg, rgba(255, 127, 166, .09) 0 46px, transparent 46px 92px);
  -webkit-mask: linear-gradient(90deg, transparent, #000 30%); mask: linear-gradient(90deg, transparent, #000 30%);
}
.hero--v3 .bush--bl { left: -110px; bottom: 40px; width: 300px; height: 206px; }
.hero--v3 .d-leaf--1 { left: 30px; top: 110px; rotate: 16deg; }
.hero--v3 .d-sparkle--1 { left: 46%; top: 16%; }
.hero--v3 .d-sparkle--2 { left: 40%; bottom: 22%; color: var(--pink); }
.hero--v3 .d-star--1 { right: 4%; bottom: 18%; color: var(--sun); }
.screen-wrap { position: relative; margin-left: 20px; }
.screen {
  position: relative; z-index: 2; overflow: hidden; aspect-ratio: 16 / 10; background: #000;
  border-radius: 30px; border: 6px solid var(--sun); box-shadow: 16px 16px 0 var(--pink); rotate: 2.5deg;
}
.screen video { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.25) contrast(1.05); }
.screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15, 46, 31, .35), transparent 40%); pointer-events: none; }
.screen__rec {
  position: absolute; z-index: 1; left: 16px; top: 16px; display: inline-flex; align-items: center; gap: 8px;
  background: rgba(15, 46, 31, .82); color: var(--cream); border-radius: 999px; padding: 6px 14px; left: auto; right: 16px;
  font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
}
.screen__rec i { width: 10px; height: 10px; border-radius: 50%; background: var(--coral); }
.screen-blob { position: absolute; z-index: 1; border-radius: 60% 40% 55% 45% / 55% 45% 55% 45%; }
.screen-blob--lilac { left: -70px; bottom: -60px; width: 240px; height: 190px; background: var(--lilac); }
.screen-blob--sun { right: -40px; top: -46px; width: 150px; height: 150px; background: var(--leaf); }
.ring { position: absolute; z-index: 3; left: -60px; top: -70px; width: clamp(130px, 13vw, 180px); aspect-ratio: 1; }
.ring::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; background: var(--coral); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6); }
.ring > svg:first-child { position: relative; width: 100%; height: 100%; overflow: visible; }
.ring text { font-family: var(--font-display); font-size: 17px; letter-spacing: 2px; fill: var(--cream); }
.ring__heart { position: absolute; left: 50%; top: 50%; width: 34%; height: 34%; translate: -50% -50%; color: var(--cream); }
.hand-note--c { right: 2%; bottom: -70px; rotate: -5deg; color: var(--sun); font-size: clamp(1.15rem, 1rem + .5vw, 1.55rem); }
.hero--v3 .d-note--2 { position: absolute; right: 30%; top: -54px; color: var(--sun); }

/* --- Preview-panel --- */
.preview-panel { position: fixed; left: 16px; bottom: 16px; z-index: 250; display: grid; gap: 8px; }
.preview-panel .hero-switch { position: static; }
.hero-switch__label { min-width: 52px; }

/* --- Bogstav-hop: gøres altid færdigt (klassen fjernes i JS efter animationen) --- */
@media (prefers-reduced-motion: no-preference) {
  .ch.is-jumping { animation: letter-jump .6s var(--ease-bounce); }
}

/* --- Citat-scene --- */
.quote-stage {
  position: relative; max-width: 1040px; margin: 0 auto; padding-top: 120px;
  display: grid; grid-template-columns: 1fr 250px; align-items: end; gap: 10px 30px;
}
.disco { position: absolute; left: 12%; top: 0; width: 90px; height: 150px; z-index: 2; }
.disco__string { position: absolute; left: 50%; top: -40px; width: 2px; height: 96px; background: rgba(251, 241, 220, .6); }
.disco__ball {
  position: absolute; left: 0; top: 56px; width: 90px; height: 90px; border-radius: 50%; overflow: hidden;
  background:
    radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .95) 0 8%, transparent 22%),
    repeating-linear-gradient(0deg, transparent 0 10px, rgba(15, 46, 31, .35) 10px 11px),
    repeating-linear-gradient(90deg, #f3f0ff 0 10px, #9a9cc0 10px 11px, #d7d3f2 11px 21px, #7f83aa 21px 22px);
  background-size: auto, auto, 88px 100%;
  box-shadow: 0 0 40px 8px rgba(185, 161, 245, .45);
}
.disco__beams {
  position: absolute; left: 45px; top: 101px; width: 700px; height: 700px; translate: -50% -50%; z-index: -1; pointer-events: none;
  background: conic-gradient(from 0deg, rgba(255, 127, 166, .22) 0 6deg, transparent 6deg 40deg, rgba(255, 216, 77, .2) 40deg 46deg, transparent 46deg 100deg, rgba(185, 161, 245, .22) 100deg 106deg, transparent 106deg 170deg, rgba(255, 107, 94, .2) 170deg 176deg, transparent 176deg 240deg, rgba(255, 216, 77, .18) 240deg 246deg, transparent 246deg 300deg, rgba(185, 161, 245, .2) 300deg 306deg, transparent 306deg);
  border-radius: 50%;
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 70%); mask: radial-gradient(circle, #000 20%, transparent 70%);
}
.quote { margin: 0; position: relative; z-index: 1; }
.quote__bubble {
  position: relative; background: var(--cream); color: var(--forest);
  border-radius: 42px; padding: clamp(30px, 4vw, 46px) clamp(26px, 4vw, 52px);
  box-shadow: 12px 12px 0 var(--pink); rotate: -1.5deg;
}
.quote__bubble::after { /* taleboble-hale mod danserne */
  content: ""; position: absolute; right: -26px; bottom: 34px; width: 46px; height: 40px; background: var(--cream);
  clip-path: polygon(0 0, 100% 70%, 0 100%);
}
.quote__mark { position: absolute; left: -18px; top: -54px; font-family: var(--font-display); font-size: 8rem; line-height: 1; color: var(--coral); }
.quote__bubble p { margin: 0; font-family: var(--font-hand); font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2.15rem); line-height: 1.25; }
.quote mark {
  color: inherit; padding: 0 .1em;
  background: linear-gradient(transparent 58%, var(--sun) 58%, var(--sun) 92%, transparent 92%) no-repeat 0 0 / 0% 100%;
  transition: background-size 1s var(--ease-out) .6s;
}
.quote mark + mark, .quote p mark:nth-of-type(2) { transition-delay: 1.2s; }
.quote-stage.is-in mark, .no-js .quote mark { background-size: 100% 100%; }
.quote__tag {
  position: absolute; right: 34px; bottom: -20px; rotate: 4deg;
  background: var(--lilac); color: var(--forest); border-radius: 999px; padding: 5px 16px;
  font-family: var(--font-hand); font-size: 1.15rem;
}
.quote footer { margin-top: 34px; font-size: .95rem; color: rgba(251, 241, 220, .75); text-align: center; }
.dancers { display: flex; justify-content: center; align-items: flex-end; gap: 0; padding-bottom: 58px; }
.dancer { width: 84px; height: 126px; overflow: visible; }
.dancer path { fill: none; stroke: var(--c); stroke-width: 7; stroke-linecap: round; }
.dancer circle { fill: var(--c); }
.dancer__arm { transform-box: view-box; transform-origin: 40px 38px; }
.dancer__leg { transform-box: view-box; transform-origin: 40px 67px; }
.dancer__body { transform-box: view-box; transform-origin: 40px 100px; }
.dancer--2 { width: 96px; height: 144px; }
.confetti--quote { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti--quote i:nth-child(7) { left: 70%; top: 4%; background: var(--pink); }
.confetti--quote i:nth-child(8) { left: 86%; top: 12%; background: var(--sun); width: 8px; height: 8px; border-radius: 50%; }

/* --- Loader --- */
.loader { display: none; }
.js .loader {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; overflow: hidden;
  background: var(--forest); color: var(--cream); text-align: center; padding: 24px;
  animation: loader-failsafe .4s 9s forwards;
}
.js .loader[hidden] { display: none; }
html.is-loading, html.is-loading body { overflow: hidden; }
.loader__v { display: none; position: relative; z-index: 2; }
.loader[data-variant="4"] .loader__v--4 { display: grid; justify-items: center; }
.loader__skip {
  position: absolute; z-index: 5; right: 20px; bottom: 20px; border: 2px solid currentColor; border-radius: 999px;
  background: transparent; color: inherit; padding: 8px 16px; font: 700 .85rem var(--font-body); cursor: pointer; opacity: .8;
}
.loader__skip:hover { opacity: 1; }

.loader__word { margin: 0; font-family: var(--font-display); font-size: clamp(3.6rem, 2rem + 8vw, 9rem); line-height: 1; }
.loader__word span { display: inline-block; }
.loader__word span:nth-child(4n+1) { color: var(--pink); }
.loader__word span:nth-child(4n+2) { color: var(--cream); }
.loader__word span:nth-child(4n+3) { color: var(--sun); }
.loader__word span:nth-child(4n) { color: var(--lilac); }
.loader[data-variant="4"]::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 90px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v40c-180 50-360-30-540 0S540 90 360 60 120 20 0 50z' fill='%230f2e1f'/%3E%3C/svg%3E") center / 100% 100%;
}

/* Billet (bruges af loader 4) */
.ticket-big { z-index: 2; }
.loader__stripes { position: absolute; inset: 0; z-index: 0; display: flex; }
.loader__stripes i { flex: 1; height: 100%; background: var(--pink); }
.loader__stripes i:nth-child(2) { background: #ff8fb1; }
.loader__stripes i:nth-child(3) { background: var(--pink); }
.loader__stripes i:nth-child(4) { background: #ff8fb1; }
.loader__burst {
  position: absolute; left: 50%; top: 50%; width: 1600px; height: 1600px; translate: -50% -50%; z-index: 1; border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 216, 77, .35) 0 8deg, transparent 8deg 18deg);
}
.ticket-big {
  position: relative; width: min(520px, 86vw); padding: 34px 40px 30px; border-radius: 22px;
  background: var(--cream); box-shadow: 14px 14px 0 var(--forest); display: grid; justify-items: start; text-align: left; rotate: -3deg;
}
.ticket-big::before, .ticket-big::after { content: ""; position: absolute; top: 50%; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; background: var(--pink); }
.ticket-big::before { left: -18px; }
.ticket-big::after { right: -18px; }
.ticket-big__logo { font-family: var(--font-display); font-size: 2.2rem; color: var(--pink-deep); line-height: 1; }
.ticket-big__year { font-family: var(--font-display); font-size: clamp(4rem, 3rem + 4vw, 6.4rem); line-height: .95; color: var(--forest); }
.ticket-big__meta { font-weight: 700; padding-top: 12px; border-top: 3px dashed rgba(15, 46, 31, .4); width: 100%; margin-top: 8px; }
.ticket-big__stamp {
  position: absolute; z-index: 1; right: 36px; top: 30px; rotate: 10deg;
  border: 5px solid var(--coral); outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 12px;
  color: var(--coral); background: rgba(251, 241, 220, .85); padding: 8px 16px 6px;
  font-family: var(--font-display); font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem); text-transform: uppercase; line-height: 1.05; max-width: 200px; text-align: center;
}



/* --- Responsiv runde 3 --- */
@media (max-width: 900px) {


  .screen-wrap { margin: 70px 0 70px; }
  .ring { left: -10px; top: -64px; width: 110px; }
  .ring text { font-size: 18px; }
  .hand-note--c { bottom: -56px; right: 4%; }
  .hero--v3 .bush--bl { left: -120px; bottom: auto; top: 46%; width: 220px; height: 150px; }
  .stripes { width: 100%; top: 40%; height: 60%; }

  .quote-stage { grid-template-columns: 1fr; padding-top: 140px; }
  .quote__bubble::after { right: 50%; bottom: -30px; clip-path: polygon(0 0, 100% 0, 30% 100%); }
  .dancers { padding-bottom: 0; margin-top: 10px; order: 2; }
  .disco { left: auto; right: 12%; }
}
@media (max-width: 600px) {
  .preview-panel { left: 10px; bottom: 10px; gap: 6px; }
  .preview-panel .hero-switch__label { display: inline; min-width: 0; font-size: .7rem; }
  .preview-panel .hero-switch button { width: 30px; height: 30px; }
  .loader__skip { right: 12px; bottom: auto; top: 14px; }
}

/* --- Bevægelse runde 3 --- */
@media (prefers-reduced-motion: no-preference) {
  .bush { animation: bush-breathe 6s ease-in-out infinite; transform-origin: 50% 100%; }
  .bush--r { animation-delay: -2s; }
  .bush--bl { animation-delay: -4s; }
  .screen-blob { animation: morph 12s ease-in-out infinite alternate; }

  .js .is-ready .balloons .balloon { opacity: 1; transition: opacity .8s ease 1s; }

  .screen__rec i { animation: rec-blink 1.2s steps(2, start) infinite; }
  .js .screen { opacity: 0; transform: translateY(40px) rotate(6deg) scale(.9); }
  .js .is-ready .screen { opacity: 1; transform: none; transition: opacity .7s ease .3s, transform 1s var(--ease-bounce) .3s; }
  .ring > svg:first-child { animation: spin 22s linear infinite; }
  .ring__heart { animation: beat 1.4s ease-in-out infinite; }
  .js .hand-note--c { opacity: 0; }
  .js .is-ready .hand-note--c { animation: scribble-in .7s var(--ease-out) 1.4s both; }

  .disco__ball { animation: disco-spin 3s linear infinite; }
  .disco__beams { animation: spin 14s linear infinite; }
  .disco { animation: sway 5s ease-in-out infinite; transform-origin: 50% -40px; }
  .js .quote-stage .quote__bubble { transform: scale(.6); opacity: 0; transition: transform .7s var(--ease-bounce) .1s, opacity .3s ease .1s; }
  .js .quote-stage.is-in .quote__bubble { transform: none; opacity: 1; }
  .quote__mark { animation: mark-bounce 2.6s ease-in-out infinite; transform-origin: 50% 80%; }
  .quote__tag { animation: wobble 3s ease-in-out infinite; }
  .dancer--1 .dancer__arm--l { animation: arm-disco-l 1.2s ease-in-out infinite; }
  .dancer--1 .dancer__arm--r { animation: arm-disco-r 1.2s ease-in-out infinite; }
  .dancer--1 .dancer__body { animation: hip-sway .6s ease-in-out infinite alternate; }
  .dancer--2 .dancer__body { animation: dance-jump .7s ease-in-out infinite; }
  .dancer--2 .dancer__arm--l { animation: arm-wave-l .7s ease-in-out infinite; }
  .dancer--2 .dancer__arm--r { animation: arm-wave-r .7s ease-in-out infinite; }
  .dancer--2 .dancer__leg--l { animation: leg-kick-l .7s ease-in-out infinite; }
  .dancer--2 .dancer__leg--r { animation: leg-kick-r .7s ease-in-out infinite; }
  .dancer--3 .dancer__body { animation: hip-sway .8s ease-in-out infinite alternate-reverse; }
  .dancer--3 .dancer__arm--l { animation: arm-wave-l 1.6s ease-in-out infinite; }
  .dancer--3 .dancer__arm--r { animation: arm-disco-r 1.6s ease-in-out infinite reverse; }
  .confetti--quote i { animation: confetti-fall 5s linear infinite; }
  .confetti--quote i:nth-child(2n) { animation-duration: 6.5s; animation-delay: -2s; }
  .confetti--quote i:nth-child(3n) { animation-duration: 4.2s; animation-delay: -3.4s; }

  /* Loader-animationer */
  .loader.is-on .loader__word span { animation: loader-wave 1.1s ease-in-out infinite; animation-delay: calc(var(--n) * .08s); }
  .loader[data-variant="4"].is-leaving { transform: translateY(-115%); transition: transform .85s cubic-bezier(.7, 0, .3, 1); }


}
@media (prefers-reduced-motion: reduce) {
  .loader.is-leaving { opacity: 0; transition: opacity .2s !important; }
}
.js .loader.is-leaving { pointer-events: none; }

@keyframes bush-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03) rotate(-1deg); } }
@keyframes rec-blink { to { visibility: hidden; } }
@keyframes disco-spin { from { background-position: 0 0, 0 0, 0 0; } to { background-position: 0 0, 0 0, 88px 0; } }
@keyframes mark-bounce { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg) translateY(-8px); } }
@keyframes arm-disco-l { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-60deg); } }
@keyframes arm-disco-r { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(80deg); } }
@keyframes arm-wave-l { 0%, 100% { transform: rotate(10deg); } 50% { transform: rotate(-40deg); } }
@keyframes arm-wave-r { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(40deg); } }
@keyframes leg-kick-l { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(18deg); } }
@keyframes leg-kick-r { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-18deg); } }
@keyframes hip-sway { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes dance-jump { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes confetti-fall { 0% { transform: translateY(-60px) rotate(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(520px) rotate(540deg); opacity: 0; } }
@keyframes loader-wave { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-.18em) rotate(-6deg); } 60% { transform: translateY(0) rotate(3deg); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes ticket-drop { 0% { opacity: 0; transform: translateY(-120vh) rotate(-20deg); } 100% { opacity: 1; transform: none; } }
@keyframes ticket-shake { 0%, 100% { translate: 0 0; } 25% { translate: -8px 4px; } 50% { translate: 7px -3px; } 75% { translate: -4px 2px; } }
@keyframes stamp-slam { 0% { opacity: 0; transform: scale(3) rotate(12deg); } 100% { opacity: 1; transform: none; } }
@keyframes loader-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }

.lookback { overflow-x: clip; }

/* ==========================================================
   Runde 4: nye loadere + sjove elementer i sektionerne
   ========================================================== */

.loader__v--2 { width: min(600px, 100%); }
.buddy__sprout svg { display: block; width: 100%; height: 100%; }

.loader__v--3 { padding-top: 150px; }

/* Loader 4: Billet-tælleren */
.loader__word--sm { font-size: clamp(3rem, 1.6rem + 6vw, 6.6rem); margin-bottom: 26px; }
.ticket-big--count { color: var(--forest); width: min(500px, 88vw); grid-template-columns: 1fr auto; column-gap: 14px; align-items: center; box-shadow: 14px 14px 0 var(--pink); }
.ticket-big--count::before, .ticket-big--count::after { background: var(--forest); }
.ticket-big--count > .ticket-big__label, .ticket-big--count > .ticket-big__year, .ticket-big--count > .ticket-big__meta { grid-column: 1 / -1; }
.ticket-big__label { font-family: var(--font-hand); font-size: 1.4rem; color: var(--pink-deep); line-height: 1.1; }
.ticket-big__bar { display: block; width: 100%; height: 20px; margin-top: 8px; border: 3px solid var(--forest); border-radius: 999px; background: rgba(15, 46, 31, .08); overflow: hidden; }
.ticket-big__bar i { display: block; width: 0; height: 100%; background: repeating-linear-gradient(-45deg, var(--coral) 0 10px, var(--pink) 10px 20px); }
.ticket-big__count { margin-top: 8px; font-family: var(--font-display); font-size: 1.6rem; line-height: 1; color: var(--forest); min-width: 3.2em; text-align: right; }
.ticket-big--count .ticket-big__stamp { top: 54px; right: 24px; }
.ticket-big__confetti { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.ticket-big__confetti i { position: absolute; width: 12px; height: 18px; margin: -9px -6px; border-radius: 3px; background: var(--sun); opacity: 0; }
.ticket-big__confetti i:nth-child(4n+1) { background: var(--pink); }
.ticket-big__confetti i:nth-child(4n+2) { background: var(--lilac); }
.ticket-big__confetti i:nth-child(4n+3) { background: var(--coral); }

/* --- Sjove elementer i sektionerne --- */

/* Velkommen: chat-bobler */
.chat { position: absolute; left: -40px; top: 14%; z-index: 3; display: grid; justify-items: start; gap: 8px; width: 260px; pointer-events: none; }
.chat__b {
  margin: 0; padding: 9px 16px; border: 3px solid var(--forest); border-radius: 20px 20px 20px 6px;
  background: var(--cream); box-shadow: 4px 4px 0 var(--forest);
  font: 700 .95rem/1.25 var(--font-body); color: var(--forest);
}
.chat__b--2, .chat__b--typing { grid-row: 2; grid-column: 1; justify-self: end; border-radius: 20px 20px 6px 20px; background: var(--sun); }
.chat__b--typing { display: none; padding: 12px 16px; }
.chat__b--typing i { display: inline-block; width: 8px; height: 8px; margin: 0 2px; border-radius: 50%; background: var(--forest); }

/* Oplevelsen: vimpler + badeand */
.experience { position: relative; overflow-x: clip; }
.bunting { position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: auto; pointer-events: none; overflow: visible; }
.bunting__wire { fill: none; stroke: rgba(251, 241, 220, .7); stroke-width: 2.5; }
.flag { transform-box: fill-box; transform-origin: 50% 0; }
.flag--pink { fill: var(--pink); } .flag--sun { fill: var(--sun); } .flag--lilac { fill: var(--lilac); } .flag--coral { fill: var(--coral); } .flag--cream { fill: var(--cream); }
.exp-card__img { position: relative; }
.duck { position: absolute; right: 12%; bottom: 7%; z-index: 2; width: 62px; filter: drop-shadow(0 5px 3px rgba(0, 0, 0, .3)); }
.duck svg { display: block; width: 100%; height: auto; overflow: visible; }
.duck__body { fill: var(--sun); stroke: var(--forest); stroke-width: 4; stroke-linejoin: round; }
.duck__beak { fill: #ff9a3c; stroke: var(--forest); stroke-width: 4; stroke-linejoin: round; }
.duck__eye { fill: var(--forest); }
.duck__wing { fill: none; stroke: var(--forest); stroke-width: 4; stroke-linecap: round; }
.ripples { position: absolute; right: calc(12% - 16px); bottom: calc(7% - 6px); z-index: 1; width: 94px; height: 20px; border: 3px solid rgba(255, 255, 255, .8); border-radius: 50%; }

/* Program: equalizer + vinylplade */
.eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 1.4em; margin-left: 8px; vertical-align: -.1em; }
.eq i { width: 5px; transform-origin: 50% 100%; height: 60%; border-radius: 2px; background: currentColor; }
.eq i:nth-child(2) { height: 90%; } .eq i:nth-child(3) { height: 40%; } .eq i:nth-child(4) { height: 75%; } .eq i:nth-child(5) { height: 50%; }
.program__head { position: relative; }
.vinyl { position: absolute; right: 10px; top: -10px; width: 200px; height: 200px; }
.vinyl::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 20deg, transparent 0 30deg, rgba(255, 255, 255, .2) 45deg, transparent 60deg 210deg, rgba(255, 255, 255, .14) 225deg, transparent 240deg);
}
.vinyl__disc {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%;
  background: repeating-radial-gradient(circle, #1d1d1d 0 2px, #2d2d2d 2px 4px); box-shadow: 8px 8px 0 var(--pink);
}
.vinyl__label {
  position: relative; display: grid; place-items: center; width: 40%; aspect-ratio: 1; border-radius: 50%;
  background: var(--coral); color: var(--cream); font: 1rem/.85 var(--font-display); text-align: center;
}
.vinyl__label::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: var(--cream); }
.vinyl__arm { position: absolute; right: -14px; top: -12px; z-index: 2; width: 12px; height: 120px; border-radius: 8px; background: var(--forest); transform-origin: 50% 10px; rotate: 26deg; }
.vinyl__arm::before { content: ""; position: absolute; left: 50%; top: 0; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: var(--forest); border: 4px solid var(--sun); }
.vinyl__arm::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 22px; height: 14px; margin-left: -11px; border-radius: 4px; background: var(--sun); }
.vinyl__note { position: absolute; left: 0; top: 10%; width: 30px; height: 30px; color: var(--coral); }
.vinyl__note--2 { left: -30px; top: 40%; color: var(--lilac-deep); }
.vinyl__note--3 { left: 14%; top: -14%; color: var(--pink-deep); }

/* Billetter: stempel på invitationen */
.invite { position: relative; }
.invite-stamp {
  position: absolute; right: clamp(16px, 4vw, 48px); top: -30px; z-index: 2; rotate: 7deg; padding: 8px 16px 6px;
  border: 4px solid var(--pink-deep); outline: 2px solid var(--pink-deep); outline-offset: 3px; border-radius: 12px; background: var(--cream);
  font: 1.15rem/1.05 var(--font-display); text-transform: uppercase; text-align: center; color: var(--pink-deep);
}
.invite-stamp svg { width: .9em; height: .9em; vertical-align: -.1em; }

/* Praktisk: sovende telt + bål */
.practical .container { position: relative; }
.camp { position: absolute; right: var(--gutter); top: 0; width: 330px; height: 190px; pointer-events: none; }
.camp__tent { position: absolute; left: 0; bottom: 0; width: 190px; height: auto; overflow: visible; transform-origin: 50% 100%; }
.camp__canvas { fill: var(--lilac); stroke: var(--forest); stroke-width: 5; stroke-linejoin: round; }
.camp__door { fill: var(--forest); }
.camp__seam { fill: none; stroke: var(--forest); stroke-width: 5; stroke-linecap: round; }
.camp__feet { fill: var(--coral); stroke: var(--forest); stroke-width: 4; stroke-linejoin: round; transform-box: fill-box; transform-origin: 50% 100%; }
.camp__z { position: absolute; left: 112px; top: 4px; width: 80px; height: 90px; font-family: var(--font-display); color: var(--lilac-deep); }
.camp__z i { position: absolute; font-style: normal; line-height: 1; }
.camp__z i:nth-child(1) { left: 0; top: 56px; font-size: 1.3rem; }
.camp__z i:nth-child(2) { left: 20px; top: 28px; font-size: 1.8rem; }
.camp__z i:nth-child(3) { left: 44px; top: 0; font-size: 2.4rem; }
.camp__party { position: absolute; right: 0; bottom: 0; width: 145px; height: auto; overflow: visible; }
.camp__string { fill: none; stroke: var(--forest); stroke-width: 2.5; }
.camp__flag { fill: var(--pink); stroke: var(--forest); stroke-width: 2; stroke-linejoin: round; transform-box: fill-box; transform-origin: 50% 0; }
.camp__flag--2 { fill: var(--sun); } .camp__flag--3 { fill: var(--lilac); }
.camp__speaker rect { fill: var(--forest); }
.camp__speaker { transform-box: fill-box; transform-origin: 50% 100%; }
.camp__cone { fill: var(--coral); stroke: var(--cream); stroke-width: 2; }
.camp__limbs { fill: none; stroke: var(--forest); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.camp__head { fill: var(--sun); stroke: var(--forest); stroke-width: 4; }
.camp__head--2 { fill: var(--coral); }
.camp__hat { fill: var(--pink); stroke: var(--forest); stroke-width: 3; stroke-linejoin: round; }
.camp__hat--2 { fill: var(--lilac); }
.camp__cup { fill: var(--sun); stroke: var(--forest); stroke-width: 2.5; transform-box: fill-box; transform-origin: 0 100%; }
.camp__dancer { transform-box: fill-box; transform-origin: 50% 100%; }
.camp__notes { position: absolute; right: 118px; bottom: 56px; width: 30px; height: 60px; font-family: var(--font-display); color: var(--pink-deep); font-size: 1.3rem; }
.camp__notes i { position: absolute; left: 0; bottom: 0; font-style: normal; line-height: 1; }
.camp__notes i:nth-child(2) { left: 14px; color: var(--lilac-deep); }
.camp__shh {
  position: absolute; right: 4px; bottom: 116px; padding: 3px 10px 2px; border-radius: 12px 12px 12px 3px; white-space: nowrap;
  background: var(--forest); color: var(--cream); font: .95rem/1.2 var(--font-hand);
}
.camp__note { position: absolute; right: 0; top: 0; width: 130px; margin: 0; rotate: 5deg; text-align: right; font-family: var(--font-hand); font-size: 1.15rem; line-height: 1.15; color: var(--forest); }

/* FAQ: skovtrold med øjne, der følger musen */
.faq .container { position: relative; }
.buddy { position: absolute; right: var(--gutter); top: -8px; display: flex; align-items: flex-start; gap: 4px; }
.buddy__say {
  margin: 6px 0 0; max-width: 180px; padding: 8px 12px; border: 3px solid var(--forest); border-radius: 18px 18px 4px 18px;
  background: #fff8ea; box-shadow: 4px 4px 0 var(--lilac); font: 1.1rem/1.15 var(--font-hand); color: var(--forest);
}
.buddy__btn { position: relative; flex: none; width: 112px; height: 118px; padding: 0; border: 0; background: none; cursor: pointer; }
.buddy__btn:focus-visible { outline: 3px solid var(--coral); outline-offset: 4px; border-radius: 50%; }
.buddy__blob { position: absolute; left: 0; right: 0; bottom: 0; top: 18px; display: block; border: 4px solid var(--forest); border-radius: 50% 50% 46% 54% / 60% 58% 42% 40%; background: var(--lilac); transform-origin: 50% 100%; }
.buddy__eye { position: absolute; top: 24%; display: grid; place-items: center; width: 32px; height: 32px; border: 3px solid var(--forest); border-radius: 50%; background: #fff; }
.buddy__eye:first-child { left: 16%; }
.buddy__eye:nth-child(2) { right: 16%; }
.buddy__eye i { display: block; width: 13px; height: 13px; border-radius: 50%; background: var(--forest); transform: translate(var(--px, 0px), var(--py, 2px)); transition: transform .12s ease-out; }
.buddy__mouth { position: absolute; left: 50%; top: 62%; width: 26px; height: 13px; margin-left: -13px; border: 4px solid var(--forest); border-top: 0; border-radius: 0 0 26px 26px; }
.buddy__cheek { position: absolute; top: 58%; width: 15px; height: 8px; border-radius: 50%; background: var(--pink); }
.buddy__cheek--l { left: 13%; }
.buddy__cheek--r { right: 13%; }
.buddy__sprout { position: absolute; left: 50%; top: -6px; width: 22px; height: 38px; margin-left: -11px; color: var(--leaf); transform-origin: 50% 100%; }

/* Outro: send et kram */
.outro__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; }
.kram { position: relative; display: grid; justify-items: start; gap: 6px; }
.kram__btn {
  display: inline-flex; align-items: center; gap: 8px; padding: .75em 1.3em; border: 3px solid var(--pink); border-radius: 999px;
  background: transparent; color: var(--pink); font: 800 1rem var(--font-body); cursor: pointer;
  transition: transform .25s var(--ease-bounce), background-color .2s, color .2s;
}
.kram__btn svg { width: 1.2em; height: 1.2em; }
.kram__btn:hover { background: var(--pink); color: var(--forest); transform: rotate(-3deg) scale(1.05); }
.kram__btn:active { transform: scale(.94); }
.kram__btn:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.kram__count { margin: 0; padding-left: 8px; font-family: var(--font-hand); font-size: 1.15rem; color: rgba(251, 241, 220, .86); }
.kram__burst { position: absolute; left: 34px; top: 22px; width: 0; height: 0; pointer-events: none; }
.kram__heart { position: absolute; width: 30px; height: 30px; margin: -15px; color: var(--pink); }
.kram__heart:nth-child(3n) { color: var(--sun); }
.kram__heart:nth-child(3n+1) { color: var(--coral); }
.kram__heart svg { display: block; width: 100%; height: 100%; }

/* Responsivt, runde 4 */
@media (max-width: 900px) {
  .camp { position: relative; right: auto; margin: -6px 0 18px auto; zoom: .78; }
  .vinyl { width: 130px; height: 130px; top: -14px; right: 4px; }
  .vinyl__label { font-size: .7rem; }
  .vinyl__arm { height: 80px; }
}
@media (max-width: 600px) {
  .loader__v--3 { padding-top: 120px; }
  .ticket-big--count { margin-bottom: 40px; }
  .ticket-big--count .ticket-big__stamp { top: auto; bottom: -38px; right: 8px; rotate: -6deg; }
  .chat { left: -4px; top: 6%; width: 220px; }
  .chat__b { font-size: .85rem; padding: 7px 12px; }
  .bunting { width: 230%; left: -65%; }
  .duck { width: 50px; }
  .ripples { width: 76px; }
  .vinyl { width: 84px; height: 84px; top: auto; bottom: -4px; right: 2px; }
  .vinyl__label { font-size: .55rem; }
  .vinyl__arm { height: 60px; width: 9px; right: -8px; }
  .vinyl__arm::before { width: 18px; height: 18px; margin-left: -9px; border-width: 3px; }
  .vinyl__note { display: none; }
  .invite-stamp { font-size: .95rem; top: -48px; right: 12px; }
  .buddy { position: relative; right: auto; top: auto; justify-content: flex-end; margin: -18px 0 18px; }
  .buddy__say { max-width: 170px; font-size: 1rem; }
  .buddy__btn { width: 92px; height: 98px; }
  .buddy__eye { width: 27px; height: 27px; }
  .buddy__eye i { width: 11px; height: 11px; }
}

/* Bevægelse runde 4 */
@media (prefers-reduced-motion: no-preference) {
  /* Loader 2 */

  /* Loader 3 */

  /* Loader 4 */
  /* Baren følger JS (reel indlæsning); stemplet kommer ved 80 %, konfetti når tælleren rammer 100 % */
  .loader.is-on .loader__v--4 .ticket-big { animation: ticket-drop .8s var(--ease-bounce) .2s both; }
  .loader.is-full .loader__v--4 .ticket-big { animation: ticket-shake .35s ease-in-out .25s; }
  .loader.is-on .loader__v--4 .ticket-big__stamp { opacity: 0; }
  .loader.is-stamped .loader__v--4 .ticket-big__stamp { animation: stamp-slam .45s cubic-bezier(.3, 1.6, .5, 1) both; }
  .loader.is-on .ticket-big__confetti i { opacity: 0; }
  .loader.is-full .ticket-big__confetti i { animation: confetti-pop 1s ease-out .2s both; }
  .loader.is-on .ticket-big__label { animation: wobble 1.2s ease-in-out infinite; }

  /* Chat-bobler */
  .js .chat:not(.is-in) .chat__b { opacity: 0; }
  .chat.is-in .chat__b--1 { animation: chat-pop .45s var(--ease-bounce) .3s both; }
  .chat.is-in .chat__b--typing { display: block; animation: chat-typing 1.5s linear 1s both; }
  .chat.is-in .chat__b--typing i { animation: typing-dot .6s ease-in-out infinite; }
  .chat.is-in .chat__b--typing i:nth-child(2) { animation-delay: .15s; }
  .chat.is-in .chat__b--typing i:nth-child(3) { animation-delay: .3s; }
  .chat.is-in .chat__b--2 { animation: chat-pop .45s var(--ease-bounce) 2.5s both; }

  /* Vimpler + and */
  .js .bunting .flag { opacity: 0; translate: 0 -24px; transition: opacity .4s ease, translate .6s var(--ease-bounce); transition-delay: calc(var(--k) * 60ms); }
  .bunting.is-in .flag { opacity: 1; translate: 0 0; }
  .bunting .flag { animation: flag-flutter 2.6s ease-in-out infinite; animation-delay: calc(var(--k) * -.31s); }
  .duck { animation: duck-bob 2.6s ease-in-out infinite; }
  .ripples { animation: ripple 2.6s ease-out infinite; }

  /* Vinyl + equalizer */
  .vinyl__disc { animation: spin 2.4s linear infinite; }
  .vinyl__note { opacity: 0; animation: note-float 3s ease-out infinite; }
  .vinyl__note--2 { animation-delay: 1s; }
  .vinyl__note--3 { animation-delay: 2s; }
  .eq i { animation: eq .5s ease-in-out infinite alternate; }
  .eq i:nth-child(2) { animation-duration: .38s; } .eq i:nth-child(3) { animation-duration: .62s; } .eq i:nth-child(4) { animation-duration: .44s; } .eq i:nth-child(5) { animation-duration: .55s; }

  /* Stempel */
  .js .invite:not(.is-in) .invite-stamp { opacity: 0; }
  .invite.is-in .invite-stamp { animation: stamp-slam .45s cubic-bezier(.3, 1.6, .5, 1) .8s both; }
  .invite-stamp:hover { animation: wobble .6s ease-in-out; }

  /* Telt + festen ved siden af */
  .camp__tent { animation: tent-snore 3s ease-in-out infinite; }
  .camp__feet { animation: feet-wiggle 3s ease-in-out infinite; }
  .camp__z i { opacity: 0; animation: z-float 3s ease-in-out infinite; }
  .camp__z i:nth-child(2) { animation-delay: 1s; }
  .camp__z i:nth-child(3) { animation-delay: 2s; }
  .camp__dancer--1 { animation: party-bop .42s ease-in-out infinite alternate; }
  .camp__dancer--2 { animation: party-bop .42s ease-in-out .21s infinite alternate-reverse; }
  .camp__cup { animation: cup-raise 1.68s ease-in-out infinite; }
  .camp__speaker { animation: speaker-thump .42s ease-in-out infinite alternate; }
  .camp__flag { animation: flag-flap 1.2s ease-in-out infinite alternate; }
  .camp__flag--2 { animation-delay: .4s; } .camp__flag--3 { animation-delay: .8s; }
  .camp__notes i { opacity: 0; animation: party-note 2.4s ease-out infinite; }
  .camp__notes i:nth-child(2) { animation-delay: 1.2s; }
  .camp__shh { opacity: 0; animation: shh 7s ease-in-out 2s infinite; }

  /* Skovtrold */
  .buddy__blob { animation: buddy-breathe 3.2s ease-in-out infinite; }
  .buddy__eye { animation: blink 4.5s ease-in-out infinite; }
  .buddy__sprout { animation: sway 2.4s ease-in-out infinite; }
  .buddy.is-tickled .buddy__blob { animation: tickle .6s ease-in-out; }
  .buddy.is-tickled .buddy__say { animation: pop-in .35s var(--ease-bounce); }
  .js .buddy:not(.is-in) { opacity: 0; transform: translateY(20px) scale(.8); }
  .buddy { transition: opacity .5s ease .2s, transform .6s var(--ease-bounce) .2s; }

  /* Kram */
  .kram__heart { animation: kram-fly 1s cubic-bezier(.2, .7, .4, 1) forwards; }
  .kram__btn.is-hugged svg { animation: beat .6s ease-in-out; }
}

@keyframes bar-fill { from { width: 0; } to { width: 100%; } }
@keyframes confetti-pop { 0% { opacity: 1; transform: translate(0, 0) scale(.4); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1); } }
@keyframes chat-pop { from { opacity: 0; transform: translateY(14px) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes chat-typing { 0% { opacity: 0; transform: scale(.5); } 10%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.8); } }
@keyframes typing-dot { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-4px); opacity: 1; } }
@keyframes flag-flutter { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg) scaleY(.94); } }
@keyframes duck-bob { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-5px) rotate(5deg); } }
@keyframes ripple { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes note-float { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(-50px, -70px) rotate(-20deg); } }
@keyframes eq { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
@keyframes tent-snore { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(.97, 1.05); } }
@keyframes feet-wiggle { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-10deg); } 90% { transform: rotate(8deg); } }
@keyframes z-float { 0% { opacity: 0; transform: translate(0, 12px) scale(.6); } 30%, 60% { opacity: 1; } 100% { opacity: 0; transform: translate(18px, -24px) scale(1.1); } }
@keyframes flicker { from { transform: scale(1, .88) skewX(-4deg); } to { transform: scale(1.04, 1.08) skewX(4deg); } }
@keyframes buddy-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.03, .97); } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes tickle { 0%, 100% { transform: none; } 20% { transform: translateY(-14px) rotate(-8deg); } 40% { transform: rotate(7deg) scale(1.05, .95); } 60% { transform: translateY(-6px) rotate(-5deg); } 80% { transform: rotate(3deg); } }
@keyframes kram-fly { 0% { opacity: 1; transform: translate(0, 0) scale(.3); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1); } }

/* ==========================================================
   Runde 5: seks heroes (Skoven, Scenen, Video, Sommerdag,
   Skovkortet, Tørresnoren) og kun loader 4
   ========================================================== */

/* --- Fælles --- */
.hero-kicker {
  display: inline-flex; align-items: center; gap: .3em; margin: 0 0 12px;
  font-family: var(--font-hand); color: var(--sun); font-size: clamp(1.2rem, 1rem + .7vw, 1.7rem); line-height: 1.15; rotate: -2deg;
}
.hero-kicker svg { width: 1em; height: 1em; color: var(--pink); flex: none; }
[data-depth] { translate: calc(var(--mx, 0) * var(--d, 0) * 2px) calc(var(--my, 0) * var(--d, 0) * 2px); transition: translate .6s var(--ease-out); }
.hero__inner--solo { grid-template-columns: minmax(0, 1fr); }
.hero__actions { position: relative; z-index: 1; }

/* Streg-figurer (badge, publikum, kort, hoppere) */
.fig { display: block; overflow: visible; }
.fig path { fill: none; stroke: var(--c); stroke-width: 7; stroke-linecap: round; }
.fig circle { fill: var(--c); }
.fig__arm { transform-box: view-box; transform-origin: 40px 38px; }
.fig__leg { transform-box: view-box; transform-origin: 40px 67px; }
.fig__body { transform-box: view-box; transform-origin: 40px 100px; }

/* Konfetti der springer ud fra knappen */
.burst { position: absolute; z-index: 0; left: 150px; bottom: 96px; width: 0; height: 0; pointer-events: none; }
.burst i { position: absolute; left: -6px; top: -3px; width: 12px; height: 7px; border-radius: 3px; background: var(--sun); opacity: 0; }
.burst i:nth-child(3n+1) { background: var(--pink); }
.burst i:nth-child(3n+2) { background: var(--lilac); width: 9px; height: 9px; border-radius: 50%; }
.burst i:nth-child(4n) { background: var(--coral); }

/* Små pærer på en ledning */
.bulb2 line { stroke: var(--forest); stroke-width: 3; }
.bulb2 circle { fill: var(--sun); stroke: var(--forest); stroke-width: 2.5; }
.bulb2--pink circle { fill: var(--pink); }
.bulb2--lilac circle { fill: var(--lilac); }
.bulb2--coral circle { fill: var(--coral); }
.bulb2--cream circle { fill: #fff6d8; }

/* Mørk tekst i toppen, når heroen er lys (Sommerdag og Tørresnoren) */
html:has(.hero--summer:not([hidden])) .site-header:not(.is-scrolled) .logo,
html:has(.hero--line:not([hidden])) .site-header:not(.is-scrolled) .logo { color: var(--forest); }
html:has(.hero--line:not([hidden])) .site-header:not(.is-scrolled) .logo span { color: var(--cream); }
@media (min-width: 861px) {
  html:has(.hero--summer:not([hidden])) .site-header:not(.is-scrolled) .nav__list a,
  html:has(.hero--line:not([hidden])) .site-header:not(.is-scrolled) .nav__list a { color: var(--forest); }
  html:has(.hero--line:not([hidden])) .site-header:not(.is-scrolled) .nav__list a::after { background: var(--forest); }
}

/* --- Hero 1: Skoven --- */
.hero--skov { background: radial-gradient(110% 90% at 12% 0%, #1f4d35 0%, var(--forest) 62%); }
.skov-rays {
  position: absolute; left: -380px; top: -520px; width: 1100px; height: 1100px; border-radius: 50%;
  background: repeating-conic-gradient(from 90deg, rgba(255, 216, 77, .09) 0 5deg, transparent 5deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 10%, transparent 66%); mask: radial-gradient(circle, #000 10%, transparent 66%);
}
.skov-bush--tl { left: -130px; top: 40px; width: 250px; height: 216px; }
.skov-fan { position: absolute; left: -40px; bottom: 90px; width: 230px; height: 172px; rotate: 24deg; overflow: visible; }
.skov-fan ellipse { fill: var(--lilac); }
.skov-fan ellipse:nth-child(even) { fill: #a58bea; }
.skov-leaf { left: 45%; top: 10%; width: 50px; height: 88px; color: var(--leaf-soft); rotate: 24deg; }
.skov-spark--1 { left: 41%; top: 26%; }
.skov-spark--2 { left: 6%; bottom: 30%; width: 26px; height: 26px; color: var(--pink); }
.skov-star { left: 44%; bottom: 24%; }
.skov-note { left: 33%; top: 21%; color: var(--sun); }

.skov-media { align-self: stretch; display: flex; align-items: center; }
.skov-photo {
  position: relative; z-index: 1; flex: none; overflow: hidden;
  width: calc(100% + var(--gutter) + max(0px, (100vw - 1320px) / 2));
  margin-top: -130px; aspect-ratio: 1 / 1.04;
  border-radius: 54% 0 0 44% / 46% 0 0 54%;
}
.skov-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transform-origin: 60% 40%; }
.skov-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(15, 46, 31, .62) 0%, rgba(15, 46, 31, 0) 24%),
    linear-gradient(100deg, rgba(15, 46, 31, .55) 0%, rgba(15, 46, 31, 0) 32%),
    linear-gradient(0deg, rgba(15, 46, 31, .5), rgba(15, 46, 31, 0) 36%);
}
.skov-lights { position: absolute; z-index: 2; left: 0; top: 17%; width: 100%; height: auto; overflow: visible; }
.skov-lights__wire { fill: none; stroke: var(--forest); stroke-width: 3; }
.skov-fireflies { position: absolute; inset: 0; z-index: 2; }
.skov-fireflies i {
  position: absolute; left: var(--x); top: var(--y); width: 6px; height: 6px; border-radius: 50%;
  background: #fff6b0; box-shadow: 0 0 12px 4px rgba(255, 230, 120, .75); opacity: .5;
}
.skov-badge { top: 4%; right: 5%; z-index: 5; }
.skov-badge__fig { width: 30%; height: auto; aspect-ratio: 80 / 120; margin: 4px auto -4px; }
.skov-badge__fig path { stroke-width: 9; }

.signpost {
  position: absolute; z-index: 5; right: 7%; bottom: -2%; width: 300px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 20px;
}
.signpost__pole {
  position: absolute; left: 50%; top: 0; bottom: -80px; width: 16px; margin-left: -8px;
  background: linear-gradient(90deg, #b07a52, #7a4a2c); border: 3px solid var(--forest); border-radius: 8px 8px 2px 2px;
}
.signpost__pole::before {
  content: ""; position: absolute; left: 50%; top: -16px; width: 24px; height: 24px; margin-left: -12px;
  border-radius: 50%; background: var(--sun); border: 3px solid var(--forest);
}
.sign {
  position: relative; display: inline-block; padding: 7px 16px; white-space: nowrap;
  font-family: var(--font-fun); font-weight: 800; font-size: clamp(.8rem, .68rem + .3vw, .98rem); line-height: 1.2;
  text-transform: uppercase; letter-spacing: .03em; color: var(--forest); text-decoration: none;
  background: var(--sc); border: 3px solid var(--forest);
  filter: drop-shadow(0 5px 0 rgba(15, 46, 31, .4));
  transition: scale .35s var(--ease-bounce);
}
.sign::after { content: ""; position: absolute; top: 50%; width: 26px; height: 26px; background: var(--sc); border: 3px solid var(--forest); }
.sign--r { margin-left: calc(50% - 6px); padding-right: 20px; border-radius: 6px 0 0 6px; transform-origin: 0 50%; rotate: -3deg; }
.sign--r::after { right: -13px; transform: translateY(-50%) rotate(45deg); border-left: 0; border-bottom: 0; border-radius: 0 5px 0 0; }
.sign--l { align-self: flex-end; margin-right: calc(50% - 6px); padding-left: 20px; border-radius: 0 6px 6px 0; transform-origin: 100% 50%; rotate: 4deg; }
.sign--l::after { left: -13px; transform: translateY(-50%) rotate(45deg); border-right: 0; border-top: 0; border-radius: 0 0 0 5px; }
.sign--pink { --sc: var(--pink); }
.sign--sun { --sc: var(--sun); }
.sign--leaf { --sc: var(--leaf-soft); }
.sign--lilac { --sc: var(--lilac); }
.sign--coral { --sc: var(--coral); }
.sign:hover, .sign:focus-visible { scale: 1.08; }
.sign:focus-visible { outline: 3px solid var(--sun); outline-offset: 4px; }
.skov-hand { left: 6%; bottom: 5%; color: var(--sun); }
.hero--skov .hero__title, .hero--map .hero__title { font-size: clamp(3.3rem, 1.4rem + 6.4vw, 7.4rem); }
.hero--skov .hearts { left: 34%; bottom: 14%; width: 30%; }

/* --- Hero 2: Scenen --- */
.hero--scene {
  display: grid; place-items: center; text-align: center;
  min-height: min(100svh, 980px); padding-bottom: clamp(210px, 19vw, 260px);
  background: radial-gradient(90% 70% at 50% 38%, #5d2b7d 0%, #2b1342 55%, #170a24 100%);
}
.beam {
  position: absolute; top: -12%; width: 300px; height: 125%; transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(255, 216, 77, .42), rgba(255, 216, 77, 0) 82%);
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); mix-blend-mode: screen;
}
.beam--l { left: 16%; rotate: -16deg; }
.beam--r { right: 16%; rotate: 16deg; background: linear-gradient(180deg, rgba(255, 127, 166, .45), rgba(255, 127, 166, 0) 82%); }
.scene-glow {
  position: absolute; left: 50%; top: 44%; width: 1000px; height: 640px; translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(255, 127, 166, .3), rgba(255, 127, 166, 0));
}
.scene-floor {
  position: absolute; left: -10%; right: -10%; bottom: 0; height: 34%;
  background: linear-gradient(180deg, #6a3a8c 0%, #4a2766 60%, #3a1d52 100%);
  border-radius: 50% 50% 0 0 / 26% 26% 0 0;
}
.scene-note--1 { left: 13%; top: 42%; color: var(--pink); }
.scene-note--2 { right: 13%; top: 34%; color: var(--sun); width: 42px; height: 42px; }
.scene-note--3 { left: 24%; top: 22%; color: var(--lilac); width: 28px; height: 28px; }
.scene-spark--1 { right: 25%; top: 20%; }
.scene-spark--2 { left: 18%; bottom: 40%; color: var(--pink); width: 26px; height: 26px; }

.curtain {
  position: absolute; z-index: 5; top: 0; bottom: 0; width: 51%; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, 0) 18%),
    repeating-linear-gradient(90deg, #b8154f 0 26px, #e2457a 26px 46px, #c91d5b 46px 70px, #8f1040 70px 82px);
  box-shadow: inset 0 -30px 60px rgba(0, 0, 0, .3);
}
.curtain--l { left: 0; transform-origin: 0 50%; }
.curtain--r { right: 0; transform-origin: 100% 50%; }
.curtain__tie { display: none; }
/* Åben scene (standard uden JS og med reduceret bevægelse) */
.curtain--l { transform: scaleX(.2); clip-path: polygon(0 0, 100% 0, 100% 0, 42% 58%, 100% 100%, 0 100%); }
.curtain--r { transform: scaleX(.2); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 58% 58%, 0 0); }
.scene-valance {
  position: absolute; z-index: 6; left: 0; right: 0; top: 0; height: 104px; pointer-events: none;
  background:
    radial-gradient(circle 40px at 50% 0, #a3194f 97%, transparent 100%) 0 64px / 80px 40px repeat-x,
    linear-gradient(#a3194f, #a3194f) 0 0 / 100% 66px no-repeat;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .35));
}
.scene-valance::after {
  content: ""; position: absolute; left: 0; right: 0; top: 60px; height: 6px;
  background: repeating-linear-gradient(90deg, var(--sun) 0 14px, transparent 14px 22px);
}
.scene-center { position: relative; z-index: 3; width: min(1080px, 100%); padding: 40px var(--gutter) 0; }
.hero--scene .hero-kicker { rotate: -1deg; }
.marquee {
  position: relative; display: inline-block; margin: 4px 0 2px; padding: clamp(18px, 2.2vw, 28px) clamp(22px, 3vw, 46px) clamp(20px, 2.4vw, 30px);
  background: rgba(23, 10, 36, .6); border: 6px solid var(--sun); border-radius: 26px;
  box-shadow: 0 0 0 6px #a3194f, 0 0 60px 4px rgba(255, 216, 77, .3);
}
.marquee__bulbs { position: absolute; inset: -10px; width: calc(100% + 20px); height: calc(100% + 20px); overflow: visible; pointer-events: none; }
.marquee__bulbs rect { width: calc(100% - 14px); height: calc(100% - 14px); fill: none; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 0 10; }
.marquee__b1 { stroke: #fff6d0; }
.marquee__b2 { stroke: var(--pink); stroke-dashoffset: 5; }
.hero--scene .hero__title {
  display: flex; flex-wrap: wrap; justify-content: center; column-gap: .28em;
  margin: 0; font-size: clamp(2.5rem, .9rem + 4.6vw, 5.6rem); text-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}
.hero--scene .hero__title::before { content: ""; flex-basis: 100%; height: 0; order: 1; }
.hero--scene .hero__title .line:nth-child(n) { margin-left: 0; }
.hero--scene .hero__title .line:nth-child(4), .hero--scene .hero__title .line:nth-child(5) { order: 2; }
.hero--scene .hero__actions { align-items: center; }
.hero--scene .hero__meta { margin-top: clamp(16px, 2vw, 24px); }

.crowd { position: absolute; z-index: 4; left: 0; right: 0; bottom: clamp(14px, 2vw, 30px); height: 190px; pointer-events: none; }
.crowd__p { position: absolute; left: var(--x); bottom: 0; width: calc(clamp(64px, 7.4vw, 110px) * var(--s)); }
.crowd__fig { width: 100%; height: auto; aspect-ratio: 80 / 120; }
.crowd__fig path { stroke-width: 9; }
.crowd__heart { position: absolute; left: 40%; top: -8px; width: 26px; height: 26px; color: var(--pink); opacity: 0; }
.crowd__light {
  position: absolute; left: 72%; top: 9%; width: 9px; height: 15px; border-radius: 3px; z-index: 1;
  background: #fff6b0; box-shadow: 0 0 18px 7px rgba(255, 246, 176, .6);
}

/* --- Hero 4: Sommerdag --- */
.hero--summer { color: var(--forest); background: linear-gradient(180deg, #7fcbff 0%, #bfe6ff 52%, #fff1cf 100%); }
.hero--summer .hero__copy { max-width: 780px; }
.hero--summer .hero__title { margin-right: 0; font-size: clamp(3.2rem, 1.2rem + 6.2vw, 7.2rem); }
.hero--summer .hero__title .word { text-shadow: 0 4px 0 #fff, 0 10px 24px rgba(255, 255, 255, .6); }
.hero--summer .hero-kicker { color: var(--pink-deep); }
.hero--summer .hero-kicker, .hero--summer .hero__meta, .hero--summer .hero__small { text-shadow: 0 1px 10px rgba(255, 255, 255, .9); }
.hero--summer .hero__small { color: var(--forest); font-weight: 600; }
.hero--summer .hero__small a { color: var(--pink-deep); }
.hero--summer .hero__meta .dot { color: var(--pink-deep); }
.sum-sun { position: absolute; right: 11%; top: 12%; width: clamp(130px, 14vw, 210px); aspect-ratio: 1; }
.sum-sun__rays {
  position: absolute; inset: -42%; border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 216, 77, .55) 0 8deg, transparent 8deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); mask: radial-gradient(circle, #000 30%, transparent 70%);
}
.sum-sun__disc {
  position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 38% 34%, #fff3a6, var(--sun) 60%, #ffb84d);
  border: 5px solid var(--forest); box-shadow: 0 0 60px 16px rgba(255, 216, 77, .55);
}
.sum-sun__disc svg { width: 100%; height: 100%; display: block; }
.sum-sun__disc circle { fill: var(--forest); }
.sum-sun__disc path { fill: none; stroke: var(--forest); stroke-width: 5; stroke-linecap: round; }
.sum-sun__disc .sum-sun__cheek { fill: var(--pink); opacity: .75; }
.cloud { position: absolute; width: 190px; height: 58px; border-radius: 40px; background: #fff; box-shadow: 0 10px 0 rgba(15, 46, 31, .08); }
.cloud::before, .cloud::after { content: ""; position: absolute; border-radius: 50%; background: #fff; }
.cloud::before { left: 28px; top: -38px; width: 82px; height: 82px; }
.cloud::after { left: 92px; top: -24px; width: 62px; height: 62px; }
.cloud--1 { left: 38%; top: 13%; }
.cloud--2 { left: 66%; top: 36%; scale: .7; }
.cloud--3 { left: 86%; top: 6%; scale: .85; }
.plane { position: absolute; z-index: 1; left: 6%; top: 10.5%; display: flex; flex-direction: row-reverse; align-items: center; }
.plane__svg { width: 110px; height: 55px; overflow: visible; }
.plane__rope { width: 44px; height: 3px; margin: 0 -4px; background: var(--forest); }
.plane__banner {
  padding: 6px 22px 6px 16px; white-space: nowrap; background: var(--cream); color: var(--pink-deep);
  font-family: var(--font-hand); font-size: clamp(1rem, .85rem + .4vw, 1.35rem); line-height: 1.1;
  border: 3px solid var(--forest); border-radius: 4px 16px 16px 4px; transform-origin: 100% 50%;
}
.birds { position: absolute; left: 50%; top: 27%; width: 120px; height: 50px; overflow: visible; }
.bird { fill: none; stroke: var(--forest); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; transform-box: fill-box; transform-origin: 50% 100%; }
.sum-land { position: absolute; left: 0; bottom: 0; width: 100%; height: 44%; }
.tree__crown { transform-box: fill-box; transform-origin: 50% 100%; }
.tent__flag { transform-box: fill-box; transform-origin: 0 50%; }
.sum-duck__bob { transform-box: fill-box; transform-origin: 50% 100%; }
.sum-jumpers { position: absolute; inset: 0; }
.sum-jumper { position: absolute; left: var(--x); bottom: var(--b); width: 40px; }
.sum-jumper .fig { width: 100%; height: auto; aspect-ratio: 80 / 120; }
.sum-jumper .fig path { stroke-width: 10; }
.sum-spark { left: 46%; top: 50%; color: var(--coral); }

/* --- Hero 5: Skovkortet --- */
.hero--map { background: radial-gradient(110% 90% at 85% 10%, #1f4d35 0%, var(--forest) 62%); }
.hero--map .hero__title { margin-right: 0; }
.map-bush { left: -110px; bottom: 60px; width: 300px; height: 206px; }
.map-spark--1 { left: 44%; top: 18%; }
.map-star { left: 41%; bottom: 24%; color: var(--sun); }
.map-wrap { position: relative; z-index: 2; padding: 20px 10px 50px; }
.map-paper {
  position: relative; padding: 12px; border-radius: 16px; rotate: 2deg;
  background:
    linear-gradient(90deg, transparent 33%, rgba(15, 46, 31, .08) 33.3%, transparent 34%, transparent 66%, rgba(15, 46, 31, .08) 66.3%, transparent 67%),
    linear-gradient(0deg, transparent 49.6%, rgba(15, 46, 31, .08) 50%, transparent 50.4%),
    var(--cream);
  box-shadow: 16px 16px 0 var(--pink), 0 30px 50px -20px rgba(0, 0, 0, .6);
}
.map-svg { display: block; width: 100%; height: auto; overflow: visible; }
.map-land { fill: #d6ebbd; stroke: var(--forest); stroke-width: 3; stroke-dasharray: 2 0; }
.map-trees circle { stroke: var(--forest); stroke-width: 3; }
.map-lake { fill: #8fd3ff; stroke: var(--forest); stroke-width: 3; }
.map-lake__name { font-family: var(--font-hand); font-size: 20px; fill: var(--forest); text-anchor: middle; }
.map-route { fill: none; stroke: var(--pink-deep); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 12 11; }
.map-x path { fill: none; stroke: var(--coral); stroke-width: 9; stroke-linecap: round; }
.map-x { transform-box: fill-box; transform-origin: 50% 50%; }
.map-x__label { font-family: var(--font-hand); font-size: 24px; fill: var(--pink-deep); }
.map-pin__label text { font-family: var(--font-fun); font-weight: 800; font-size: 15px; fill: var(--forest); text-anchor: middle; }
.map-compass { position: absolute; right: -26px; top: -36px; width: 92px; height: 92px; overflow: visible; }
.map-compass circle { fill: var(--cream); stroke: var(--forest); stroke-width: 4; }
.map-compass__needle { fill: var(--coral); stroke: var(--forest); stroke-width: 3; stroke-linejoin: round; transform-box: view-box; transform-origin: 50px 50px; }
.map-compass text { font-family: var(--font-display); font-size: 15px; fill: var(--forest); text-anchor: middle; }
.map-note { white-space: nowrap; position: absolute; left: 10px; bottom: -48px; margin: 0; font-family: var(--font-hand); color: var(--sun); font-size: clamp(1.05rem, .9rem + .4vw, 1.4rem); rotate: -3deg; }

/* --- Hero 6: Tørresnoren --- */
.hero--line {
  color: var(--forest);
  background: radial-gradient(rgba(255, 255, 255, .28) 2px, transparent 2.6px) 0 0 / 26px 26px, var(--pink);
}
.hero--line .wave__back { fill: var(--lilac); }
.line-spark--1 { left: 5%; bottom: 30%; color: var(--sun); }
.line-spark--2 { right: 7%; bottom: 40%; color: var(--cream); width: 26px; height: 26px; }
.line-star { left: 46%; bottom: 18%; color: var(--forest); }
.line-flower { right: 4%; bottom: 17%; width: 64px; height: 64px; color: var(--cream); }
.washline { position: absolute; z-index: 2; left: 0; right: 0; top: clamp(78px, 8vw, 104px); height: 420px; }
.washline__wire { position: absolute; left: 0; top: 0; width: 100%; height: 200px; overflow: visible; }
.washline__wire path { fill: none; stroke: var(--forest); stroke-width: 3; vector-effect: non-scaling-stroke; }
.hang {
  position: absolute; left: var(--x); top: var(--y); margin: 0; width: clamp(112px, 10.5vw, 158px);
  translate: -50% -10px; rotate: var(--r); transform-origin: 50% 0;
  background: #fff; padding: 8px 8px 0; border-radius: 3px; box-shadow: 0 16px 26px -14px rgba(15, 46, 31, .6);
  transition: scale .35s var(--ease-bounce);
}
.hang img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.hang figcaption { padding: 5px 2px 8px; text-align: center; font-family: var(--font-hand); font-size: clamp(.9rem, .8rem + .3vw, 1.15rem); line-height: 1.1; color: var(--forest); }
.hang__pin {
  position: absolute; z-index: 1; left: 50%; top: -12px; width: 12px; height: 30px; margin-left: -6px;
  background: var(--sun); border: 2.5px solid var(--forest); border-radius: 3px;
}
.hang:nth-of-type(3n+2) .hang__pin { background: var(--lilac); }
.hang:nth-of-type(3n) .hang__pin { background: var(--leaf-soft); }
.birdie { position: absolute; left: 84.2%; top: 48px; width: 62px; height: 54px; margin-left: -31px; overflow: visible; }
.birdie__body, .birdie__wing { transform-box: fill-box; transform-origin: 50% 100%; }
.birdie__note { position: absolute; left: calc(84.2% + 26px); top: 22px; font-size: 1.5rem; font-weight: 800; color: var(--forest); opacity: 0; }
.line-inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; padding-top: clamp(250px, 26vw, 360px); }
.hero--line .hero__title { margin-right: 0; font-size: clamp(3rem, 1rem + 5.4vw, 6.6rem); }
.hero--line .hero__title .word { text-shadow: 0 4px 0 rgba(15, 46, 31, .18); }
.line-side { position: relative; z-index: 3; padding-bottom: 6px; }
.hero--line .hero-kicker { color: var(--forest); }
.hero--line .hero-kicker, .hero--line .hero__small { font-weight: 600; }
.hero--line .hero__small { color: var(--forest); }
.hero--line .hero__small a { color: var(--forest); }
.hero--line .hero__meta .dot { color: var(--cream); }
.hero--line .burst { display: none; }

/* --- Responsiv runde 5 --- */
@media (max-width: 900px) {
  .skov-photo { width: calc(100% + var(--gutter)); margin-top: 0; aspect-ratio: 4 / 3.7; border-radius: 50% 0 0 40% / 40% 0 0 60%; }
  .skov-media { margin-bottom: 70px; }
  .skov-bush--tl { left: -120px; top: 30px; width: 180px; height: 156px; }
  .skov-fan { left: -70px; bottom: auto; top: 44%; width: 160px; height: 120px; }
  .skov-leaf, .skov-star, .skov-spark--1 { display: none; }
  .skov-badge { top: -48px; right: 0; width: 118px; padding: 8px; font-size: .85rem; }
  .signpost { right: 2%; bottom: -96px; scale: .72; transform-origin: 100% 100%; }
  .skov-hand { left: 0; bottom: -60px; font-size: 1rem; }
  .burst { left: 120px; }

  .hero--scene { padding-top: 120px; padding-bottom: 190px; }
  .scene-valance { height: 84px; background-size: 60px 30px, 100% 54px; background-position: 0 52px, 0 0; }
  .scene-valance::after { top: 48px; }
  .beam { width: 160px; }
  .beam--l { left: 2%; }
  .beam--r { right: 2%; }
  .scene-note--1, .scene-spark--2 { display: none; }
  .crowd { height: 120px; bottom: 16px; }
  .crowd__p:nth-child(even) { display: none; }
  .marquee { box-shadow: 0 0 0 5px #a3194f, 0 0 40px rgba(255, 216, 77, .3); }

  .hero--summer { padding-bottom: 330px; }
  .sum-sun { right: 4%; top: 86px; width: 92px; }
  .cloud--1 { left: 10%; top: 9%; scale: .6; }
  .cloud--2 { display: none; }
  .cloud--3 { left: 70%; top: 32%; scale: .55; }
  .plane { top: auto; bottom: 268px; }
  .plane__svg { width: 80px; height: 40px; }
  .birds { left: 66%; top: 56%; width: 80px; }
  .sum-land { height: 300px; }
  .sum-jumpers, .sum-spark { display: none; }

  .map-wrap { margin-top: 26px; padding: 10px 4px 50px; }
  .map-compass { right: -6px; top: -30px; width: 64px; height: 64px; }
  .map-bush { left: -130px; bottom: auto; top: 40%; width: 220px; height: 150px; }
  .map-star, .map-spark--1 { display: none; }

  .washline { top: 74px; }
  .hang { width: 96px; }
  .hang:nth-of-type(2n), .birdie, .birdie__note { display: none; }
  .hang:nth-of-type(1) { --x: 14% !important; --y: 90px !important; }
  .hang:nth-of-type(3) { --x: 38% !important; --y: 143px !important; }
  .hang:nth-of-type(5) { --x: 62% !important; --y: 143px !important; }
  .hang:nth-of-type(7) { --x: 86% !important; --y: 90px !important; }
  .line-inner { grid-template-columns: 1fr; padding-top: 330px; }
  .line-flower, .line-star { display: none; }
}

/* --- Bevægelse runde 5 --- */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-kicker { opacity: 0; translate: -24px 0; }
  .js .is-ready .hero-kicker { opacity: 1; translate: 0 0; transition: opacity .6s ease .15s, translate .8s var(--ease-bounce) .15s; }
  .js .is-ready .burst i { animation: burst-pop 7s var(--ease-out) 1.5s infinite; }

  /* Skoven */
  .js .hero--skov.is-ready .hero__title .ch { animation: ola 7s ease-in-out infinite; animation-delay: calc(3.2s + var(--i) * .22s + var(--n) * .05s); }
  .js .hero--skov.is-ready .hero__title .ch.is-jumping { animation: letter-jump .6s var(--ease-bounce); }
  .skov-rays { animation: spin 90s linear infinite; }
  .skov-fan { animation: fan-sway 5s ease-in-out infinite; transform-origin: 50% 100%; }
  .skov-leaf, .skov-note { animation: sway 4.5s ease-in-out infinite; }
  .skov-spark--1, .skov-spark--2, .skov-star { animation: twinkle 2.6s ease-in-out infinite; }
  .skov-spark--2 { animation-delay: -1.2s; }
  .js .skov-photo { clip-path: circle(0% at 70% 45%); }
  .js .is-ready .skov-photo { clip-path: circle(85% at 50% 50%); transition: clip-path 1.4s var(--ease-out) .1s; }
  .skov-photo { animation: skov-edge 11s ease-in-out infinite alternate; }
  .skov-photo img { animation: kenburns 22s ease-in-out infinite alternate; }
  .skov-fireflies i { animation: ff 5s ease-in-out var(--d) infinite; }
  .bulb2 circle { animation: bulb2-glow 2.2s ease-in-out infinite; animation-delay: calc(var(--k) * -.31s); }
  .skov-badge__fig .fig__body { animation: hip-sway .6s ease-in-out infinite alternate; }
  .skov-badge__fig .fig__arm--l { animation: arm-disco-l 1.2s ease-in-out infinite; }
  .skov-badge__fig .fig__arm--r { animation: arm-disco-r 1.2s ease-in-out infinite; }
  .skov-badge__fig .fig__leg--l { animation: leg-kick-l .6s ease-in-out infinite; }
  .js .hero--skov .skov-badge, .js .skov-hand { opacity: 0; }
  .js .is-ready .skov-badge { animation: pop-in .8s var(--ease-bounce) 1.1s both, bob 5s ease-in-out 2s infinite; }
  .js .is-ready .skov-hand { animation: scribble-in .8s var(--ease-out) 2.1s both; }
  .sign { animation: sign-sway 3.4s ease-in-out infinite; animation-delay: calc(var(--k) * -.7s); }
  .sign:hover, .sign:focus-visible { animation: sign-wiggle .5s ease-in-out; }
  .js .hero--skov .sign { opacity: 0; scale: 0; }
  .js .hero--skov.is-ready .sign { opacity: 1; scale: 1; transition: scale .6s var(--ease-bounce) calc(1.3s + var(--k) * .13s), opacity .25s ease calc(1.3s + var(--k) * .13s); }
  .js .hero--skov.is-ready .sign:hover, .js .hero--skov.is-ready .sign:focus-visible { scale: 1.08; transition-delay: 0s; }
  .js .signpost__pole { scale: 1 0; transform-origin: 50% 100%; }
  .js .is-ready .signpost__pole { scale: 1 1; transition: scale .7s var(--ease-bounce) 1.1s; }

  /* Scenen */
  .js .hero--scene:not(.is-ready) .curtain { transform: none; clip-path: polygon(0 0, 100% 0, 100% 0, 100% 50%, 100% 100%, 0 100%); }
  .js .hero--scene:not(.is-ready) .curtain--r { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 50%, 0 0); }
  .js .hero--scene.is-ready .curtain { transition: transform 1.7s cubic-bezier(.65, 0, .25, 1) .25s, clip-path 1.7s cubic-bezier(.65, 0, .25, 1) .25s; }
  .beam--l { animation: beam-l 6s ease-in-out infinite alternate; }
  .beam--r { animation: beam-r 7s ease-in-out infinite alternate; }
  .scene-glow { animation: glow-pulse 3s ease-in-out infinite alternate; }
  .scene-note--1, .scene-note--2, .scene-note--3 { animation: scene-note 3.4s ease-in-out infinite; }
  .scene-note--2 { animation-delay: -1.2s; }
  .scene-note--3 { animation-delay: -2.3s; }
  .scene-spark--1, .scene-spark--2 { animation: twinkle 2.4s ease-in-out infinite; }
  .marquee__b1 { animation: bulb-chase .9s steps(1) infinite; }
  .marquee__b2 { animation: bulb-chase .9s steps(1) -.45s infinite; }
  .js .hero--scene .marquee { opacity: 0; scale: .7; }
  .js .hero--scene.is-ready .marquee { opacity: 1; scale: 1; transition: scale .8s var(--ease-bounce) .9s, opacity .3s ease .9s; }
  .crowd__p { animation: dance-jump .8s ease-in-out infinite; animation-delay: calc(var(--k) * -.23s); }
  .crowd__p:nth-child(3n) { animation-duration: .6s; }
  .crowd__p .fig__arm--l { animation: arm-wave-l 1.4s ease-in-out infinite; animation-delay: calc(var(--k) * -.17s); }
  .crowd__p .fig__arm--r { animation: arm-wave-r 1.4s ease-in-out infinite; animation-delay: calc(var(--k) * -.29s); }
  .crowd__p:nth-child(3n+1) .fig__body { animation: hip-sway .7s ease-in-out infinite alternate; }
  .crowd__p:has(.crowd__light) .fig__arm--r { animation: none; }
  .crowd__p:has(.crowd__light) { animation-name: crowd-sway; animation-duration: 2.4s; }
  .crowd__heart { animation: heart-rise 4s ease-in infinite; animation-delay: calc(var(--k) * -.6s); }
  .crowd__light { animation: flicker 2s ease-in-out infinite; }

  /* Sommerdag */
  .sum-sun__rays { animation: spin 40s linear infinite; }
  .sum-sun__disc { animation: sun-wiggle 5s ease-in-out infinite; }
  .sum-sun__cheek { animation: blush 3s ease-in-out infinite alternate; }
  .cloud--1 { animation: cloud-drift 34s ease-in-out infinite alternate; }
  .cloud--2 { animation: cloud-drift 26s ease-in-out -8s infinite alternate-reverse; }
  .cloud--3 { animation: cloud-drift 40s ease-in-out -14s infinite alternate; }
  .plane { left: 0; animation: plane-fly 24s linear infinite; }
  .plane__svg { animation: plane-bob 2.2s ease-in-out infinite; }
  .plane__prop { transform-box: fill-box; transform-origin: 50% 50%; animation: prop .12s linear infinite; }
  .plane__banner { animation: banner-wave 1.4s ease-in-out infinite; }
  .birds { animation: birds-drift 18s ease-in-out infinite alternate; }
  .bird { animation: flap .45s ease-in-out infinite alternate; }
  .bird--2 { animation-delay: -.2s; }
  .bird--3 { animation-delay: -.35s; }
  .tree__crown { animation: sway 4.6s ease-in-out infinite; animation-delay: calc(var(--k) * -.8s); }
  .tent__flag { animation: flag-flutter 1.1s ease-in-out infinite; animation-delay: calc(var(--k) * -.3s); }
  .sum-duck__bob { animation: duck-bob 2.4s ease-in-out infinite; }
  .sum-ripple { animation: ripple-fade 3s ease-in-out infinite alternate; }
  .sum-jumper { animation: jump-high .9s ease-in-out infinite; animation-delay: calc(var(--k) * -.3s); }
  .sum-jumper .fig__arm--l { animation: arm-wave-l .9s ease-in-out infinite; }
  .sum-jumper .fig__arm--r { animation: arm-wave-r .9s ease-in-out infinite; }
  .sum-jumper .fig__leg--l { animation: leg-kick-l .9s ease-in-out infinite; }
  .sum-jumper .fig__leg--r { animation: leg-kick-r .9s ease-in-out infinite; }
  .sum-spark { animation: twinkle 2.4s ease-in-out infinite; }

  /* Skovkortet */
  .map-route { animation: route-flow 1.4s linear infinite; }
  .map-x { animation: beat 1.6s ease-in-out infinite; }
  .map-compass__needle { animation: needle 4s ease-in-out infinite; }
  .map-spark--1, .map-star { animation: twinkle 2.6s ease-in-out infinite; }
  .js .hero--map .map-paper { opacity: 0; transform: translateY(50px) rotate(-8deg) scale(.85); }
  .js .hero--map.is-ready .map-paper { opacity: 1; transform: none; transition: opacity .6s ease .3s, transform 1.1s var(--ease-bounce) .3s; }
  .js .map-pin__bob { opacity: 0; }
  .js .is-ready .map-pin__bob { animation: pin-drop .7s var(--ease-bounce) calc(1.1s + var(--k) * .2s) both, pin-bob 2.6s ease-in-out calc(2.2s + var(--k) * .3s) infinite; }
  .js .map-note { opacity: 0; }
  .js .is-ready .map-note { animation: scribble-in .8s var(--ease-out) 2s both; }

  /* Tørresnoren */
  .js .is-ready .hang { animation: hang-drop .8s var(--ease-bounce) calc(.3s + var(--k) * .12s) both, hang-swing 3.4s ease-in-out calc(1.4s + var(--k) * .12s) infinite; }
  .js .hang { opacity: 0; }
  .hang:hover { scale: 1.12; z-index: 5; }
  .birdie__body { animation: birdie-hop 2.8s ease-in-out infinite; }
  .birdie__wing { animation: flap .3s ease-in-out infinite alternate; }
  .birdie__note { animation: note-float 2.8s ease-out .6s infinite; }
  .line-spark--1, .line-spark--2, .line-star { animation: twinkle 2.6s ease-in-out infinite; }
  .line-flower { animation: spin 16s linear infinite; }
}

@keyframes ola { 0%, 9%, 100% { translate: 0 0; } 4% { translate: 0 -.16em; } }
@keyframes burst-pop {
  0% { opacity: 0; transform: translate(0, 0) scale(.3); }
  2% { opacity: 1; }
  16% { opacity: 1; }
  24%, 100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1); }
}
@keyframes fan-sway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(6deg) scale(1.03); } }
@keyframes skov-edge {
  0% { border-radius: 54% 0 0 44% / 46% 0 0 54%; }
  100% { border-radius: 42% 0 0 58% / 58% 0 0 42%; }
}
@keyframes ff { 0%, 100% { opacity: .15; transform: translate(0, 0); } 50% { opacity: 1; transform: translate(16px, -22px); } }
@keyframes bulb2-glow { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
@keyframes sign-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2.5deg); } }
@keyframes sign-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 60% { transform: rotate(6deg); } }
@keyframes beam-l { from { rotate: -28deg; } to { rotate: 14deg; } }
@keyframes beam-r { from { rotate: 26deg; } to { rotate: -12deg; } }
@keyframes glow-pulse { from { opacity: .7; scale: .95; } to { opacity: 1; scale: 1.05; } }
@keyframes scene-note { 0%, 100% { transform: translateY(0) rotate(-10deg); } 50% { transform: translateY(-18px) rotate(10deg); } }
@keyframes bulb-chase { 0% { opacity: 1; } 50% { opacity: .25; } }
@keyframes crowd-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes blush { from { opacity: .4; } to { opacity: .9; } }
@keyframes cloud-drift { from { transform: translateX(0); } to { transform: translateX(-90px); } }
@keyframes plane-fly { from { transform: translateX(-110%); } to { transform: translateX(105vw); } }
@keyframes plane-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
@keyframes prop { 0% { transform: scaleY(1); } 50% { transform: scaleY(.15); } 100% { transform: scaleY(1); } }
@keyframes banner-wave { 0%, 100% { transform: skewY(-2deg) rotate(1deg); } 50% { transform: skewY(2deg) rotate(-1deg); } }
@keyframes birds-drift { from { transform: translate(0, 0); } to { transform: translate(-140px, 30px); } }
@keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(.45); } }
@keyframes ripple-fade { from { opacity: .2; } to { opacity: 1; } }
@keyframes jump-high { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-30px) rotate(-6deg); } }
@keyframes route-flow { to { stroke-dashoffset: -23; } }
@keyframes needle { 0%, 100% { transform: rotate(-18deg); } 40% { transform: rotate(24deg); } 70% { transform: rotate(-6deg); } }
@keyframes pin-drop { 0% { opacity: 0; transform: translateY(-80px); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes pin-bob { 0%, 100% { opacity: 1; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-7px); } }
@keyframes hang-drop { 0% { opacity: 0; transform: translateY(-160px) rotate(-14deg); } 100% { opacity: 1; transform: none; } }
@keyframes hang-swing { 0%, 100% { opacity: 1; transform: rotate(-2.5deg); } 50% { opacity: 1; transform: rotate(2.5deg); } }
@keyframes birdie-hop { 0%, 30%, 60%, 100% { transform: translateY(0); } 40% { transform: translateY(-14px) rotate(-6deg); } 50% { transform: translateY(0) scale(1.06, .94); } }

/* ==========================================================
   Runde 6: Skoven på mobil og en kram-knap der står stille
   ========================================================== */
.kram { width: min(16rem, 100%); }
.kram__count { min-height: 2.5em; line-height: 1.2; }

@media (max-width: 900px) {
  .hero--skov { padding-bottom: 92px; }
  .hero--skov .hero__title { font-size: clamp(3.2rem, .6rem + 14.5vw, 6.5rem); }
  .skov-note, .skov-spark--2 { display: none; }
  .skov-fan { left: auto; right: -64px; top: 132px; bottom: auto; width: 150px; height: 112px; rotate: -38deg; }
  .skov-media { margin: 44px calc(var(--gutter) * -1) 84px; }
  .skov-photo { width: 100%; aspect-ratio: 1 / 1.02; border-radius: 50% 50% 0 0 / 20% 20% 0 0; }
  .skov-photo::after {
    background:
      linear-gradient(0deg, rgba(15, 46, 31, .55), rgba(15, 46, 31, 0) 30%),
      linear-gradient(180deg, rgba(15, 46, 31, .35), rgba(15, 46, 31, 0) 25%);
  }
  .skov-lights { top: 13%; }
  .skov-badge { top: -42px; right: 12px; width: 112px; }
  .signpost { right: 28px; bottom: -74px; scale: .68; }
  .skov-hand { left: var(--gutter); bottom: -66px; max-width: 48%; font-size: 1rem; rotate: 0deg; }
  .hero--skov .hearts { left: 8%; bottom: 22%; width: 40%; }
}

@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .skov-photo { animation-name: skov-arch; }
}
@keyframes skov-arch {
  0% { border-radius: 50% 50% 0 0 / 20% 20% 0 0; }
  100% { border-radius: 58% 42% 0 0 / 24% 16% 0 0; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .skov-photo { aspect-ratio: 4 / 3; }
  .signpost { scale: .85; bottom: -60px; }
}

/* ==========================================================
   Runde 7: samtaler, sjov FAQ, kram-titler og billetlugen
   ========================================================== */

/* Chat-bobler der bliver ved */
.chat.is-live {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; height: 300px; overflow: hidden; padding: 4px 6px 10px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 40%); mask-image: linear-gradient(to bottom, transparent, #000 40%);
}
.chat.is-live .chat__b { flex: none; rotate: var(--tilt, 0deg); }
.chat.is-live .chat__b + .chat__b { margin-top: -7px; }
.chat__b--r { align-self: flex-end; border-radius: 20px 20px 6px 20px; background: var(--sun); }
.chat__b--dots { padding: 12px 16px; }
.chat__t { display: block; }
.chat__b--dots i { display: inline-block; width: 8px; height: 8px; margin: 0 2px; border-radius: 50%; background: var(--forest); }

/* Kram: tælleren og den titel man har optjent */
.kram__count { min-height: 1.3em; }
.kram__title {
  display: inline-flex; align-items: center; gap: 6px; min-height: 34px; margin: 2px 0 0; padding: 4px 14px 3px;
  border-radius: 999px; background: var(--sun); color: var(--forest); box-shadow: 3px 3px 0 var(--pink);
  font-family: var(--font-hand); font-size: 1.1rem; line-height: 1.1; white-space: nowrap; rotate: -2deg; visibility: hidden;
}
.kram__title::before { content: "★"; color: var(--pink-deep); }
.kram__title.is-on { visibility: visible; }

/* FAQ: klistermærker og konfetti */
.faq__item { overflow: visible; }
.faq__item summary { border-radius: 19px; }
.faq__pop { position: absolute; right: 35px; top: 50%; width: 0; height: 0; pointer-events: none; }
.pop-bit { position: absolute; left: -5px; top: -3px; width: 10px; height: 6px; border-radius: 3px; background: var(--pink); }
.pop-bit:nth-child(3n) { background: var(--sun); }
.pop-bit:nth-child(3n+1) { background: var(--lilac); width: 8px; height: 8px; border-radius: 50%; }
.pop-bit:nth-child(4n) { background: var(--coral); }
.faq__sticker {
  float: right; position: relative; display: grid; justify-items: center; gap: 2px; width: 84px; margin: -6px -4px 6px 14px;
  font-family: var(--font-hand); font-size: .95rem; line-height: 1; text-align: center; color: var(--forest); rotate: 6deg;
}
.faq__sticker svg {
  width: 62px; height: 62px; padding: 12px; border-radius: 50%; border: 3px solid var(--forest);
  background: var(--pink); color: var(--forest); box-shadow: 3px 3px 0 var(--forest);
}
.faq__sticker--friends svg { background: var(--sun); }
.faq__sticker--shower svg { background: #8fd3ff; }
.faq__sticker--tent svg { background: var(--leaf-soft); }
.faq__sticker--cheers svg { background: var(--sun); }
.faq__sticker--sad svg { background: var(--lilac); color: var(--pink-deep); }
.faq__sticker--heart svg { color: var(--cream); }
.faq__sticker i { position: absolute; top: 46px; width: 5px; height: 9px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #3aa0e0; opacity: 0; }
.faq__sticker i:nth-of-type(1) { left: 32px; }
.faq__sticker i:nth-of-type(2) { left: 41px; }
.faq__sticker i:nth-of-type(3) { left: 50px; }
.faq__a::after { content: ""; display: block; clear: both; }
@media (max-width: 600px) {
  .faq__sticker { width: 66px; margin-left: 10px; font-size: .85rem; }
  .faq__sticker svg { width: 50px; height: 50px; padding: 9px; }
  .faq__sticker i { top: 36px; }
  .faq__sticker i:nth-of-type(1) { left: 24px; }
  .faq__sticker i:nth-of-type(2) { left: 31px; }
  .faq__sticker i:nth-of-type(3) { left: 38px; }
}

@media (prefers-reduced-motion: no-preference) {
  .chat.is-live .chat__b { animation: chat-pop .4s var(--ease-bounce) both; }
  .chat.is-live .chat__b--dots i { animation: typing-dot .6s ease-in-out infinite; }
  .chat.is-live .chat__b--dots i:nth-child(2) { animation-delay: .15s; }
  .chat.is-live .chat__b--dots i:nth-child(3) { animation-delay: .3s; }

  .kram__title.is-new { animation: title-pop .6s var(--ease-bounce); }

  .pop-bit { animation: bit-fly .8s cubic-bezier(.2, .7, .4, 1) forwards; }
  .faq__item:not([open]) summary:hover::after { transform: rotate(90deg) scale(1.12); }
  .faq__item[open] { animation: faq-bounce .5s var(--ease-bounce); }
  .faq__item[open] .faq__a p { animation: faq-in .5s var(--ease-out) .05s both; }
  .faq__item[open] .faq__sticker { animation: sticker-slap .55s var(--ease-bounce) .15s both; }
  .faq__item[open] .faq__sticker--heart svg { animation: beat 1.4s ease-in-out .8s infinite; }
  .faq__item[open] .faq__sticker--friends svg { animation: hip-sway .5s ease-in-out .7s infinite alternate; }
  .faq__item[open] .faq__sticker--tent svg { animation: wobble 2s ease-in-out .7s infinite; }
  .faq__item[open] .faq__sticker--cheers svg { animation: clink .9s ease-in-out .7s infinite; }
  .faq__item[open] .faq__sticker--sad svg { animation: droop 3s ease-in-out .7s infinite; }
  .faq__item[open] .faq__sticker i { animation: drop 1s ease-in .7s infinite; }
  .faq__item[open] .faq__sticker i:nth-of-type(2) { animation-delay: 1s; }
  .faq__item[open] .faq__sticker i:nth-of-type(3) { animation-delay: .85s; }
}

@keyframes title-pop { 0% { transform: scale(.4) rotate(-12deg); } 60% { transform: scale(1.15) rotate(3deg); } 100% { transform: none; } }
@keyframes bit-fly { 0% { opacity: 1; transform: translate(0, 0) scale(.4); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1); } }
@keyframes faq-bounce { 0% { transform: scale(1); } 40% { transform: scale(1.015, .985); } 100% { transform: none; } }
@keyframes faq-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes sticker-slap { 0% { opacity: 0; transform: scale(2.2) rotate(-25deg); } 100% { opacity: 1; transform: none; } }
@keyframes clink { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-14deg); } 45% { transform: rotate(8deg) scale(1.08); } }
@keyframes droop { 0%, 100% { transform: rotate(0) translateY(0); } 50% { transform: rotate(-8deg) translateY(3px); } }
@keyframes drop { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(22px); } }

/* --- Billetlugen (billetter.html) --- */
.wave--to-forest-b { fill: #0a2216; }
.hero--billet { background: radial-gradient(110% 90% at 85% 10%, #1f4d35 0%, var(--forest) 62%); min-height: 0; }
.hero--billet .hero__title { margin-right: 0; font-size: clamp(3.2rem, 1.2rem + 6.2vw, 7.2rem); }
.billet-lead { max-width: 46ch; margin: clamp(16px, 2vw, 24px) 0 clamp(22px, 2.6vw, 30px); font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); color: rgba(251, 241, 220, .9); }
.billet-bush { left: -120px; bottom: 70px; width: 300px; height: 206px; }
.billet-spark--1 { left: 46%; top: 22%; }
.billet-spark--2 { right: 6%; bottom: 26%; color: var(--pink); width: 26px; height: 26px; }
.billet-star { left: 43%; bottom: 22%; color: var(--sun); }
.billet-note { right: 10%; top: 18%; color: var(--sun); }
.billet-stage { position: relative; display: grid; place-items: center; min-height: 420px; }
.billet-stage > * { grid-area: 1 / 1; }
.billet-stack { width: min(440px, 80vw); height: 300px; border-radius: 22px; border: 4px solid var(--forest); }
.billet-stack--1 { background: var(--lilac); rotate: 9deg; translate: 24px 10px; }
.billet-stack--2 { background: var(--sun); rotate: -11deg; translate: -20px 18px; }
.ticket-big--hero { width: min(460px, 84vw); color: var(--forest); rotate: -3deg; box-shadow: 14px 14px 0 var(--pink); }
.ticket-big--hero::before, .ticket-big--hero::after { background: var(--forest); }
.ticket-big--hero .ticket-big__label { margin-bottom: 4px; }
.ticket-big--hero .ticket-big__stamp { top: 26px; right: 22px; rotate: 9deg; font-size: clamp(1rem, .9rem + .6vw, 1.4rem); }
.billet-hand { left: 0; bottom: -46px; color: var(--sun); }

.booth-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 30px; }
.billet-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: clamp(24px, 3vw, 36px) 0 clamp(40px, 5vw, 64px); padding: 0; list-style: none; }
.billet-steps li {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px; border: 3px solid var(--forest); border-radius: 20px;
  background: #fff8ea; box-shadow: 5px 5px 0 var(--forest); rotate: -1deg;
}
.billet-steps li:nth-child(2) { rotate: 1.2deg; box-shadow: 5px 5px 0 var(--pink); }
.billet-steps li:nth-child(3) { box-shadow: 5px 5px 0 var(--lilac); }
.billet-steps__n {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--forest);
  background: var(--sun); font-family: var(--font-display); font-size: 1.3rem;
}
.billet-steps li:nth-child(2) .billet-steps__n { background: var(--pink); }
.billet-steps li:nth-child(3) .billet-steps__n { background: var(--lilac); }

.booth {
  position: relative; max-width: 980px; margin: 0 auto; padding-bottom: 0;
  background: var(--pink); border: 6px solid var(--forest); border-radius: 30px 30px 0 0; box-shadow: 14px 14px 0 var(--forest);
}
.booth__roof {
  position: relative; padding: 26px 20px 18px; border-radius: 24px 24px 0 0; text-align: center;
  background: var(--forest); color: var(--sun);
  font-family: var(--font-display); font-size: clamp(2rem, 1.3rem + 2.4vw, 3.4rem); line-height: 1;
}
.booth__roof::before, .booth__roof::after {
  content: ""; position: absolute; left: 14px; right: 14px; height: 12px;
  background: radial-gradient(circle, var(--sun) 4px, transparent 5px) 0 0 / 30px 12px repeat-x;
}
.booth__roof::before { top: 8px; }
.booth__roof::after { bottom: 4px; }
.booth__name { text-shadow: 0 4px 0 var(--pink-deep); }
.booth__awning {
  height: 56px; margin: 0 -6px;
  background: repeating-linear-gradient(90deg, var(--coral) 0 56px, var(--cream) 56px 112px);
  -webkit-mask: linear-gradient(#000, #000) top / 100% 28px no-repeat, radial-gradient(circle 28px at 28px 0, #000 97%, transparent 100%) 0 27px / 56px 29px repeat-x;
  mask: linear-gradient(#000, #000) top / 100% 28px no-repeat, radial-gradient(circle 28px at 28px 0, #000 97%, transparent 100%) 0 27px / 56px 29px repeat-x;
  filter: drop-shadow(0 6px 0 rgba(15, 46, 31, .25));
}
.booth__sign {
  position: absolute; z-index: 3; right: clamp(16px, 5vw, 60px); top: 0; margin-top: clamp(96px, 9vw, 120px);
  transform-origin: 50% -40px;
}
.booth__sign::before, .booth__sign::after { content: ""; position: absolute; top: -40px; width: 3px; height: 44px; background: var(--forest); }
.booth__sign::before { left: 18px; rotate: 12deg; }
.booth__sign::after { right: 18px; rotate: -12deg; }
.booth__sign span {
  display: block; padding: 8px 18px 6px; border: 4px solid var(--forest); border-radius: 10px; background: var(--sun);
  font-family: var(--font-display); font-size: 1.5rem; line-height: 1; color: var(--forest); text-transform: uppercase; box-shadow: 4px 4px 0 var(--forest);
}
.booth__window {
  position: relative; min-height: 460px; margin: 18px clamp(10px, 3vw, 34px) 0; padding: clamp(6px, 1.4vw, 16px);
  background: #fff; border: 5px solid var(--forest); border-bottom: 0; border-radius: 16px 16px 0 0;
}
.booth__loading {
  position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 20px;
  background: #fff; border-radius: 12px; text-align: center; transition: opacity .5s ease, visibility 0s linear .5s;
}
.booth__loading p { margin: 0; font-family: var(--font-hand); font-size: clamp(1.3rem, 1.1rem + .6vw, 1.8rem); color: var(--pink-deep); }
.booth__bar { display: block; width: min(260px, 70vw); height: 18px; border: 3px solid var(--forest); border-radius: 999px; overflow: hidden; background: rgba(15, 46, 31, .08); }
.booth__bar i { display: block; width: 40%; height: 100%; background: repeating-linear-gradient(-45deg, var(--coral) 0 10px, var(--pink) 10px 20px); }
.booth.is-loaded .booth__loading { opacity: 0; visibility: hidden; }
.ticketbutler-iframe { position: relative; }
.ticketbutler-iframe iframe { display: block; width: 100%; border: 0; }
.booth__counter {
  position: relative; height: 44px; margin: 0 -6px -6px;
  background: repeating-linear-gradient(90deg, #b07a52 0 60px, #9c6a45 60px 64px); border: 6px solid var(--forest);
}
.booth__bell { position: absolute; left: 12%; top: -26px; width: 36px; height: 24px; border: 4px solid var(--forest); border-bottom-width: 6px; border-radius: 18px 18px 4px 4px; background: var(--sun); }
.booth__bell::before { content: ""; position: absolute; left: 50%; top: -12px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--forest); }
.booth__plant { position: absolute; right: 9%; top: -40px; width: 40px; height: 40px; color: var(--lilac); }
.booth__plant svg { width: 100%; height: 100%; }
.queue { display: flex; align-items: flex-end; justify-content: flex-end; gap: 14px; max-width: 980px; margin: -4px auto 0; padding-right: clamp(10px, 4vw, 40px); }
.queue__say {
  position: relative; margin: 0 0 70px; padding: 9px 16px; border: 3px solid var(--forest); border-radius: 20px 20px 6px 20px;
  background: #fff8ea; box-shadow: 4px 4px 0 var(--forest); font: 700 .95rem/1.25 var(--font-body); color: var(--forest); max-width: 260px;
}
.queue__people { display: flex; align-items: flex-end; gap: 6px; }
.queue__p { width: 40px; }
.queue__p:nth-child(2) { width: 34px; }
.queue__p:nth-child(4) { width: 46px; }
.queue__p .fig { width: 100%; height: auto; aspect-ratio: 80 / 120; }
.queue__p .fig path { stroke-width: 9; }
.booth__fallback { max-width: 980px; margin: 30px auto 0; text-align: center; color: rgba(15, 46, 31, .8); }
.booth__fallback a { font-weight: 800; color: var(--pink-deep); text-underline-offset: 3px; }
.booth.is-slow:not(.is-loaded) + .booth__fallback { font-size: 1.15rem; }
.billet-prices .tickets__head { margin-bottom: clamp(24px, 3vw, 40px); }

@media (max-width: 900px) {
  .hero--billet .hero__title { font-size: clamp(3.2rem, .6rem + 14.5vw, 6.5rem); }
  .billet-stage { min-height: 340px; margin-top: 20px; }
  .billet-stack { height: 250px; }
  .billet-steps { grid-template-columns: 1fr; }
  .billet-note, .billet-spark--1, .billet-star { display: none; }
  .booth__sign { margin-top: 70px; }
  .booth__sign span { font-size: 1.1rem; padding: 6px 12px 4px; }
}
@media (max-width: 600px) {
  .ticket-big--hero { padding: 26px 26px 24px; }
  .ticket-big--hero .ticket-big__stamp { top: 18px; right: 10px; font-size: .95rem; padding: 6px 10px 4px; max-width: 130px; }
  .booth { box-shadow: 8px 8px 0 var(--forest); border-radius: 24px 24px 0 0; }
  .booth__window { min-height: 420px; margin-left: 8px; margin-right: 8px; }
  .queue__say { margin-bottom: 56px; font-size: .85rem; max-width: 170px; }
  .queue__p { width: 30px; }
  .queue__p:nth-child(2) { width: 26px; }
  .queue__p:nth-child(4) { width: 34px; }
}

@media (prefers-reduced-motion: no-preference) {
  .js .hero--billet .ticket-big--hero, .js .hero--billet .billet-stack, .js .billet-hand { opacity: 0; }
  .js .hero--billet.is-ready .billet-stack { opacity: 1; transition: opacity .5s ease .9s; }
  .js .hero--billet.is-ready .ticket-big--hero { animation: ticket-drop .9s var(--ease-bounce) .3s both, ticket-float 5s ease-in-out 2.4s infinite; }
  .js .hero--billet .ticket-big__stamp { opacity: 0; }
  .js .hero--billet.is-ready .ticket-big__stamp { animation: stamp-slam .45s cubic-bezier(.3, 1.6, .5, 1) 1.3s both; }
  .js .hero--billet.is-ready .ticket-big__confetti i { animation: confetti-pop 1s ease-out 1.5s both; }
  .js .hero--billet.is-ready .billet-hand { animation: scribble-in .8s var(--ease-out) 1.9s both; }
  .hero--billet .ticket-big__label { animation: wobble 2.4s ease-in-out infinite; }
  .billet-stack--1 { animation: stack-wiggle 6s ease-in-out infinite; }
  .billet-stack--2 { animation: stack-wiggle 7s ease-in-out -3s infinite reverse; }
  .billet-spark--1, .billet-spark--2, .billet-star { animation: twinkle 2.6s ease-in-out infinite; }
  .billet-note { animation: sway 4s ease-in-out infinite; }
  .booth__sign { animation: sign-swing 3.6s ease-in-out infinite; }
  .booth__bar i { animation: booth-bar 1.4s ease-in-out infinite; }
  .booth__roof::before, .booth__roof::after { animation: bulb2-glow 1.2s steps(2) infinite; }
  .booth__roof::after { animation-delay: -.6s; }
  .booth__bell:hover { animation: wobble .4s ease-in-out 2; }
  .booth__plant { animation: sway 5s ease-in-out infinite; transform-origin: 50% 100%; }
  .queue__p { animation: queue-hop 1.6s ease-in-out infinite; animation-delay: calc(var(--k) * -.4s); }
  .queue__p .fig__arm--r { animation: arm-wave-r 1.6s ease-in-out infinite; }
  .queue__p:nth-child(2) .fig__arm--l { animation: arm-wave-l 1.1s ease-in-out infinite; }
  .queue__p:nth-child(4) .fig__leg--r { animation: leg-kick-r .5s ease-in-out infinite; }
  .queue__say.is-new { animation: chat-pop .4s var(--ease-bounce); }
}
@keyframes ticket-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-12px) rotate(1.5deg); } }
@keyframes stack-wiggle { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(3deg) translateY(-6px); } }
@keyframes sign-swing { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes booth-bar { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }
@keyframes queue-hop { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-10px); } 90% { transform: translateY(0) scale(1.05, .95); } }

/* =========================================================
   Runde 8: festivalkortet som interaktivt overblik
   ========================================================= */
.practical__grid { grid-template-columns: 1fr; }
.practical .info-list { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); column-gap: clamp(24px, 3vw, 44px); }

.festmap { margin-top: clamp(48px, 6vw, 88px); }
.festmap__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px 32px; margin-bottom: 22px; }
.festmap__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); line-height: 1.05; color: var(--forest); margin: 0 0 .4rem; }
.festmap__lead { margin: 0; max-width: 56ch; }
.festmap__tour svg { width: 1.3em; height: 1.3em; }
.festmap__tour[aria-pressed="true"] { --btn-bg: var(--pink); }
.festmap__tour:hover svg, .festmap__tour:focus-visible svg { transform: rotate(-12deg) scale(1.1); }

.festmap__frame { position: relative; }
.festmap__scroll { overflow: visible; outline: none; border-radius: 18px; }
.festmap__scroll:focus-visible { outline: 4px solid var(--sun); outline-offset: 3px; }
.festmap__map { position: relative; aspect-ratio: 1881 / 836; }
.festmap__map img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: drop-shadow(0 22px 22px rgba(15, 46, 31, .28)); }
.festmap__swipe { display: none; }

/* Nåle */
.festmap__pin {
  position: absolute; left: var(--x); top: var(--y); z-index: 3; width: 42px; height: 42px; margin: -21px 0 0 -21px; padding: 0;
  display: grid; place-items: center; border-radius: 50% 50% 50% 8px; rotate: -45deg; cursor: pointer;
  background: var(--coral); color: var(--forest); border: 3px solid var(--forest); box-shadow: 0 5px 0 rgba(15, 46, 31, .35);
  transition: background-color .2s, scale .35s var(--ease-bounce), translate .35s var(--ease-bounce);
}
.festmap__pin svg { width: 20px; height: 20px; rotate: 45deg; }
.festmap__pin::after {
  content: ""; position: absolute; inset: -9px; border-radius: inherit; border: 3px solid var(--coral); opacity: 0; pointer-events: none;
}
.festmap__pin:hover, .festmap__pin:focus-visible { scale: 1.18; translate: 0 -4px; background: var(--sun); }
.festmap__pin:focus-visible { outline: 4px solid var(--sun); outline-offset: 4px; }
.festmap__pin.is-visited { background: var(--leaf-soft); }
.festmap__pin[aria-expanded="true"] { background: var(--pink); scale: 1.25; z-index: 4; }

/* Små liv på kortet */
.festmap__fx > span { position: absolute; left: var(--x); top: var(--y); pointer-events: none; }
.fx-notes i { position: absolute; font-style: normal; font-size: clamp(.9rem, 1.6vw, 1.5rem); color: var(--pink-deep); text-shadow: 0 0 6px #fff; opacity: 0; }
.fx-notes i:nth-child(2) { left: 18px; color: var(--lilac-deep); }
.fx-notes i:nth-child(3) { left: -16px; color: var(--sun); }
.fx-bubbles i { position: absolute; width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; opacity: 0; }
.fx-bubbles i:nth-child(2) { left: 12px; } .fx-bubbles i:nth-child(3) { left: -10px; } .fx-bubbles i:nth-child(4) { left: 4px; }
.fx-ripple i { position: absolute; width: 50px; height: 18px; margin: -9px 0 0 -25px; border: 2px solid rgba(255, 255, 255, .85); border-radius: 50%; opacity: 0; }
.fx-heart { font-size: clamp(1rem, 2.4vw, 2.2rem); color: var(--pink); }

/* Gåfiguren */
.festmap__walker {
  position: absolute; left: var(--x); top: var(--y); z-index: 5; width: 46px; height: 46px; margin: -66px 0 0 -23px;
  display: grid; place-items: center; border-radius: 50%; background: var(--sun); color: var(--forest); border: 3px solid var(--forest);
  box-shadow: 0 6px 0 rgba(15, 46, 31, .3); pointer-events: none;
}
.festmap__walker svg { width: 28px; height: 28px; }
.festmap__you {
  position: absolute; bottom: calc(100% + 6px); left: 50%; translate: -50% 0; white-space: nowrap; padding: 2px 10px 1px; border-radius: 99px;
  background: var(--forest); color: var(--cream); font: 1rem/1.3 var(--font-hand);
}
.festmap__walker.is-moved .festmap__you { display: none; }

/* Kortet med info */
.festmap__card {
  position: absolute; z-index: 6; top: clamp(18px, 3vw, 36px); left: calc(var(--card-x, 0px)); width: min(340px, 42%);
  background: var(--cream); border: 3px solid var(--forest); border-radius: 22px; padding: 20px 22px 18px; box-shadow: 8px 8px 0 var(--forest); rotate: 1.2deg;
}
.festmap__card[hidden] { display: none; }
.festmap__card.is-right { left: auto; right: clamp(18px, 3vw, 36px); rotate: -1.2deg; }
.festmap__card.is-left { left: clamp(18px, 3vw, 36px); }
.festmap__card-icon { position: absolute; top: -26px; left: 18px; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: var(--pink); border: 3px solid var(--forest); rotate: -8deg; }
.festmap__card-icon svg { width: 28px; height: 28px; }
.festmap__close { position: absolute; top: 8px; right: 10px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; font-size: 1.7rem; line-height: 1; color: var(--forest); cursor: pointer; }
.festmap__close:hover, .festmap__close:focus-visible { background: var(--cream-2); }
.festmap__close:focus-visible, .festmap__step:focus-visible, .festmap__stamp:focus-visible { outline: 4px solid var(--sun); outline-offset: 2px; }
.festmap__kicker { margin: 18px 0 2px; font: 1.05rem/1.2 var(--font-hand); color: var(--pink-deep); }
.festmap__card-title { margin: 0 0 .35rem; font-family: var(--font-fun); font-variation-settings: "BNCE" 50, "INFM" 100; font-weight: 800; font-size: 1.4rem; line-height: 1.15; }
.festmap__card-text { margin: 0 0 14px; }
.festmap__nav { display: flex; justify-content: space-between; gap: 8px; }
.festmap__step { border: 2px solid var(--forest); border-radius: 99px; background: transparent; color: var(--forest); padding: .4em .95em; font: 700 .9rem/1.2 var(--font-body); cursor: pointer; transition: background-color .2s, translate .3s var(--ease-bounce); }
.festmap__step:hover { translate: 0 -2px; background: var(--cream-2); }
.festmap__step--next { background: var(--forest); color: var(--cream); }
.festmap__step--next:hover { background: var(--forest-2); }

/* Stempelkortet: én pæn række, 3 x 3 på små skærme */
.festmap__passport {
  position: relative; margin-top: clamp(28px, 3.5vw, 48px); padding: 20px clamp(16px, 2.4vw, 32px) 22px;
  background: var(--forest); color: var(--cream); border-radius: 24px;
}
.festmap__passport::before, .festmap__passport::after {
  content: ""; position: absolute; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: var(--cream);
}
.festmap__passport::before { left: -13px; } .festmap__passport::after { right: -13px; }
.festmap__passhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 2px dashed rgba(251, 241, 220, .35); }
.festmap__passtitle { margin: 0; font: 1.5rem/1 var(--font-display); color: var(--sun); }
.festmap__count { margin: 0; font-size: 1rem; }
.festmap__count strong { color: var(--sun); }
.festmap__stamps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 10px; }
.festmap__stamp {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px 2px; border: 0; background: none; cursor: pointer;
  color: var(--cream); font: 600 .85rem/1.2 var(--font-body); text-align: center;
}
.festmap__mark {
  position: relative; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%;
  border: 2px dashed rgba(251, 241, 220, .55); transition: background-color .25s, border-color .25s, rotate .35s var(--ease-bounce), scale .35s var(--ease-bounce);
}
.festmap__mark b { font: 1.3rem/1 var(--font-display); color: rgba(251, 241, 220, .6); }
.festmap__mark svg { position: absolute; width: 28px; height: 28px; color: var(--forest); opacity: 0; }
.festmap__label { opacity: .75; }
.festmap__stamp:hover .festmap__mark { border-color: var(--sun); scale: 1.08; }
.festmap__stamp[aria-pressed="true"] .festmap__mark { background: var(--pink); border: 3px solid var(--cream); rotate: -10deg; }
.festmap__stamps li:nth-child(even) .festmap__stamp[aria-pressed="true"] .festmap__mark { rotate: 8deg; }
.festmap__stamp[aria-pressed="true"] .festmap__mark b { opacity: 0; }
.festmap__stamp[aria-pressed="true"] .festmap__mark svg { opacity: 1; }
.festmap__stamp[aria-pressed="true"] .festmap__label { opacity: 1; }
.festmap__done { margin: 16px 0 0; text-align: center; font: 1.3rem/1.2 var(--font-hand); color: var(--sun); }
.festmap__done:empty { display: none; }
.festmap__note { margin: 16px 0 0; font-size: .95rem; }

@media (prefers-reduced-motion: no-preference) {
  .festmap__pin { animation: pin-drop .6s var(--ease-bounce) both; animation-delay: calc(var(--i) * 70ms); }
  .festmap__pin:not(.is-visited)::after { animation: pin-ping 2.4s ease-out infinite; animation-delay: calc(var(--i) * .27s); }
  .festmap__pin:hover svg, .festmap__pin:focus-visible svg { animation: pin-wiggle .5s ease-in-out; }
  .festmap__walker { transition: left 1s var(--ease-out), top 1s var(--ease-out); }
  .festmap__walker.is-walking svg { animation: walk-bob .25s ease-in-out infinite alternate; }
  .festmap__card.is-pop { animation: card-pop .45s var(--ease-bounce); }
  .festmap__stamp.is-stamped .festmap__mark { animation: stamp-thud .5s var(--ease-bounce); }
  .festmap.is-on .fx-notes i { animation: note-float 3s ease-out infinite; }
  .festmap.is-on .fx-notes i:nth-child(2) { animation-delay: 1s; }
  .festmap.is-on .fx-notes i:nth-child(3) { animation-delay: 2s; }
  .festmap.is-on .fx-bubbles i { animation: bubble-up 2.2s ease-in infinite; }
  .festmap.is-on .fx-bubbles i:nth-child(2) { animation-delay: .55s; }
  .festmap.is-on .fx-bubbles i:nth-child(3) { animation-delay: 1.1s; }
  .festmap.is-on .fx-bubbles i:nth-child(4) { animation-delay: 1.65s; }
  .festmap.is-on .fx-ripple i { animation: ripple 3.2s ease-out infinite; }
  .festmap.is-on .fx-ripple i:nth-child(2) { animation-delay: 1.6s; }
  .festmap.is-on .fx-heart { animation: heart-beat 1.4s ease-in-out infinite; }
}
@keyframes pin-drop { from { translate: 0 -40px; opacity: 0; } to { translate: 0 0; opacity: 1; } }
@keyframes pin-ping { 0% { opacity: .9; scale: .8; } 70%, 100% { opacity: 0; scale: 1.5; } }
@keyframes pin-wiggle { 0%, 100% { rotate: 45deg; } 30% { rotate: 25deg; } 70% { rotate: 65deg; } }
@keyframes walk-bob { from { translate: 0 0; rotate: -8deg; } to { translate: 0 -5px; rotate: 8deg; } }
@keyframes card-pop { from { scale: .7; opacity: 0; } to { scale: 1; opacity: 1; } }
@keyframes stamp-thud { 0% { scale: 1.8; rotate: -35deg; } }
@keyframes note-float { 0% { opacity: 0; translate: 0 0; } 20% { opacity: 1; } 100% { opacity: 0; translate: 10px -60px; rotate: 20deg; } }
@keyframes bubble-up { 0% { opacity: 0; translate: 0 0; } 20% { opacity: 1; } 100% { opacity: 0; translate: 4px -40px; } }
@keyframes ripple { 0% { opacity: .9; scale: .4; } 100% { opacity: 0; scale: 1.8; } }
@keyframes heart-beat { 0%, 100% { scale: 1; } 15% { scale: 1.3; } 30% { scale: 1; } 45% { scale: 1.2; } }

/* Små skærme: kortet kan rulles sidelæns, infokortet ligger under */
@media (max-width: 900px) {
  .festmap__pin { width: 30px; height: 30px; margin: -15px 0 0 -15px; border-width: 2px; box-shadow: 0 3px 0 rgba(15, 46, 31, .35); }
  .festmap__pin svg { width: 14px; height: 14px; }
  .festmap__pin::after { inset: -6px; border-width: 2px; }
  .festmap__walker { width: 32px; height: 32px; margin: -46px 0 0 -16px; border-width: 2px; }
  .festmap__walker svg { width: 20px; height: 20px; }
  .festmap__you { font-size: .85rem; padding: 1px 8px 0; }
  .festmap__card, .festmap__card.is-right, .festmap__card.is-left { position: relative; inset: auto; width: auto; margin: 34px 4px 4px; rotate: 0deg; }
  .festmap__stamps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; }
  .chat.is-live { height: 230px; }
}

@keyframes party-bop { from { translate: 0 0; rotate: -6deg; } to { translate: 0 -6px; rotate: 6deg; } }
@keyframes cup-raise { 0%, 60%, 100% { rotate: 0deg; } 75% { rotate: -35deg; } }
@keyframes speaker-thump { from { scale: 1; } to { scale: 1.06 1.1; } }
@keyframes flag-flap { from { rotate: -10deg; } to { rotate: 10deg; } }
@keyframes party-note { 0% { opacity: 0; translate: 0 0; } 20% { opacity: 1; } 100% { opacity: 0; translate: -12px -50px; rotate: -20deg; } }
@keyframes shh { 0%, 62%, 100% { opacity: 0; scale: .6; } 68%, 92% { opacity: 1; scale: 1; } }

/* =========================================================
   Runde 9: line-up med plakatkort
   ========================================================= */
.lineup { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: clamp(20px, 2.6vw, 34px); }
.lineup__item { display: flex; }
.lineup__card {
  --tint: var(--pink); --tint-deep: var(--pink-deep);
  position: relative; flex: 1; display: flex; flex-direction: column; border: 3px solid var(--forest); border-radius: 26px;
  background: var(--cream); box-shadow: 8px 8px 0 var(--forest); outline: none;
  transition: translate .45s var(--ease-bounce), rotate .45s var(--ease-bounce), box-shadow .3s;
}
.lineup__item:nth-child(odd) .lineup__card { rotate: -1deg; }
.lineup__item:nth-child(even) .lineup__card { rotate: 1deg; }
.lineup__card--sun { --tint: var(--sun); --tint-deep: #c79a00; }
.lineup__card--lilac { --tint: var(--lilac); --tint-deep: var(--lilac-deep); }
.lineup__card--coral { --tint: var(--coral); --tint-deep: #c8402f; }
.lineup__card:hover, .lineup__card:focus-visible { translate: 0 -8px; rotate: 0deg; box-shadow: 12px 14px 0 var(--forest); }
.lineup__card:focus-visible { outline: 4px solid var(--sun); outline-offset: 4px; }

.lineup__photo {
  position: relative; aspect-ratio: 1; margin: 12px 12px 0; border-radius: 18px; overflow: hidden; background: var(--tint);
  border: 3px solid var(--forest);
}
.lineup__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: scale .6s var(--ease-out); }
.lineup__card:hover .lineup__photo img { scale: 1.06; }
.lineup__rays {
  position: absolute; inset: -40%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .38) 0 10deg, transparent 10deg 20deg);
}
.lineup__mic { position: absolute; left: 50%; top: 52%; width: 34%; translate: -50% -50%; overflow: visible; }
.lineup__mic rect { fill: var(--forest); }
.lineup__mic path { fill: none; stroke: var(--forest); stroke-width: 7; stroke-linecap: round; }
.lineup__mic .lineup__grill { stroke: var(--tint); stroke-width: 4; }
.lineup__initial {
  position: absolute; left: 14px; bottom: 4px; font: clamp(4rem, 3rem + 3vw, 6rem)/1 var(--font-display); color: var(--cream);
  -webkit-text-stroke: 3px var(--forest); paint-order: stroke fill; rotate: -8deg;
}
.lineup__eq { position: absolute; right: 14px; bottom: 14px; display: flex; align-items: flex-end; gap: 4px; height: 30px; padding: 6px 8px; border-radius: 10px; background: var(--forest); }
.lineup__eq i { width: 5px; height: 40%; border-radius: 2px; background: var(--tint); }
.lineup__eq i:nth-child(2) { height: 80%; } .lineup__eq i:nth-child(3) { height: 55%; } .lineup__eq i:nth-child(4) { height: 30%; }

.lineup__when {
  position: absolute; top: 0; left: 50%; translate: -50% -50%; margin: 0; padding: 6px 16px 5px; white-space: nowrap;
  border: 3px solid var(--forest); border-radius: 99px; background: var(--forest); color: var(--cream);
  font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .82rem;
}
.lineup__body { padding: 16px 20px 22px; }
.lineup__name { margin: 0; font: clamp(1.9rem, 1.4rem + 1.3vw, 2.6rem)/1 var(--font-display); text-transform: uppercase; color: var(--forest); }
.lineup__genre {
  display: inline-block; margin: 10px 0 0; padding: 3px 12px 2px; border-radius: 99px; background: var(--tint);
  font: 1.05rem/1.3 var(--font-hand); color: var(--forest); rotate: -2deg;
}
.lineup__detail { margin: 10px 0 0; }

.lineup__card--mystery { background: transparent; border-style: dashed; box-shadow: none; }
.lineup__card--mystery:hover { box-shadow: none; }
.lineup__photo--mystery { display: grid; place-items: center; background: transparent; border-style: dashed; }
/* Glyffen stikker ud over sin egen boks; luft rundt om, så Safari ikke klipper spørgsmålstegnet, når det animeres */
.lineup__q { font: clamp(6rem, 5rem + 4vw, 9rem)/1 var(--font-display); color: var(--lilac); -webkit-text-stroke: 3px var(--forest); paint-order: stroke fill; padding: .1em .25em; }

@media (prefers-reduced-motion: no-preference) {
  .lineup__rays { animation: rays-spin 24s linear infinite; }
  .lineup__card:hover .lineup__rays { animation-duration: 6s; }
  .lineup__card:hover .lineup__eq i, .lineup__card:focus-visible .lineup__eq i { animation: eq-bounce .5s ease-in-out infinite alternate; }
  .lineup__eq i:nth-child(2) { animation-delay: .12s !important; }
  .lineup__eq i:nth-child(3) { animation-delay: .24s !important; }
  .lineup__eq i:nth-child(4) { animation-delay: .36s !important; }
  .lineup__card:hover .lineup__mic { animation: mic-wiggle .6s ease-in-out infinite alternate; }
  .lineup__card--mystery .lineup__q { display: inline-block; animation: q-float 2.6s ease-in-out infinite; }
}
@keyframes rays-spin { to { rotate: 360deg; } }
@keyframes eq-bounce { from { height: 20%; } to { height: 100%; } }
@keyframes mic-wiggle { from { rotate: -8deg; } to { rotate: 8deg; } }
@keyframes q-float { 0%, 100% { translate: 0 0; rotate: -6deg; } 50% { translate: 0 -10px; rotate: 6deg; } }
@media (max-width: 600px) {
  .lineup { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 12px; }
  .lineup__card { border-radius: 20px; box-shadow: 5px 5px 0 var(--forest); }
  .lineup__photo { margin: 8px 8px 0; border-radius: 14px; }
  .lineup__when { font-size: .66rem; padding: 4px 10px 3px; letter-spacing: .03em; }
  .lineup__body { padding: 10px 10px 14px; }
  .lineup__name { font-size: 1.3rem; }
  .lineup__genre { font-size: .9rem; margin-top: 6px; }
  .lineup__detail { font-size: .82rem; line-height: 1.4; margin-top: 6px; }
  .lineup__eq { right: 8px; bottom: 8px; height: 22px; padding: 4px 6px; gap: 3px; }
  .lineup__eq i { width: 4px; }
  .lineup__q { font-size: 4.5rem; }
}

/* Kram-knappen flugter med "Kom med i skoven" */
.outro__actions { align-items: flex-start; }
.kram { width: auto; min-width: min(16rem, 100%); }
.kram__btn { padding: 1.05em 1.5em; font-size: clamp(1rem, .9rem + .35vw, 1.2rem); line-height: 1.2; white-space: nowrap; }
.outro__actions { column-gap: 18px; }
.outro__actions .btn { line-height: 1.2; padding-inline: 1.5em; }

/* Mobil: intet må gøre siden bredere end skærmen (iOS lader ellers en zoome ud) */
html { overflow-x: hidden; }
main, .site-footer { overflow-x: clip; }
@media (max-width: 600px) {
  .festmap__pin { width: 24px; height: 24px; margin: -12px 0 0 -12px; }
  .festmap__pin svg { width: 12px; height: 12px; }
  .festmap__you { display: none; }
}

/* ==========================================================
   Runde 10: kompakt hero og 2 x 2 oplevelseskort på mobil
   ========================================================== */
@media (max-width: 600px) {
  .hero--skov { padding-bottom: 64px; }
  .skov-media { margin: 30px calc(var(--gutter) * -1) 0; }
  .skov-photo { aspect-ratio: 4 / 3.3; }
  .skov-badge { top: -34px; width: 100px; }
  .signpost { right: 6px; bottom: 34px; scale: .56; transform-origin: 100% 100%; }
  .skov-hand { left: var(--gutter); bottom: 14px; max-width: 46%; font-size: .95rem; z-index: 3; }

  .bunting { top: -26px; }
  .exp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding-bottom: 22px; }
  .exp-card:nth-child(2), .exp-card:nth-child(4),
  .js .exp-card.is-in:nth-child(2), .js .exp-card.is-in:nth-child(4) { transform: translateY(22px); }
  .exp-card__img { aspect-ratio: 1; }
  .exp-card__body { padding: 12px 12px 16px; }
  .exp-card h3 { font-size: 1rem; line-height: 1.2; margin-bottom: .35rem; }
  .exp-card p { font-size: .85rem; line-height: 1.4; }
}

/* Safari: line-up-kortene må ikke vokse ud af deres kolonne */
.lineup__item { display: grid; min-width: 0; }
.lineup__card { min-width: 0; width: 100%; }
.lineup__photo { min-width: 0; }
.lineup__photo img { position: absolute; inset: 0; }

@media (max-width: 600px) {
  .hero--billet { padding-bottom: 72px; }
  .billet-stage { min-height: 0; padding: 10px 0 34px; }
  .billet-hand { bottom: -18px; }
}

/* Mobil/tablet: herobilledet fortsætter ind under bølgen, så der ikke er et grønt mellemrum */
@media (max-width: 900px) {
  .hero--skov { padding-bottom: 0; }
  .skov-media { margin-bottom: 0; }
  .skov-photo { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .signpost { bottom: calc(clamp(60px, 8vw, 120px) + 10px); }
  .skov-hand { bottom: calc(clamp(60px, 8vw, 120px) + 4px); }
  .hero--skov .scroll-cue { display: none; }
}

/* Runde 11: større vejviser, der står helt ned i bølgen, FAQ-trolden følger med, og ingen tap-zoom */
@media (max-width: 600px) {
  .signpost { scale: .7; bottom: 44px; right: 14px; }
}
@media (max-width: 900px) {
  /* Trolden følger med ned gennem FAQ'en og bliver i sektionen */
  .buddy { position: sticky; top: 84px; z-index: 6; }
  .buddy__say { box-shadow: 3px 3px 0 var(--forest); }
}
button, .btn, .faq__item summary { touch-action: manipulation; }