/* ════════════════════════════════════════════════════════
   PARALLAX SKY BACKGROUND — sky.css  (v3 — clean)
   KEY PRINCIPLES:
   • ZERO backdrop-filter (forces full recomposite every canvas repaint)
   • ZERO borders / box-shadows on section containers (horizontal lines)
   • Only cards + footer get a solid background
   • Sky canvas paints freely via Canvas 2D API
════════════════════════════════════════════════════════ */

/* ── 1. Nuclear transparent reset — every section-level container ── */
html,
body,
#nav,
.hero,
.hero-inner,
.about-hero,
.about-hero-inner,
.work-section,
.about-section,
.contact-section,
.contact-inner,
.section,
.section-inner,
.footer-inner {
  background:          transparent !important;
  backdrop-filter:     none        !important;
  -webkit-backdrop-filter: none   !important;
  border:              none        !important;
  border-top:          none        !important;
  border-bottom:       none        !important;
  box-shadow:          none        !important;
}

/* Hero glow orb: visible enough to read against the sky */
.hero-glow { opacity: 0.85 !important; }

/* ── 2. Project cards — keep the white card, kill its border ── */
.project-card {
  background:  rgba(255, 255, 255, 0.92) !important;
  border:      none !important;
  box-shadow:  0 4px 24px rgba(0, 0, 0, 0.06) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── 3. Footer — fully transparent, merges into meadow ── */
.footer {
  background:      transparent !important;
  background-color: transparent !important;
  border:          none !important;
  border-top:      none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── 4. Fixed sky background layer ── */
#sky-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: visible;
  pointer-events: none;
  user-select: none;
}

#sky-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* JS paints via canvas 2D — no CSS background here */
}

/* ── 5. Clouds ── */
.sky-cloud {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity;
}

/* ── 6. Butterflies ── */
.sky-bf {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}

.bf-wl {
  display: inline-block;
  transform-origin: 100% 50%;
  animation: bf-flap 0.58s ease-in-out infinite;
}
.bf-wr {
  display: inline-block;
  transform-origin: 0% 50%;
  animation: bf-flap 0.58s ease-in-out infinite;
}

@keyframes bf-flap {
  0%, 100% { transform: scaleX(1); }
  50%       { transform: scaleX(0.06); }
}

@keyframes bf-drift-a {
  0%   { transform: translate(0vw,    0px); }
  25%  { transform: translate(6vw,  -12px); }
  50%  { transform: translate(12vw,   4px); }
  75%  { transform: translate(18vw,  -9px); }
  100% { transform: translate(24vw,   2px); }
}
@keyframes bf-drift-b {
  0%   { transform: translate(0vw,    0px); }
  33%  { transform: translate(-7vw, -10px); }
  66%  { transform: translate(-14vw,  3px); }
  100% { transform: translate(-21vw, -5px); }
}
@keyframes bf-drift-c {
  0%   { transform: translate(0vw, 0px); }
  30%  { transform: translate(4vw, -8px); }
  60%  { transform: translate(7vw,  4px); }
  100% { transform: translate(10vw,-3px); }
}
@keyframes bf-drift-d {
  0%   { transform: translate(0vw, 0px); }
  40%  { transform: translate(-4vw,-7px); }
  70%  { transform: translate(-2vw, 5px); }
  100% { transform: translate(-6vw,-2px); }
}

/* ── 7. Flower sway ── */
@keyframes sway-l {
  0%, 100% { transform: rotate(-2.5deg); }
  50%      { transform: rotate(2deg); }
}
@keyframes sway-r {
  0%, 100% { transform: rotate(2.5deg); }
  50%      { transform: rotate(-2deg); }
}
@keyframes sway-s {
  0%, 100% { transform: rotate(-1.5deg) translateX(0px); }
  50%      { transform: rotate(1.5deg)  translateX(1.5px); }
}

.sway-l    { animation: sway-l 3.8s ease-in-out infinite; }
.sway-r    { animation: sway-r 4.4s ease-in-out infinite; }
.sway-s    { animation: sway-s 3.2s ease-in-out infinite; }
.sway-slow { animation-duration: 5.6s !important; }
.sway-med  { animation-duration: 4.1s !important; }

/* ── 8. Meadow ── */
#sky-meadow {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 320px;
  will-change: transform, opacity;
  opacity: 0;
}