/* =========================================================
   Secret Garden — dreamy stylesheet
   ========================================================= */

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

:root {
  --sky-1: #f9e3e7;       /* dawn pink */
  --sky-2: #e7d6f0;       /* soft lavender */
  --sky-3: #ffe1c6;       /* peach */
  --meadow-1: #b9d8a0;    /* soft grass */
  --meadow-2: #8fb98a;    /* deeper grass */
  --paper:   #fdf6ec;     /* note paper */
  --paper-edge: #e8d8bf;
  --ink:     #5b4a3f;     /* warm brown */
  --accent:  #c75a4a;     /* rose */
  --wisp:    #fff5b8;     /* warm glow */
}

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

html, body {
  height: 100%;
  overflow: hidden;
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: var(--ink);
}

/* The dreamy backdrop — viewport-anchored, so it follows the screen
   no matter how far she's wandered. */
body {
  background:
    radial-gradient(ellipse 60% 40% at 30% 20%, rgba(255,255,255,0.55), transparent 70%),
    radial-gradient(ellipse 50% 35% at 75% 30%, rgba(255,235,210,0.45), transparent 70%),
    linear-gradient(180deg,
      var(--sky-1) 0%,
      var(--sky-2) 22%,
      var(--sky-3) 42%,
      var(--meadow-1) 62%,
      var(--meadow-2) 100%);
  background-attachment: fixed;
}

/* ---------- Title screen ---------- */
#title {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.0) 0%, rgba(249,227,231,0.6) 60%, rgba(231,214,240,0.85) 100%);
  backdrop-filter: blur(6px);
  transition: opacity 1.4s ease;
}
#title.fade-out { opacity: 0; pointer-events: none; }
#title h1 {
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.04em;
  color: var(--accent);
  text-shadow: 0 2px 16px rgba(255,255,255,0.6);
  margin-bottom: 0.4em;
}
#title p {
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  opacity: 0.75;
  font-style: italic;
  max-width: 30ch;
  line-height: 1.5;
}
#title .hint {
  margin-top: 2.5em;
  font-family: 'Caveat', cursive;
  font-size: 1.5rem;
  color: var(--ink);
  opacity: 0;
  animation: pulse 2.6s ease-in-out infinite;
  animation-delay: 1.2s;
}
@keyframes pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.9; }
}

/* ---------- Garden viewport ---------- */
#viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
}
/* The world is infinite — this element is just a transform container.
   Width/height are 0 so it doesn't clip anything; children use absolute
   world coordinates and the whole thing translates as she walks. */
#world {
  position: absolute;
  top: 0; left: 0;
  width: 0;
  height: 0;
  transition: transform 0.18s ease-out;
  will-change: transform;
}

/* Drifting clouds — viewport-anchored, drift slowly across the screen
   regardless of where in the garden she is. */
.cloud {
  position: fixed;
  width: 260px; height: 80px;
  background: radial-gradient(ellipse, rgba(255,255,255,0.65), rgba(255,255,255,0) 70%);
  filter: blur(2px);
  opacity: 0.7;
  pointer-events: none;
  left: -300px;
  animation: drift-cloud linear infinite;
  z-index: 1;
}
@keyframes drift-cloud {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(100vw + 600px)); }
}

/* tall grass tufts */
.grass {
  position: absolute;
  width: 40px;
  height: 22px;
  background: radial-gradient(ellipse at 50% 100%, var(--meadow-2) 0%, var(--meadow-1) 60%, transparent 75%);
  opacity: 0.7;
  pointer-events: none;
}

/* ---------- Flowers ----------
   Two-layer: the outer .flower handles growing (scaleY 0 → 1),
   the inner .bloom handles the gentle sway rotation. */
.flower {
  position: absolute;
  width: 80px;
  height: 136px;
  transform-origin: 50% 100%;
  pointer-events: none;
  animation: grow 1.1s cubic-bezier(0.22, 1.2, 0.36, 1) var(--grow-delay, 0s) both;
  filter: drop-shadow(0 6px 6px rgba(80, 60, 70, 0.18));
}
.bloom {
  width: 100%;
  height: 100%;
  transform-origin: 50% 100%;
  animation: sway 5s ease-in-out infinite;
}
.bloom img {
  width: 100%; height: 100%;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  /* preserve the drawing's aspect ratio, anchored to the ground */
  object-fit: contain;
  object-position: 50% 100%;
}
@keyframes grow {
  0%   { transform: scale(1, 0);     opacity: 0; }
  55%  { transform: scale(1.06, 1.08); opacity: 1; }
  78%  { transform: scale(0.97, 0.99); }
  100% { transform: scale(1, 1);     opacity: 1; }
}
@keyframes sway {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2deg); }
}

/* ---------- Note markers (the envelopes) ---------- */
.note {
  position: absolute;
  width: 70px;
  height: 70px;
  margin-left: -35px;
  margin-top: -35px;
  pointer-events: none;
  z-index: 6;
  animation: note-grow 1s cubic-bezier(0.2, 1.3, 0.3, 1) var(--grow-delay, 0s) both;
}
.note-float {
  position: relative;
  width: 100%; height: 100%;
  animation: note-float 3.6s ease-in-out infinite;
}
.note-aura {
  position: absolute;
  inset: -28px;
  background:
    radial-gradient(circle, rgba(255,235,180,0.7) 0%, rgba(255,220,200,0.35) 30%, transparent 65%);
  border-radius: 50%;
  animation: note-aura-pulse 3.4s ease-in-out infinite;
  z-index: -1;
  pointer-events: none;
  filter: blur(1px);
}
.note-letter {
  position: relative;
  display: block;
  width: 60px;
  height: 60px;
  margin: 5px auto 0;
  filter:
    drop-shadow(0 0 14px rgba(255, 235, 180, 0.9))
    drop-shadow(0 0 4px rgba(255, 200, 170, 0.7))
    drop-shadow(0 3px 6px rgba(91, 74, 63, 0.25));
}
.note.read .note-letter {
  filter:
    drop-shadow(0 0 8px rgba(255, 235, 180, 0.5))
    drop-shadow(0 2px 4px rgba(91, 74, 63, 0.2));
  opacity: 0.7;
}
.note.read .note-aura { opacity: 0.45; }

@keyframes note-grow {
  0%   { opacity: 0; transform: scale(0.3) translateY(20px); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes note-float {
  0%, 100% { transform: translateY(-5px); }
  50%      { transform: translateY(5px); }
}
@keyframes note-aura-pulse {
  0%, 100% { transform: scale(0.92); opacity: 0.5; }
  50%      { transform: scale(1.25); opacity: 0.95; }
}

/* near-flower hint bubble */
.hint-bubble {
  position: absolute;
  transform: translate(-50%, -100%);
  background: rgba(253, 246, 236, 0.95);
  border: 1px solid var(--paper-edge);
  border-radius: 999px;
  padding: 6px 14px;
  font-family: 'Caveat', cursive;
  font-size: 1.1rem;
  color: var(--ink);
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 6px 16px rgba(91, 74, 63, 0.15);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.hint-bubble.visible { opacity: 1; }

/* ---------- The wisp (you) ---------- */
#wisp {
  position: absolute;
  width: 56px;
  height: 56px;
  margin-left: -28px;
  margin-top: -28px;
  pointer-events: none;
  z-index: 5;
}
#wisp .core {
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff8d0 0%, var(--wisp) 50%, rgba(255,245,184,0) 75%);
  box-shadow:
    0 0 24px 8px rgba(255, 235, 150, 0.5),
    0 0 60px 24px rgba(255, 220, 180, 0.3);
  animation: bob 2.6s ease-in-out infinite;
}
#wisp .halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,235,150,0.35) 0%, rgba(255,235,150,0) 65%);
  animation: halo 3.8s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(-2px); }
  50%      { transform: translateY(2px); }
}
@keyframes halo {
  0%, 100% { transform: scale(0.95); opacity: 0.6; }
  50%      { transform: scale(1.15); opacity: 0.9; }
}

/* ---------- Falling petals ---------- */
.petal {
  position: fixed;
  top: -20px;
  width: 14px;
  height: 14px;
  border-radius: 60% 40% 60% 40% / 50% 50% 50% 50%;
  background: var(--accent);
  opacity: 0.55;
  pointer-events: none;
  animation: fall linear infinite;
  z-index: 3;
}
.petal.pink   { background: #f49bb0; }
.petal.peach  { background: #ffb59a; }
.petal.cream  { background: #ffe1a8; }
@keyframes fall {
  0%   { transform: translate(0, 0) rotate(0deg);    opacity: 0; }
  10%  { opacity: 0.6; }
  100% { transform: translate(var(--drift, 80px), 110vh) rotate(540deg); opacity: 0.2; }
}

/* ---------- Note card ---------- */
#note-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(91, 74, 63, 0.35);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
#note-overlay.visible { opacity: 1; pointer-events: auto; }

#note-card {
  position: relative;
  width: min(520px, 86vw);
  padding: 3rem 2.6rem 2.6rem;
  background: var(--paper);
  background-image:
    radial-gradient(ellipse at top left, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(ellipse at bottom right, rgba(232, 216, 191, 0.6), transparent 60%);
  border-radius: 14px;
  box-shadow:
    0 30px 80px rgba(91, 74, 63, 0.35),
    0 0 0 1px var(--paper-edge),
    inset 0 0 60px rgba(232, 216, 191, 0.35);
  transform: translateY(20px) scale(0.96);
  transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1);
  font-style: italic;
}
#note-overlay.visible #note-card { transform: translateY(0) scale(1); }
#note-card::before,
#note-card::after {
  content: "";
  position: absolute;
  left: 50%; transform: translateX(-50%);
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.6rem;
  color: var(--accent);
  opacity: 0.55;
  font-style: italic;
  line-height: 1;
}
#note-card::before { content: "❦"; top: 12px; }
#note-card::after  { content: "❦"; bottom: 8px; }
#note-text {
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.7;
  text-align: center;
  color: var(--ink);
}
#note-close {
  position: absolute;
  top: 10px; right: 16px;
  background: none;
  border: none;
  font-family: 'Caveat', cursive;
  font-size: 1.2rem;
  color: var(--ink);
  opacity: 0.5;
  cursor: pointer;
  font-style: normal;
}
#note-close:hover { opacity: 1; }

/* ---------- Footer hint ---------- */
#controls {
  position: fixed;
  left: 20px; bottom: 18px;
  z-index: 10;
  font-family: 'Caveat', cursive;
  font-size: 1.05rem;
  color: var(--ink);
  opacity: 0.55;
  pointer-events: none;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}

/* ---------- Mobile hint ---------- */
@media (hover: none) and (pointer: coarse) {
  #title p::after {
    content: " (best viewed on a laptop — arrow keys)";
    display: block;
    font-style: normal;
    font-size: 0.9rem;
    opacity: 0.7;
    margin-top: 0.6em;
  }
}