/* Shared motion: native navigation, readable content, stable hit targets. */
:root {
  --k-motion-ease: cubic-bezier(.16, 1, .3, 1);
  --k-motion-quick: 180ms;
  --k-motion-reveal: 560ms;
  --k-motion-page: 460ms;
}

@view-transition { navigation: auto; }
::view-transition { pointer-events: none; }
::view-transition-old(root) {
  animation: k-page-out var(--k-motion-page) ease both;
}
::view-transition-new(root) {
  animation: k-page-in var(--k-motion-page) var(--k-motion-ease) both;
}
::view-transition-group(root) { animation-duration: var(--k-motion-page); }
@keyframes k-page-out { to { opacity: 0; scale: .985; } }
@keyframes k-page-in {
  from { opacity: .65; clip-path: inset(0 0 14% 0); }
  to { opacity: 1; clip-path: inset(0 0 0% 0); }
}
::view-transition-group(k-release-art) {
  animation-duration: 560ms;
  animation-timing-function: var(--k-motion-ease);
}
::view-transition-old(k-release-art), ::view-transition-new(k-release-art) {
  height: 100%; object-fit: contain; mix-blend-mode: normal;
}

/* These classes used to hide content before their scripts were available. */
html body :is(.k-scroll-reveal, .k-stagger-group > *, .k-reveal-pending) {
  opacity: 1;
  transform: none;
}
html body .k-reveal-pending { opacity: 1 !important; transform: none !important; }
html body .k-motion-item { will-change: auto; }
/* JS uses individual translate, leaving existing card rotations intact. */
html body .k-motion-item { transition-delay: 0s; }

:where(section[id], h2[id], .story-chapter-card[id]) { scroll-margin-top: 96px; }
:where(.header-menu-btn, .links-button, .social-btn, .hero-primary-btn,
  .btn-about-primary, .btn-about-outline, .filter-pill, .filter-btn,
  .category-nav-pill, .stream-pill-btn, .blended-social-icon, .k-btn-tactile) {
  transition: scale var(--k-motion-quick) var(--k-motion-ease),
    background-color var(--k-motion-quick) ease, border-color var(--k-motion-quick) ease;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :where(.links-button, .social-btn, .hero-primary-btn, .btn-about-primary,
    .btn-about-outline, .stream-pill-btn, .k-btn-tactile):hover { scale: 1.025; }
}
:where(.header-menu-btn, .links-button, .social-btn, .hero-primary-btn,
  .btn-about-primary, .btn-about-outline, .filter-pill, .filter-btn,
  .category-nav-pill, .stream-pill-btn, .k-btn-tactile):active { scale: .97; }
:where(a, button):focus-visible { outline: 2px solid #fafafa; outline-offset: 5px; }

/* Marquees remain readable when a visitor is exploring their contents. */
:is(.marquee-track, .about-gallery-track, .music-marquee-track):is(:hover, :focus-within) {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  html body .k-motion-item { translate: none !important; }
  :where(a, button):active, :where(a, button):hover { scale: 1; }
  #preloader, #kaliumEntranceVeil { display: none !important; }
  /* These widgets inject ID / pseudo-element rules after the shared stylesheet. */
  html body #kaliumCookieBanner,
  html body .macos-dock-item.is-active::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Full composition choreography owns the hero columns once registered. */
html body .hero-entry-anim.k-motion-item { transition: none; }

/* Hover acts on the object inside a stable link target. */
@media (prefers-reduced-motion: no-preference) {
  [data-motion-interaction="tilt"] { perspective: 900px; }
  .release-card-link:focus-visible .release-vinyl-disc { transform: translateX(44px) rotate(60deg); }
  .releases-marquee-container:focus-within .releases-marquee-track,
  .brand-ticker-marquee-wrap:focus-within .brand-ticker-marquee-track { animation-play-state: paused; }
  .clean-cinema-card:focus-visible .cinema-hover-hud,
  .clean-phone-card:focus-visible .phone-hover-hud { opacity: 1; }
}

/* ==========================================================================
   AMBIENT ORGANIC MOTION: FLOATING, BREATHING, GLOWING & SECTION REVEALS
   Continuous micro-animations that keep pages tactile and alive
   ========================================================================== */
@keyframes k-ambient-float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-6px) rotate(0.4deg);
  }
}

@keyframes k-pulse-glow {
  0%, 100% {
    opacity: 0.65;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.2));
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.55));
  }
}

@keyframes k-bounce-hint {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(4px);
  }
}

@keyframes k-scanline-flicker {
  0%, 100% { opacity: 0.82; }
  50% { opacity: 0.96; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Ambient floating 3D graphic assets across portfolio */
  .brand-graphic-img,
  .treble-graphic-img,
  .camcorder-graphic-img,
  .floating-3d-asset {
    /* removed idle float */
    will-change: transform;
  }
  .treble-graphic-img {
    animation-delay: -1.6s;
    animation-duration: 5.2s;
  }
  .camcorder-graphic-img {
    animation-delay: -3.1s;
    animation-duration: 4.4s;
  }

  /* Status beacon / live report pulse - disabled (strict anti-slop) */
  .chip-dot,
  .status-live-dot,
  .saved-report-pulse,
  .live-beacon {
    display: none !important;
  }

  /* Visuals invitation & cue bounce */
  .gallery-invitation,
  .scroll-down-cue {
    /* removed idle bounce */
  }

  /* CRT TV scanlines alive flicker */
  .tv-crt-scanlines {
    /* removed scanline flicker */
  }

  /* Bento card subtle breathing hover sheen */
  .dashboard .tile {
    transition: transform 0.35s cubic-bezier(.16, 1, .3, 1), border-color 0.25s ease, box-shadow 0.35s ease;
  }
  .dashboard .tile:hover {
    border-color: rgba(255, 255, 255, 0.24);
  }
}

/* Scroll Activated Section Reveals */
.k-reveal-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.k-reveal-item.is-revealed {
  opacity: 1 !important;
  transform: translateY(0) !important;
}