/* ============================================================================
   Lavender Bloom Surprise — a "miss you" Paigaam.

   Four stages on one soft square: envelope → game → gift → bloom. The scene
   state machine lives in /lavender-bloom/bloom.js and only toggles classes:

     .lb-stage.is-active      stage is on stage
     .lb-stage.is-leaving     stage is fading out
     .is-opening              envelope flap raised
     .lb-cell.is-x / .is-o    a played tile
     .lb-board.is-over        game finished, win line drawn
     .lb-gift.is-open         gift tapped, box springs open
     .lb-flower.is-grown      stem has grown
     .lb-flower.is-bloomed    buds opened
     .lb-stage--bloom.is-copy title/message revealed
   ========================================================================= */

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

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #dde9f7;
}

body.lb {
  font-family: 'Quicksand', system-ui, sans-serif;
  color: #1E293B;
  touch-action: manipulation;
}

.lb-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.lb-previewbadge {
  position: fixed;
  top: 14px;
  right: 16px;
  z-index: 60;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(138, 92, 245, 0.12);
  border: 1px solid rgba(138, 92, 245, 0.35);
  color: #6d3fd4;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ stage */

.lb-backdrop {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(120% 80% at 50% 0%, #f6faff 0%, #dde9f7 60%, #cfdef3 100%);
}

.lb-square {
  position: relative;
  width: min(100vw, 100vh);
  height: min(100vw, 100vh);
  width: min(100vw, 100dvh);
  height: min(100vw, 100dvh);
  max-width: 100vw;
  max-height: 100dvh;
}

.lb-stage-shell {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 24px;
  background: #F0F7FF;
  box-shadow:
    0 30px 80px -24px rgba(45, 93, 160, 0.4),
    0 12px 30px -12px rgba(45, 93, 160, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.65);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.lb-confetti {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 40;
}

.lb-stages { position: absolute; inset: 0; }

.lb-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: clamp(18px, 5vmin, 40px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.985);
  transition: opacity 0.7s ease, transform 0.7s ease, visibility 0s linear 0.7s;
}

.lb-stage.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.7s ease 0.05s, transform 0.7s ease 0.05s, visibility 0s;
}

.lb-stage.is-leaving {
  opacity: 0;
  visibility: visible;
  transform: translateY(-12px) scale(0.99);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

/* Shared headline at the top of stages 1 & 2 */
.lb-topline {
  position: absolute;
  top: clamp(22px, 7vmin, 44px);
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(1.15rem, 4.6vmin, 1.6rem);
  color: #4a5d78;
  letter-spacing: 0.01em;
}

/* --------------------------------------------------------- stage 1 · envelope */

.lb-env {
  position: relative;
  width: min(72vmin, 320px);
  aspect-ratio: 320 / 220;
  cursor: pointer;
  outline: none;
  transition: transform 0.35s ease;
}
.lb-env:hover, .lb-env:focus-visible { transform: translateY(-4px); }
.lb-env:focus-visible { box-shadow: 0 0 0 3px rgba(45, 125, 244, 0.45); border-radius: 16px; }
.lb-env__art { position: absolute; inset: 0; filter: drop-shadow(0 18px 30px rgba(45, 93, 160, 0.25)); }

.lb-env__flap {
  transform-origin: 160px 62px;
  transition: transform 0.9s cubic-bezier(0.6, 0, 0.3, 1), opacity 0.9s ease;
}

.lb-env__inside {
  position: absolute;
  left: 0;
  right: 0;
  top: 31%;
  margin: 0;
  text-align: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(0.95rem, 3.6vmin, 1.2rem);
  color: #3B82F6;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.6s ease 0.35s, transform 0.6s ease 0.35s;
  pointer-events: none;
}

.lb-env__burst { position: absolute; inset: -18%; pointer-events: none; }
.lb-env__burst span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(169, 204, 243, 0.4) 45%, transparent 70%);
  opacity: 0;
  transform: scale(0.4);
}

.lb-stage--envelope.is-opening .lb-env__flap {
  transform: rotateX(160deg) translateY(-6px);
  opacity: 0.92;
}
.lb-stage--envelope.is-opening .lb-env__inside { opacity: 1; transform: none; }
.lb-stage--envelope.is-opening .lb-env__burst span { animation: lb-envburst 1.1s ease-out 0.25s forwards; }

@keyframes lb-envburst {
  0% { opacity: 0; transform: scale(0.4); }
  25% { opacity: 0.9; }
  100% { opacity: 0; transform: scale(1.35); }
}

.lb-hint {
  position: absolute;
  bottom: clamp(20px, 6.5vmin, 42px);
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.lb-hint__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #8BB8E8;
  animation: lb-dot 1.8s ease-in-out infinite;
}
.lb-hint__dot:nth-child(2) { animation-delay: 0.25s; }
.lb-hint__dot:nth-child(3) { animation-delay: 0.5s; }
.lb-hint__label {
  margin-left: 8px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #6f87a6;
}
@keyframes lb-dot {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(-4px); opacity: 1; }
}

/* ------------------------------------------------------------- stage 2 · game */

/* The topline joins the flow here so it can never collide with the subtitle. */
.lb-stage--game .lb-topline { position: static; margin: 0; }

.lb-stage--game { justify-content: center; gap: clamp(10px, 3vmin, 20px); }

.lb-subtitle {
  margin: 0;
  font-size: clamp(1rem, 4vmin, 1.3rem);
  font-weight: 700;
  color: #3B82F6;
  letter-spacing: 0.01em;
}

.lb-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, 2.4vmin, 14px);
  width: min(62vmin, 290px);
  aspect-ratio: 1;
  padding: clamp(10px, 3vmin, 16px);
  background: #C2DCF9;
  border-radius: 24px;
  box-shadow:
    0 22px 44px -20px rgba(45, 93, 160, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.lb-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 4px 12px -6px rgba(45, 93, 160, 0.35);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.lb-cell:hover:not(.is-x):not(.is-o) { transform: translateY(-2px); box-shadow: 0 8px 18px -8px rgba(45, 93, 160, 0.45); }
.lb-cell:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(45, 125, 244, 0.5); }
.lb-cell.is-x, .lb-cell.is-o { cursor: default; }

.lb-mark {
  display: block;
  width: 58%;
  height: 58%;
  opacity: 0;
  transform: scale(0.4) rotate(-14deg);
  transition: opacity 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lb-mark svg { width: 100%; height: 100%; display: block; }
.lb-cell.is-x .lb-mark--x, .lb-cell.is-o .lb-mark--o { opacity: 1; transform: scale(1) rotate(0deg); }

.lb-winline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.lb-board.is-over .lb-winline { opacity: 1; }
#lbWinLine {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
}
.lb-board.is-over #lbWinLine { animation: lb-drawline 0.6s ease-out 0.1s forwards; }
@keyframes lb-drawline { to { stroke-dashoffset: 0; } }

.lb-game__status {
  margin: 0;
  min-height: 1.4em;
  font-size: clamp(0.8rem, 3vmin, 0.95rem);
  color: #5b6b82;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.lb-game__status b { color: #2D7DF4; }

/* ------------------------------------------------------------- stage 3 · gift */

.lb-stage--gift { justify-content: center; gap: clamp(18px, 5vmin, 34px); }

.lb-gift {
  position: relative;
  width: min(56vmin, 240px);
  aspect-ratio: 1;
  cursor: pointer;
  outline: none;
}
.lb-gift:focus-visible { box-shadow: 0 0 0 3px rgba(45, 125, 244, 0.5); border-radius: 24px; }
.lb-gift__art {
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 20px 34px rgba(45, 93, 160, 0.35));
  animation: lb-giftbounce 1.6s ease-in-out infinite;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s ease;
}
@keyframes lb-giftbounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-10px) scale(1.02); }
}

.lb-gift__bow { transform-origin: 100px 66px; }

.lb-gift.is-open .lb-gift__art { animation: none; transform: scale(1.18) translateY(-6px); opacity: 0; }
.lb-gift__burst { position: absolute; inset: -10%; pointer-events: none; }
.lb-gift__burst i {
  position: absolute;
  left: 50%;
  top: 46%;
  width: var(--size, 10px);
  height: var(--size, 10px);
  margin: calc(var(--size, 10px) / -2);
  border-radius: 30%;
  opacity: 0;
}
.lb-gift.is-open .lb-gift__burst i { animation: lb-giftpop var(--dur, 1.4s) ease-out forwards; }
@keyframes lb-giftpop {
  0% { opacity: 0; transform: translate(0, 0) scale(0.3) rotate(0deg); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(1) rotate(var(--rot, 180deg)); }
}

.lb-gift__label {
  margin: 0;
  font-size: clamp(1.05rem, 4.4vmin, 1.45rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #2D7DF4;
  text-transform: uppercase;
  animation: lb-labelpulse 1.6s ease-in-out infinite;
}
@keyframes lb-labelpulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.05); opacity: 1; }
}
.lb-stage--gift.is-open .lb-gift__label { animation: none; opacity: 0; transition: opacity 0.4s ease; }

/* ------------------------------------------------------------ stage 4 · bloom */

.lb-stage--bloom { justify-content: flex-end; padding-bottom: clamp(26px, 7vmin, 48px); gap: 12px; }

.lb-flower {
  position: absolute;
  left: 50%;
  bottom: 40%;
  width: min(42vmin, 180px);
  aspect-ratio: 200 / 220;
  transform: translateX(-50%);
  pointer-events: none;
}
.lb-flower__art { position: absolute; inset: 0; }
/* Keep the copy clear of the bloom on short squares. */
.lb-flower__svg { transform: translateY(-6%); }

.lb-flower__stem {
  transform-origin: 100px 212px;
  transform: scaleY(0.06) translateY(4px);
  opacity: 0.9;
  transition: transform 2.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s ease;
}
.lb-flower.is-grown .lb-flower__stem { transform: none; opacity: 1; }

.lb-flower__head {
  transform-origin: 100px 88px;
  transform: scale(0.2);
  opacity: 0;
  transition: transform 1.1s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s ease;
}
.lb-flower.is-bloomed .lb-flower__head { transform: none; opacity: 1; }

.lb-sparkles { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.lb-sparkles i {
  position: absolute;
  width: var(--size, 8px);
  height: var(--size, 8px);
  left: var(--x, 50%);
  top: var(--y, 50%);
  opacity: 0;
  animation: lb-twinkle var(--dur, 2.4s) ease-in-out var(--delay, 0s) infinite;
}
.lb-sparkles i svg { width: 100%; height: 100%; display: block; }
@keyframes lb-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(90deg); }
}

.lb-finale {
  position: relative;
  z-index: 6;
  text-align: center;
  max-width: 82%;
  margin-top: clamp(120px, 30vmin, 210px);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.lb-stage--bloom.is-copy .lb-finale { opacity: 1; transform: none; }

.lb-finale__title {
  margin: 0 0 10px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2rem, 9vmin, 3rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0.01em;
}

.lb-finale__message {
  margin: 0 auto;
  max-width: 44ch;
  font-size: clamp(0.92rem, 3.4vmin, 1.08rem);
  line-height: 1.6;
  color: #1E293B;
  white-space: pre-wrap;
}

.lb-finale__hearts {
  margin: 12px 0 0;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.lb-finale__hearts .lb-heart { animation: lb-heartbeat 1.8s ease-in-out infinite; }
.lb-finale__hearts .lb-heart:nth-child(2) { animation-delay: 0.22s; }
.lb-finale__hearts .lb-heart:nth-child(3) { animation-delay: 0.44s; }
@keyframes lb-heartbeat {
  0%, 100% { transform: scale(1); }
  12% { transform: scale(1.18); }
  24% { transform: scale(1); }
}

.lb-finale__signature {
  margin: 14px 0 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(1rem, 4vmin, 1.25rem);
  color: #4a5d78;
}

/* ------------------------------------------------------------ reduced motion */

@media (prefers-reduced-motion: reduce) {
  .lb-stage, .lb-stage.is-active, .lb-stage.is-leaving { transition: opacity 0.2s ease; transform: none; }
  .lb-gift__art, .lb-gift__label, .lb-hint__dot, .lb-finale__hearts .lb-heart { animation: none; }
  .lb-env__flap, .lb-flower__stem, .lb-flower__head { transition-duration: 0.2s; }
  #lbWinLine { stroke-dasharray: none; stroke-dashoffset: 0; }
  .lb-sparkles { display: none; }
}
flower__head { transition-duration: 0.2s; }
  #lbWinLine { stroke-dasharray: none; stroke-dashoffset: 0; }
  .lb-sparkles { display: none; }
}