/* ============================================================
   THE THURSDAY COMPANY — Landing
   Single font: Space Grotesk (used for THURSDAY tiles AND all captions)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

:root {
  --lavender:   #D9C2F5;
  --cream:      #F4EFE2;
  --paper:      #FFFFFF;   /* tweakable via TWEAK_DEFAULTS.paperColor */
  --ink:        #111111;
  --muted:      #6B6B6B;

  --hero-overlay: rgba(96, 0, 144, 0.45);
  --font: "Space Grotesk", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

body {
  padding: 0;
}
.page {
  background: var(--lavender);
  border-radius: 0;
  overflow: hidden;
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 28px;
  background: var(--lavender);
  border-bottom: 1px solid rgba(0,0,0,0.18);
}
.nav-logo {
  font-family: var(--font);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink);
  text-transform: uppercase;
}
.nav-links {
  display: flex; align-items: center; gap: 28px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.nav-links a { color: var(--ink); cursor: pointer; }
.nav-links a:hover { opacity: 0.55; }
.nav-lang {
  margin-left: 8px;
  padding-left: 18px;
  border-left: 1px solid rgba(0,0,0,0.25);
  font-weight: 600;
}

/* ============================================================
   HERO — tiled THURSDAY, diagonal clip on right edge
   ============================================================ */
.hero {
  position: relative;
  background: var(--lavender);
  padding: 40px 0 80px;
}

.hero-tiles {
  position: relative;
  width: 100%;
  user-select: none;
  /* Vertical padding so the rainbow row's stroke isn't clipped top/bottom */
  padding: 0.08em 0;
  /* Diagonal cut on right side — creates triangular empty space top-right */
  clip-path: polygon(0% 0%, 100% 0%, 100% 18%, 35% 100%, 0% 100%);
}
.hero-row {
  display: flex;
  gap: 0;
  white-space: nowrap;
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(72px, 13vw, 180px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: none;
  margin: 0;
}
.hero-row .word {
  -webkit-text-stroke: 1.5px var(--ink);
  color: transparent;
  padding-right: 0.18em;
}
/* Different left offsets per row → different parts of THURSDAY are cut at the left */
.hero-row.r1 { transform: translateX(-3%); }
.hero-row.r2 { transform: translateX(-22%); }
/* r3 holds the rainbow word — keep it on screen, fully readable */
.hero-row.r3 { transform: translateX(0%); }
.hero-row.r4 { transform: translateX(-31%); }
.hero-row.r5 { transform: translateX(-15%); }
.hero-row.r6 { transform: translateX(-38%); }

/* ---- HAPPY THURSDAY confetti burst ----
   Sits in the bottom-right white triangle that the diagonal clip leaves
   behind. Outlined HAPPY THURSDAY type matching the .word system,
   slightly tilted along the diagonal, with confetti exploding outward
   from the centre on a loop. */
.hero-burst {
  position: absolute;
  z-index: 55;
  right: 3%;
  bottom: 16%;
  width: clamp(280px, 30vw, 460px);
  height: clamp(220px, 26vw, 380px);
  text-decoration: none;
  pointer-events: auto;
  display: block;
  /* Slight tilt aligned with the hero's diagonal cut */
  transform: rotate(-14deg);
  transform-origin: bottom right;
  font-family: var(--font);
}
.burst-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.burst-text {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.82;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  text-align: center;
  white-space: nowrap;
  animation: burstPop 2.0s cubic-bezier(.2, 1.4, .3, 1) infinite;
}
.burst-line {
  display: block;
  font-weight: 700;
}
/* HAPPY — same solid-black treatment as THURSDAY, just smaller */
.burst-happy {
  font-size: clamp(30px, 3.7vw, 61px);
  margin-top: 0;
  filter: drop-shadow(2px 2px 0 var(--ink));
  animation: burstHappyPop 2.0s cubic-bezier(.2,1.6,.3,1) infinite;
}
/* THURSDAY — solid black, pops tiny → huge in sync */
.burst-thursday {
  font-size: clamp(45px, 5.3vw, 86px);
  margin-top: 0.12em;
  white-space: nowrap;
  filter: drop-shadow(2px 2px 0 var(--ink));
  animation: burstThursdayPop 2.0s cubic-bezier(.2,1.6,.3,1) infinite;
}
.burst-day { margin-top: 0.05em; }
.burst-thursday .th-l {
  color: var(--ink);
  -webkit-text-fill-color: currentColor;
  background: none;
  animation: thDance 1.2s ease-in-out infinite;
}
/* Neon star sparkles around the burst */
.sparkles { position: absolute; inset: -80% -60%; z-index: 4; pointer-events: none; }
.spk {
  position: absolute;
  color: #fff;
  text-shadow: 0 0 6px #fff, 0 0 12px var(--gl, #ff2d2d), 0 0 24px var(--gl, #ff2d2d);
  animation: spkTwinkle 1.6s ease-in-out infinite;
  opacity: 0;
}
.spk.s1{left:6%;top:8%;--gl:#ff2d2d;animation-delay:0s;font-size:24px}
.spk.s2{left:92%;top:14%;--gl:#ffd400;animation-delay:.2s;font-size:16px}
.spk.s3{left:4%;top:72%;--gl:#2596ff;animation-delay:.4s;font-size:18px}
.spk.s4{left:88%;top:80%;--gl:#d83b97;animation-delay:.6s;font-size:26px}
.spk.s5{left:50%;top:2%;--gl:#21c45a;animation-delay:.8s;font-size:14px}
.spk.s6{left:18%;top:38%;--gl:#6a3bd8;animation-delay:1s;font-size:18px}
.spk.s7{left:80%;top:42%;--gl:#ff8a00;animation-delay:1.2s;font-size:16px}
.spk.s8{left:30%;top:94%;--gl:#7be3f5;animation-delay:1.4s;font-size:22px}
.spk.s9{left:70%;top:92%;--gl:#ff8fd1;animation-delay:.3s;font-size:14px}
.spk.s10{left:12%;top:18%;--gl:#ffd400;animation-delay:.7s;font-size:14px}
.spk.s11{left:60%;top:24%;--gl:#bda6ff;animation-delay:1.1s;font-size:18px}
.spk.s12{left:42%;top:62%;--gl:#ff2d2d;animation-delay:.5s;font-size:14px}
.spk.s13{left:8%;top:50%;--gl:#ff2d2d;animation-delay:.15s;font-size:18px}
.spk.s14{left:96%;top:32%;--gl:#ff8a00;animation-delay:.55s;font-size:14px}
.spk.s15{left:24%;top:8%;--gl:#ffd400;animation-delay:.95s;font-size:20px}
.spk.s16{left:64%;top:6%;--gl:#21c45a;animation-delay:1.35s;font-size:16px}
.spk.s17{left:54%;top:36%;--gl:#2596ff;animation-delay:.25s;font-size:14px}
.spk.s18{left:36%;top:48%;--gl:#6a3bd8;animation-delay:.75s;font-size:16px}
.spk.s19{left:78%;top:62%;--gl:#d83b97;animation-delay:1.15s;font-size:22px}
.spk.s20{left:14%;top:84%;--gl:#7be3f5;animation-delay:.35s;font-size:14px}
.spk.s21{left:56%;top:80%;--gl:#ff8fd1;animation-delay:.85s;font-size:18px}
.spk.s22{left:90%;top:64%;--gl:#bda6ff;animation-delay:1.25s;font-size:14px}
.spk.s23{left:46%;top:18%;--gl:#21c45a;animation-delay:.45s;font-size:16px}
.spk.s24{left:72%;top:74%;--gl:#ffd400;animation-delay:1.45s;font-size:20px}
/* Outer-ring sparkles to fill the area beyond the rainbow */
.spk.s25{left:-2%;top:-4%;--gl:#ff2d2d;animation-delay:.10s;font-size:18px}
.spk.s26{left:6%;top:30%;--gl:#ff8a00;animation-delay:.50s;font-size:14px}
.spk.s27{left:-4%;top:60%;--gl:#ffd400;animation-delay:.90s;font-size:22px}
.spk.s28{left:2%;top:96%;--gl:#21c45a;animation-delay:1.30s;font-size:16px}
.spk.s29{left:18%;top:108%;--gl:#2596ff;animation-delay:.20s;font-size:18px}
.spk.s30{left:34%;top:104%;--gl:#6a3bd8;animation-delay:.60s;font-size:14px}
.spk.s31{left:50%;top:112%;--gl:#d83b97;animation-delay:1.00s;font-size:20px}
.spk.s32{left:66%;top:106%;--gl:#7be3f5;animation-delay:1.40s;font-size:16px}
.spk.s33{left:82%;top:104%;--gl:#ff8fd1;animation-delay:.30s;font-size:18px}
.spk.s34{left:98%;top:96%;--gl:#bda6ff;animation-delay:.70s;font-size:14px}
.spk.s35{left:104%;top:50%;--gl:#21c45a;animation-delay:1.10s;font-size:22px}
.spk.s36{left:96%;top:-4%;--gl:#ffd400;animation-delay:1.50s;font-size:16px}
/* Far-field sparkles spread across the wider hero area */
.spk.s37{left:108%;top:18%;--gl:#ff2d2d;animation-delay:.05s;font-size:18px}
.spk.s38{left:112%;top:42%;--gl:#ff8a00;animation-delay:.45s;font-size:14px}
.spk.s39{left:104%;top:74%;--gl:#ffd400;animation-delay:.85s;font-size:22px}
.spk.s40{left:114%;top:90%;--gl:#21c45a;animation-delay:1.25s;font-size:16px}
.spk.s41{left:88%;top:118%;--gl:#2596ff;animation-delay:.15s;font-size:18px}
.spk.s42{left:70%;top:124%;--gl:#6a3bd8;animation-delay:.55s;font-size:14px}
.spk.s43{left:50%;top:128%;--gl:#d83b97;animation-delay:.95s;font-size:20px}
.spk.s44{left:30%;top:122%;--gl:#7be3f5;animation-delay:1.35s;font-size:16px}
.spk.s45{left:12%;top:124%;--gl:#ff8fd1;animation-delay:.25s;font-size:18px}
.spk.s46{left:-8%;top:118%;--gl:#bda6ff;animation-delay:.65s;font-size:14px}
.spk.s47{left:-12%;top:84%;--gl:#21c45a;animation-delay:1.05s;font-size:22px}
.spk.s48{left:-10%;top:42%;--gl:#ffd400;animation-delay:1.45s;font-size:16px}
.spk.s49{left:-8%;top:14%;--gl:#ff2d2d;animation-delay:.35s;font-size:18px}
.spk.s50{left:14%;top:-12%;--gl:#ff8a00;animation-delay:.75s;font-size:14px}
.spk.s51{left:38%;top:-10%;--gl:#2596ff;animation-delay:1.15s;font-size:20px}
.spk.s52{left:62%;top:-12%;--gl:#6a3bd8;animation-delay:.20s;font-size:16px}
.spk.s53{left:84%;top:-10%;--gl:#d83b97;animation-delay:.60s;font-size:18px}
.spk.s54{left:108%;top:108%;--gl:#7be3f5;animation-delay:1.00s;font-size:14px}
@keyframes spkTwinkle {
  0%,100% { opacity:0; transform: scale(.4) rotate(0deg); }
  20%,60% { opacity:1; transform: scale(1.2) rotate(180deg); }
  80%     { opacity:.4; transform: scale(.8) rotate(360deg); }
}
.th-l {
  display: inline-block;
  transform-origin: center bottom;
  animation: thDance 1.2s ease-in-out infinite;
}
.th-l:nth-child(1) { animation-delay: 0.00s; }
.th-l:nth-child(2) { animation-delay: 0.07s; }
.th-l:nth-child(3) { animation-delay: 0.14s; }
.th-l:nth-child(4) { animation-delay: 0.21s; }
.th-l:nth-child(5) { animation-delay: 0.28s; }
.th-l:nth-child(6) { animation-delay: 0.35s; }
.th-l:nth-child(7) { animation-delay: 0.42s; }
.th-l:nth-child(8) { animation-delay: 0.49s; }
.th-l:nth-child(9) { animation-delay: 0.56s; }
@keyframes thDance {
   0%, 100% { transform: translateY(0)    rotate(0deg); }
  25%       { transform: translateY(-6px) rotate(-4deg); }
  50%       { transform: translateY(0)    rotate(0deg); }
  75%       { transform: translateY(2px)  rotate(3deg); }
}

@keyframes rainbowSlide {
  to { background-position: 220% 0; }
}
/* Whole stage stays neutral; per-line pops drive the explosion */
@keyframes burstPop {
   0%, 100% { transform: scale(1); }
}
/* Tiny → huge explosion. Pops past 1, then settles, then resets tiny. */
@keyframes burstHappyPop {
   0%      { transform: scale(0.05) rotate(-8deg); opacity: 0; }
   8%      { transform: scale(0.05) rotate(-6deg); opacity: 1; }
  22%      { transform: scale(1.25) rotate(2deg);  opacity: 1; }
  35%      { transform: scale(0.95) rotate(-1deg); }
  50%      { transform: scale(1.05) rotate(0.5deg); }
  70%      { transform: scale(1)    rotate(0deg); }
  90%      { transform: scale(1)    rotate(0deg); opacity: 1; }
 100%      { transform: scale(0.05) rotate(-8deg); opacity: 0; }
}
@keyframes burstThursdayPop {
   0%      { transform: scale(0.05) rotate(8deg);  opacity: 0; }
  10%      { transform: scale(0.05) rotate(6deg);  opacity: 1; }
  24%      { transform: scale(1.18) rotate(-1.5deg); opacity: 1; }
  38%      { transform: scale(0.97) rotate(0.5deg); }
  52%      { transform: scale(1.04) rotate(-0.3deg); }
  70%      { transform: scale(1)    rotate(0deg); }
  90%      { transform: scale(1)    rotate(0deg); opacity: 1; }
 100%      { transform: scale(0.05) rotate(8deg);  opacity: 0; }
}

/* Confetti explosion — colorful pieces bursting outward in sync (single 2s
   loop, all aligned so the whole burst pops together — like the giphy). */
.confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  /* Pop the whole confetti container in sync so the burst feels punchy */
  animation: burstPulse 2s ease-out infinite;
}
@keyframes burstPulse {
   0%, 100% { opacity: 0; transform: scale(0.6); }
   8%      { opacity: 1; transform: scale(1.05); }
  60%      { opacity: 1; transform: scale(1); }
  85%      { opacity: 0; transform: scale(1.1); }
}
.conf {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 18px;
  /* Realistic foil look — light → mid → dark gradient suggests curl/highlight */
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--c, #ff2d2d) 100%, white 35%) 0%,
      var(--c, #ff2d2d) 45%,
      color-mix(in srgb, var(--c, #ff2d2d) 100%, black 35%) 100%);
  transform-origin: center;
  animation: confFly 2s cubic-bezier(.18,.7,.3,1) infinite;
  border-radius: 1px;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.6),
    inset 0 -1px 1px rgba(0,0,0,0.3),
    1px 2px 2px rgba(0,0,0,0.35);
}
/* Mix shapes — circles, slashes, ribbons, triangles, hollow */
.conf:nth-child(3n) { width: 16px; height: 16px; border-radius: 50%; }
.conf:nth-child(4n) {
  /* Long curling ribbon — uses a wavy gradient strip */
  width: 26px; height: 5px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--c, #ff2d2d), white 30%) 0%,
    var(--c, #ff2d2d) 50%,
    color-mix(in srgb, var(--c, #ff2d2d), black 30%) 100%);
  border-radius: 3px;
  box-shadow: 1px 1px 1px rgba(0,0,0,0.35);
}
.conf:nth-child(5n) {
  /* Triangle shard with subtle fill gradient via clip-path */
  width: 16px; height: 14px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--c, #ff2d2d), white 25%) 0%,
    var(--c, #ff2d2d) 100%);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.4));
  box-shadow: none;
  border-radius: 0;
}
.conf:nth-child(7n) {
  /* Tall foil strip */
  width: 7px; height: 26px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--c, #ff2d2d), white 40%) 0%,
    var(--c, #ff2d2d) 50%,
    color-mix(in srgb, var(--c, #ff2d2d), black 40%) 100%);
  border-radius: 2px;
}
.conf:nth-child(11n) {
  /* Open ring — looks like a curled foil hoop */
  width: 18px; height: 18px;
  background: transparent;
  border: 3px solid var(--c, #ff2d2d);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.4),
    1px 1px 2px rgba(0,0,0,0.35);
  border-radius: 50%;
}
.conf:nth-child(13n) {
  /* Diamond chip */
  width: 14px; height: 14px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--c, #ff2d2d), white 35%) 0%,
    var(--c, #ff2d2d) 50%,
    color-mix(in srgb, var(--c, #ff2d2d), black 35%) 100%);
  transform: rotate(45deg);
  border-radius: 0;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}

/* Rainbow palette assigned to pieces */
.conf.c1  { --c: #ff2d2d; --x:  170px; --y: -150px; --r: 540deg; }
.conf.c2  { --c: #ff8a00; --x:  -80px; --y: -200px; --r: -480deg; }
.conf.c3  { --c: #ffd400; --x:  220px; --y:   60px; --r: 360deg; }
.conf.c4  { --c: #21c45a; --x: -190px; --y:  -50px; --r: -420deg; }
.conf.c5  { --c: #2596ff; --x:   40px; --y: -230px; --r: 600deg; }
.conf.c6  { --c: #6a3bd8; --x:  130px; --y:  170px; --r: 480deg; }
.conf.c7  { --c: #d83b97; --x: -150px; --y:  130px; --r: -360deg; }
.conf.c8  { --c: #ff2d2d; --x:  240px; --y:  -80px; --r: 540deg; }
.conf.c9  { --c: #ff8a00; --x: -240px; --y: -110px; --r: -540deg; }
.conf.c10 { --c: #ffd400; --x:   80px; --y:  220px; --r: 360deg; }
.conf.c11 { --c: #21c45a; --x: -220px; --y:   50px; --r: -480deg; }
.conf.c12 { --c: #2596ff; --x:  210px; --y:  -10px; --r: 480deg; }
.conf.c13 { --c: #6a3bd8; --x:  -50px; --y:  220px; --r: -360deg; }
.conf.c14 { --c: #d83b97; --x:  270px; --y:  110px; --r: 540deg; }
.conf.c15 { --c: #ff2d2d; --x: -110px; --y: -250px; --r: -600deg; }
.conf.c16 { --c: #ff8a00; --x:  150px; --y: -220px; --r: 480deg; }
.conf.c17 { --c: #21c45a; --x: -270px; --y:  -30px; --r: -420deg; }
.conf.c18 { --c: #ffd400; --x:   20px; --y:  270px; --r: 360deg; }
.conf.c19 { --c: #2596ff; --x:  290px; --y:  170px; --r: 540deg; }
.conf.c20 { --c: #6a3bd8; --x: -130px; --y:  220px; --r: -480deg; }
.conf.c21 { --c: #d83b97; --x:  190px; --y:  240px; --r: 420deg; }
.conf.c22 { --c: #ff2d2d; --x: -290px; --y:   90px; --r: -540deg; }
.conf.c23 { --c: #ff8a00; --x:  100px; --y: -270px; --r: 540deg; }
.conf.c24 { --c: #2596ff; --x: -200px; --y: -180px; --r: -480deg; }
.conf.c25 { --c: #ff2d2d; --x:  310px; --y:   30px; --r: 480deg; }
.conf.c26 { --c: #ff8a00; --x: -310px; --y:  130px; --r: -540deg; }
.conf.c27 { --c: #ffd400; --x:  -70px; --y:  290px; --r: 360deg; }
.conf.c28 { --c: #21c45a; --x:  220px; --y: -260px; --r: -480deg; }
.conf.c29 { --c: #2596ff; --x: -250px; --y: -240px; --r: 540deg; }
.conf.c30 { --c: #6a3bd8; --x:  330px; --y:  -50px; --r: -360deg; }
.conf.c31 { --c: #d83b97; --x:    0px; --y: -300px; --r: 600deg; }
.conf.c32 { --c: #ff2d2d; --x:  260px; --y:  280px; --r: -540deg; }
.conf.c33 { --c: #ff8a00; --x: -180px; --y:  280px; --r: 420deg; }
.conf.c34 { --c: #ffd400; --x:  120px; --y:  300px; --r: -480deg; }
.conf.c35 { --c: #21c45a; --x: -330px; --y:  -90px; --r: 540deg; }
.conf.c36 { --c: #2596ff; --x:  340px; --y:  220px; --r: -480deg; }
.conf.c37 { --c: #6a3bd8; --x:   60px; --y: -290px; --r: 480deg; }
.conf.c38 { --c: #d83b97; --x:  -40px; --y:  330px; --r: -420deg; }
.conf.c39 { --c: #ff2d2d; --x: -290px; --y:  220px; --r: 540deg; }
.conf.c40 { --c: #ffd400; --x:  280px; --y: -190px; --r: -360deg; }
.conf.c41 { --c: #21c45a; --x:   40px; --y:  -90px; --r: 480deg; }
.conf.c42 { --c: #2596ff; --x:  -90px; --y:  -60px; --r: -540deg; }
.conf.c43 { --c: #ff8a00; --x:  100px; --y:   50px; --r: 360deg; }
.conf.c44 { --c: #6a3bd8; --x: -120px; --y:   80px; --r: -420deg; }
.conf.c45 { --c: #d83b97; --x:  -30px; --y:  100px; --r: 480deg; }
.conf.c46 { --c: #ff2d2d; --x:  300px; --y:  140px; --r: -540deg; }
.conf.c47 { --c: #ffd400; --x: -210px; --y:  -10px; --r: 420deg; }
.conf.c48 { --c: #21c45a; --x:  150px; --y:  -90px; --r: -360deg; }

/* Synchronized burst: all pieces explode from centre at t=0, fly out, fade */
@keyframes confFly {
   0%   { transform: translate(-50%, -50%) translate(0, 0)                rotate(0deg)        scale(0.2); opacity: 0; }
   8%   { transform: translate(-50%, -50%) translate(calc(var(--x) * 0.18), calc(var(--y) * 0.18)) rotate(calc(var(--r) * 0.15)) scale(1.15); opacity: 1; }
  55%   { transform: translate(-50%, -50%) translate(var(--x), var(--y))  rotate(var(--r))     scale(1);    opacity: 1; }
  85%   { transform: translate(-50%, -50%) translate(calc(var(--x) * 1.15), calc(var(--y) * 1.15 + 30px)) rotate(calc(var(--r) * 1.1)) scale(0.9); opacity: 0; }
 100%   { transform: translate(-50%, -50%) translate(calc(var(--x) * 1.2), calc(var(--y) * 1.2 + 40px)) rotate(calc(var(--r) * 1.1)) scale(0.8); opacity: 0; }
}

/* Big pop-circle behind the burst — radial flash that punches at t=0 */
.burst-stage::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,180,0.9) 0%, rgba(255,200,0,0.5) 30%, rgba(255,100,0,0) 70%);
  transform: translate(-50%, -50%) scale(0);
  z-index: 1;
  animation: popFlash 2s ease-out infinite;
  pointer-events: none;
}
@keyframes popFlash {
   0%   { transform: translate(-50%, -50%) scale(0);  opacity: 1; }
  20%   { transform: translate(-50%, -50%) scale(28); opacity: 0.7; }
  60%   { transform: translate(-50%, -50%) scale(36); opacity: 0; }
 100%   { transform: translate(-50%, -50%) scale(0);  opacity: 0; }
}

/* Rainbow arc — opens up in sync with the explosion (2s loop).
   Each band is a semi-circular path; stroke-dashoffset draws the
   arc from the centre outwards as the burst pops, then fades. */
.rainbow-arc {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%) perspective(800px) rotateX(65deg);
  width: 112.5%;
  aspect-ratio: 1 / 1;
  height: auto;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
  filter: drop-shadow(2px 2px 0 var(--ink));
}
.rainbow-arc .rb {
  fill: none;
  stroke-width: 5;
  stroke-linecap: butt;
  /* Each circle's circumference = 2π·r; pad to exceed the outermost (~597) */
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: rainbowDraw 2s cubic-bezier(.2,1.4,.3,1) infinite;
}
.rainbow-arc .rb1 { stroke: #ff2d2d; animation-delay: 0.00s; }
.rainbow-arc .rb2 { stroke: #ff8a00; animation-delay: 0.04s; }
.rainbow-arc .rb3 { stroke: #ffd400; animation-delay: 0.08s; }
.rainbow-arc .rb4 { stroke: #21c45a; animation-delay: 0.12s; }
.rainbow-arc .rb5 { stroke: #2596ff; animation-delay: 0.16s; }
.rainbow-arc .rb6 { stroke: #4b3bd8; animation-delay: 0.20s; }
.rainbow-arc .rb7 { stroke: #a23bd8; animation-delay: 0.24s; }
@keyframes rainbowDraw {
   0%   { stroke-dashoffset: 620; opacity: 0; transform: scale(0.3) rotate(-30deg); }
   8%   { stroke-dashoffset: 620; opacity: 0; transform: scale(0.3) rotate(-30deg); }
  28%   { stroke-dashoffset: 0;   opacity: 1; transform: scale(1.05) rotate(0deg); }
  55%   { stroke-dashoffset: 0;   opacity: 1; transform: scale(1) rotate(0deg); }
  85%   { stroke-dashoffset: 0;   opacity: 0; transform: scale(1.1) rotate(15deg); }
 100%   { stroke-dashoffset: 620; opacity: 0; transform: scale(0.3) rotate(-30deg); }
}

/* Cartoon impact rays radiating from centre — pop in sync with the burst */
.rays {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: grid;
  place-items: center;
  animation: raysBurst 2s ease-out infinite;
}
@keyframes raysBurst {
   0%   { transform: rotate(0deg)   scale(0.4); opacity: 0; }
  12%   { transform: rotate(15deg)  scale(1.1); opacity: 0.5; }
  60%   { transform: rotate(45deg)  scale(1);   opacity: 0.3; }
 100%   { transform: rotate(60deg)  scale(1.2); opacity: 0; }
}
.rays span {
  position: absolute;
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  font-size: clamp(20px, 2.6vw, 36px);
  color: #fff;
  opacity: 0;
  text-shadow:
    0 0 6px #fff,
    0 0 14px var(--gl, #ffd400),
    0 0 28px var(--gl, #ffd400);
  transform-origin: center;
  animation: spkTwinkle 1.6s ease-in-out infinite;
}
.rays span::before { content: "✦"; }
.rays span:nth-child(1) { left:8%;  top:14%; --gl:#ff2d2d; animation-delay: 0.0s; }
.rays span:nth-child(2) { left:82%; top:10%; --gl:#ffd400; animation-delay: 0.2s; }
.rays span:nth-child(3) { left:88%; top:54%; --gl:#2596ff; animation-delay: 0.4s; }
.rays span:nth-child(4) { left:74%; top:84%; --gl:#d83b97; animation-delay: 0.6s; }
.rays span:nth-child(5) { left:38%; top:90%; --gl:#21c45a; animation-delay: 0.8s; }
.rays span:nth-child(6) { left:6%;  top:78%; --gl:#6a3bd8; animation-delay: 1.0s; }
.rays span:nth-child(7) { left:2%;  top:46%; --gl:#ff8a00; animation-delay: 1.2s; }
.rays span:nth-child(8) { left:48%; top:4%;  --gl:#7be3f5; animation-delay: 1.4s; }
.rays { animation: none; }
.rays span:nth-child(1) { transform: translate(-50%, 0) rotate(0deg); }
.rays span:nth-child(2) { transform: translate(-50%, 0) rotate(45deg); }
.rays span:nth-child(3) { transform: translate(-50%, 0) rotate(90deg); }
.rays span:nth-child(4) { transform: translate(-50%, 0) rotate(135deg); }
.rays span:nth-child(5) { transform: translate(-50%, 0) rotate(180deg); }
.rays span:nth-child(6) { transform: translate(-50%, 0) rotate(225deg); }
.rays span:nth-child(7) { transform: translate(-50%, 0) rotate(270deg); }
.rays span:nth-child(8) { transform: translate(-50%, 0) rotate(315deg); }
@keyframes raysSpin {
  to { transform: rotate(360deg); }
}

/* Inline solid-black segment inside an otherwise outlined word */
.word .fill {
  -webkit-text-stroke: 0;
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
}
.word .outline {
  -webkit-text-stroke: 1.5px var(--ink) !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* Empty triangle in top-right (created by clip-path on tiles) — nothing inside it */

/* ============================================================
   SECTION SCAFFOLD
   ============================================================ */
.section {
  padding: 110px 36px;
}
.section-paper    { background: var(--paper);    color: var(--ink); }
.section-lavender { background: var(--lavender); color: var(--ink); }

/* Section dividers — set per section so we can vary thickness and
   nudge them slightly above or below the section break. Hairlines are
   added as ::before on the section. */
.section { position: relative; }
.section-divider::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: var(--div-h, 2px);
  background: var(--div-color, #000);
  top: var(--div-offset, 0px);
  pointer-events: none;
  z-index: 5;
}

/* Stylish dividers between white/lavender — diagonal slashes,
   regular spacing, sitting fully on lavender. */
.divider {
  position: relative;
  background: transparent;
  z-index: 5;
}
.divider.slashes {
  height: 36px;
  background-color: var(--lavender);
  background-image: repeating-linear-gradient(
    -65deg,
    var(--ink) 0 5px,
    transparent 5px 18px
  );
}

/* Inline divider between articles (producers, projects).
   A row of repeating diagonal slashes — like a barricade tape. */
.inline-divider {
  position: relative;
  height: 56px;
  margin: 80px 0;
  overflow: hidden;
  background-image: repeating-linear-gradient(
    -65deg,
    var(--ink) 0 6px,
    transparent 6px 22px
  );
}
.inline-divider::before,
.inline-divider::after,
.inline-divider > .accent { content: none; display: none; }
/* Variant B: thicker, fewer slashes (parallelogram bars) */
.inline-divider.vb {
  background-image: repeating-linear-gradient(
    -65deg,
    var(--ink) 0 22px,
    transparent 22px 44px
  );
}
/* Variant C: medium */
.inline-divider.vc {
  background-image: repeating-linear-gradient(
    -65deg,
    var(--ink) 0 12px,
    transparent 12px 30px
  );
}

.caption {
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(48px, 8vw, 120px);
  letter-spacing: -0.02em;
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0 0 60px;
  color: var(--ink);
}
.caption-stacked { line-height: 0.92; }
/* Per-letter swap between solid black and outline.
   Each letter starts in solid state; the animation flips it to outline
   for half its cycle. Per-letter delays make a wandering wave. */
.caption.no-anim .ltr { animation: none !important; }
.caption .ltr {
  display: inline-block;
  -webkit-text-stroke: 0 transparent;
  color: var(--ink);
  animation: captionSwap 8s steps(1, end) infinite;
}
@keyframes captionSwap {
  0%, 49.999% {
    color: var(--ink);
    -webkit-text-stroke: 0 transparent;
  }
  50%, 99.999% {
    color: transparent;
    -webkit-text-stroke: 2px var(--ink);
  }
}
.caption-sm {
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 48px);
  letter-spacing: -0.01em;
  line-height: 1.0;
  text-transform: uppercase;
  margin: 0;
  color: var(--ink);
}

.container {
  max-width: 1320px;
  margin: 0 auto;
}

/* ============================================================
   ABOUT — white background, just intro
   ============================================================ */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: start;
}
.about-grid p,
.about-text-card p {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 16px;
  max-width: 64ch;
}
.about-grid p.lede,
.about-text-card p.lede {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 22px;
}

/* About stage: full-bleed background video with a white text card on the right */
#about {
  padding-left: 0 !important;
  padding-right: 0 !important;
  background-color: #fff;
  background-image: repeating-linear-gradient(
    -45deg,
    #ffffff 0 60px,
    var(--lavender) 60px 120px
  );
  position: relative;
  overflow: hidden;
}
.about-sparkles {
  position: absolute;
  top: 700px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  pointer-events: none;
}
.about-sparkles .spk {
  position: absolute;
  color: #fff;
  text-shadow: 0 0 6px #fff, 0 0 12px var(--gl, #ff2d2d), 0 0 24px var(--gl, #ff2d2d);
  animation: spkTwinkle 1.6s ease-in-out infinite;
  opacity: 0;
}
#about .container { position: relative; padding: 0 !important; max-width: none !important; }
.about-stage {
  position: relative;
  margin: 0;
  min-height: 700px;
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  isolation: isolate;
}
.about-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 700px;
  width: 100%;
  object-fit: cover;
  z-index: 0;
  background: #ddd;
}
.about-text-card {
  position: relative;
  z-index: 1;
  background: #fff;
  padding: 40px 44px;
  margin: 40px 48px 40px auto;
  max-width: 560px;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 12px 40px rgba(0,0,0,0.10);
}
.about-bg-video {
  transform: translateX(-20%);
}

/* ============================================================
   PRODUCERS — lavender, stacked (Felix then Nils), generous
   ============================================================ */
/* Producers: photo runs full-bleed on BOTH sides at section edges */
.producer {
  display: grid;
  grid-template-columns: minmax(360px, 44%) 1fr;
  gap: 70px;
  align-items: start;
  margin-bottom: 110px;
  /* Pull the row out of the section's horizontal padding so photo touches edges */
  margin-left: -36px;
  margin-right: -36px;
}
.producer:last-child { margin-bottom: 0; }

/* Flipped variant: text left, photo right */
.producer.flip {
  grid-template-columns: 1fr minmax(360px, 44%);
}
.producer.flip .producer-content { order: 1; padding-left: 0; text-align: right; }
.producer.flip .producer-content .producer-bio,
.producer.flip .producer-content .producer-bio p { margin-left: auto; }
.producer.flip .producer-photo   { order: 2; }

.producer-photo {
  aspect-ratio: 4 / 5;
  background: rgba(0,0,0,0.08);
  overflow: hidden;
  width: 100%;
  position: relative;
}
.producer-photo img,
.producer-photo video {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Subtle Ken-Burns animation on the photo */
  animation: kenBurns 14s ease-in-out infinite alternate;
  transform-origin: 50% 40%;
}
@keyframes kenBurns {
  0%   { transform: scale(1.00) translate(0, 0); }
  100% { transform: scale(1.06) translate(-1.5%, -1%); }
}
.producer:nth-child(odd) .producer-photo img { animation-direction: alternate-reverse; }
.producer-photo video { display: block; background: transparent; }

/* Felix stage: two stacked videos cross-fade so there's no black frame gap */
.felix-stage { position: relative; }
.felix-stage .felix-vid {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 600ms ease-in-out;
}
.felix-stage .felix-vid.is-active { opacity: 1; }

/* Nils stage: video plays, then photo shows briefly, then loops */
.nils-stage { position: relative; }
.nils-stage .nils-vid,
.nils-stage .nils-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 200ms ease-in-out;
}
.nils-stage .nils-photo {
  transform: scale(1.0);
  transform-origin: 50% 40%;
  transition: opacity 200ms ease-in-out, transform 6000ms cubic-bezier(0.22, 0.61, 0.36, 1);
  animation: none;
}
.nils-stage .nils-photo.is-active {
  transform: scale(1.15);
}
.nils-stage .is-active { opacity: 1; }
.producer-content { padding-top: 6px; }
.producer-name {
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(36px, 4.2vw, 60px);
  letter-spacing: -0.02em;
  line-height: 1.0;
  text-transform: uppercase;
  margin: 0 0 8px;
  color: var(--ink);
}
.producer-role {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  opacity: 0.6;
  margin: 0 0 24px;
}
.producer-bio {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  max-width: 64ch;
}
.producer-bio p { margin: 0 0 14px; }
.producer-bio em { font-style: normal; font-weight: 600; }

/* ============================================================
   PROJECTS — white, full-width images per item
   ============================================================ */
#projects {
  background-color: #fff;
  background-image: repeating-linear-gradient(
    -45deg,
    #ffffff 0 60px,
    var(--lavender) 60px 120px
  );
}
/* Wie laut + Germanwings stay on plain white — no stripes behind them.
   The white extends into the 360px gap below so the band stays clean
   all the way down to the next image. */
#projects .project:nth-of-type(3),
#projects .project:nth-of-type(5) {
  background: #fff;
  margin-bottom: 0;
  padding-bottom: 360px;
  /* Extend white past the section's 36px horizontal padding and any
     space outside the container, all the way to the viewport edges. */
  box-shadow: 0 0 0 100vmax #fff;
  clip-path: inset(0 -100vmax);
}
#projects .project:nth-of-type(3) .project-image,
#projects .project:nth-of-type(5) .project-image {
  background: #fff;
}
.project {
  margin-bottom: 360px;
}
.project + .project { margin-top: 0; }
.project .project-body { padding-bottom: 80px; }
.project:last-child { margin-bottom: 0; }

.project-image {
  aspect-ratio: 21 / 9;
  background: #ddd;
  overflow: hidden;
  margin: 0 -36px 56px;   /* full-bleed left/right at the page edges */
  position: relative;
}
.project-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
}
/* Eldorado key-art has its title near the top — keep title visible */
.project-image.pos-top img { object-position: center 0%; transform: translateY(-25%); height: 130%; }
.project-image.pos-bottom img { object-position: center bottom; }

.project-body {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 60px;
  align-items: start;
}
.project-meta {
  display: flex; flex-wrap: wrap; gap: 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  opacity: 0.55;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}
.project-title {
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: -0.02em;
  line-height: 1.0;
  text-transform: uppercase;
  margin: 0;
  color: var(--ink);
}
.project-desc {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}
.project-desc em { font-style: normal; font-weight: 600; }
.project-quote {
  font-size: 14px;
  color: var(--muted);
  font-style: italic;
  margin: 16px 0 0;
}
.project-quote cite {
  display: block;
  font-style: normal;
  margin-top: 4px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ============================================================
   PARTNERS — bare logos on lavender, no frames
   ============================================================ */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 80px 60px;
  margin-top: 30px;
  align-items: center;
}
.partner-cell {
  display: flex; align-items: center; justify-content: center;
  height: 90px;
}
.partner-cell img {
  max-width: 100%;
  max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  filter: none;
}

/* ============================================================
   CONTACT — like hero: tiled THURSDAY, diagonal, rainbow waver
   ============================================================ */
.contact-section {
  background: var(--lavender);
  position: relative;
  padding: 110px 36px 80px;
  overflow: hidden;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: start;
  margin-bottom: 80px;
  position: relative;
  z-index: 2;
}
.contact-info {
  display: grid;
  grid-template-columns: 110px 1fr;
  row-gap: 16px;
  column-gap: 24px;
  font-size: 16px;
  color: var(--ink);
}
.contact-info .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  opacity: 0.55;
  font-weight: 600;
  padding-top: 6px;
}
.contact-info a { color: var(--ink); }
.contact-info a:hover { text-decoration: underline; }
.contact-email {
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 42px) !important;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.contact-info address {
  font-style: normal;
  line-height: 1.5;
}

/* Tile band (same system as hero) */
.contact-tiles {
  position: relative;
  user-select: none;
  /* Mirror diagonal — cut on left this time for variety */
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 25%, 65% 0%);
  margin-top: 30px;
}
.contact-tiles .hero-row { font-size: clamp(60px, 11vw, 150px); }
.contact-tiles .hero-row[style*="--blk"] .word {
  color: #000 !important;
  -webkit-text-stroke: 0 transparent !important;
  -webkit-text-fill-color: #000 !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}

.footer-bar {
  margin-top: 60px;
  padding-top: 24px;
  border-top: 1px solid rgba(0,0,0,0.25);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 13px;
  color: var(--ink);
  opacity: 0.7;
  gap: 40px;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}
.footer-bar .links { display: flex; gap: 24px; }
.footer-bar .links a { cursor: pointer; }
.footer-bar .links a:hover { opacity: 1; text-decoration: underline; }

/* ============================================================
   MODAL
   ============================================================ */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  display: none;
  align-items: center; justify-content: center;
  z-index: 100;
  padding: 20px;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: var(--paper);
  color: var(--ink);
  max-width: 720px; width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  padding: 50px;
  position: relative;
  font-size: 14px;
  line-height: 1.55;
}
.modal h2 { font-size: 28px; margin: 0 0 18px; font-weight: 700; }
.modal h3 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; margin: 22px 0 6px; font-weight: 700; }
.modal p { margin: 0 0 8px; }
.modal-close {
  position: absolute; top: 16px; right: 16px;
  background: none; border: none;
  font-size: 28px;
  cursor: pointer;
  color: var(--ink);
  line-height: 1;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .nav { padding: 14px 18px; }
  .nav-links { gap: 14px; font-size: 11px; }
  .section, .contact-section { padding: 60px 22px; }
  .about-grid, .producer, .project-body, .contact-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .producer { margin-left: -22px; margin-right: -22px; }
  .partner-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 30px; }
  .footer-bar { flex-direction: column; }
  .hero-tiles { clip-path: polygon(0% 0%, 100% 0%, 100% 25%, 25% 100%, 0% 100%); }
}