/* ══════════════════════════════════════════════════════
   FORGIVE — An apology for Siyuu
   Visual-first, emoji-heavy, phone-optimized
   ══════════════════════════════════════════════════════ */

/* ── CSS VARIABLES ── */
:root {
  --bg: #080d1a;
  --bg2: #0d1526;
  --card: #111c30;
  --card-glass: rgba(17, 28, 48, 0.6);
  --amber: #f4a94e;
  --rose: #e8748a;
  --rose-glow: rgba(232, 116, 138, 0.25);
  --text: #e8dfc8;
  --muted: #7a8aaa;
  --white: #f5f0e8;
  --red-pain: #c94a5e;
}

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

html {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', 'Inter', sans-serif;
  overflow-x: hidden;
  cursor: default;
  line-height: 1.6;
  /* Safe area for Samsung notch */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* Thin scrollbar */
body::-webkit-scrollbar { width: 3px; }
body::-webkit-scrollbar-track { background: var(--bg); }
body::-webkit-scrollbar-thumb {
  background: rgba(232, 116, 138, 0.3);
  border-radius: 4px;
}

/* ── Noise texture overlay ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
}

/* ══════════════════════════════════════════
   CANVASES — Rain & Stars
   ══════════════════════════════════════════ */
#rain-canvas {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.35;
}

#starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ══════════════════════════════════════════
   ENTRANCE OVERLAY
   ══════════════════════════════════════════ */
#entrance-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 1.5s ease, visibility 1.5s ease;
}

#entrance-overlay.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.entrance-content {
  text-align: center;
  padding: 2rem 1.5rem;
  max-width: 400px;
}

/* Animated emoji stage with tears */
.entrance-emoji-stage {
  position: relative;
  margin-bottom: 2rem;
  display: inline-block;
}

.entrance-broken-heart {
  font-size: 5rem;
  animation: heartPain 2s ease-in-out infinite;
  filter: drop-shadow(0 0 25px rgba(201, 74, 94, 0.5));
}

@keyframes heartPain {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.1); }
  50% { transform: scale(0.92); }
  75% { transform: scale(1.05); }
}

/* Tears falling from heart */
.entrance-tears {
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  display: flex;
  justify-content: space-between;
}

.tear {
  font-size: 1rem;
  animation: tearDrop 2s ease-in infinite;
  opacity: 0;
}

.tear.t1 { animation-delay: 0s; }
.tear.t2 { animation-delay: 0.6s; }
.tear.t3 { animation-delay: 1.2s; }

@keyframes tearDrop {
  0% { transform: translateY(0); opacity: 0.8; }
  100% { transform: translateY(40px); opacity: 0; }
}

.entrance-whisper {
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.5rem;
  animation: fadeIn 1s ease forwards 0.5s;
  opacity: 0;
}

/* Entrance poem — replaces plain title/sub */
.entrance-poem {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-style: italic;
  font-weight: 300;
  color: var(--text);
  line-height: 2;
  margin-bottom: 2.5rem;
  text-align: center;
  opacity: 0;
  animation: fadeUp 1.2s ease forwards 0.8s;
}

.entrance-poem p {
  margin-bottom: 0.2rem;
}

.entrance-poem em {
  color: rgba(232, 208, 200, 0.8);
}

/* Entrance button — touch-optimized */
.entrance-btn {
  background: transparent;
  border: 1px solid rgba(232, 116, 138, 0.4);
  color: var(--rose);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem;
  letter-spacing: 0.12em;
  padding: 1rem 2.5rem;
  border-radius: 50px;
  cursor: pointer;
  min-height: 52px;
  animation: fadeUp 1s ease forwards 1.6s;
  opacity: 0;
  transition: all 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

.entrance-btn:active {
  background: rgba(232, 116, 138, 0.15);
  transform: scale(0.97);
}

/* ══════════════════════════════════════════
   SHARED SECTION STYLES
   ══════════════════════════════════════════ */
.section {
  position: relative;
  z-index: 2;
  padding: 4rem 1.5rem;
}

.section-inner {
  max-width: 500px;
  margin: 0 auto;
  width: 100%;
}

.hidden-section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
}

.hidden-section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Visual separator with emoji */
.visual-sep {
  text-align: center;
  margin-bottom: 1rem;
}

.sep-emoji {
  font-size: 2.5rem;
  display: inline-block;
  animation: gentleBounce 3s ease-in-out infinite;
}

@keyframes gentleBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Section heading */
.section-heading {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-weight: 300;
  text-align: center;
  color: var(--white);
  margin-bottom: 2.5rem;
  line-height: 1.3;
}

.section-heading em {
  font-style: italic;
  color: var(--rose);
}

/* Fade-in elements */
.fade-element {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  transition-delay: var(--delay, 0s);
}

.fade-element.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Section dividers */
.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem 2rem;
  position: relative;
  z-index: 2;
}

.divider-line {
  flex: 1;
  max-width: 80px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(232, 116, 138, 0.3), transparent);
}

.divider-emoji {
  font-size: 1.5rem;
  animation: pulse-emoji 2s ease-in-out infinite;
}

@keyframes pulse-emoji {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.2); opacity: 1; }
}

/* ══════════════════════════════════════════
   SECTION 1: EMOTION CARDS — Visual-first
   ══════════════════════════════════════════ */
#weight {
  background: linear-gradient(to bottom, var(--bg), var(--bg2));
}

.emotion-strip {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.emotion-card {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  background: var(--card-glass);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(201, 74, 94, 0.12);
  border-radius: 14px;
  padding: 1.3rem 1.5rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

.emotion-card:active {
  transform: scale(0.98);
}

.emotion-emoji-wrap {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  background: rgba(201, 74, 94, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.emotion-emoji {
  font-size: 1.6rem;
}

.emotion-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--white);
  margin-bottom: 0.2rem;
}

.emotion-card p {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.5;
}

/* Poetry blocks — used between visual elements */
.poem-block {
  text-align: center;
  margin-bottom: 2rem;
  padding: 0 0.5rem;
}

.poem-block p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  font-weight: 300;
  color: var(--muted);
  line-height: 2;
}

.poem-block em {
  color: var(--text);
}

/* Single poem line emphasis */
.poem-single {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 300;
  font-style: italic;
  color: var(--muted);
  text-align: center;
}

.poem-single em {
  color: var(--text);
}

/* Big emotion block */
.big-emotion {
  text-align: center;
  margin-top: 2rem;
  padding: 2rem;
}

.big-emoji-pulse {
  font-size: 4rem;
  animation: bigPulse 3s ease-in-out infinite;
  margin-bottom: 0.8rem;
}

@keyframes bigPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 15px rgba(201,74,94,0.3)); }
  50% { transform: scale(1.15); filter: drop-shadow(0 0 30px rgba(201,74,94,0.5)); }
}

/* ══════════════════════════════════════════
   SECTION 2: THE LETTER
   ══════════════════════════════════════════ */
#letter {
  background: linear-gradient(to bottom, var(--bg2), var(--bg), var(--bg2));
}

.letter-container {
  max-width: 100%;
}

.letter-paper {
  background: linear-gradient(135deg, #1a2540, #152035, #1a2540);
  border: 1px solid rgba(244, 169, 78, 0.1);
  border-radius: 12px;
  padding: 2rem 1.5rem;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 60px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.letter-fold {
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, transparent 50%, rgba(244, 169, 78, 0.05) 50%);
}

.letter-content {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  font-weight: 300;
  font-style: italic;
  line-height: 2;
  color: var(--text);
  min-height: 200px;
}

.letter-content p {
  margin-bottom: 1rem;
}

.typing-cursor {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background: var(--amber);
  animation: cursorBlink 1s step-end infinite;
  vertical-align: text-bottom;
  margin-left: 2px;
}

@keyframes cursorBlink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Signature */
.letter-signature {
  margin-top: 2rem;
  text-align: right;
  opacity: 0;
  transition: opacity 1s ease;
}

.letter-signature.show {
  opacity: 1;
}

.signature-line {
  display: block;
  width: 80px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--amber));
  margin-left: auto;
  margin-bottom: 0.6rem;
}

.signature-name {
  font-family: 'Dancing Script', cursive;
  font-size: 1.5rem;
  color: var(--amber);
}

.signature-date {
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  color: var(--muted);
  margin-top: 0.2rem;
}

/* ══════════════════════════════════════════
   SECTION 3: VISUAL UNDERSTAND — emoji rows
   ══════════════════════════════════════════ */
#understand {
  background: linear-gradient(to bottom, var(--bg2), var(--bg));
}

.visual-understand {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.vu-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 1.3rem;
  background: var(--card-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(244, 169, 78, 0.06);
  border-radius: 12px;
  transition: transform 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

.vu-item:active {
  transform: scale(0.98);
}

.vu-emoji {
  font-size: 2rem;
  flex-shrink: 0;
}

.vu-item p {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.6;
}

.vu-item strong {
  color: var(--white);
}

.vu-item em {
  color: var(--rose);
  font-style: italic;
}

/* ══════════════════════════════════════════
   SECTION 4: PROMISE GRID — emoji-driven
   ══════════════════════════════════════════ */
#promises {
  background: linear-gradient(to bottom, var(--bg), var(--bg2), var(--bg));
}

.promise-visual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.promise-visual {
  background: var(--card-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(232, 116, 138, 0.08);
  border-radius: 14px;
  padding: 1.5rem 1rem;
  text-align: center;
  transition: transform 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

.promise-visual:active {
  transform: scale(0.96);
}

.promise-emoji-big {
  font-size: 2.5rem;
  margin-bottom: 0.8rem;
  animation: gentleBounce 3s ease-in-out infinite;
  /* Stagger bounces */
}

.promise-visual:nth-child(2) .promise-emoji-big { animation-delay: 0.3s; }
.promise-visual:nth-child(3) .promise-emoji-big { animation-delay: 0.6s; }
.promise-visual:nth-child(4) .promise-emoji-big { animation-delay: 0.9s; }
.promise-visual:nth-child(5) .promise-emoji-big { animation-delay: 1.2s; }
.promise-visual:nth-child(6) .promise-emoji-big { animation-delay: 1.5s; }

.promise-visual p {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.6;
}

.promise-visual strong {
  color: var(--white);
}

/* ══════════════════════════════════════════
   SECTION 5: FINALE
   ══════════════════════════════════════════ */
#finale {
  padding: 5rem 1.5rem;
  background: linear-gradient(to bottom, var(--bg), var(--bg2));
  overflow: hidden;
}

.finale-inner {
  text-align: center;
  position: relative;
}

/* Ambient glows */
.finale-glow {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 116, 138, 0.06) 0%, transparent 70%);
  top: 10%;
  left: 20%;
  transform: translate(-50%, -50%);
  animation: finaleGlow 6s ease-in-out infinite;
}

.finale-glow-2 {
  position: absolute;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 169, 78, 0.05) 0%, transparent 70%);
  bottom: 10%;
  right: 10%;
  animation: finaleGlow 8s ease-in-out infinite reverse;
}

@keyframes finaleGlow {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}

/* Heart repair */
.finale-heart-stage {
  margin-bottom: 2rem;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#heart-repair {
  position: relative;
}

.heart-piece {
  font-size: 4rem;
  display: inline-block;
  filter: drop-shadow(0 0 20px rgba(232, 116, 138, 0.4));
  transition: all 1.5s ease;
}

.heart-piece.healed {
  animation: heartHeal 1.5s ease forwards;
  filter: drop-shadow(0 0 40px rgba(232, 116, 138, 0.8));
}

@keyframes heartHeal {
  0% { transform: scale(1); }
  30% { transform: scale(1.3); }
  60% { transform: scale(0.9); }
  100% { transform: scale(1.1); }
}

.floating-heart {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  animation: floatHeart 3s ease-out forwards;
}

@keyframes floatHeart {
  0% { opacity: 1; transform: translate(0, 0) scale(0.5); }
  50% { opacity: 0.8; }
  100% { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(1.2); }
}

/* Finale poem — lines reveal one by one */
.finale-poem {
  margin-bottom: 2.5rem;
  text-align: center;
}

.poem-line {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--muted);
  line-height: 2.2;
  opacity: 0;
  transform: translateY(10px);
  animation: revealLine 1s ease forwards;
  animation-delay: var(--line-delay, 0s);
  animation-play-state: paused;
}

.finale-poem.visible .poem-line {
  animation-play-state: running;
}

.poem-line.highlight-line {
  font-size: 1.4rem;
  color: var(--rose);
  margin-top: 0.5rem;
}

@keyframes revealLine {
  to { opacity: 1; transform: translateY(0); }
}

/* Emotional closer — the indirect plea */
.finale-closer {
  text-align: center;
  margin: 3rem 0;
  position: relative;
}

.closer-emoji {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  animation: gentleBounce 3s ease-in-out infinite;
}

.closer-poem {
  font-family: 'Dancing Script', cursive;
  font-size: 1.8rem;
  line-height: 1.6;
  background: linear-gradient(135deg, var(--rose), var(--amber));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: closerPulse 4s ease-in-out infinite;
}

@keyframes closerPulse {
  0%, 100% { filter: brightness(1); transform: scale(1); }
  50% { filter: brightness(1.1); transform: scale(1.02); }
}

#hearts-float {
  position: absolute;
  inset: -60px;
  pointer-events: none;
  overflow: hidden;
}

.mini-heart {
  position: absolute;
  animation: miniFloat linear infinite;
  opacity: 0;
}

@keyframes miniFloat {
  0% { transform: translateY(80px) rotate(0deg); opacity: 0; }
  10% { opacity: 0.8; }
  90% { opacity: 0.3; }
  100% { transform: translateY(-180px) rotate(360deg); opacity: 0; }
}

/* Feeling lines — emoji + short text */
.finale-feels {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.feel-line {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  justify-content: center;
}

.feel-emoji {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.feel-line p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  font-style: italic;
  color: var(--muted);
}

/* Finale quote */
.finale-quote {
  max-width: 400px;
  margin: 0 auto 3rem;
}

.finale-quote .quote-ornament {
  font-family: 'Dancing Script', cursive;
  font-size: 3.5rem;
  color: rgba(244, 169, 78, 0.15);
  line-height: 0;
  display: block;
  margin-bottom: 0.8rem;
}

.finale-quote p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 300;
  line-height: 1.8;
  color: rgba(232, 208, 200, 0.6);
}

/* ══════════════════════════════════════════
   COUNTER
   ══════════════════════════════════════════ */
.counter-section {
  padding: 2rem 1.5rem;
  background: var(--card-glass);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(244, 169, 78, 0.08);
  border-radius: 16px;
  max-width: 400px;
  margin: 0 auto;
}

.counter-emoji {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 0.5rem;
  animation: gentleBounce 3s ease-in-out infinite;
}

.counter-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-style: italic;
  color: var(--text);
  margin-bottom: 1.5rem;
  text-align: center;
}

.counter-display {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.counter-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 55px;
}

.counter-number {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.2rem;
  font-weight: 600;
  background: linear-gradient(135deg, var(--amber), var(--rose));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.counter-text {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.3rem;
}

.counter-since {
  font-size: 0.75rem;
  color: var(--muted);
  text-align: center;
  margin-top: 1.2rem;
  font-style: italic;
}

/* ══════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════ */
footer {
  padding: 3rem 1.5rem;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  position: relative;
  z-index: 2;
}

.footer-hearts-big {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  animation: gentleBounce 3s ease-in-out infinite;
}

.footer-title {
  font-family: 'Dancing Script', cursive;
  font-size: 2rem;
  background: linear-gradient(135deg, var(--amber), var(--rose));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.4rem;
}

.footer-sub {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 1.5rem;
}

.footer-hearts {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.fh {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  animation: twinkle 2s ease-in-out infinite;
}

.fh:nth-child(1) { background: var(--amber); animation-delay: 0s; }
.fh:nth-child(2) { background: var(--rose); animation-delay: .3s; }
.fh:nth-child(3) { background: var(--amber); animation-delay: .6s; }
.fh:nth-child(4) { background: var(--rose); animation-delay: .9s; }
.fh:nth-child(5) { background: var(--amber); animation-delay: 1.2s; }

@keyframes twinkle {
  0%, 100% { opacity: 0.2; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.4); }
}

.footer-copy {
  font-size: 0.68rem;
  color: rgba(122, 138, 170, 0.4);
  letter-spacing: 0.08em;
  font-style: italic;
}

/* ══════════════════════════════════════════
   TEAR PARTICLES
   ══════════════════════════════════════════ */
.tear-particle {
  position: fixed;
  width: 3px;
  height: 6px;
  border-radius: 0 0 50% 50%;
  pointer-events: none;
  z-index: 1;
  animation: tearFall linear infinite;
  opacity: 0;
}

@keyframes tearFall {
  0% { transform: translateY(-20px); opacity: 0; }
  10% { opacity: 0.5; }
  100% { transform: translateY(105vh); opacity: 0; }
}

/* ══════════════════════════════════════════
   SHARED ANIMATIONS
   ══════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(25px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ══════════════════════════════════════════
   RESPONSIVE — Small phones (Galaxy A series, etc.)
   ══════════════════════════════════════════ */
@media (max-width: 360px) {
  .section-heading {
    font-size: 1.6rem;
  }

  .entrance-poem {
    font-size: 1rem;
  }

  .entrance-broken-heart {
    font-size: 4rem;
  }

  .promise-visual-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
  }

  .promise-visual {
    padding: 1.2rem 0.8rem;
  }

  .promise-emoji-big {
    font-size: 2rem;
  }

  .counter-number {
    font-size: 1.8rem;
  }

  .counter-unit {
    min-width: 48px;
  }

  .finale-ask {
    font-size: 1.8rem;
  }
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  #rain-canvas { display: none; }
}