/* Sky-blue theme */
:root{
  --sky-100:#eaf6ff;
  --sky-200:#d7eeff;
  --sky-300:#bfe3ff;
  --sky-400:#8ecbff;
  --sky-500:#0a66c2;
  --ink:#18324a;
}

body{ background:linear-gradient(180deg,var(--sky-100),#ffffff); color:var(--ink); }
.navbar{ backdrop-filter: blur(8px); }
.brand-heart{ color:var(--sky-500); }

/* GitHub-friendly buttons (no green) */
.btn-github{
  border:1px solid rgba(27,31,35,0.15);
  box-shadow:0 1px 0 rgba(27,31,35,0.04);
  background:var(--sky-500);
  color:#fff; font-weight:600;
  transition:transform .05s ease, filter .15s ease, background .15s ease;
}
.btn-github:hover{ background:#084f98; color:#fff; }
.btn-github:active{ transform:translateY(1px); }

.btn-github-outline{
  border:1px solid rgba(27,31,35,0.15);
  background:#fff; color:#24292f; font-weight:600;
  transition: background .15s ease, color .15s ease;
}
.btn-github-outline:hover{ background:#f0f6ff; color:#0a66c2; }

/* Hero + card nav */
.hero{
  background:
    radial-gradient(1000px 500px at 120% -10%, var(--sky-300) 0%, transparent 60%),
    radial-gradient(1000px 500px at -20% 0%, var(--sky-200) 0%, transparent 60%);
}
.nav-card{
  position: relative;
  border:1px solid #e6eef8; border-radius:1rem;
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.nav-card:hover{ transform:translateY(-2px); box-shadow:0 .75rem 1.25rem rgba(10,102,194,.12); border-color:var(--sky-400); }
.nav-card .card-body{ padding-top:2.75rem; }
.icon-wrap{
  width:3rem;height:3rem;display:grid;place-items:center;
  border-radius:50%; background:var(--sky-200); color:var(--sky-500); font-size:1.25rem;
}
.nav-card .icon-wrap{
  position:absolute;
  top:-18px;               /* slightly above the card edge for a badge effect */
  left:50%;
  transform:translateX(-50%);
  box-shadow:0 .35rem .85rem rgba(10,102,194,.12);
}

/* Sections */
.section-title{ color:var(--sky-500); }
.card{ border:0; box-shadow:0 10px 25px rgba(0,0,0,.05); }

/* Gallery */
.gallery-img{ aspect-ratio:1/1; object-fit:cover; transition:.2s transform, .2s box-shadow; }
.gallery-img:hover{ transform:translateY(-2px); box-shadow:0 .5rem 1rem rgba(0,0,0,.15); }

/* Daisy Garden container */
.daisy-garden{
  width:100%;
  max-width:960px;
  border-radius:1rem;
  box-shadow:0 10px 24px rgba(10,102,194,.10);
}

/* Randomized sway around a per-flower baseline using CSS variables */
#daisies > g{
  --tilt: 0deg;         /* per-flower baseline tilt (set in JS) */
  --amp: 1.2deg;        /* per-flower sway amplitude (set in JS) */
  transform-origin: center bottom;
  animation: swayRand 6.2s ease-in-out infinite;
}
@keyframes swayRand{
  0%   { transform: rotate(var(--tilt)); }
  50%  { transform: rotate(calc(var(--tilt) + var(--amp))); }
  100% { transform: rotate(var(--tilt)); }
}

/* Alternating sways so flowers don't lean one way */
.swayL{ animation:swayL 5.6s ease-in-out infinite; transform-origin:center bottom; }
.swayR{ animation:swayR 6.0s ease-in-out infinite; transform-origin:center bottom; }

@keyframes swayL { 0%{transform:rotate(0)} 50%{transform:rotate(1.7deg)} 100%{transform:rotate(0)} }
@keyframes swayR { 0%{transform:rotate(0)} 50%{transform:rotate(-1.7deg)} 100%{transform:rotate(0)} }

/* Clouds drifting */
.driftL{ animation:driftL 40s linear infinite; }
.driftR{ animation:driftR 46s linear infinite; opacity:.9; }
@keyframes driftL { 0%{ transform:translateX(100px) } 100%{ transform:translateX(-220px) } }
@keyframes driftR { 0%{ transform:translateX(-120px) } 100%{ transform:translateX(220px) } }

/* Birds gliding */
.flyR{ animation:flyR 22s linear infinite; }
.flyL{ animation:flyL 26s linear infinite; }
@keyframes flyR { 0%{ transform:translateX(-80px) } 100%{ transform:translateX(220px) } }
@keyframes flyL { 0%{ transform:translateX(60px) } 100%{ transform:translateX(-220px) } }

/* Night: star twinkle & fireflies */
.stars circle{ animation:twinkle 3.2s ease-in-out infinite; }
@keyframes twinkle{ 0%,100%{ opacity:.4 } 50%{ opacity:1 } }

.firefly{
  fill:#fff6a8;
  filter: drop-shadow(0 0 6px #ffe56d);
  animation:firefly 6.5s ease-in-out infinite;
}
@keyframes firefly{
  0%{ opacity:0; transform:translateY(0) scale(.8) }
  15%{ opacity:1 }
  60%{ transform:translateY(-50px) scale(1) }
  100%{ opacity:0; transform:translateY(-90px) scale(.9) }
}

/* Night daisy glow */
.night-glow{ filter:url(#daisyGlow); }

/* Spotify-like card */
.spotify-card .cover{
  width:96px; height:96px; overflow:hidden; background:#e9f4ff; display:grid; place-items:center;
}
.spotify-card .cover img{ width:100%; height:100%; object-fit:cover; }
.track-title{ font-size:1.05rem; }
.progress-range{ accent-color: var(--sky-500); }
.volume-range{ width:120px; accent-color: var(--sky-500); }

/* I Love You */
.love-bg{
  background: linear-gradient(180deg,#fff,var(--sky-100));
}
/* --- Hearts field height tweak --- */
.heart-field{
  min-height:200px; /* was 320px */
  background:linear-gradient(180deg,#fff,var(--sky-100));
  border-radius:1rem; border:1px solid #e5e7eb;
}
.floating-heart{
  position:absolute; font-size:clamp(18px,2.8vw,36px);
  animation:floatUp 6s linear forwards; opacity:.92; user-select:none; pointer-events:none;
}
@keyframes floatUp{
  0%{ transform:translateY(0) scale(1) rotate(0); opacity:.1; }
  10%{ opacity:.85; }
  100%{ transform:translateY(-320px) scale(1.5) rotate(12deg); opacity:0; }
}

/* Extras */
.footer{ font-size:.9rem; color:#6c757d; }

/* Little pop for Message hearts button */
#addHeartBtn.heart-pop{ animation:pop 1.1s ease forwards; }
@keyframes pop{ 0%{transform:scale(.7); opacity:.2} 60%{transform:scale(1.1); opacity:1} 100%{transform:scale(1)} }

/* Instax / Polaroid frame (grid & modal) */
.instax{
  background:#fff;
  border:1px solid #e8e8e8;
  border-radius:8px;
  box-shadow:0 10px 18px rgba(0,0,0,.08);
  padding:12px 12px 34px;           /* extra bottom space for note */
  display:block;
  transition:transform .15s ease, box-shadow .2s ease;
}
.instax:hover{ transform:translateY(-3px) rotate(-.25deg); box-shadow:0 16px 28px rgba(0,0,0,.12); }

.instax-photo{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  border-radius:6px;
  display:block;
}

/* “handwritten” note area */
.instax-note{
  margin-top:8px;
  text-align:center;
  color:#2c3e50;
  font-size:.95rem;
  line-height:1.2;
  font-family: "Brush Script MT", "Bradley Hand", "Comic Sans MS", cursive;
  text-transform: lowercase;
}

/* Larger frame in modal */
.instax-modal{
  border-radius:12px;
  padding:16px 16px 44px;
}
.instax-modal .instax-photo{
  aspect-ratio:auto; width:100%; height:auto; max-height:70vh; object-fit:contain;
}

/* Optional: tilt the small cards slightly for playful feel */
#gallery .instax:nth-child(4n+1){ transform:rotate(-.6deg); }
#gallery .instax:nth-child(4n+3){ transform:rotate(.6deg); }

/* Teddy Section */
.teddy-card{ overflow:hidden; }
.teddy-stage{
  width:100%; max-width:320px; position:relative;
}
.teddy-svg{ width:100%; height:auto; display:block; }

/* Idle bob */
.teddy.idle{ animation: teddyBob 4.8s ease-in-out infinite; transform-origin: 150px 210px; }
@keyframes teddyBob{ 0%{transform:translateY(0)} 50%{transform:translateY(2px)} 100%{transform:translateY(0)} }

/* Arms shared props */
.arm{ transform-origin: 0 0; }

/* Hug animation: arms rotate inward slightly */
.teddy.hug #arm-left{ animation: armLeftHug .9s ease; }
.teddy.hug #arm-right{ animation: armRightHug .9s ease; }
@keyframes armLeftHug{
  0%   { transform: translate(80px,210px) rotate(45deg)   scale(1,1);   }
  50%  { transform: translate(80px,210px) rotate(45deg)   scale(1,1.40);} /* longer */
  100% { transform: translate(80px,210px) rotate(45deg)   scale(1,1);   }
}
@keyframes armRightHug{
  0%   { transform: translate(224px,210px) rotate(-45deg) scale(1,1);   }
  50%  { transform: translate(224px,210px) rotate(-45deg) scale(1,1.40);} /* longer */
  100% { transform: translate(224px,210px) rotate(-45eg) scale(1,1);   }
}

/* Wave animation: right arm waves */
.teddy.wave #arm-right{ animation: armWave 1.1s ease-in-out 1; }
@keyframes armWave{
  0%{ transform: translate(210px,210px) rotate(0deg); }
  25%{ transform: translate(210px,210px) rotate(-28deg); }
  50%{ transform: translate(210px,210px) rotate(-10deg); }
  75%{ transform: translate(210px,210px) rotate(-28deg); }
  100%{ transform: translate(210px,210px) rotate(0deg); }
}

/* Blink animation: eye height shrinks then restores */
.teddy.blink .eyes ellipse{ animation: eyeBlink .18s ease-in-out 1; transform-origin:center; }
@keyframes eyeBlink{
  0%{ ry:8; }
  50%{ ry:1; }
  100%{ ry:8; }
}

/* Hearts launcher inside teddy stage */
.teddy-hearts{
  position:absolute; inset:0; pointer-events:none; overflow:hidden;
}
.teddy-heart{
  position:absolute; font-size:clamp(16px, 2.6vw, 28px); opacity:.95;
  animation: teddyHeartUp 1.8s ease-in forwards;
}
@keyframes teddyHeartUp{
  0%{ transform: translateY(0) scale(.9); opacity:.1; }
  20%{ opacity:1; }
  100%{ transform: translateY(-140px) scale(1.2) rotate(10deg); opacity:0; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .teddy.idle, .teddy-hug, .teddy-heart, .driftL, .driftR, .flyL, .flyR { animation: none !important; }
}