/* ============================================================
   THIRD HOUSE SOCIALS — base: tokens, type, motifs, utilities
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --rose:       #A45575;
  --rose-dark:  #7e3a59;
  --rose-soft:  #d98aab;
  --navy:       #0E2D45;
  --navy-deep:  #07182a;
  --cream:      #FFFDF8;
  --cream-100:  #F6F0E6;
  --cream-200:  #E9DCCB;
  --gold:       #E8B14C;
  --muted:      #7a6a60;
  --ink:        #14100c;

  --tape: rgba(233, 220, 203, 0.72);
  --shadow-card: 0 18px 40px -18px rgba(7, 24, 42, 0.45);
  --maxw: 1400px;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Rubik', system-ui, sans-serif;
  background: var(--cream);
  color: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Film-grain texture over the whole page — kills the flat "AI" look */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* ---------- inline rich-text spans (from JSON markers) ---------- */
.em-rose   { color: var(--rose); font-style: italic; font-family: 'Playfair Display', serif; }
.scribble  { position: relative; white-space: nowrap; }
.scribble > svg {
  position: absolute; left: -2%; bottom: -0.32em; width: 104%; height: 0.5em;
  overflow: visible; color: var(--gold);
}
.circled   { position: relative; white-space: nowrap; }
.circled > svg {
  position: absolute; left: -8%; top: -22%; width: 116%; height: 150%;
  overflow: visible; color: var(--rose); pointer-events: none;
  stroke-dasharray: 620; stroke-dashoffset: 620;
}
.is-visible .circled > svg { animation: draw 1s ease 0.25s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------- doodles ---------- */
.doodle-arrow { color: var(--rose); display: inline-block; pointer-events: none; }

/* ---------- sticker badges ---------- */
.sticker {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: lowercase;
  background: var(--cream); color: var(--navy-deep);
  padding: 8px 15px; border-radius: 999px;
  border: 1.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}
.sticker::before { content: '✦'; color: var(--rose); font-size: 13px; }

/* ---------- taped photo / polaroid ---------- */
.photo {
  position: relative;
  background: var(--cream);
  padding: 12px 12px 0;
  border-radius: 2px;
  box-shadow: var(--shadow-card);
  transform: rotate(var(--rot, 0deg));
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.photo img {
  display: block; width: 100%; height: auto;
  border-radius: 1px;
  filter: saturate(1.02) contrast(1.02);
  background: var(--cream-200);
}
.photo figcaption {
  font-family: 'Caveat', cursive;
  font-size: 21px; font-weight: 600;
  color: var(--ink);
  padding: 8px 4px 16px;
  text-align: center;
  line-height: 1.1;
}
/* tape strips */
.photo::before, .photo::after {
  content: '';
  position: absolute; top: -13px; width: 86px; height: 26px;
  background: var(--tape);
  box-shadow: 0 1px 3px rgba(7,24,42,0.18);
}
.photo::before { left: 14%; transform: rotate(-5deg); }
.photo::after  { right: 14%; transform: rotate(4deg); }
.photo.tape-one::after { display: none; }
.photo.tape-one::before { left: 50%; transform: translateX(-50%) rotate(-3deg); }
.photo:hover { transform: rotate(0deg) scale(1.015); box-shadow: 0 26px 50px -18px rgba(7,24,42,0.55); }

/* ---------- eyebrow label ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.25em;
  text-transform: uppercase; color: var(--rose);
  margin-bottom: 22px;
}
.eyebrow::before { content: ''; width: 30px; height: 2px; background: var(--rose); }
.eyebrow.on-dark { color: var(--rose-soft); }
.eyebrow.center { justify-content: center; }
.eyebrow.center::after { content: ''; width: 30px; height: 2px; background: var(--rose); }

/* ---------- handwritten ---------- */
.hand {
  font-family: 'Caveat', cursive;
  font-size: 24px; font-weight: 600; line-height: 1.25;
  color: var(--muted);
}
.hand.on-dark { color: rgba(255,255,255,0.55); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: 'Rubik', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; text-decoration: none;
  padding: 16px 34px; cursor: pointer;
  border: 2px solid var(--ink);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.2s, color 0.2s;
}
.btn-primary {
  background: var(--rose); color: #fff; border-color: var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
}
.btn-primary:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--ink); }
.btn-ghost {
  background: transparent; color: #fff; border-color: #fff;
}
.btn-ghost:hover { background: rgba(255,255,255,0.14); }
.btn-outline {
  background: transparent; color: var(--navy-deep); border-color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}
.btn-outline:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); background: var(--cream-100); }
.btn-link {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--navy-deep); text-decoration: none;
  border-bottom: 2px solid var(--navy-deep); padding-bottom: 3px;
  transition: color 0.2s, border-color 0.2s;
}
.btn-link:hover { color: var(--rose); border-color: var(--rose); }
.btn-link.on-dark { color: #fff; border-color: rgba(255,255,255,0.45); }
.btn-link.on-dark:hover { color: var(--rose-soft); border-color: var(--rose-soft); }

/* ---------- section scaffolding ---------- */
.section { padding: 110px 56px; }
.wrap { max-width: var(--maxw); margin: 0 auto; }

.display {
  font-family: 'Playfair Display', serif;
  font-weight: 900; line-height: 0.95; letter-spacing: -0.025em;
}

/* grid backdrop used on dark sections */
.gridlines::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(250,245,232,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250,245,232,0.035) 1px, transparent 1px);
  background-size: 58px 58px;
}
.ghost {
  position: absolute; font-family: 'Playfair Display', serif;
  font-weight: 900; color: rgba(255,255,255,0.025);
  line-height: 1; user-select: none; pointer-events: none; letter-spacing: -0.05em;
}

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }

/* ---------- staggered reveal: children fade in sequence ---------- */
/* parent carries .reveal (slides up as a group); each child fades on a delay.
   Opacity-only on purpose — leaves `transform` free for hover/tilt/scale. */
.stagger > * { opacity: 0; transition: opacity 0.55s ease; }
.stagger.is-visible > * { opacity: 1; transition-delay: calc(var(--i, 0) * 95ms); }

/* ---------- hero headline: line-by-line reveal on load ---------- */
.hero-h .line { display: block; overflow: hidden; padding-bottom: 0.04em; }
.hero-h .line-in {
  display: inline-block;
  transform: translateY(115%);
  animation: lineUp 0.85s cubic-bezier(0.2, 0.75, 0.2, 1) forwards;
  animation-delay: calc(var(--i, 0) * 0.13s + 0.15s);
}
@keyframes lineUp { to { transform: translateY(0); } }

/* ---------- scroll cue ---------- */
.scroll-cue {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 5; font-family: 'Caveat', cursive; font-size: 20px; font-weight: 600;
  color: rgba(255,255,255,0.6); text-decoration: none;
  animation: cue-bob 1.8s ease-in-out infinite;
}
.scroll-cue:hover { color: var(--gold); }
@keyframes cue-bob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 7px); } }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .stagger > * { opacity: 1; transition: none; }
  .hero-h .line-in { animation: none; transform: none; }
  .scroll-cue { animation: none; }
  .hero-flourish path { animation: none; stroke-dashoffset: 0; }
  *, *::before, *::after { animation-duration: 0.001s !important; }
}