/* ==========================================================================
   ANIMATION — Splash screen, view transitions, hover micro-interactions
   ========================================================================== */

/* ── Splash Screen Overlay ───────────────────────────────────────────────── */
.splash-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(
    ellipse at 50% 40%,
    rgba(250, 245, 235, 1) 0%,
    var(--parchment) 60%,
    rgba(232, 215, 185, 1) 100%
  );
  padding: var(--space-md);
  transition: opacity 0.9s var(--ease-gentle),
              transform 0.9s var(--ease-gentle);
}

.splash-screen.exiting {
  opacity: 0;
  transform: scale(1.02);
  pointer-events: none;
}

.splash-screen.hidden {
  display: none !important;
}

/* ── Splash Bonnet SVG ───────────────────────────────────────────────────── */
.splash-bonnet-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.splash-bonnet-svg {
  width: clamp(180px, 36vw, 300px);
  height: auto;
  opacity: 0;
  transform: translateY(12px) scale(0.93);
  animation: bonnetMaterialise 1.4s var(--ease-gentle) 0.3s forwards;
}

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

/* SVG line-draw paths */
.bonnet-draw-path {
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
  animation: drawPath 2.2s ease-in-out 0.4s forwards;
}

@keyframes drawPath {
  to { stroke-dashoffset: 0; }
}

/* Bonnet fill: revealed after stroke complete */
.bonnet-fill-group {
  opacity: 0;
  animation: fadeIn 0.7s ease 2s forwards;
}

/* ── Bee Flight ──────────────────────────────────────────────────────────── */
.bee1-group {
  opacity: 0;
  transform: translate(-90px, -25px) rotate(-12deg);
  animation: bee1Arrive 1.1s var(--ease-gentle) 1.6s forwards;
}

@keyframes bee1Arrive {
  0%   { opacity: 0; transform: translate(-90px, -25px) rotate(-12deg); }
  35%  { opacity: 1; transform: translate(-25px, -35px) rotate(-5deg); }
  65%  { opacity: 1; transform: translate(4px, -8px) rotate(2deg); }
  100% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
}

.bee2-group {
  opacity: 0;
  transform: translate(90px, -20px) rotate(10deg);
  animation: bee2Arrive 1.1s var(--ease-gentle) 1.9s forwards;
}

@keyframes bee2Arrive {
  0%   { opacity: 0; transform: translate(90px, -20px) rotate(10deg); }
  35%  { opacity: 1; transform: translate(25px, -30px) rotate(4deg); }
  65%  { opacity: 1; transform: translate(-4px, -6px) rotate(-2deg); }
  100% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
}

/* Wing flutter during flight */
.bee-wing-anim {
  transform-origin: 30% 80%;
  animation: wingBuzz 0.1s linear infinite alternate;
}

@keyframes wingBuzz {
  from { transform: scaleY(1) rotate(0deg); }
  to   { transform: scaleY(0.25) rotate(8deg); }
}

/* Idle wing twitch after landing */
.bee-wing-idle {
  transform-origin: 30% 80%;
  animation: wingIdle 0.7s ease-in-out infinite alternate;
}

@keyframes wingIdle {
  from { transform: scaleY(1) rotate(0deg); }
  to   { transform: scaleY(0.88) rotate(2deg); }
}

/* ── Splash Text ─────────────────────────────────────────────────────────── */
.splash-title {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.6rem);
  color: var(--ink);
  letter-spacing: 0.03em;
  opacity: 0;
  transform: translateY(10px);
  animation: textUp 0.9s var(--ease-gentle) 2.8s forwards;
}

.splash-subtitle {
  font-family: 'Cinzel', serif;
  font-size: clamp(0.72rem, 0.6rem + 0.4vw, 0.88rem);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0;
  animation: fadeIn 0.7s ease 3.4s forwards;
}

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

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

/* ── Skip Button ─────────────────────────────────────────────────────────── */
.skip-btn {
  position: fixed;
  bottom: clamp(1.5rem, 4vw, 2.5rem);
  right: clamp(1.5rem, 4vw, 2.5rem);
  z-index: 10000;
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--faint);
  background: rgba(245, 234, 215, 0.8);
  padding: 0.5rem 1.1rem;
  border-radius: 2px;
  opacity: 0;
  animation: fadeIn 0.4s ease 1s forwards;
  cursor: pointer;
  transition: all var(--duration-fast) ease;
}

.skip-btn:hover {
  background: var(--ink);
  color: var(--parchment);
  border-color: var(--ink);
}

/* ── View Transitions ────────────────────────────────────────────────────── */
.view-fade-enter {
  opacity: 0;
  transform: translateY(6px);
  animation: viewEnter 0.4s var(--ease-gentle) forwards;
}

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

/* ── Reduced Motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .splash-bonnet-svg,
  .bee1-group,
  .bee2-group,
  .splash-title,
  .splash-subtitle,
  .skip-btn,
  .bonnet-draw-path,
  .bonnet-fill-group {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .bee-wing-anim,
  .bee-wing-idle {
    animation: none !important;
  }

  .splash-screen {
    transition-duration: 0.3s !important;
  }

  .view-fade-enter {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}