:root {
  --bg: #000;
  --text: #e9eef3;
  --muted: #b7c3cf;
  --gold: #f5d97c;
  --maxw: min(1200px, 92vw);
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: auto;
  /* allow scroll when content exceeds */
  overscroll-behavior: contain;
  /* nicer touch scroll on mobile */
}

/* When stage fully fits, we toggle this from JS to hide stray 1px scrollbars */
body.no-scroll {
  overflow: hidden;
}

.scaler {
  /* the outer centering box */
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateZ(0);
  /* avoid sub-pixel jiggle */
  overflow: hidden;
  /* clip halos/snow bleed */
}

.stage {
  transform: scale(var(--scale)) translateZ(0);
  overflow: hidden;
  /* belt + suspenders */
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial,
    sans-serif;
  overflow-x: hidden;
}

/* --- Snow --- */
.snow {
  pointer-events: none;
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 2;
}

.flake {
  position: absolute;
  top: -10vh;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    #fff,
    rgba(255, 255, 255, 0.2) 60%,
    transparent 70%
  );
  animation: fall linear var(--dur) var(--delay) infinite;
  opacity: 0.9;
  filter: blur(0.3px);
}

@keyframes fall {
  0% {
    transform: translate3d(var(--x), -12vh, 0) rotate(0);
  }

  100% {
    transform: translate3d(calc(var(--x)+var(--drift)), 110vh, 0) rotate(360deg);
  }
}

/* --- Garland --- */
.garland {
  position: relative;
  width: 100%;
  height: 120px;
  overflow: visible;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  z-index: 3;
}

.string {
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  height: 0;
  border-top: 2px solid rgba(255, 255, 255, 0.08);
  transform: translateY(-20px);
  pointer-events: none;
  display: none;
}

.light {
  position: absolute;
  width: 42px;
  height: 42px;
  transform-origin: top center;
  animation: swing 3.2s ease-in-out infinite;
}

@keyframes swing {
  0%,
  100% {
    transform: translateY(0) rotate(-3deg);
  }

  50% {
    transform: translateY(4px) rotate(3deg);
  }
}

/* --- Colors --- */
.r {
  --c: #ff3f3fff;
}

/* red   */
.g {
  --c: #2fd37a;
}

/* green */
.b {
  --c: #5cc0ff;
}

/* blue  */
.y {
  --c: #ffd76a;
}

/* gold  */

/* --- Masked colored logo with GUARANTEED glow --- */
.bulb {
  position: relative;
  display: block;
  width: 42px;
  height: 42px;
  opacity: 0.98;
  background: var(--c);
  /* WebKit mask */
  -webkit-mask-image: url("../img/zen_logo.png");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  /* Standard mask */
  mask-image: url("../img/zen_logo.png");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  /* Subtle core glow via drop-shadows */
  filter: drop-shadow(0 0 10px var(--c)) drop-shadow(0 0 26px var(--c));
  animation: glowPulse 3.2s ease-in-out infinite;
}

/* Big soft halo BEHIND the logo */
.bulb::before {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in hsl, var(--c) 90%, transparent) 0%,
    color-mix(in hsl, var(--c) 60%, transparent) 40%,
    transparent 75%
  );
  filter: blur(10px);
  opacity: 0.9;
  z-index: -1;
  /* behind the masked logo */
  animation: haloPulse 3.2s ease-in-out infinite;
}

@keyframes glowPulse {
  0%,
  100% {
    filter: drop-shadow(0 0 8px var(--c)) drop-shadow(0 0 20px var(--c));
  }

  50% {
    filter: drop-shadow(0 0 16px var(--c)) drop-shadow(0 0 44px var(--c));
  }
}

@keyframes haloPulse {
  0%,
  100% {
    opacity: 0.75;
  }

  50% {
    opacity: 1;
  }
}

/* --- Layout + Video --- */
.wrap {
  max-width: var(--maxw);
  margin: 40px auto 64px;
  padding: 0 16px;
  position: relative;
  z-index: 1;
}

.title {
  text-align: center;
  margin: 10px 0 18px;
}

.title h1 {
  margin: 0.1em 0 0.05em;
  font-weight: 800;
  font-size: clamp(25px, 5vw, 45px);
  line-height: 1.1;
  text-shadow: 0 0 18px rgba(255, 60, 60, 0.25),
    0 0 26px rgba(47, 191, 113, 0.15);
}

.title p {
  margin: 0.2em 0 0;
  color: var(--muted);
  font-size: clamp(14px, 2.2vw, 18px);
}

.card {
  margin: 22px auto;

  background: transparent;

  max-width: 800px;
  /* smaller video card */
}

.video-wrap {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 18px 60px rgba(0, 0, 0, 0.65);
  aspect-ratio: 16/9;
  /* force 16:9 */
}

video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  background: #000;
}

.caption {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  margin: 10px 0 0;
}

.footer {
  text-align: center;
  margin: 18px 0 0;
  font-size: 20px;
  color: #a6b2c0;
}

.light {
  position: absolute;
  width: 42px;
  height: 42px;
  transform-origin: top center;
  animation: swing 3.2s ease-in-out infinite;
}

/* big soft aura that is NOT masked */
.halo {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* behind bulb */
  width: 60px;
  height: 60px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--c), rgba(0, 0, 0, 0) 60%);
  opacity: 0.85;
  filter: blur(14px);
  animation: haloPulse 3.2s ease-in-out infinite;
}

/* masked, colored logo on top */
.bulb {
  position: relative;
  z-index: 1;
  display: block;
  width: 42px;
  height: 42px;
  opacity: 0.98;
  background: var(--c);
  -webkit-mask-image: url("../img/zen_logo.png");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url("../img/zen_logo.png");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  filter: drop-shadow(0 0 8px var(--c)) drop-shadow(0 0 20px var(--c));
  animation: glowPulse 3.2s ease-in-out infinite;
}

@keyframes glowPulse {
  0%,
  100% {
    filter: drop-shadow(0 0 8px var(--c)) drop-shadow(0 0 20px var(--c));
  }

  50% {
    filter: drop-shadow(0 0 16px var(--c)) drop-shadow(0 0 44px var(--c));
  }
}

@keyframes haloPulse {
  0%,
  100% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(2);
  }

  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.28);
  }
}

/* --- Snow --- */
.snow {
  pointer-events: none;
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 999;
  /* bring it above garland + video */
}

.flake {
  position: absolute;
  top: -10vh;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    #fff,
    rgba(255, 255, 255, 0.25) 60%,
    transparent 70%
  );
  opacity: 0.85;
  filter: blur(0.5px);
  animation: fall linear var(--dur) var(--delay) infinite;
}

@keyframes fall {
  0% {
    transform: translate3d(var(--x), -12vh, 0) rotate(0deg);
    opacity: 0.95;
  }

  100% {
    transform: translate3d(calc(var(--x) + var(--drift)), 110vh, 0)
      rotate(360deg);
    opacity: 0.9;
  }
}

.video-wrap {
  position: relative;
  border-radius: 22px;
  /* increased from 14px for a softer round */
  overflow: hidden;
  /* ensures video follows the curve */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 18px 60px rgba(0, 0, 0, 0.65);
  aspect-ratio: 16/9;
}

video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  border-radius: 22px;
  /* same as wrapper */
  clip-path: inset(0 round 22px);
  /* Safari safety for masking */
}

.footer .heart {
  color: #ff3b3b;
  /* klar rød */
  text-shadow: 0 0 6px rgba(255, 60, 60, 0.6);
  /* let glød, passer til juletemaet */
}

.footer-link {
  color: inherit;
  /* same color as surrounding text */
  text-decoration: underline;
  /* keep underline */
  text-decoration-color: currentColor;
}

.footer-link:hover {
  color: var(--gold);
  /* optional: subtle highlight on hover */
  text-decoration-color: var(--gold);
}

/* Fade + slide up on page load */
.footer {
  opacity: 0;
  transform: translateY(16px);
  animation: footerIn 0.9s ease-out forwards;
}

/* Optional: slight stagger for a nicer cascade */
.wrap .footer:nth-of-type(1) {
  animation-delay: 0.05s;
}

.wrap .footer:nth-of-type(2) {
  animation-delay: 0.15s;
}

.wrap .footer:nth-of-type(3) {
  animation-delay: 0.25s;
}

.wrap .footer:nth-of-type(4) {
  animation-delay: 0.35s;
}

.wrap .footer:nth-of-type(5) {
  animation-delay: 0.45s;
}

@keyframes footerIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* (nice to have) respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .footer {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* Remove every trace of border / inset / shadow around the video */
.video-wrap {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  outline: none !important;
}

.video-wrap::before,
.video-wrap::after {
  content: none !important;
}

video {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: #000 !important;
  /* pure black fill */
}

/* --- MAIN TITLE STYLE --- */
.title h1 {
  margin: 0.1em 0 0.05em;
  font-weight: 800;
  /* Keeps the text scaling nicely on phones vs. big screens */
  font-size: clamp(25px, 5vw, 45px);
  line-height: 1.1;
  color: #ffffff;
  text-align: center;

  /* The Christmas Red Glow */
  text-shadow: 0 0 15px rgba(211, 47, 47, 0.9),
    /* Strong inner red */ 0 0 30px rgba(211, 47, 47, 0.5),
    /* Softer outer red */ 0 0 50px rgba(255, 255, 255, 0.2); /* Faint white aura */
}

/* Optional: Make the subtitle/date text below it pop a bit too */
.title p {
  color: #e0e0e0; /* Light gray/white */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  font-size: clamp(14px, 2.2vw, 18px);
}