/* ============================================================
   MARK TWO STUDIO - afterglow × goguette
   Aurora gradients · film grain · editorial serif
   ============================================================ */

:root {
  /* --- palette --- */
  --cream:      #FBF1E9;
  --cream-2:    #F6E7DA;
  --ink:        #34242A;   /* warm wine-charcoal - replaces pure black */
  --ink-2:      #2A1A20;
  --ink-soft:   rgba(52, 36, 42, 0.66);
  --ink-faint:  rgba(52, 36, 42, 0.42);
  --line:       rgba(52, 36, 42, 0.16);
  --line-2:     rgba(52, 36, 42, 0.09);

  /* deep burgundy surfaces (the footer-corner colour) */
  --wine:       #3A0F16;
  --wine-deep:  #2A0A11;

  /* aurora stops (overridden by palette-lean tweak) */
  --au-peach:   #FFCFA6;
  --au-coral:   #FF7A45;
  --au-pink:    #FF2E74;
  --au-red:     #F23847;
  --au-blush:   #FFB59A;
  --au-cream:   #FFE9D6;
  --au-mix:     1;        /* hot-pink intensity multiplier */
  --au-shade:   0;        /* 0–0.6 darkening overlay, controlled by the Aurora depth tweak */

  /* film grain */
  --grain-opacity: 0.10;

  /* type */
  --serif: 'Playfair Display', Georgia, serif;
  --sans:  'Archivo', system-ui, sans-serif;
  --mono:  'Space Mono', ui-monospace, monospace;

  --maxw: 1440px;
  --gut: clamp(20px, 4.5vw, 88px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  font-family: var(--sans);
  background: var(--cream);
  color: var(--ink);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--au-pink); color: #fff; }

/* ============================================================
   GRAIN - global film overlay
   ============================================================ */
.grain {
  position: fixed; inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none;
  z-index: 9000;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  animation: grainShift 0.7s steps(2) infinite;
}
@keyframes grainShift {
  0%   { transform: translate(0,0); }
  100% { transform: translate(-3%, 2%); }
}
@media (prefers-reduced-motion: reduce) { .grain { animation: none; } }

/* ============================================================
   AURORA - living gradient field
   ============================================================ */
.aurora { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.aurora::before {
  /* base wash */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 8% 18%,  var(--au-peach) 0%, transparent 55%),
    radial-gradient(110% 100% at 88% 84%, var(--au-blush) 0%, transparent 60%),
    linear-gradient(135deg, var(--au-cream) 0%, var(--au-coral) 58%, var(--au-pink) 100%);
}
.aurora .blob {
  position: absolute; border-radius: 50%;
  filter: blur(60px);
  mix-blend-mode: screen;
  opacity: calc(0.85 * var(--au-mix));
  will-change: transform;
}
.blob.b1 { width: 56vw; height: 56vw; left: -8vw;  top: -14vw;
  background: radial-gradient(circle, var(--au-coral), transparent 66%);
  animation: drift1 22s var(--ease) infinite alternate; }
.blob.b2 { width: 52vw; height: 52vw; right: -10vw; top: 4vw;
  background: radial-gradient(circle, var(--au-pink), transparent 64%);
  animation: drift2 26s var(--ease) infinite alternate; }
.blob.b3 { width: 46vw; height: 46vw; left: 28vw;  bottom: -18vw;
  background: radial-gradient(circle, var(--au-red), transparent 62%);
  animation: drift3 30s var(--ease) infinite alternate; }
.blob.b4 { width: 34vw; height: 34vw; right: 18vw; bottom: 6vw;
  background: radial-gradient(circle, var(--au-peach), transparent 60%);
  mix-blend-mode: overlay; opacity: 0.9;
  animation: drift1 24s var(--ease) infinite alternate-reverse; }

@keyframes drift1 { to { transform: translate(8vw, 6vw) scale(1.12); } }
@keyframes drift2 { to { transform: translate(-7vw, 5vw) scale(1.08); } }
@keyframes drift3 { to { transform: translate(4vw, -8vw) scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .aurora .blob { animation: none; } }

/* aurora variants */
.aurora.deep::before {
  background:
    radial-gradient(120% 90% at 80% 12%, var(--au-pink) 0%, transparent 52%),
    radial-gradient(120% 100% at 12% 90%, var(--au-red) 0%, transparent 55%),
    linear-gradient(150deg, #3a0f16 0%, #7a1330 42%, var(--au-pink) 100%);
}
.aurora.deep .blob { opacity: calc(0.7 * var(--au-mix)); }

/* darkening overlay - paints above the wash and blobs, below section content */
.aurora::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(20, 4, 8, var(--au-shade));
  pointer-events: none;
}

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }
section { position: relative; }
.eyebrow {
  font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: 0.6; }
.vlabel {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.34em;
  text-transform: uppercase; writing-mode: vertical-rl;
}

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .reveal { opacity:1; transform:none; } }
@media print { .reveal { opacity:1 !important; transform:none !important; } }

/* glass */
.glass {
  background: rgba(255, 246, 238, 0.10);
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
/* dark frosted glass - burgundy tint, light text */
.glass-dark {
  background: rgba(42, 10, 17, 0.46);
  backdrop-filter: blur(26px) saturate(1.15);
  -webkit-backdrop-filter: blur(26px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 30px 70px rgba(42, 10, 17, 0.30), inset 0 1px 0 rgba(255,255,255,0.10);
}
/* light frosted glass - for cream sections, dark text */
.glass-light {
  background: rgba(255, 249, 243, 0.50);
  backdrop-filter: blur(20px) saturate(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 24px 60px rgba(120, 40, 30, 0.10), inset 0 1px 0 rgba(255,255,255,0.6);
}

/* buttons */
.btn {
  font-family: var(--sans); font-weight: 600; font-size: 14px;
  letter-spacing: 0.02em; padding: 16px 28px; border-radius: 100px;
  display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
  border: 1px solid transparent; transition: all 0.4s var(--ease); white-space: nowrap;
}
.btn .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.btn-solid { background: var(--ink); color: var(--cream); }
.btn-solid:hover { background: var(--au-pink); color: #fff; transform: translateY(-2px); }
.problem .btn-solid:hover { background: #E53B4C; }
/* Home page problem CTA runs the other way: red at rest, ink on hover. */
.btn-red { background: #E63D4E; color: #fff; }
.problem .btn-red:hover, .btn-red:hover { background: var(--ink); color: var(--cream); }
.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(242,56,71,0.28); }
.btn-ghost { background: transparent; border-color: rgba(255,255,255,0.45); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,0.14); }
.btn-ghost-dark { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-ghost-dark:hover { background: var(--ink); color: var(--cream); }

/* on-gradient text */
.on-aurora { color: #fff; }
.on-aurora .ink-soft { color: rgba(255,255,255,0.72); }