/* =========================================================
   SCRAPBOOK.CSS — InnovateHERs  |  Pink-dominant scrapbook
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,600;0,700;1,400;1,600;1,700&family=Pacifico&family=Nunito:wght@400;600;700;800;900&display=swap');

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
.hamburger { display: none; }

/* ── Paper background (pink-tinted grid) ── */
body {
  font-family: 'Nunito', sans-serif;
  background-color: #fef6f8;
  background-image:
    linear-gradient(rgba(249,168,192,0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(249,168,192,0.18) 1px, transparent 1px);
  background-size: 28px 28px;
  color: #2d2d2d;
  overflow-x: hidden; max-width: 100vw; min-height: 100vh;
}

/* ── Nav ── */
nav.site-nav {
  position: sticky; top: 0; z-index: 300;
  display: flex; align-items: center; gap: 1rem;
  padding: .6rem 2rem;
  background: rgba(255,255,255,0.97);
  border-bottom: 3px solid #f9a8c0;
  box-shadow: 0 2px 12px rgba(227,97,128,0.1);
}
.nav-logo { height: 46px; width: 46px; object-fit: contain; border-radius: 50%; }
.nav-brand {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem; font-weight: 700; color: #e36180;
}
.nav-links { margin-left: auto; display: flex; gap: .2rem; }
.nav-links a {
  font-family: 'Caveat', cursive;
  font-size: 1.08rem; font-weight: 600; color: #7a7a7a;
  padding: .35rem .95rem; border-radius: 10px;
  transition: background .2s, color .2s;
}
.nav-links a:hover  { background: #fce4ec; color: #c45c78; }
.nav-links a.active { background: #fce4ec; color: #e36180; font-weight: 700; }
.nav-links a.nav-join {
  background: #fce4ec; color: #c45c78;
  border: 1.5px solid #e36180;
}
.nav-links a.nav-join:hover { background: #e36180; color: #fff; }

/* ── Sections ── */
.section { padding: 4rem 2rem; max-width: 1100px; margin: 0 auto; }
.section-label {
  font-family: 'Caveat', cursive;
  font-size: 1.2rem; font-weight: 600; color: #e36180; margin-bottom: .3rem;
}
.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 4vw, 3rem); font-weight: 700;
  color: #2d2d2d; margin-bottom: 1rem; line-height: 1.2;
}
/* mixed-font title helpers */
.title-green  { font-family: 'Caveat', cursive; color: #6baa6b; font-style: italic; }
.title-pink   { color: #e36180; }
.title-script { font-family: 'Cormorant Garamond', serif; }
.title-brush  { font-family: 'Pacifico', cursive; font-size: .8em; }

.divider {
  width: 56px; height: 4px;
  background: linear-gradient(90deg, #e36180, #f9a8c0);
  border-radius: 2px; margin: .75rem 0 1.5rem;
}
.section-body { font-size: 1rem; color: #555; line-height: 1.8; }

/* ── Washi tape ── */
.tape::before {
  content: '';
  position: absolute;
  top: -12px; left: 50%; transform: translateX(-50%) rotate(-1deg);
  width: 54px; height: 18px;
  background: rgba(255,240,120,0.85);
  border-radius: 2px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  z-index: 3;
}
.tape-pink::before   { background: rgba(249,168,192,0.8); }
.tape-green::before  { background: rgba(168,212,162,0.8); }
.tape-yellow::before { background: rgba(255,240,120,0.85); }

/* ── Text highlights ── */
.hl-pink   { background: linear-gradient(transparent 55%, rgba(249,168,192,0.55) 55%); }
.hl-green  { background: linear-gradient(transparent 55%, rgba(168,212,162,0.65) 55%); }
.hl-yellow { background: linear-gradient(transparent 55%, rgba(255,241,118,0.7) 55%); }

/* ── Sticker wobble ── */
.sticker {
  display: inline-block;
  animation: sticker-wobble 4s ease-in-out infinite;
  transform-origin: center bottom;
  user-select: none; pointer-events: none;
  filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.12));
}
@keyframes sticker-wobble {
  0%, 100% { transform: rotate(-4deg); }
  50%       { transform: rotate(4deg);  }
}

/* ─────────────────────────────────────────────────────────
   LACE TRIM  (use as a block element between sections)
   ───────────────────────────────────────────────────────── */
.lace-trim {
  width: 100%; height: 28px;
  position: relative; overflow: hidden;
  background: transparent;
  pointer-events: none;
}
/* pearl-row lace */
.lace-trim::before {
  content: '';
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, #f9a8c0 5%, #f9a8c0 95%, transparent);
  transform: translateY(-50%);
}
.lace-trim::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, #f9c0d0 5px, transparent 5px);
  background-size: 18px 28px;
  background-repeat: repeat-x;
  background-position: 0 center;
}
.lace-trim.lace-green::before { background: linear-gradient(90deg, transparent, #a8d4a2 5%, #a8d4a2 95%, transparent); }
.lace-trim.lace-green::after  { background-image: radial-gradient(circle, #a8d4a2 5px, transparent 5px); background-size: 18px 28px; background-repeat: repeat-x; background-position: 0 center; }

/* scallop lace (for section tops/bottoms) */
.lace-scallop {
  width: 100%; height: 20px; overflow: hidden; pointer-events: none;
  background-image:
    radial-gradient(ellipse 12px 12px at 12px 0, transparent 10px, #fce4ec 10px, #fce4ec 12px, transparent 12px);
  background-size: 24px 20px;
  background-repeat: repeat-x;
  background-position: 0 0;
}
.lace-scallop.scallop-pink   { background-image: radial-gradient(ellipse 12px 12px at 12px 0, transparent 10px, #fce4ec 10px, #fce4ec 12px, transparent 12px); }
.lace-scallop.scallop-green  { background-image: radial-gradient(ellipse 12px 12px at 12px 0, transparent 10px, #d4ead0 10px, #d4ead0 12px, transparent 12px); }
.lace-scallop.scallop-white  { background-image: radial-gradient(ellipse 12px 12px at 12px 0, transparent 10px, #fef6f8 10px, #fef6f8 12px, transparent 12px); }

/* ── Torn paper edges ── */
.tear-into-pink {
  height: 28px; background: #fce4ec; position: relative; z-index: 2; margin-bottom: -2px;
  clip-path: polygon(0 100%, 1.5% 30%, 3% 80%, 5% 10%, 7% 65%, 9% 25%, 11% 70%, 13% 40%, 15% 85%, 17% 20%, 19% 60%, 21% 15%, 23% 55%, 25% 80%, 27% 30%, 29% 70%, 31% 20%, 33% 60%, 35% 85%, 37% 35%, 39% 70%, 41% 10%, 43% 55%, 45% 80%, 47% 30%, 49% 65%, 51% 15%, 53% 55%, 55% 80%, 57% 25%, 59% 60%, 61% 15%, 63% 55%, 65% 80%, 67% 30%, 69% 70%, 71% 20%, 73% 60%, 75% 85%, 77% 30%, 79% 70%, 81% 15%, 83% 55%, 85% 80%, 87% 35%, 89% 70%, 91% 20%, 93% 55%, 95% 85%, 97% 35%, 100% 100%);
}
.tear-into-green {
  height: 28px; background: #d4ead0; position: relative; z-index: 2; margin-bottom: -2px;
  clip-path: polygon(0 100%, 1.5% 30%, 3% 80%, 5% 10%, 7% 65%, 9% 25%, 11% 70%, 13% 40%, 15% 85%, 17% 20%, 19% 60%, 21% 15%, 23% 55%, 25% 80%, 27% 30%, 29% 70%, 31% 20%, 33% 60%, 35% 85%, 37% 35%, 39% 70%, 41% 10%, 43% 55%, 45% 80%, 47% 30%, 49% 65%, 51% 15%, 53% 55%, 55% 80%, 57% 25%, 59% 60%, 61% 15%, 63% 55%, 65% 80%, 67% 30%, 69% 70%, 71% 20%, 73% 60%, 75% 85%, 77% 30%, 79% 70%, 81% 15%, 83% 55%, 85% 80%, 87% 35%, 89% 70%, 91% 20%, 93% 55%, 95% 85%, 97% 35%, 100% 100%);
}
.tear-into-paper {
  height: 28px; background: #fef6f8; position: relative; z-index: 2; margin-bottom: -2px;
  clip-path: polygon(0 100%, 1.5% 30%, 3% 80%, 5% 10%, 7% 65%, 9% 25%, 11% 70%, 13% 40%, 15% 85%, 17% 20%, 19% 60%, 21% 15%, 23% 55%, 25% 80%, 27% 30%, 29% 70%, 31% 20%, 33% 60%, 35% 85%, 37% 35%, 39% 70%, 41% 10%, 43% 55%, 45% 80%, 47% 30%, 49% 65%, 51% 15%, 53% 55%, 55% 80%, 57% 25%, 59% 60%, 61% 15%, 63% 55%, 65% 80%, 67% 30%, 69% 70%, 71% 20%, 73% 60%, 75% 85%, 77% 30%, 79% 70%, 81% 15%, 83% 55%, 85% 80%, 87% 35%, 89% 70%, 91% 20%, 93% 55%, 95% 85%, 97% 35%, 100% 100%);
}

/* ── Reveal animations ── */
.reveal { opacity:0; transform:translateY(40px); transition:opacity .75s cubic-bezier(.22,.68,0,1.2),transform .75s cubic-bezier(.22,.68,0,1.2); }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-left { opacity:0; transform:translateX(-50px); transition:opacity .7s cubic-bezier(.22,.68,0,1.2),transform .7s cubic-bezier(.22,.68,0,1.2); }
.reveal-left.visible { opacity:1; transform:translateX(0); }
.reveal-right { opacity:0; transform:translateX(50px); transition:opacity .7s cubic-bezier(.22,.68,0,1.2),transform .7s cubic-bezier(.22,.68,0,1.2); }
.reveal-right.visible { opacity:1; transform:translateX(0); }
.reveal-scale { opacity:0; transform:scale(.88); transition:opacity .7s ease,transform .7s cubic-bezier(.34,1.56,.64,1); }
.reveal-scale.visible { opacity:1; transform:scale(1); }
.reveal-delay-1 { transition-delay:.08s; }
.reveal-delay-2 { transition-delay:.18s; }
.reveal-delay-3 { transition-delay:.28s; }
.reveal-delay-4 { transition-delay:.38s; }

/* ── Footer ── */
.footer {
  text-align: center;
  padding: 3.5rem 1.5rem 2.5rem;
  font-family: 'Caveat', cursive; font-size: 1.15rem;
  color: #fff;
  background: linear-gradient(135deg, #c45c78 0%, #e36180 40%, #8aba87 100%);
  position: relative;
}
.footer::before {
  content: '';
  position: absolute; top: -22px; left: 0; right: 0; height: 26px;
  background: linear-gradient(135deg, #c45c78 0%, #e36180 40%, #8aba87 100%);
  clip-path: polygon(0% 100%, 1.5% 30%, 3% 80%, 5% 10%, 7% 65%, 9% 25%, 11% 70%, 13% 40%, 15% 85%, 17% 20%, 19% 60%, 21% 15%, 23% 55%, 25% 80%, 27% 30%, 29% 70%, 31% 20%, 33% 60%, 35% 85%, 37% 35%, 39% 70%, 41% 10%, 43% 55%, 45% 80%, 47% 30%, 49% 65%, 51% 15%, 53% 55%, 55% 80%, 57% 25%, 59% 60%, 61% 15%, 63% 55%, 65% 80%, 67% 30%, 69% 70%, 71% 20%, 73% 60%, 75% 85%, 77% 30%, 79% 70%, 81% 15%, 83% 55%, 85% 80%, 87% 35%, 89% 70%, 91% 20%, 93% 55%, 95% 85%, 97% 35%, 100% 100%);
}
.footer a { color: rgba(255,255,255,0.92); transition: color .2s; }
.footer a:hover { color: #fff; }


/* ── Floating / ambient animations ── */
@keyframes float-slow {
  0%, 100% { transform: translateY(0px) rotate(var(--r, 0deg)); }
  50%       { transform: translateY(-10px) rotate(var(--r, 0deg)); }
}
@keyframes float-gentle {
  0%, 100% { transform: translateY(0px) rotate(var(--r, 0deg)); }
  50%       { transform: translateY(-6px) rotate(var(--r, 0deg)); }
}
@keyframes drift {
  0%, 100% { transform: translateX(0px) rotate(var(--r, 0deg)); }
  50%       { transform: translateX(7px) rotate(var(--r, 0deg)); }
}
@keyframes twinkle {
  0%, 100% { opacity: .7; transform: scale(1) rotate(var(--r, 0deg)); }
  50%       { opacity: 1; transform: scale(1.18) rotate(var(--r, 0deg)); }
}
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(var(--r, -3deg)); }
  50%       { transform: translateY(-5px) rotate(var(--r, -3deg)); }
}

/* classes to apply animations */
.anim-float     { animation: float-slow 5s ease-in-out infinite; }
.anim-float-alt { animation: float-gentle 6.5s ease-in-out infinite; animation-delay: -2s; }
.anim-drift     { animation: drift 7s ease-in-out infinite; }
.anim-twinkle   { animation: twinkle 3s ease-in-out infinite; }
.anim-bob       { animation: bob 4s ease-in-out infinite; }

/* page-wide subtle entrance fade for sticker clusters */
.sticker-cluster, .sticker-crop { animation: sticker-fade-in 1.2s ease both; }
@keyframes sticker-fade-in {
  from { opacity: 0; transform: scale(.85) rotate(var(--r, 0deg)); }
  to   { opacity: 1; transform: scale(1)   rotate(var(--r, 0deg)); }
}

/* ── Extra polish animations ── */
/* Card hover glow on polaroids */
@keyframes card-pulse {
  0%, 100% { box-shadow: 2px 4px 12px rgba(227,97,128,.13); }
  50%       { box-shadow: 2px 8px 28px rgba(227,97,128,.28); }
}

/* ── Hamburger mobile ── */
@media (max-width: 640px) {
  .nav-links { display: none; }
  .nav-links.open {
    display: flex; flex-direction: column;
    position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(255,255,255,0.98);
    border-bottom: 3px solid #f9a8c0;
    padding: 1rem; gap: .4rem; z-index: 300;
  }
  .hamburger {
    display: flex; flex-direction: column; gap: 5px;
    background: none; border: none; cursor: pointer; padding: .4rem; margin-left: auto;
  }
  .hamburger span { width: 22px; height: 2.5px; background: #e36180; border-radius: 2px; display: block; }
  nav.site-nav { position: relative; }
  .section { padding: 2.5rem 1.2rem; }
  .section-title { font-size: 1.9rem; }
}