/* =========================================================
   MICHELEBORN JS — MOTION
   Keep animation separate from the core layout/styles.
   ========================================================= */

/* ---------- Page entrance ---------- */

header .logo,
header .playground-label {
  opacity: 0;
  animation: mb-fade-down .55s cubic-bezier(.2,.8,.2,1) forwards;
}

header .playground-label {
  animation-delay: .08s;
}

/* ---------- Hero ---------- */

.hero-copy h1 {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(4px);
  animation: mb-hero-title .9s cubic-bezier(.16,1,.3,1) .16s forwards;
}

.hero-copy p {
  opacity: 0;
  transform: translateY(10px);
  animation: mb-fade-up .7s cubic-bezier(.2,.8,.2,1) .48s forwards;
}

/* The existing pink underline under Michele Born draws itself in. */
.hero-copy p a {
  position: relative;
  border-bottom: 0;
}

.hero-copy p a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: rgb(255 152 178);
  transform: scaleX(0);
  transform-origin: left center;
  animation: mb-draw-line .6s cubic-bezier(.2,.8,.2,1) .9s forwards;
}

/* Animate the existing top-center flower independently. */
.wrapper-div {
  position: relative;
  background-image: none;
}

.wrapper-div::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 50%;
  width: 328px;
  height: 328px;
  background: url("images/background.png") top center / 328px auto no-repeat;
  pointer-events: none;
  transform-origin: 50% 18%;
  opacity: 0;
  transform: translateX(-50%) translateY(-330px) rotate(-3deg) scale(.96);
  animation: mb-flower-bloom 11s
    ease-in-out
    1.1s infinite;
  animation-fill-mode: backwards;
}

.wrapper-div > * {
  position: relative;
  z-index: 1;
}


/* ---------- Hero title wave ---------- */

.wave-title {
  white-space: nowrap;
}

.wave-title .wave-letter,
.wave-title .wave-space {
  display: inline-block;
}

.wave-title .wave-letter {
  transform-origin: center bottom;
  animation: mb-title-wave 5s ease-in-out infinite;
  animation-delay: calc(var(--i) * 55ms);
}

.wave-title .wave-space {
  width: .22em;
}

@keyframes mb-title-wave {
  0%, 4%, 18%, 100% {
    transform: translateY(0) scale(1);
  }

  9% {
    transform: translateY(-4px) scale(1.075);
  }
}

/* ---------- Category switcher ---------- */

.category-switcher {
  opacity: 0;
  transform: translateY(10px);
  animation: mb-fade-up .65s cubic-bezier(.2,.8,.2,1) .72s forwards;
}

.category-tab {
  transition:
    background .2s ease,
    color .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s cubic-bezier(.2,.8,.2,1);
}

.category-tab:hover:not(.active) {
  transform: translateY(-2px);
}

.category-tab.active {
  animation: mb-tab-settle .28s cubic-bezier(.2,.8,.2,1);
}

/* ---------- Main workspace entrance ---------- */

.sidebar {
  opacity: 0;
  transform: translateX(-12px);
  animation: mb-sidebar-in .7s cubic-bezier(.16,1,.3,1) .82s forwards;
}

.code-panel {
  opacity: 0;
  transform: translateY(18px) scale(.995);
  animation: mb-panel-in .8s cubic-bezier(.16,1,.3,1) .86s forwards;
}

/* ---------- Sidebar interaction ---------- */

.exercise {
  transition:
    transform .2s cubic-bezier(.2,.8,.2,1),
    background .2s ease,
    border-color .2s ease;
}

.exercise:hover {
  transform: translateX(7px);
}

.exercise.active {
  animation: mb-exercise-select .3s cubic-bezier(.2,.8,.2,1);
}

/* ---------- Run button ---------- */

.run-button {
  position: relative;
  overflow: hidden;
}

.run-button::after {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(
    110deg,
    transparent 25%,
    rgba(255,255,255,.65) 45%,
    transparent 65%
  );
  transform: translateX(-140%);
  pointer-events: none;
}

.run-button:hover::after {
  animation: mb-button-sheen .7s ease;
}

/* ---------- Floating output ---------- */

.floating-output {
  animation: mb-output-arrive .7s cubic-bezier(.16,1,.3,1) .95s both;
  transition:
    box-shadow .25s ease,
    opacity .2s ease,
    transform .2s ease;
}

.output-toggle {
  transition: transform .2s ease, background .2s ease;
}

.output-toggle:hover {
  transform: rotate(90deg);
}

/* ---------- Decorative daisy ---------- */

.daisy-one {
  transform-origin: 45% 100%;
  animation: mb-daisy-sway 7s ease-in-out infinite;
}



@keyframes mb-flower-bloom {
  /* Zero state: already hidden just above the screen. */
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-330px) rotate(-3deg) scale(.96);
  }

  /* Still hidden while beginning the fall. */
  10% {
    opacity: 0;
    transform: translateX(-50%) translateY(-150px) rotate(-2deg) scale(.97);
  }

  /* Fade in only as it reaches the hero. */
  27% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) rotate(0deg) scale(1);
  }

  /* Hold fully visible and completely still for about 5 seconds. */
  72.5% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) rotate(0deg) scale(1);
  }

  /* Drop away and disappear before the invisible reset to 0%. */
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(120px) rotate(4deg) scale(.98);
  }
}

/* ---------- Keyframes ---------- */

@keyframes mb-fade-down {
  from { opacity: 0; transform: translateY(-7px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes mb-hero-title {
  from {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes mb-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes mb-draw-line {
  to { transform: scaleX(1); }
}

@keyframes mb-tab-settle {
  0%   { transform: scale(.97); }
  65%  { transform: scale(1.015); }
  100% { transform: scale(1); }
}

@keyframes mb-sidebar-in {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes mb-panel-in {
  from { opacity: 0; transform: translateY(18px) scale(.995); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes mb-exercise-select {
  0%   { transform: translateX(5px) scale(.985); }
  100% { transform: translateX(5px) scale(1); }
}

@keyframes mb-button-sheen {
  from { transform: translateX(-140%); }
  to   { transform: translateX(140%); }
}

@keyframes mb-output-arrive {
  from { opacity: 0; transform: translateY(-8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes mb-daisy-sway {
  0%, 100% { transform: rotate(-18deg); }
  50%      { transform: rotate(-15.5deg); }
}

/* ---------- Mobile ---------- */

@media (max-width: 650px) {
  .wrapper-div::before {
    display: none;
  }

  .floating-output {
    animation: mb-mobile-output-in .55s cubic-bezier(.16,1,.3,1) .9s both;
  }

  @keyframes mb-mobile-output-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

/* ---------- Accessibility ---------- */

@media (prefers-reduced-motion: reduce) {
  .wave-title .wave-letter {
    transform: none !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}