/* ==========================================================================
   KALIUM UNIFIED MOTION SYSTEM (motion-system.css)
   Awwwards-Tier Monochrome Motion Architecture:
   - Rotating 3D Kalium Typography Globe Preloader (#preloader)
   - Choreographed 3-Blade Monochrome Satin Curtain Transitions (#kDualCurtain)
   - Universal Bidirectional Blended Collage Footer Effects (.blended-footer-section)
   - 60fps Compositor-Only GPU Transforms & Magnetic Cursor
   ========================================================================== */

:root {
  --k-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --k-ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
  --k-ease-subtle: cubic-bezier(0.25, 1, 0.5, 1);
  --k-cursor-size: 8px;
  --k-cursor-ring-size: 34px;
}

/* --------------------------------------------------------------------------
   00. PRELOADER & TRANSITION CONTINUITY GUARD
   Never hide body when #preloader is inside body — #preloader itself shields
   the viewport in pure #000000 black while the page primes underneath.
   -------------------------------------------------------------------------- */
html body {
  opacity: 1 !important;
}

/* Eliminate all legacy dot-pill status indicators site-wide */
.chip-dot,
.status-live-dot,
.saved-report-pulse,
.live-beacon,
.badge-dot,
.portal-switch-dot,
.k-pulse-dot,
.k-continuity-beacon {
  display: none !important;
}

/* Universal 3D Rotating Typography Globe Preloader */
#preloader {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: #000000 !important;
  z-index: 99999999 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: all;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.85s var(--k-ease-out-expo), visibility 0.85s ease;
  will-change: opacity;
}

#preloader.is-dismissed {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.preloader-globe-wrap {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 auto !important;
  width: 188px !important;
  height: 188px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: scale(1) !important;
  transition: transform 0.85s var(--k-ease-out-expo), opacity 0.85s var(--k-ease-out-expo) !important;
}

#preloader.is-dismissed .preloader-globe-wrap {
  transform: scale(0.92) !important;
  opacity: 0 !important;
}

.preloader-globe-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  filter: brightness(1);
  background: transparent;
  display: block !important;
}

.preloader-progress-track {
  width: 72px;
  height: 1.5px;
  background: rgba(255, 255, 255, 0.16);
  margin-top: 22px;
  overflow: hidden;
  position: relative;
}

.preloader-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: #FFFFFF;
  transform: scaleX(0);
  transform-origin: left center;
  animation: kPreloaderFill 1.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes kPreloaderFill {
  0% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

/* --------------------------------------------------------------------------
   01. CHOREOGRAPHED PAGE TRANSITIONS (3-BLADE SATIN CURTAIN & MONOLITH)
   Strictly Monochrome (#000000, #FFFFFF, rgba(255,255,255,0.08))
   -------------------------------------------------------------------------- */
#pageProgressHairline {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.35), #FFFFFF);
  z-index: 100000005;
  pointer-events: none;
  opacity: 0;
  transition: width 0.85s var(--k-ease-out-expo), opacity 0.35s ease;
}

#pageProgressHairline.hl-on {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   01. CHOREOGRAPHED PAGE TRANSITION MODES: SILK, IRIS, SPATIAL, CURTAIN
   -------------------------------------------------------------------------- */

/* Active Transition Overlay Container */
#kDualCurtain {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100000000;
  pointer-events: none;
  display: flex;
  visibility: hidden;
}

#kDualCurtain.is-active {
  visibility: visible;
  pointer-events: all;
}

/* ==========================================================================
   MODE 1: SILK (Default - Luminous Soft Blur & Ambient Lift)
   ========================================================================== */
html[data-k-transition-mode="silk"] #kDualCurtain {
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: background 0.38s cubic-bezier(0.25, 1, 0.5, 1),
              backdrop-filter 0.38s cubic-bezier(0.25, 1, 0.5, 1),
              -webkit-backdrop-filter 0.38s cubic-bezier(0.25, 1, 0.5, 1);
}

html[data-k-transition-mode="silk"] #kDualCurtain .k-blade {
  display: none !important;
}

html[data-k-transition-mode="silk"] #kDualCurtain.is-closing {
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

html[data-k-transition-mode="silk"] #kDualCurtain.is-closed {
  background: rgba(0, 0, 0, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: none !important;
}

html[data-k-transition-mode="silk"] #kDualCurtain.is-opening {
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: background 0.46s cubic-bezier(0.16, 1, 0.3, 1),
              backdrop-filter 0.46s cubic-bezier(0.16, 1, 0.3, 1),
              -webkit-backdrop-filter 0.46s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Departing body in silk mode */
html[data-k-transition-mode="silk"] body.k-page-leaving main,
html[data-k-transition-mode="silk"] body.k-page-leaving .links-shell,
html[data-k-transition-mode="silk"] body.k-page-leaving .story-page-wrapper {
  transform: translate3d(0, 10px, 0) scale(0.985) !important;
  opacity: 0.25 !important;
  filter: blur(2px) !important;
  transition: transform 0.34s cubic-bezier(0.25, 1, 0.5, 1),
              opacity 0.34s ease,
              filter 0.34s ease !important;
}

/* ==========================================================================
   MODE 2: IRIS (Cinematic Radial Camera Aperture)
   ========================================================================== */
html[data-k-transition-mode="iris"] #kDualCurtain {
  background: #000000;
  clip-path: circle(0% at 50% 50%);
  -webkit-clip-path: circle(0% at 50% 50%);
  transition: clip-path 0.55s cubic-bezier(0.77, 0, 0.175, 1),
              -webkit-clip-path 0.55s cubic-bezier(0.77, 0, 0.175, 1);
}

html[data-k-transition-mode="iris"] #kDualCurtain .k-blade {
  display: none !important;
}

html[data-k-transition-mode="iris"] #kDualCurtain.is-closing {
  clip-path: circle(150% at 50% 50%);
  -webkit-clip-path: circle(150% at 50% 50%);
}

html[data-k-transition-mode="iris"] #kDualCurtain.is-closed {
  clip-path: circle(150% at 50% 50%);
  -webkit-clip-path: circle(150% at 50% 50%);
  transition: none !important;
}

html[data-k-transition-mode="iris"] #kDualCurtain.is-opening {
  clip-path: circle(0% at 50% 50%);
  -webkit-clip-path: circle(0% at 50% 50%);
  transition: clip-path 0.62s cubic-bezier(0.16, 1, 0.3, 1),
              -webkit-clip-path 0.62s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   MODE 3: SPATIAL (Architectural Forward Push & Gallery Drift)
   ========================================================================== */
html[data-k-transition-mode="spatial"] #kDualCurtain {
  background: #000000;
  opacity: 0;
  transition: opacity 0.4s ease;
}

html[data-k-transition-mode="spatial"] #kDualCurtain .k-blade {
  display: none !important;
}

html[data-k-transition-mode="spatial"] #kDualCurtain.is-closing {
  opacity: 0.95;
}

html[data-k-transition-mode="spatial"] #kDualCurtain.is-closed {
  opacity: 1;
  transition: none !important;
}

html[data-k-transition-mode="spatial"] #kDualCurtain.is-opening {
  opacity: 0;
  transition: opacity 0.5s ease;
}

html[data-k-transition-mode="spatial"] body.k-page-leaving main,
html[data-k-transition-mode="spatial"] body.k-page-leaving .links-shell,
html[data-k-transition-mode="spatial"] body.k-page-leaving .story-page-wrapper {
  transform: translate3d(0, -20px, 0) scale(1.035) !important;
  opacity: 0.1 !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.35s ease !important;
}

/* ==========================================================================
   MODE 4: CURTAIN (Original 3-Blade Monochrome Satin Wipe)
   ========================================================================== */
html[data-k-transition-mode="curtain"] #kDualCurtain .k-blade,
html:not([data-k-transition-mode]) #kDualCurtain .k-blade {
  flex: 1;
  height: 100%;
  background: #000000;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(255, 255, 255, 0.12);
  transform: scaleY(0);
  transform-origin: bottom center;
  will-change: transform;
  transition: transform 0.72s var(--k-ease-in-out-quart);
}

html[data-k-transition-mode="curtain"] #kDualCurtain .k-blade:nth-child(2),
html:not([data-k-transition-mode]) #kDualCurtain .k-blade:nth-child(2) {
  transition-delay: 0.09s;
}

html[data-k-transition-mode="curtain"] #kDualCurtain .k-blade:nth-child(3),
html:not([data-k-transition-mode]) #kDualCurtain .k-blade:nth-child(3) {
  border-right: none;
  transition-delay: 0.18s;
}

html[data-k-transition-mode="curtain"] #kDualCurtain.is-closing .k-blade,
html:not([data-k-transition-mode]) #kDualCurtain.is-closing .k-blade {
  transform-origin: bottom center;
  transform: scaleY(1);
}

html[data-k-transition-mode="curtain"] #kDualCurtain.is-closed .k-blade,
html:not([data-k-transition-mode]) #kDualCurtain.is-closed .k-blade {
  transform-origin: top center;
  transform: scaleY(1);
  transition: none !important;
}

html[data-k-transition-mode="curtain"] #kDualCurtain.is-opening .k-blade,
html:not([data-k-transition-mode]) #kDualCurtain.is-opening .k-blade {
  transform-origin: top center;
  transform: scaleY(0);
  transition: transform 0.82s var(--k-ease-in-out-quart);
}

html[data-k-transition-mode="curtain"] #kDualCurtain.is-opening .k-blade:nth-child(2),
html:not([data-k-transition-mode]) #kDualCurtain.is-opening .k-blade:nth-child(2) {
  transition-delay: 0.095s;
}

html[data-k-transition-mode="curtain"] #kDualCurtain.is-opening .k-blade:nth-child(3),
html:not([data-k-transition-mode]) #kDualCurtain.is-opening .k-blade:nth-child(3) {
  transition-delay: 0.19s;
}


/* Only show the center HUD in curtain mode */
html:not([data-k-transition-mode="curtain"]) .k-transit-center-hud {
  display: none !important;
}

/* Curtain Center Monochrome HUD */
.k-transit-center-hud {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateY(12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.36s ease 0.16s, transform 0.48s var(--k-ease-out-expo) 0.16s;
  z-index: 2;
}

#kDualCurtain.is-closing .k-transit-center-hud {
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0);
}

#kDualCurtain.is-closed .k-transit-center-hud {
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0);
  transition: none !important;
}

#kDualCurtain.is-opening .k-transit-center-hud {
  opacity: 0;
  transform: translate(-50%, -50%) translateY(-16px);
  transition: opacity 0.32s ease, transform 0.42s var(--k-ease-out-expo);
}

.k-transit-globe-wrap {
  width: 116px;
  height: 116px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}

.k-transit-globe-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.k-transit-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.k-transit-kanji {
  width: 22px;
  height: 22px;
  object-fit: contain;
  opacity: 0.94;
}

.k-transit-wordmark {
  font-family: "Nohemi", "Base Neue Expanded", "Neue Montreal", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #FFFFFF;
  font-weight: 700;
}

.k-transit-chapter {
  font-family: "Neue Montreal", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  font-weight: 500;
}

.k-transit-meter {
  width: 84px;
  height: 1.5px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
  position: relative;
}

.k-transit-meter::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  animation: kMeterSweep 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#kDualCurtain.is-closed .k-transit-meter::after {
  left: 0% !important;
  animation: none !important;
}

@keyframes kMeterSweep {
  0% { left: -100%; }
  100% { left: 0%; }
}

/* Tactile Card Compression & Sibling Recession on Departure */
.bento-card.k-is-anticipating {
  transform: scale(0.972) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 0 36px rgba(255, 255, 255, 0.16) !important;
  z-index: 10 !important;
  transition: transform 0.24s var(--k-ease-out-expo), border-color 0.2s ease !important;
}

.bento-master-grid.is-grid-receding .bento-card:not(.k-is-anticipating) {
  transform: scale(0.94) translateY(8px) !important;
  opacity: 0.28 !important;
  filter: blur(3px);
  transition: transform 0.32s var(--k-ease-out-expo), opacity 0.28s ease, filter 0.28s ease !important;
}

body.k-page-leaving header.site-header,
body.k-page-leaving .subpage-header,
body.k-page-leaving .top-nav-bar,
body.k-page-leaving .menu-top-bar {
  transform: translateY(-14px) !important;
  opacity: 0 !important;
  transition: transform 0.24s var(--k-ease-out-expo), opacity 0.2s ease !important;
}

body.k-page-entering main,
body.k-page-entering .links-shell,
body.k-page-entering .story-page-wrapper,
body.k-page-entering .about-page-canvas {
  animation: kStageArrive 0.56s var(--k-ease-out-expo) both;
}

@keyframes kStageArrive {
  0% {
    opacity: 0.35;
    transform: translate3d(0, 18px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* --------------------------------------------------------------------------
   02. UNIVERSAL KINETIC TYPOGRAPHY MASKS & BLENDED COLLAGE FOOTER EFFECTS
   Applies identical bidirectional scroll-reveal & floating cutout choreography
   to EVERY page on the site that has a footer.
   -------------------------------------------------------------------------- */
.k-mask-wrap {
  display: inline-flex;
  overflow: hidden;
  vertical-align: top;
  line-height: 1.15;
}

.k-mask-word {
  display: inline-block;
  transform: translateY(118%);
  opacity: 0.001;
  will-change: transform, opacity;
  transition: transform 0.72s var(--k-ease-out-expo), opacity 0.55s ease;
}

.k-mask-revealed .k-mask-word,
.blended-footer-section.k-revealed .k-mask-word {
  transform: translateY(0%);
  opacity: 1;
}

.k-mask-revealed .k-mask-wrap:nth-child(1) .k-mask-word,
.blended-footer-section.k-revealed .k-mask-wrap:nth-child(1) .k-mask-word { transition-delay: 0.04s; }
.k-mask-revealed .k-mask-wrap:nth-child(2) .k-mask-word,
.blended-footer-section.k-revealed .k-mask-wrap:nth-child(2) .k-mask-word { transition-delay: 0.10s; }
.k-mask-revealed .k-mask-wrap:nth-child(3) .k-mask-word,
.blended-footer-section.k-revealed .k-mask-wrap:nth-child(3) .k-mask-word { transition-delay: 0.16s; }
.k-mask-revealed .k-mask-wrap:nth-child(4) .k-mask-word,
.blended-footer-section.k-revealed .k-mask-wrap:nth-child(4) .k-mask-word { transition-delay: 0.22s; }
.k-mask-revealed .k-mask-wrap:nth-child(5) .k-mask-word,
.blended-footer-section.k-revealed .k-mask-wrap:nth-child(5) .k-mask-word { transition-delay: 0.28s; }
.k-mask-revealed .k-mask-wrap:nth-child(6) .k-mask-word,
.blended-footer-section.k-revealed .k-mask-wrap:nth-child(6) .k-mask-word { transition-delay: 0.34s; }

/* Universal Blended Collage Footer Choreography */
html.k-footer-motion-ready:not(.k-reduced-motion) .blended-footer-section .collage-cutout-left {
  transform: translate3d(0, 88px, 0) rotate(-9deg) scale(0.94);
  opacity: 0.08;
  transition: transform 0.95s var(--k-ease-out-expo), opacity 0.75s ease;
  will-change: transform, opacity;
}

html.k-footer-motion-ready:not(.k-reduced-motion) .blended-footer-section .collage-cutout-right {
  transform: translate3d(0, 96px, 0) rotate(9deg) scale(0.94);
  opacity: 0.08;
  transition: transform 0.95s var(--k-ease-out-expo) 0.12s, opacity 0.75s ease 0.12s;
  will-change: transform, opacity;
}

html.k-footer-motion-ready:not(.k-reduced-motion) .blended-footer-section.k-revealed .collage-cutout-left {
  transform: translate3d(var(--k-cutout-lx, 0px), var(--k-cutout-ly, 0px), 0) rotate(-2deg) scale(1);
  opacity: 0.9;
}

html.k-footer-motion-ready:not(.k-reduced-motion) .blended-footer-section.k-revealed .collage-cutout-right {
  transform: translate3d(var(--k-cutout-rx, 0px), var(--k-cutout-ry, 0px), 0) rotate(2deg) scale(1);
  opacity: 0.9;
}

html.k-footer-motion-ready:not(.k-reduced-motion) .blended-footer-section .blended-footer-inner {
  transform: translate3d(0, 36px, 0);
  opacity: 0.16;
  transition: transform 0.85s var(--k-ease-out-expo), opacity 0.68s ease;
  will-change: transform, opacity;
}

html.k-footer-motion-ready:not(.k-reduced-motion) .blended-footer-section.k-revealed .blended-footer-inner {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

/* Staggered Social Icon Reveal & Reversal inside Blended Footer */
.blended-social-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(8px, 2.4vw, 16px) !important;
  width: 100% !important;
  max-width: 100% !important;
}

html.k-footer-motion-ready:not(.k-reduced-motion) .blended-footer-section .blended-social-row .blended-social-icon {
  transform: translate3d(0, 18px, 0) scale(0.88);
  opacity: 0;
  transition: transform 0.6s var(--k-ease-out-expo), opacity 0.45s ease, background-color 0.2s ease;
}

html.k-footer-motion-ready:not(.k-reduced-motion) .blended-footer-section.k-revealed .blended-social-row .blended-social-icon {
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 0.88;
}

html.k-footer-motion-ready:not(.k-reduced-motion) .blended-footer-section.k-revealed .blended-social-row .blended-social-icon:hover {
  transform: translate3d(0, -3px, 0) scale(1.06);
  opacity: 1;
}

html.k-footer-motion-ready:not(.k-reduced-motion) .blended-footer-section.k-revealed .blended-social-row .blended-social-icon:nth-child(1) { transition-delay: 0.08s; }
html.k-footer-motion-ready:not(.k-reduced-motion) .blended-footer-section.k-revealed .blended-social-row .blended-social-icon:nth-child(2) { transition-delay: 0.12s; }
html.k-footer-motion-ready:not(.k-reduced-motion) .blended-footer-section.k-revealed .blended-social-row .blended-social-icon:nth-child(3) { transition-delay: 0.16s; }
html.k-footer-motion-ready:not(.k-reduced-motion) .blended-footer-section.k-revealed .blended-social-row .blended-social-icon:nth-child(4) { transition-delay: 0.20s; }
html.k-footer-motion-ready:not(.k-reduced-motion) .blended-footer-section.k-revealed .blended-social-row .blended-social-icon:nth-child(5) { transition-delay: 0.24s; }
html.k-footer-motion-ready:not(.k-reduced-motion) .blended-footer-section.k-revealed .blended-social-row .blended-social-icon:nth-child(6) { transition-delay: 0.28s; }
html.k-footer-motion-ready:not(.k-reduced-motion) .blended-footer-section.k-revealed .blended-social-row .blended-social-icon:nth-child(7) { transition-delay: 0.32s; }
html.k-footer-motion-ready:not(.k-reduced-motion) .blended-footer-section.k-revealed .blended-social-row .blended-social-icon:nth-child(8) { transition-delay: 0.36s; }
html.k-footer-motion-ready:not(.k-reduced-motion) .blended-footer-section.k-revealed .blended-social-row .blended-social-icon:nth-child(9) { transition-delay: 0.40s; }

/* Newsletter Form & Bottom Bar Reveal inside Blended Footer */
html.k-footer-motion-ready:not(.k-reduced-motion) .blended-footer-section .blended-form-wrap {
  transform: translate3d(0, 24px, 0);
  opacity: 0.15;
  transition: transform 0.78s var(--k-ease-out-expo) 0.14s, opacity 0.6s ease 0.14s;
}

html.k-footer-motion-ready:not(.k-reduced-motion) .blended-footer-section.k-revealed .blended-form-wrap {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

html.k-footer-motion-ready:not(.k-reduced-motion) .blended-footer-section .blended-bottom-bar {
  transform: translate3d(0, 16px, 0);
  opacity: 0.15;
  transition: transform 0.72s var(--k-ease-out-expo) 0.22s, opacity 0.55s ease 0.22s;
}

html.k-footer-motion-ready:not(.k-reduced-motion) .blended-footer-section.k-revealed .blended-bottom-bar {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

/* Compact Footers (links.html, menu.html, audio.html) Reversible Reveal */
html.k-footer-motion-ready:not(.k-reduced-motion) footer:not(.blended-footer-section) {
  transform: translate3d(0, 18px, 0);
  opacity: 0.2;
  transition: transform 0.68s var(--k-ease-out-expo), opacity 0.52s ease;
}

html.k-footer-motion-ready:not(.k-reduced-motion) footer:not(.blended-footer-section).k-revealed {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   03. HOME CIRCLE MASK REVEAL
   -------------------------------------------------------------------------- */
.k-circle-mask-stage {
  clip-path: circle(0px at 50% 50%);
  will-change: clip-path;
  transition: clip-path 0.75s var(--k-ease-out-expo);
}

.k-circle-mask-stage.is-unmasked {
  clip-path: circle(150% at 50% 50%) !important;
}

/* --------------------------------------------------------------------------
   04. CUSTOM MAGNETIC CURSOR
   -------------------------------------------------------------------------- */
#kCursorDot {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--k-cursor-size);
  height: var(--k-cursor-size);
  background-color: #ffffff;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999999;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s ease, transform 0.08s ease;
  mix-blend-mode: difference;
  will-change: transform;
}

#kCursorRing {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--k-cursor-ring-size);
  height: var(--k-cursor-ring-size);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999998;
  transform: translate(-50%, -50%);
  transition: width 0.25s var(--k-ease-out-expo), height 0.25s var(--k-ease-out-expo),
              border-color 0.2s ease, background-color 0.2s ease,
              border-radius 0.25s ease, transform 0.08s linear;
  will-change: transform, width, height;
}

#kCursorRing.is-hovering-link {
  width: 46px;
  height: 46px;
  border-color: rgba(255, 255, 255, 0.9);
  background-color: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(2px);
}

#kCursorRing.is-badge-view,
#kCursorRing.is-badge-play {
  width: 68px;
  height: 28px;
  border-radius: 14px;
  background-color: rgba(10, 10, 10, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
}

#kCursorRing::after {
  content: "";
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #ffffff;
  opacity: 0;
  transition: opacity 0.2s ease;
}

#kCursorRing.is-badge-view::after {
  content: "VIEW";
  opacity: 1;
}

#kCursorRing.is-badge-play::after {
  content: "PLAY";
  opacity: 1;
}

@media (hover: none) or (pointer: coarse), (prefers-reduced-motion: reduce) {
  #kCursorDot,
  #kCursorRing {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   05. MICRO-INTERACTIONS: CARD LIFT, IMAGE ZOOM, BUTTON DEPRESSION
   -------------------------------------------------------------------------- */
.bento-card,
.fan-card,
.mobile-showcase-card,
.clean-cinema-card,
.clean-phone-card,
.clean-design-card,
.media-work-card,
.pro-review-card,
.gear-item-card,
.brand-card,
.brand-video-card {
  transition: transform 0.35s var(--k-ease-out-expo), box-shadow 0.35s ease, border-color 0.25s ease;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .bento-card:hover,
  .fan-card:hover,
  .mobile-showcase-card:hover,
  .clean-cinema-card:hover,
  .clean-phone-card:hover,
  .clean-design-card:hover,
  .media-work-card:hover {
    transform: translateY(-4px);
  }

  .bento-card:hover img:not(.kanji-frame img),
  .fan-card:hover img,
  .fan-card:hover video,
  .mobile-showcase-card:hover video,
  .mobile-showcase-card:hover img,
  .clean-cinema-card:hover video,
  .clean-cinema-card:hover img,
  .clean-phone-card:hover video,
  .clean-phone-card:hover img,
  .clean-design-card:hover img,
  .media-work-card:hover img,
  .media-work-card:hover video {
    transform: scale(1.03);
    transition: transform 0.4s var(--k-ease-out-expo);
  }

  .bento-card img,
  .fan-card img,
  .fan-card video,
  .mobile-showcase-card video,
  .mobile-showcase-card img,
  .clean-cinema-card video,
  .clean-cinema-card img,
  .clean-phone-card video,
  .clean-phone-card img,
  .clean-design-card img,
  .media-work-card img,
  .media-work-card video {
    transition: transform 0.35s ease-out;
  }
}

:where(.hero-primary-btn, .btn-about-primary, .btn-about-outline, .links-button, .social-btn, .stream-pill-btn, .k-btn-tactile, .header-menu-btn, .social-btn-circle):active {
  transform: scale(0.97) !important;
  transition: transform 0.12s ease !important;
}

.u-hover-underline {
  position: relative;
  display: inline-block;
}

.u-hover-underline::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1.5px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--k-ease-out-expo);
}

.u-hover-underline:hover::after,
a:hover .u-hover-underline::after {
  transform: scaleX(1);
}

.k-text-roll {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: 1;
}

.k-text-roll-inner {
  display: inline-flex;
  flex-direction: column;
  transition: transform 0.3s var(--k-ease-out-expo);
}

.k-text-roll:hover .k-text-roll-inner,
button:hover .k-text-roll-inner,
a:hover .k-text-roll-inner {
  transform: translateY(-50%);
}

/* --------------------------------------------------------------------------
   05. INTERACTIVE 3D PERSPECTIVE TILT, SPECULAR GLARE & AMBIENT LOOPS
   -------------------------------------------------------------------------- */

/* Hardware accelerated 3D scene depth on interactive containers */
.bento-master-grid,
.remixes-grid,
.music-catalog-grid,
.downloads-grid {
  perspective: 1200px;
}

/* 3D tilt card base with smooth transition release */
.bento-card,
.hero-bento-card,
.release-card,
.remix-card,
.catalog-card,
.brand-card {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.45s ease,
              border-color 0.25s ease;
  position: relative;
}

/* Elevated internal graphics with enhanced parallax depth */
.bento-card .card-graphic-right,
.bento-card .treble-clef-img,
.bento-card .camera-graphic-img,
.bento-card .brand-graphic-img {
  transform: translateZ(28px);
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* Subtle continuous ambient breathing & floating loop on Kanji logo and 3D icons */
@keyframes kFloatingAmbient {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-5px) rotate(0.8deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

@keyframes kKanjiPulseSlow {
  0% {
    transform: scale(1) translateZ(24px);
    filter: drop-shadow(0 4px 16px rgba(255, 255, 255, 0.05));
  }
  50% {
    transform: scale(1.025) translateZ(32px);
    filter: drop-shadow(0 8px 24px rgba(255, 255, 255, 0.12));
  }
  100% {
    transform: scale(1) translateZ(24px);
    filter: drop-shadow(0 4px 16px rgba(255, 255, 255, 0.05));
  }
}

/* Slow continuous rotation on decorative spin rings & globes */
@keyframes kSlowSpinZ {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Ambient specular sheen passing across premium glass surfaces */
@keyframes kGlassSheenPass {
  0% {
    transform: translateX(-120%) skewX(-20deg);
    opacity: 0;
  }
  20% {
    opacity: 0.18;
  }
  40% {
    transform: translateX(160%) skewX(-20deg);
    opacity: 0;
  }
  100% {
    transform: translateX(160%) skewX(-20deg);
    opacity: 0;
  }
}

/* Apply floating animation to brand emblem cards */
.card-kanji .kanji-frame img,
#cardKanji .kanji-frame img {
  /* removed idle pulse */
  display: block;
}

/* Decorative 3D floating on service graphics */
.card-for-audio:hover .treble-clef-img,
.card-make-visuals:hover .camera-graphic-img,
.card-for-brands:hover .brand-graphic-img {
  /* removed idle float */
}

/* Luxury card specular sheen overlay */




/* Rotating icon accents */
.rotating-accent-icon,
.preloader-globe-wrap {
  will-change: transform;
}


/* --------------------------------------------------------------------------
   07. ACCESSIBILITY: PREFERS-REDUCED-MOTION
   -------------------------------------------------------------------------- */

/* ==========================================================================
   CREATIVE SUBPAGE HERO ENTRANCE CHOREOGRAPHY
   Active when body has .k-subpage-hero-active or .k-revealed
   Bypasses the preloader on cold load and internal navigation.
   ========================================================================== */

/* Guard: Preloader strictly reserved for Home and Portfolio */
html:not([data-k-hub="1"]) #preloader {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Kinetic Keyframes */
@keyframes kSubpageBadgeBloom {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
    letter-spacing: 0.12em;
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    letter-spacing: inherit;
  }
}

@keyframes kSubpageTitleRise {
  0% {
    opacity: 0;
    transform: translateY(32px);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0px);
  }
}

@keyframes kSubpageCopyRise {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes kSubpageMediaScale {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.96);
    filter: brightness(0.9) contrast(1.05);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: brightness(1) contrast(1);
  }
}

@keyframes kSubpageSheenSweep {
  0% {
    transform: translateX(-120%) rotate(25deg);
    opacity: 0;
  }
  40% {
    opacity: 0.3;
  }
  100% {
    transform: translateX(180%) rotate(25deg);
    opacity: 0;
  }
}

/* Staggered Subpage Hero Choreography */
body.k-subpage-hero-active:not(.k-reduced-motion) .about-hero-kicker,
body.k-subpage-hero-active:not(.k-reduced-motion) .hero-stage-badge,
body.k-subpage-hero-active:not(.k-reduced-motion) .hero-badge,
body.k-subpage-hero-active:not(.k-reduced-motion) .legal-kicker,
body.k-subpage-hero-active:not(.k-reduced-motion) .section-eyebrow,
body.k-subpage-hero-active:not(.k-reduced-motion) .kit-eyebrow {
  animation: kSubpageBadgeBloom 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.04s both !important;
}

body.k-subpage-hero-active:not(.k-reduced-motion) .about-hero-headline,
body.k-subpage-hero-active:not(.k-reduced-motion) .garrix-hero-title,
body.k-subpage-hero-active:not(.k-reduced-motion) .stage-title,
body.k-subpage-hero-active:not(.k-reduced-motion) .brands-title,
body.k-subpage-hero-active:not(.k-reduced-motion) #current-discipline,
body.k-subpage-hero-active:not(.k-reduced-motion) .ios-main-title,
body.k-subpage-hero-active:not(.k-reduced-motion) .track-hero-title,
body.k-subpage-hero-active:not(.k-reduced-motion) .legal-title,
body.k-subpage-hero-active:not(.k-reduced-motion) .contact-hero h1,
body.k-subpage-hero-active:not(.k-reduced-motion) .playlists-hero h1 {
  animation: kSubpageTitleRise 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both !important;
}

body.k-subpage-hero-active:not(.k-reduced-motion) .about-hero-subtitle,
body.k-subpage-hero-active:not(.k-reduced-motion) .garrix-artist-emdash,
body.k-subpage-hero-active:not(.k-reduced-motion) .garrix-hero-meta,
body.k-subpage-hero-active:not(.k-reduced-motion) .stage-subtitle,
body.k-subpage-hero-active:not(.k-reduced-motion) .stage-meta,
body.k-subpage-hero-active:not(.k-reduced-motion) #current-category,
body.k-subpage-hero-active:not(.k-reduced-motion) .legal-date,
body.k-subpage-hero-active:not(.k-reduced-motion) .contact-intro,
body.k-subpage-hero-active:not(.k-reduced-motion) .report-date {
  animation: kSubpageCopyRise 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.22s both !important;
}

body.k-subpage-hero-active:not(.k-reduced-motion) .hero-philosophy-quote-box,
body.k-subpage-hero-active:not(.k-reduced-motion) .garrix-hero-actions,
body.k-subpage-hero-active:not(.k-reduced-motion) .gallery-invitation,
body.k-subpage-hero-active:not(.k-reduced-motion) .hero-actions {
  animation: kSubpageCopyRise 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.30s both !important;
}

body.k-subpage-hero-active:not(.k-reduced-motion) .artist-photo-print,
body.k-subpage-hero-active:not(.k-reduced-motion) .garrix-hero-artwork,
body.k-subpage-hero-active:not(.k-reduced-motion) .stage-player-card,
body.k-subpage-hero-active:not(.k-reduced-motion) .track-cover-frame,
body.k-subpage-hero-active:not(.k-reduced-motion) .dashboard {
  animation: kSubpageMediaScale 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both !important;
  position: relative;
  overflow: hidden;
}

body.k-subpage-hero-active:not(.k-reduced-motion) .artist-photo-print::after,
body.k-subpage-hero-active:not(.k-reduced-motion) .garrix-hero-artwork::after,
body.k-subpage-hero-active:not(.k-reduced-motion) .stage-player-card::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.14) 50%,
    transparent 65%
  );
  pointer-events: none;
  animation: kSubpageSheenSweep 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.35s 1 forwards;
}



/* ==========================================================================
   HIGH-END PHYSICAL CARD HOVER ELEVATION (PEAK UI/UX CLEAN CSS)
   Replaces heavy 3D JS perspective tilts with buttery smooth compositor-only elevation.
   ========================================================================== */
.bento-card,
.release-card,
.remix-card,
.catalog-card,
.brand-card,
.media-card,
.service-card {
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.22s ease !important;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .bento-card:hover,
  .release-card:hover,
  .remix-card:hover,
  .catalog-card:hover,
  .brand-card:hover,
  .media-card:hover,
  .service-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.7),
                0 0 0 1px rgba(255, 255, 255, 0.16) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .bento-master-grid .bento-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .k-circle-mask-stage {
    clip-path: none !important;
  }

  #preloader,
  #kDualCurtain,
  #pageProgressHairline,
  #heroLoadingRing {
    display: none !important;
  }
}