/* Temaer – klassen settes på <body> (js/themes.js). Elegant er standardutseendet og trenger ingen overstyring.
   Brukes av TV-visningen, opplastingssiden, «Lag album» og plakaten. Fargene kommer fra albumet (--bg/--accent/--text). */

/* ---------- Skrift ---------- */

:is(.theme-festive, .theme-boy, .theme-girl) {
  --serif: 'Baloo 2', 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;
}

/* Lekne skrifter har ingen ekte kursiv – skrå tekst ser kunstig ut */
:is(.theme-festive, .theme-boy, .theme-girl) :is(.caption .message, .subtitle, .corner-title, .new-badge, .lead, .start-title, .hero p, h1, h2) {
  font-style: normal;
}

:is(.theme-festive, .theme-boy, .theme-girl) :is(.caption .message, .subtitle, .lead, .hero p) { font-weight: 600; }

.theme-festive :is(.title-card h1, .hero h1, .sheet h1, .corner-title) {
  font-family: 'Pacifico', 'Baloo 2', cursive;
  font-weight: 400;
}

/* Plakaten har egen skrift i <style> – temaet må overstyre den */
:is(.theme-festive, .theme-boy, .theme-girl) .sheet .lead { font-family: var(--serif); }

:is(.theme-boy, .theme-girl) :is(.title-card h1, .hero h1, .sheet h1) {
  font-family: var(--serif);
  font-weight: 800;
  letter-spacing: 0.01em;
}

/* ---------- TV: bilderamme og hilsen ---------- */

/* Festlig: hvit kant som et fremkalt bilde */
.theme-festive .slide.single .frame img {
  border: 0.7vh solid #fff;
  border-radius: 4px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55);
}

/* Barnebursdag: polaroid med bred nederkant og runde hjørner */
:is(.theme-boy, .theme-girl) .slide.single .frame img {
  border: 1.1vh solid #fff;
  border-bottom-width: 3.6vh;
  border-radius: 1.4vh;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5);
}

:is(.theme-festive, .theme-boy, .theme-girl) .caption {
  border-radius: 2.6vh;
  border-width: 2px;
  border-color: var(--accent);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
}

:is(.theme-festive, .theme-boy, .theme-girl) .new-badge { font-family: var(--serif); font-weight: 800; }

/* Tittelkortet får prikker i temaets farger bak teksten */
:is(.theme-festive, .theme-boy, .theme-girl) .title-card {
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--accent) 55%, transparent) 0 0.5vw, transparent 0.55vw),
    radial-gradient(circle at 86% 26%, color-mix(in srgb, var(--accent) 45%, transparent) 0 0.8vw, transparent 0.85vw),
    radial-gradient(circle at 78% 82%, color-mix(in srgb, var(--text) 35%, transparent) 0 0.45vw, transparent 0.5vw),
    radial-gradient(circle at 20% 78%, color-mix(in srgb, var(--accent) 40%, transparent) 0 0.7vw, transparent 0.75vw),
    radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--accent) 22%, var(--bg)) 0%, var(--bg) 68%);
}

/* ---------- TV: lekne innganger (brukes bare i Festlig og barnebursdag) ---------- */

.slide.single .enter.in-pop {
  animation-name: in-pop;
  animation-duration: 1.5s;
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes in-pop {
  from { transform: rotate(calc(var(--in-rot, 4deg) * 2)) scale(0.5); }
  to { transform: rotate(0deg) scale(1); }
}

.slide.single .enter.in-swing {
  animation-name: in-swing;
  animation-duration: 1.9s;
  animation-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1);
  transform-origin: 50% -20%;
}
@keyframes in-swing {
  from { transform: translateY(-14vh) rotate(calc(var(--in-rot, 4deg) * 2.5)) scale(0.9); }
  to { transform: translateY(0) rotate(0deg) scale(1); }
}

/* ---------- TV: pynt langs kantene ---------- */

.decor {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 4;
}

/* Ferdigtegnet hjørnepynt (wwwroot/img/decor) – høyre hjørne er speilvendt */
.decor .corner {
  position: absolute;
  top: 0;
  width: var(--w);
  height: auto;
  will-change: auto;
}
.decor .corner.left { left: 0; }
.decor .corner.right { right: 0; transform: scaleX(-1); }

/* ---------- Opplastingssiden og «Lag album»: litt pynt i toppen ---------- */

:is(.theme-festive, .theme-boy, .theme-girl) .hero {
  background:
    radial-gradient(circle at 8% 30%, color-mix(in srgb, var(--accent) 60%, transparent) 0 5px, transparent 6px),
    radial-gradient(circle at 92% 22%, color-mix(in srgb, var(--accent) 50%, transparent) 0 8px, transparent 9px),
    radial-gradient(circle at 84% 78%, color-mix(in srgb, var(--text) 40%, transparent) 0 4px, transparent 5px),
    radial-gradient(circle at 16% 82%, color-mix(in srgb, var(--accent) 45%, transparent) 0 6px, transparent 7px),
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--accent) 22%, var(--bg)) 0%, var(--bg) 75%);
}

:is(.theme-festive, .theme-boy, .theme-girl) .btn { border-radius: 999px; }