/* ═══════════════════════════════════════════
   ROOT PALETTE — LOCKED. DO NOT CHANGE.
═══════════════════════════════════════════ */
:root {
  --bg-dark:      #0a0504;
  --bg-mid:       #120907;
  --accent-pink:  #ff6b9d;
  --accent-gold:  #ffd700;
  --accent-peach: #ffb347;
  --text-primary: #fff5f7;
  --text-soft:    #ffccd5;
  --pixel-border: #ff6b9d;
  --ease-premium: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring:  cubic-bezier(0.16, 1, 0.3, 1);
}

/* ═══════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  background: var(--bg-dark);
  color: var(--text-primary);
  font-family: 'VT323', monospace;
  overflow-x: hidden;
}

/* ═══════════════════════════════════════════
   CRT SCANLINE — hero section only, disabled mobile
═══════════════════════════════════════════ */
@media (min-width: 481px) and (prefers-reduced-motion: no-preference) {
  #hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 3px,
      rgba(0,0,0,0.04) 3px,
      rgba(0,0,0,0.04) 4px
    );
    pointer-events: none;
    z-index: 5;
  }
}

/* ═══════════════════════════════════════════
   NOISE GRAIN — disabled on mobile for perf
═══════════════════════════════════════════ */
.noise-svg {
  position: fixed;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 999;
}
@media (max-width: 480px) {
  .noise-svg { display: none; }
}

/* ═══════════════════════════════════════════
   SCROLL PROGRESS BAR
═══════════════════════════════════════════ */
#scroll-bar {
  position: fixed;
  top: 0; left: 0;
  height: 4px;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-pink), var(--accent-gold));
  z-index: 1001;
  transition: width 0.08s linear;
}

/* ═══════════════════════════════════════════
   PIXEL CURSOR DOT — skill rule: no custom cursors
   Hidden; JS restores native cursor on touch
═══════════════════════════════════════════ */
#pixel-cursor { display: none; }

/* ═══════════════════════════════════════════
   CURSOR TRAIL CANVAS
═══════════════════════════════════════════ */
#cursor-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 997;
}

/* ═══════════════════════════════════════════
   LOADING SCREEN — terminal aesthetic
═══════════════════════════════════════════ */
#loading-screen {
  position: fixed;
  inset: 0;
  background: #000000;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.8s var(--ease-premium), visibility 0.8s var(--ease-premium);
}
#loading-screen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loading-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.4rem;
  width: min(400px, 88vw);
}
.terminal-messages {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem;
  color: #ffffff;
  line-height: 2.2;
  min-height: 5.5rem;
  letter-spacing: 0.04em;
}
.terminal-messages .t-line {
  display: block;
  opacity: 0;
  white-space: nowrap;
}
.terminal-messages .t-line.visible {
  opacity: 1;
}
.terminal-messages .t-line.done::before { content: '> '; color: #888888; }
.loading-track {
  width: 100%;
  height: 18px;
  border: 4px solid #ffffff;
  box-shadow: 4px 4px 0 #444444;
  background: #111111;
}
.loading-fill {
  height: 100%;
  width: 0%;
  background: #ffffff;
  transition: width 0.06s linear;
}

/* ═══════════════════════════════════════════
   STARFIELD — 3 depth layers
═══════════════════════════════════════════ */
.star-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
#star-layer-1 { z-index: 0; }
#star-layer-2 { z-index: 1; }
#star-layer-3 { z-index: 2; }

.star {
  position: absolute;
  background: #fff;
  image-rendering: pixelated;
}
@media (prefers-reduced-motion: no-preference) {
  .star { animation: twinkle var(--dur, 2s) var(--delay, 0s) ease-in-out infinite alternate; }
}
@keyframes twinkle {
  from { opacity: 0.1; transform: scale(0.8); }
  to   { opacity: 1;   transform: scale(1.5); }
}

/* ═══════════════════════════════════════════
   FLOATING HEARTS
═══════════════════════════════════════════ */
#hearts-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}
.float-heart {
  position: absolute;
  bottom: -60px;
  opacity: 0;
  user-select: none;
  filter: drop-shadow(0 0 4px var(--accent-pink));
}
@media (prefers-reduced-motion: no-preference) {
  .float-heart {
    animation: floatHeart var(--fdur,6s) var(--fdelay,0s) ease-in infinite;
  }
}
@keyframes floatHeart {
  0%   { opacity: 0;   transform: translateY(0) scale(0.7) rotate(-8deg); }
  12%  { opacity: 0.85; }
  75%  { opacity: 0.5; }
  100% { opacity: 0;   transform: translateY(-115vh) scale(1.2) rotate(12deg); }
}

/* ═══════════════════════════════════════════
   PIXEL UTILITIES
═══════════════════════════════════════════ */
.pixel-border {
  border: 4px solid var(--pixel-border);
  box-shadow: 6px 6px 0 var(--accent-gold);
}

.pixel-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.65rem;
  line-height: 1.6;
  padding: 14px 24px;
  background: var(--accent-pink);
  color: var(--bg-dark);
  border: none;
  cursor: pointer;
  box-shadow: 5px 5px 0 var(--accent-gold), inset -2px -2px 0 rgba(0,0,0,0.22);
  display: inline-block;
  text-decoration: none;
  letter-spacing: 0.06em;
  transition: background 0.2s var(--ease-spring), color 0.2s var(--ease-spring), box-shadow 0.15s var(--ease-premium), transform 0.1s var(--ease-spring);
}
.pixel-btn:hover {
  background: var(--accent-gold);
  color: var(--bg-dark);
  box-shadow: 7px 7px 0 var(--accent-pink), inset -2px -2px 0 rgba(0,0,0,0.2);
}
@media (prefers-reduced-motion: no-preference) {
  .pixel-btn:active {
    transform: translate(3px,3px);
    box-shadow: 2px 2px 0 var(--accent-gold);
  }
}

.section-title {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(0.95rem, 3.5vw, 1.7rem);
  color: var(--accent-pink);
  text-align: center;
  margin-bottom: 3.5rem;
  letter-spacing: 0.06em;
  text-shadow: 0 0 20px rgba(255,107,157,0.35), 4px 4px 0 rgba(255,107,157,0.15);
}

/* Section dividers — CSS border instead of text glyphs */
.section-divider {
  text-align: center;
  padding: 3rem 0 2.5rem;
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
}
.section-divider::before,
.section-divider::after {
  content: '';
  flex: 1;
  max-width: 160px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,107,157,0.3), transparent);
  display: block;
}
.section-divider span {
  font-size: 1rem;
  color: var(--accent-pink);
  margin: 0 0.8rem;
  display: inline-block;
  filter: drop-shadow(0 0 6px var(--accent-pink));
}
@media (prefers-reduced-motion: no-preference) {
  .section-divider span {
    animation: divider-pulse 2s ease-in-out infinite alternate;
  }
}
@keyframes divider-pulse {
  from { opacity: 0.7; transform: scale(1); }
  to   { opacity: 1;   transform: scale(1.3); }
}

/* Scroll reveal — IntersectionObserver driven */
.reveal-card {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.75s var(--ease-spring),
              transform 0.75s var(--ease-spring);
}
.reveal-card.visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal-card { opacity: 1; transform: none; transition: none; }
}

/* ScrollTrigger-driven elements start visible — GSAP sets start state */
.st-driven { opacity: 1; transform: none; transition: none; }

/* Atmospheric section tints */
section {
  position: relative;
  z-index: 4;
}
#hero::before      { content:''; position:absolute; inset:0; background: radial-gradient(ellipse at 50% 60%, rgba(255,107,157,0.06) 0%, transparent 70%); z-index:0; pointer-events:none; }
#timeline::before  { content:''; position:absolute; inset:0; background: radial-gradient(ellipse at 30% 50%, rgba(255,107,157,0.05) 0%, transparent 65%); z-index:0; pointer-events:none; }
#letter::before    { content:''; position:absolute; inset:0; background: radial-gradient(ellipse at 70% 50%, rgba(255,183,71,0.05) 0%, transparent 65%);   z-index:0; pointer-events:none; }
#gallery::before   { content:''; position:absolute; inset:0; background: radial-gradient(ellipse at 40% 50%, rgba(255,107,157,0.04) 0%, transparent 70%); z-index:0; pointer-events:none; }
#cake::before      { content:''; position:absolute; inset:0; background: radial-gradient(ellipse at 60% 50%, rgba(255,215,0,0.06)   0%, transparent 60%);   z-index:0; pointer-events:none; }

/* ═══════════════════════════════════════════
   SECTION 1 — HERO
═══════════════════════════════════════════ */
#hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1.5rem;
}
.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  max-width: 720px;
  width: 100%;
}
/* GSAP sets opacity:0 on these via gsap.set() before animating in */
.hero-seq { opacity: 1; }

.hero-tagline {
  font-family: 'VT323', monospace;
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  color: var(--text-soft);
  letter-spacing: 0.2em;
  text-shadow: 0 0 16px rgba(255,204,213,0.3);
}

.hero-name {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(2.4rem, 10vw, 5.5rem);
  color: var(--text-primary);
  letter-spacing: 0.1em;
  position: relative;
  line-height: 1.2;
  text-shadow: 0 0 30px rgba(255,245,247,0.2);
}
@media (prefers-reduced-motion: no-preference) {
  /* Glitch triggers every 7s, lasts ~0.7s — long enough to clearly see */
  .hero-name.glitch { animation: glitch-main 7s infinite; }
  .hero-name.glitch::before,
  .hero-name.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    font-family: inherit; font-size: inherit; color: inherit;
    overflow: hidden;
  }
  .hero-name.glitch::before {
    color: var(--accent-pink);
    animation: glitch-before 7s infinite;
    clip-path: polygon(0 0,100% 0,100% 38%,0 38%);
  }
  .hero-name.glitch::after {
    color: var(--accent-gold);
    animation: glitch-after 7s infinite;
    clip-path: polygon(0 62%,100% 62%,100% 100%,0 100%);
  }
}
@keyframes glitch-main {
  /* sits still for 82%, then glitches hard for ~0.7s */
  0%,82%,100% { transform: none; }
  83%  { transform: skewX(4deg)   translateX(-2px); }
  85%  { transform: skewX(-3deg)  translateX(3px); }
  87%  { transform: skewX(2deg)   translateX(-1px); }
  89%  { transform: skewX(-4deg)  translateX(2px); }
  91%  { transform: skewX(1.5deg) translateX(0); }
  92%  { transform: none; }
}
@keyframes glitch-before {
  0%,82%,100% { transform: none; opacity: 0; }
  83%  { transform: translate(-6px, 0); opacity: 0.9; }
  85%  { transform: translate(6px, 0);  opacity: 0.9; }
  87%  { transform: translate(-4px, 0); opacity: 0.7; }
  89%  { transform: translate(4px, 0);  opacity: 0.8; }
  91%  { transform: translate(-2px, 0); opacity: 0.5; }
  92%  { opacity: 0; }
}
@keyframes glitch-after {
  0%,82%,100% { transform: none; opacity: 0; }
  83%  { transform: translate(6px, 2px);  opacity: 0.75; }
  85%  { transform: translate(-5px, 0);   opacity: 0.75; }
  87%  { transform: translate(4px, -1px); opacity: 0.6; }
  89%  { transform: translate(-4px, 1px); opacity: 0.7; }
  91%  { transform: translate(2px, 0);    opacity: 0.4; }
  92%  { opacity: 0; }
}

/* Day counter */
.day-counter {
  padding: 1rem 1.8rem;
  background: var(--bg-mid);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}
#days-count {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(1.2rem, 5vw, 2.4rem);
  color: var(--accent-pink);
  text-shadow: 0 0 12px rgba(255,107,157,0.5);
}
.day-label {
  font-family: 'VT323', monospace;
  font-size: clamp(1rem, 3vw, 1.5rem);
  color: var(--text-soft);
  letter-spacing: 0.06em;
}

/* Pixel couple */
.pixel-couple { width: min(460px, 95vw); }
.couple-svg   { width: 100%; height: auto; display: block; }
.star-blink   {}
@media (prefers-reduced-motion: no-preference) {
  .star-blink { animation: twinkle 1.6s ease-in-out infinite alternate; }
  .char-him, .char-her { transform-box: fill-box; transform-origin: center bottom; }
}
@media (prefers-reduced-motion: reduce) {
  .char-him animateTransform,
  .char-her animateTransform { display: none; }
}

/* Hero buttons row */
.hero-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* PRESS START — minimal pixel text, no box */
.press-start-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(0.75rem, 2.5vw, 1rem);
  color: var(--text-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  letter-spacing: 0.08em;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  user-select: none;
  transition: color 0.2s var(--ease-spring);
}
.press-start-btn:hover { color: var(--accent-pink); }

.ps-arrow {
  font-size: 0.7em;
  line-height: 1;
}
.ps-text {}

@media (prefers-reduced-motion: no-preference) {
  .press-start-btn { animation: blink-btn 1.2s step-end infinite; }
}
@keyframes blink-btn {
  0%,49% { opacity: 1; }
  50%,100%{ opacity: 0; }
}

/* ═══════════════════════════════════════════
   DEDICATION SECTION
═══════════════════════════════════════════ */
#dedication {
  min-height: 55vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 1.5rem;
  text-align: center;
}
.dedication-inner { max-width: 600px; }
.dedication-text {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(1rem, 4vw, 1.8rem);
  color: var(--text-primary);
  line-height: 1.8;
  margin-bottom: 1.5rem;
  text-shadow: 0 0 30px rgba(255,245,247,0.15);
}
.dedication-sub {
  font-family: 'VT323', monospace;
  font-size: clamp(1.4rem, 5vw, 2.2rem);
  color: var(--accent-pink);
  letter-spacing: 0.3em;
  text-shadow: 0 0 16px rgba(255,107,157,0.4);
}

/* ═══════════════════════════════════════════
   SECTION 2 — MEMORY TIMELINE
═══════════════════════════════════════════ */
#timeline {
  padding: 5rem 1rem 8rem;
  max-width: 940px;
  margin: 0 auto;
}
.timeline-line {
  position: absolute;
  left: 50%;
  top: 8rem;
  bottom: 3rem;
  width: 4px;
  background: linear-gradient(to bottom, transparent, var(--accent-pink) 8%, var(--accent-pink) 92%, transparent);
  transform: translateX(-50%);
}
@media (max-width: 620px) {
  .timeline-line { left: 22px; }
}

.memory-card {
  position: relative;
  background: var(--bg-mid);
  background-image: radial-gradient(ellipse at center, var(--card-glow, transparent) 0%, transparent 80%);
  padding: 1.5rem;
  width: calc(50% - 2.8rem);
  margin-bottom: 3.2rem;
  transition-delay: 0.08s;
}
.memory-card::after {
  content: '❤';
  position: absolute;
  top: 50%;
  font-size: 1.3rem;
  color: var(--accent-pink);
  transform: translateY(-50%);
  filter: drop-shadow(0 0 4px var(--accent-pink));
}
.left-card  { margin-left: 0; margin-right: auto; }
.right-card { margin-left: auto; margin-right: 0; }
.left-card::after  { right: -3.6rem; }
.right-card::after { left:  -3.6rem; }

@media (max-width: 620px) {
  .memory-card { width: calc(100% - 3.2rem); margin-left: 3.2rem !important; margin-right: 0 !important; }
  .memory-card::after { left: -2.6rem; right: auto; }
}

.memory-date {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem;
  color: var(--accent-gold);
  margin-bottom: 0.9rem;
  letter-spacing: 0.05em;
}
.memory-date-gold { color: var(--accent-gold); text-shadow: 0 0 8px rgba(255,215,0,0.5); }
.memory-img-wrap {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  margin-bottom: 0.9rem;
  background: var(--bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.memory-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.memory-placeholder { width: 55px; height: 55px; }
.memory-text {
  font-family: 'Crimson Text', Georgia, serif;
  font-style: italic;
  font-size: 1.25rem;
  color: var(--text-soft);
  line-height: 1.75;
  text-wrap: balance;
}

/* ═══════════════════════════════════════════
   SECTION 3 — LOVE LETTER
═══════════════════════════════════════════ */
#letter {
  padding: 5rem 1.5rem 8rem;
  text-align: center;
}

.envelope-wrap { display: flex; justify-content: center; margin-bottom: 2.5rem; }
.envelope { width: 110px; height: 76px; position: relative; }
.envelope-flap {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 50%;
  background: var(--accent-peach);
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  transform-origin: top center;
  transition: transform 0.65s ease;
  z-index: 2;
}
.envelope.open .envelope-flap { transform: rotateX(180deg); }
.envelope-body {
  position: absolute;
  inset: 0;
  background: var(--accent-peach);
  border: 3px solid var(--accent-pink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.envelope-heart { width: 44px; height: auto; }

/* Letter container — parchment feel */
.letter-container {
  max-width: 700px;
  margin: 0 auto;
  padding: 3rem 2.5rem;
  background: rgba(255,200,160,0.04);
  position: relative;
  text-align: left;
}
/* Corner roses */
.letter-rose {
  position: absolute;
  width: 36px; height: 46px;
  pointer-events: none;
}
.letter-rose.tl { top: 8px;  left: 8px;  }
.letter-rose.tr { top: 8px;  right: 8px; }
.letter-rose.bl { bottom: 8px; left: 8px;  }
.letter-rose.br { bottom: 8px; right: 8px; }

.letter-text {
  font-family: 'Crimson Text', Georgia, serif;
  font-style: italic;
  font-size: clamp(1.1rem, 2.4vw, 1.38rem);
  color: var(--text-soft);
  line-height: 1.95;
  min-height: 3em;
  padding: 0 1rem;
}
.letter-text p { margin-bottom: 1.15em; }
.letter-text p:last-child { margin-bottom: 0; }
.tw-cursor {
  display: inline-block;
  width: 2px; height: 1.1em;
  background: var(--accent-pink);
  margin-left: 2px;
  vertical-align: text-bottom;
}
@media (prefers-reduced-motion: no-preference) {
  .tw-cursor { animation: blink-text 0.72s step-end infinite; }
}
@keyframes blink-text { 0%,100% { opacity:1; } 50% { opacity:0; } }

/* ═══════════════════════════════════════════
   SECTION 4 — PHOTO GALLERY (Polaroids)
═══════════════════════════════════════════ */
#gallery {
  padding: 5rem 1.5rem 8rem;
  max-width: 1040px;
  margin: 0 auto;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
@media (min-width: 680px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Polaroid cards */
.gallery-item {
  transition-delay: calc(var(--i,0) * 0.09s);
}
.polaroid {
  background: #fff8f0;
  padding: 10px 10px 32px;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.4), 8px 8px 0 rgba(255,107,157,0.2);
  transform: rotate(var(--rot, 0deg));
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s var(--ease-spring);
  position: relative;
  display: block;
  line-height: 0;
}
.gallery-item:nth-child(1) .polaroid { --rot: -2.5deg; }
.gallery-item:nth-child(2) .polaroid { --rot:  1.8deg; }
.gallery-item:nth-child(3) .polaroid { --rot: -1.2deg; }
.gallery-item:nth-child(4) .polaroid { --rot:  2.2deg; }
.gallery-item:nth-child(5) .polaroid { --rot: -0.8deg; }
.gallery-item:nth-child(6) .polaroid { --rot:  1.5deg; }

.gallery-item:hover .polaroid {
  transform: rotate(0deg) scale(1.02);
  box-shadow: 6px 6px 0 var(--accent-gold), 10px 10px 0 rgba(255,107,157,0.3);
  z-index: 10;
}
.polaroid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}
.gallery-placeholder {
  width: 100%;
  aspect-ratio: 1;
  display: none;
  align-items: center;
  justify-content: center;
  background: #ede0d4;
}
.gallery-placeholder svg { width: 42px; height: 42px; }

/* LIGHTBOX */
#lightbox {
  position: fixed;
  inset: 0;
  background: rgba(18,12,28,0.97);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s var(--ease-premium), visibility 0.32s var(--ease-premium);
}
#lightbox.open { opacity: 1; visibility: visible; }
#lightbox-img {
  max-width: 90vw;
  max-height: 86vh;
  border: 4px solid var(--accent-pink);
  box-shadow: 10px 10px 0 var(--accent-gold), 0 0 40px rgba(255,107,157,0.3);
}
#lightbox-close {
  position: absolute;
  top: 1.4rem; right: 1.4rem;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.75rem;
  background: none;
  border: 2px solid var(--accent-pink);
  color: var(--accent-pink);
  /* Minimum 44px tap target */
  min-width: 44px;
  min-height: 44px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ═══════════════════════════════════════════
   SECTION 5 — BIRTHDAY CAKE
═══════════════════════════════════════════ */
#cake {
  padding: 5rem 1rem 8rem;
  text-align: center;
}

/* Theater curtain reveal */
.cake-reveal-wrapper { position: relative; display: inline-block; width: 100%; }
#cake-curtain {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  pointer-events: none;
  overflow: hidden;
}
.curtain-panel {
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
  background: repeating-linear-gradient(
    to bottom,
    var(--accent-pink) 0px,
    #c84d7a 8px,
    var(--accent-pink) 8px,
    var(--accent-pink) 16px
  );
  transition: transform 1.2s cubic-bezier(0.77,0,0.175,1);
}
.curtain-panel.left  { left: 0;  transform-origin: left center; }
.curtain-panel.right { right: 0; transform-origin: right center; }
#cake-curtain.open .curtain-panel.left  { transform: translateX(-100%); }
#cake-curtain.open .curtain-panel.right { transform: translateX(100%);  }
.curtain-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.6rem;
  color: var(--accent-gold);
  letter-spacing: 0.1em;
  text-align: center;
  z-index: 21;
  text-shadow: 0 0 8px var(--accent-gold);
}
@media (prefers-reduced-motion: no-preference) {
  .curtain-label { animation: blink-btn 0.9s step-end infinite; }
}

.cake-content {
  padding: 3rem 1rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* Candles */
.candles-row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 0;
}
.candle { display: flex; flex-direction: column; align-items: center; }
.flame {
  width: 12px; height: 20px;
  background: radial-gradient(ellipse at 50% 80%, var(--accent-gold) 25%, var(--accent-peach) 65%, transparent 100%);
  border-radius: 50% 50% 22% 22%;
  margin-bottom: 2px;
  box-shadow: 0 0 10px var(--accent-gold), 0 0 22px rgba(255,215,0,0.4);
}
@media (prefers-reduced-motion: no-preference) {
  .flame { animation: flicker 0.14s ease-in-out infinite alternate; }
}
@keyframes flicker {
  from { transform: scaleY(1)    rotate(-2.5deg); opacity: 1; }
  to   { transform: scaleY(0.82) rotate(2.5deg);  opacity: 0.88; }
}
.flame.blown { display: none; }
.candle-body { width: 14px; height: 30px; border-radius: 2px; }
.c1 { background: var(--accent-pink); }
.c2 { background: var(--accent-gold); }
.c3 { background: var(--accent-peach); }

/* CSS Cake */
.cake-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto 2.8rem;
  padding: 1.6rem 3rem 2.2rem;
  background: var(--bg-mid);
  border: 4px solid var(--pixel-border);
  box-shadow: 6px 6px 0 var(--accent-gold);
}
.cake { display: flex; flex-direction: column; align-items: center; }
.cake-top {
  width: 150px; height: 44px;
  background: var(--accent-pink);
  border: 3px solid var(--bg-dark);
  position: relative;
  overflow: hidden;
}
.frosting-squiggle {
  position: absolute;
  bottom: -8px; left: -12px;
  width: 180px; height: 18px;
  background: repeating-radial-gradient(circle at 14px 0, #fff5f7 0 7px, transparent 7px 26px);
  opacity: 0.35;
}
.cake-mid {
  width: 200px; height: 54px;
  background: var(--accent-peach);
  border: 3px solid var(--bg-dark);
  border-top: none;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.cake-base {
  width: 245px; height: 60px;
  background: var(--accent-gold);
  border: 3px solid var(--bg-dark);
  border-top: none;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.cake-plate {
  width: 285px; height: 16px;
  background: var(--text-soft);
  border: 3px solid var(--bg-dark);
  border-top: none;
  border-radius: 0 0 10px 10px;
}
.cake-deco {
  font-size: 1.1rem;
  color: rgba(26,26,46,0.5);
  line-height: 1;
}
.blow-btn {
  margin-bottom: 2rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── WISH OVERLAY (full screen) ── */
#wish-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26,26,46,0.97);
  z-index: 2500;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease, visibility 1s ease;
  text-align: center;
  padding: 2rem;
}
#wish-overlay.revealed {
  opacity: 1;
  visibility: visible;
}
.wish-overlay-stars {
  font-family: 'VT323', monospace;
  font-size: 2rem;
  color: var(--accent-gold);
  letter-spacing: 0.4rem;
}
.wish-overlay-title {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(0.8rem, 3vw, 1.2rem);
  color: var(--accent-pink);
  letter-spacing: 0.08em;
  text-shadow: 0 0 20px rgba(255,107,157,0.5);
}
.wish-overlay-text {
  max-width: 560px;
}
.wish-overlay-text p {
  font-family: 'Crimson Text', Georgia, serif;
  font-style: italic;
  font-size: clamp(1.3rem, 3.5vw, 1.7rem);
  color: var(--text-soft);
  line-height: 1.9;
  margin-bottom: 1em;
}
.wish-overlay-text p:last-child { margin-bottom: 0; }
.wish-close-btn {
  font-size: 0.55rem;
  padding: 10px 18px;
  background: transparent;
  border: 2px solid var(--accent-gold);
  color: var(--accent-gold);
  box-shadow: 3px 3px 0 var(--accent-gold);
}

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
#footer {
  position: relative;
  z-index: 4;
  text-align: center;
  padding: 3rem 1rem 2.5rem;
  border-top: 2px solid rgba(255,107,157,0.15);
}
.footer-stars {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  margin-bottom: 1.2rem;
  flex-wrap: wrap;
}
.footer-stars span {
  color: var(--accent-pink);
  font-size: 0.9rem;
}
@media (prefers-reduced-motion: no-preference) {
  .footer-stars span:nth-child(odd)  { animation: twinkle 2s 0s    ease-in-out infinite alternate; }
  .footer-stars span:nth-child(even) { animation: twinkle 2s 1s ease-in-out infinite alternate; }
}
.footer-text {
  font-family: 'VT323', monospace;
  font-size: 1.5rem;
  color: var(--text-soft);
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}
.footer-date {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(0.52rem, 1.5vw, 0.62rem);
  color: rgba(255,245,247,0.25);
  letter-spacing: 0.1em;
}
.konami-hint {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(0.48rem, 1.2vw, 0.58rem);
  color: transparent;
  margin-top: 1rem;
  letter-spacing: 0.08em;
  transition: color 1.2s var(--ease-premium);
}
.konami-hint.visible { color: var(--accent-gold); }

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 480px) {
  .pixel-btn       { font-size: 0.52rem; padding: 12px 16px; }
  .section-title   { font-size: 0.85rem; }
  .letter-container{ padding: 2rem 1.2rem; }
  .cake-wrap       { padding: 1.2rem 1.6rem 1.8rem; }
  .cake-top  { width: 110px; }
  .cake-mid  { width: 148px; }
  .cake-base { width: 186px; }
  .cake-plate{ width: 216px; }
  .letter-rose { width: 26px; height: 34px; }

  /* Single column gallery on smallest phones */
  .gallery-grid { grid-template-columns: 1fr; gap: 1.4rem; }

  /* Tighter timeline rail on very small screens */
  .timeline-line { left: 16px; }
  .memory-card {
    width: calc(100% - 2.4rem);
    margin-left: 2.4rem !important;
    margin-right: 0 !important;
  }
  .memory-card::after { left: -2rem; right: auto; }
}

@media (max-width: 360px) {
  .memory-card {
    width: calc(100% - 2rem);
    margin-left: 2rem !important;
  }
  .timeline-line { left: 12px; }
}