/* ============================================================
   ANNIVERSARY CARD
   1. Tokens      — the only values you edit
   2. Background  — base colour + grid + glow
   3. Card        — the box in the middle
   4. Heads       — the swaying pairs
   5. Glitter     — falling sparkles
   6. Motion      — reduced-motion fallback
   ============================================================ */

/* ---- 0. FONTS --------------------------------------------- */
@font-face {
  font-family: "Fraunces";
  src: url("static/Fraunces-Variable.ttf") format("truetype");
  font-weight: 100 900;        /* the whole axis in one file */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("static/Fraunces-Italic-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ---- 1. TOKENS ------------------------------------------- */
:root {
  --color-primary:   #FFB4C8;   /* pink */
  --color-secondary: #D56989;   /* rose */
  --color-accent:    #C2DD80;   /* lime */
  --color-ink:       #101012;   /* text + the black sticker outlines */

  --color-text:   var(--color-ink);
  --color-border: var(--color-ink);

  /* sticker shape */
  --border-width: 2.5px;
  --radius-lg:    24px;
  --shadow-hard:  4px 4px 0 var(--color-ink);

  /* background — derived from the palette instead of hardcoded,
     so changing --color-secondary restyles the grid too */
  --bg:   #FFF7FA;
  --glow: color-mix(in srgb, var(--color-primary)   55%, transparent);
  --grid: color-mix(in srgb, var(--color-secondary) 18%, transparent);
  --cell: 48px;

  --font-body: "Fraunces", Georgia, "Times New Roman", serif;
}


/* ---- 2. BACKGROUND --------------------------------------- */
body {
  margin: 0;
  min-height: 100vh;
  color: var(--color-text);
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 80% 55% at 50% 0%, var(--glow), transparent 70%),
    repeating-linear-gradient(to right,  var(--grid) 0 1px, transparent 1px var(--cell)),
    repeating-linear-gradient(to bottom, var(--grid) 0 1px, transparent 1px var(--cell));
  background-attachment: fixed;

  font-family: var(--font-body), serif;
  font-optical-sizing: auto;   /* drives the opsz axis from font-size */
}


/* ---- 3. CARD --------------------------------------------- */

/* The only element that decides width. min() = "whichever is smaller":
   capped at 680px on desktop, 92vw on a phone (so you keep a 4% gutter). */
.text-holder {
  width: min(1080px, 88vw);
  margin: 18vh auto 4vh;
  position: relative;
}

.divider {
  font-size: 1.2rem;
  color: #FFF7FA;
  text-shadow:
    2px 0 0 #101012, -2px 0 0 #101012,
    0 2px 0 #101012,  0 -2px 0 #101012,
    1.5px 1.5px 0 #101012, -1.5px 1.5px 0 #101012,
    1.5px -1.5px 0 #101012, -1.5px -1.5px 0 #101012;
}

h1 {
  color: #FFF7FA;
  text-shadow:
    2px 0 0 #101012, -2px 0 0 #101012,
    0 2px 0 #101012,  0 -2px 0 #101012,
    1.5px 1.5px 0 #101012, -1.5px 1.5px 0 #101012,
    1.5px -1.5px 0 #101012, -1.5px -1.5px 0 #101012;

}

.hl{
  background-image: linear-gradient(transparent 55%, var(--color-accent) 55%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-inline: .14em;
}

.full-card {
  margin-top: 3%;
  background-color: color-mix(in srgb, var(--color-primary) 85%, transparent);
  border: var(--border-width) solid var(--color-border);
  /* inner radius slightly tighter than the outer one, or the two
     curves look mismatched where they nest */
  border-radius: calc(var(--radius-lg) - 8px);
  box-shadow: var(--shadow-hard);
  padding: clamp(1.1rem, 4vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

.pop{
  color: #FFF7FA;
  font-weight: 900;
  text-shadow:
    1.5px 0 0 #101012, -1.5px 0 0 #101012,
    0 1.5px 0 #101012, 0 -1.5px 0 #101012,
    1px 1px 0 #101012, -1px 1px 0 #101012,
    1px -1px 0 #101012, -1px -1px 0 #101012;
}

.text-border {
  background: var(--color-accent);
  border: var(--border-width) solid var(--color-border);
  /* inner radius slightly tighter than the outer one, or the two
     curves look mismatched where they nest */
  border-radius: calc(var(--radius-lg) - 8px);
  box-shadow: var(--shadow-hard);
  padding: clamp(1.1rem, 4vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

.text-border h1 {
  margin: 0;
  font-size: clamp(1.5rem, 6vw, 2.4rem);
  line-height: 1.15;
  hyphens: auto;          /* lets long German compounds break instead of overflow */
}

.text-border p {
  margin: 0;
  font-size: clamp(1rem, 3.6vw, 1.2rem);
  line-height: 1.6;       /* the big one for paragraphs — 1.2 is too tight to read */
  text-wrap: pretty;      /* stops single-word orphans on the last line */
}
/* ---- 4. HEADS -------------------------------------------- */
.heads {
  position: fixed; inset: 0;
  z-index: -1;                 /* behind content, still above body's background */
  overflow: hidden;
  pointer-events: none;
  opacity: .6;
  --s: 1;                      /* global size multiplier */
}

.pair {
  position: absolute;
  left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
  display: flex;
}

.pair img {
  width: calc(var(--size) * var(--s));
  height: auto;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.2));
  /* steps() = the 8-bit snap. jump-none includes both endpoints,
     so it holds at -14, -7, 0, 7, 14 degrees. */
  animation: sway var(--dur) steps(5, jump-none) var(--delay) infinite alternate;
}

/* pivot at the inner edge so they tilt toward each other */
.pair img:nth-child(1) { transform-origin: 85% 95%; z-index: 1 }
.pair img:nth-child(2) {
  transform-origin: 15% 95%;
  margin-left: calc(var(--size) * var(--s) * -0.22);
  animation-direction: alternate-reverse;
}

@keyframes sway {
  from { rotate: -14deg }
  to   { rotate:  14deg }
}


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

.glitter i {
  position: absolute;
  top: 0; left: var(--x);
  width: var(--w); height: calc(var(--w) * 1.8);
  background: var(--c);
  border-radius: 1px;
  animation:
    fall var(--dur)  linear var(--delay) infinite,
    spin var(--spin) linear var(--delay) infinite;
}

@keyframes fall {
  0%   { translate: 0    -12vh; opacity: 0 }
  10%  { opacity: 1 }
  25%  { translate: 2.5vw  20vh }
  50%  { translate: -2vw   50vh }
  75%  { translate: 2vw    80vh }
  90%  { opacity: 1 }
  100% { translate: 0     112vh; opacity: 0 }
}

/* tilted rotation axis → flashes flat-then-edge, like real glitter */
@keyframes spin { to { rotate: 1 1 0 1turn } }


/* ---- 6. MOTION ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pair img { animation: none; rotate: 0deg }
  .glitter  { display: none }
}

/* ---- 7. CARD REVEAL --------------------------------------- */

/* Both children share one grid cell, so they overlap instead of
   stacking — that's what lets them cross-fade without a layout jump. */

.stage { display: grid; align-items: start }
.stage > * { grid-area: 1 / 1 }   /* both in ONE cell → they overlap */

.text-holder {
  width: min(1080px, 88vw);
  margin: 0 auto 4vh;             /* was 18vh auto 4vh */
  position: relative;
}

#card     { margin-top: 3rem }    /* real card: near the top */

#pre-open {
  margin-top: 10vh;
  cursor: pointer;
  transition:
    opacity .4s ease,
    transform .4s ease,
    visibility 0s linear .4s;      /* flips only AFTER the fade finishes */
}
#pre-open.gone {
  opacity: 0;
  transform: scale(.9) rotate(-3deg);
  visibility: hidden;
  pointer-events: none;
}

#holder {
  visibility: hidden;
  opacity: 0;
  transform: translateY(22px) scale(.96);
  transition:
    opacity .55s ease .3s,
    transform .55s cubic-bezier(.2,.9,.3,1) .3s,
    visibility 0s linear .3s;      /* flips BEFORE its fade starts */
}
#holder.open {
  visibility: visible;
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  #pre-open, #holder { transition-duration: .01s; transition-delay: 0s }
  #holder.open { transform: none }
}

.preload #pre-open,
.preload #holder { transition: none }