/* ==========================================================================
   GladHub Personal Bio — Motion & Keyframes
   This stylesheet isolates animation timing, keyframes, and observer-driven
   state transitions to keep styles.css focused on layout and visual design.
   ========================================================================== */

/* ----- Scroll Observer States ------------------------------------------- */
[data-observe] {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(10px);
  transition:
    opacity 520ms cubic-bezier(.22,1,.36,1),
    transform 520ms cubic-bezier(.22,1,.36,1),
    filter 520ms cubic-bezier(.22,1,.36,1);
}

[data-observe].is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

[data-observe="fade-slide"] {
  transform: translateY(18px);
}

[data-observe="slide-up"] {
  transform: translateY(28px);
}

[data-observe="scale-in"] {
  transform: scale(0.94);
}

[data-observe="rise"] {
  transform: translateY(40px);
}

[data-observe="float-in"] {
  transform: translateY(26px);
}

[data-observe="fade-up"] {
  transform: translateY(32px);
}

[data-observe="fade-up"].is-visible,
[data-observe="slide-up"].is-visible,
[data-observe="fade-slide"].is-visible,
[data-observe="rise"].is-visible,
[data-observe="float-in"].is-visible {
  transform: translateY(0);
}

[data-observe="scale-in"].is-visible {
  transform: scale(1);
}

[data-observe="hero"] {
  transform: translateY(40px) scale(0.96);
  transition-delay: 160ms;
}

[data-observe="hero"].is-visible {
  transform: translateY(0) scale(1);
}

[data-observe="stagger"] {
  transition-delay: calc(var(--stagger-index, 0) * 90ms);
}

/* Elements that tilt (hero card) get a gentle pop */
[data-observe="tilt"] {
  transform: translateY(30px) rotate3d(1, 0, 0, 6deg);
}

[data-observe="tilt"].is-visible {
  transform: translateY(0) rotate3d(0, 0, 0, 0deg);
}

/* ----- Hero Micro-Motions ------------------------------------------------ */
.hero__orb--violet {
  animation: orb-drift 18s ease-in-out infinite;
}

.hero__orb--cyan {
  animation: orb-drift 22s ease-in-out infinite reverse;
}

.hero__ring {
  animation: hero-ring 16s linear infinite;
}

.hero-card {
  animation: hero-card-breathe 8s ease-in-out infinite;
}

.hero-card:hover,
.hero-card:focus-within {
  animation-play-state: paused;
}

.music-control__fab {
  animation: music-fab-breathe 6s ease-in-out infinite;
}

.hero__scroll-icon::after {
  animation: scroll-dot 2.6s ease-in-out infinite;
}

/* ----- Loader ----------------------------------------------------------- */
.loader__content {
  animation: loader-pop 680ms cubic-bezier(.22,1,.36,1);
}

.loader.is-leaving .loader__content {
  animation: loader-exit 620ms cubic-bezier(.66,0,.34,1) forwards;
}

.loader.is-leaving .loader__aurora {
  animation: loader-aurora-exit 620ms ease forwards;
}

.loader__status-text.is-transitioning {
  animation: status-fade 480ms cubic-bezier(.22,1,.36,1);
}

/* ----- Mode Toast ------------------------------------------------------- */
.mode-toast.show {
  animation: toast-enter 420ms cubic-bezier(.55,1.4,.45,1), toast-hold 4s 420ms linear forwards;
}

.mode-toast.hide {
  animation: toast-exit 380ms cubic-bezier(.66,0,.34,1) forwards;
}

.idle-bubble.show {
  animation: bubble-enter 420ms cubic-bezier(.55,1.4,.45,1);
}

.idle-bubble.hide {
  animation: bubble-exit 360ms cubic-bezier(.66,0,.34,1) forwards;
}

.playground-tooltip.show {
  animation: tooltip-enter 520ms cubic-bezier(.22,1,.36,1);
}

.playground-tooltip.hide {
  animation: tooltip-exit 320ms cubic-bezier(.66,0,.34,1) forwards;
}

/* ----- Glitch Overlay --------------------------------------------------- */
.glitch-overlay.is-active {
  background: repeating-linear-gradient(
    to right,
    rgba(203, 94, 238, 0.24),
    rgba(203, 94, 238, 0.24) 4px,
    rgba(8, 2, 18, 0.45) 4px,
    rgba(8, 2, 18, 0.45) 8px
  );
  animation: glitch-shift 280ms steps(3) infinite alternate;
}

/* ----- Buttons ---------------------------------------------------------- */
.btn:hover::before,
.btn:focus-visible::before {
  animation: button-shine 1.2s linear;
}

/* ----- Keyframes -------------------------------------------------------- */
@keyframes loader-aurora {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 0.75;
  }
  50% {
    transform: scale(1.05) rotate(18deg);
    opacity: 0.95;
  }
  100% {
    transform: scale(1) rotate(36deg);
    opacity: 0.75;
  }
}

@keyframes loader-pop {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  60% {
    transform: scale(1.05);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes loader-exit {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.94);
    opacity: 0;
  }
}

@keyframes loader-aurora-exit {
  to {
    opacity: 0;
  }
}

@keyframes orb-drift {
  0% {
    transform: translate3d(0, 0, 0);
  }
  25% {
    transform: translate3d(20px, -30px, 0);
  }
  50% {
    transform: translate3d(-15px, 20px, 0);
  }
  75% {
    transform: translate3d(10px, 40px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes hero-ring {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes hero-card-breathe {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-6px) scale(1.01);
  }
}

@keyframes scroll-dot {
  0% {
    transform: translate(-50%, 0);
    opacity: 1;
  }
  60% {
    transform: translate(-50%, 14px);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, 0);
    opacity: 0;
  }
}

@keyframes button-shine {
  0% {
    transform: translateX(-120%);
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    transform: translateX(120%);
    opacity: 0;
  }
}

@keyframes glitch-shift {
  0% {
    transform: translateX(-4px);
  }
  50% {
    transform: translateX(4px);
  }
  100% {
    transform: translateX(-2px);
  }
}

@keyframes glitch-card {
  0% {
    transform: translate3d(-2px, 0, 0) skewX(-2deg);
  }
  50% {
    transform: translate3d(2px, 0, 0) skewX(2deg);
  }
  100% {
    transform: translate3d(0, 0, 0) skewX(0deg);
  }
}

@keyframes toast-enter {
  0% {
    transform: translate(-50%, 40px);
    opacity: 0;
  }
  60% {
    transform: translate(-50%, -6px);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}

@keyframes toast-hold {
  0% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes toast-exit {
  0% {
    transform: translate(-50%, 0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, 20px);
    opacity: 0;
  }
}

@keyframes bubble-enter {
  0% {
    transform: translateY(18px);
    opacity: 0;
  }
  60% {
    transform: translateY(-4px);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes bubble-exit {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(18px);
    opacity: 0;
  }
}

@keyframes tooltip-enter {
  0% {
    transform: translateY(18px);
    opacity: 0;
  }
  60% {
    transform: translateY(-4px);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes tooltip-exit {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(12px);
    opacity: 0;
  }
}

@keyframes music-fab-breathe {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 22px 40px -20px rgba(203, 94, 238, 0.68), 0 0 20px rgba(203, 94, 238, 0.4);
  }
  50% {
    transform: scale(1.07);
    box-shadow: 0 26px 48px -22px rgba(203, 94, 238, 0.82), 0 0 28px rgba(203, 94, 238, 0.52);
  }
}

@keyframes status-fade {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  60% {
    opacity: 1;
    transform: translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 640px) {
  [data-observe] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    transition-delay: 0s !important;
  }

  .hero-card,
  .hero__orb--violet,
  .hero__orb--cyan,
  .hero__ring {
    animation: none !important;
    transform: none !important;
  }

  .hero__scroll-icon::after {
    animation: none !important;
  }

  .mode-toast,
  .idle-bubble,
  .playground-tooltip {
    animation: none !important;
  }

  .glitch-overlay {
    display: none !important;
    animation: none !important;
  }
}