/* THE DJ CALENDAR - Motion layer (vanilla, zero dependencies) */
/* Loaded via @import from style.css. All motion gated behind
   prefers-reduced-motion: no-preference. Entrances animate
   transform/opacity only (compositor-friendly). */
@media (prefers-reduced-motion: no-preference) {

  /* --- 2. Homepage pill nav: cyan underline sweep on hover --- */
  .pill-btn--nav { position: relative; }
  .pill-btn--nav::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 5px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, #00d2ff, transparent);
    transform: scaleX(0);
    transform-origin: center;
    opacity: .9;
    transition: transform .28s cubic-bezier(.22,.61,.36,1);
    pointer-events: none;
  }
  .pill-btn--nav:hover::after,
  .pill-btn--nav:focus-visible::after { transform: scaleX(1); }

  /* Current pill: soft breathing glow (the EQ brand, alive) */
  .pill-btn--current { animation: djcPillGlow 3.2s ease-in-out infinite; }
  @keyframes djcPillGlow {
    0%, 100% { box-shadow: 0 0 0 rgba(0,210,255,0); }
    50%      { box-shadow: 0 0 14px rgba(0,210,255,.35); }
  }

  /* --- Subpage header nav links: gentle cyan lift --- */
  .nav-login, .nav-register, .nav-genre-dropdown {
    transition: color .2s ease, text-shadow .2s ease;
  margin-top:-3px;/*djc-gendrop-v1*/}
  .nav-login:hover, .nav-register:hover, .nav-genre-dropdown:hover {
    text-shadow: 0 0 8px rgba(0,210,255,.45);
  }

  /* --- 4. City show cards: fade-up entrance on scroll --- */
  /* Base state stays VISIBLE; hiding only happens once JS adds
     .motion-ready, so no-JS visitors and crawlers see everything. */
  .motion-ready .city-show-card {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
    will-change: opacity, transform;
  }
  .motion-ready .city-show-card.in-view {
    opacity: 1;
    transform: translateY(0);
  }
}/* ===== djc-home-track-v2 (Oct 19 2026): full hover track treatment + reserved height ===== */
.dj-card-track {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    color: #00d2ff;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.3px;
    justify-content: center;
    min-height: 18px;
}
.dj-card-track .track-icon {
    font-size: 0.9rem;
    line-height: 1;
    flex-shrink: 0;
}
.dj-card-track .track-icon::before {
    content: '\266A';
}
.dj-card-track .track-name {
    overflow: hidden;
    text-overflow: ellipsis;
}
.dj-card.is-preview-playing .dj-card-track {
    opacity: 1;
    transform: none;
}
/* ===== end djc-home-track-v2 ===== */


/* ===== djc-motion-plus-v1: hero entrance + reveal + hover flourish + ambient (Oct 20 2026) ===== */
/* 1. hero entrance stagger (homepage hero-content, artist eyebrow/giant/lede) */
.hero-content > * { animation: djcHeroIn .7s cubic-bezier(.22,1,.36,1) both; }
.hero-content > :nth-child(1) { animation-delay: .05s; }
.hero-content > :nth-child(2) { animation-delay: .18s; }
.hero-content > :nth-child(3) { animation-delay: .31s; }
.hero-content > :nth-child(n+4) { animation-delay: .42s; }
@keyframes djcHeroIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.eyebrow, .giant, .lede { animation: djcHeroIn .7s cubic-bezier(.22,1,.36,1) both; }
.eyebrow { animation-delay: .05s; }
.giant { animation-delay: .16s; }
.lede { animation-delay: .28s; }
/* 2. scroll-reveal (classes added by /djc-motion.js only - no-JS pages stay visible) */
.djc-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); will-change: opacity, transform; }
.djc-reveal.djc-reveal-in { opacity: 1; transform: none; }
/* 3. card hover flourish (slot rim glow + image zoom; .dj-card lift already exists in style.css) */
.dj-card-slot { transition: box-shadow .3s ease; }
.dj-card-slot:hover { box-shadow: 0 0 0 1px rgba(0,210,255,.35), 0 12px 32px -12px rgba(0,210,255,.22); }
.dj-card .card-image { overflow: hidden; }
.dj-card .card-image > img { transition: transform .45s cubic-bezier(.22,1,.36,1); }
.dj-card:hover .card-image > img { transform: scale(1.05); }
/* 4. ambient: slow cyan glow drift inside hero (contained, pointer-safe) */
.hero-section { position: relative; overflow: hidden; }
.hero-section::after { content: ""; position: absolute; top: -30%; left: -20%; width: 90%; height: 160%; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at 30% 40%, rgba(0,210,255,.07), transparent 55%), radial-gradient(ellipse at 75% 65%, rgba(0,210,255,.05), transparent 50%);
  animation: djcDrift 26s ease-in-out infinite alternate; }
@keyframes djcDrift { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(3%, 2%, 0) scale(1.06); } }
@media (prefers-reduced-motion: reduce) {
  .hero-content > *, .eyebrow, .giant, .lede { animation: none; }
  .djc-reveal { opacity: 1; transform: none; transition: none; }
  .hero-section::after { animation: none; }
}

/* djc-motion2-v1 entrance sequence: blast hero, cascade nav, bloom grid */
@keyframes djcBlastIn {
  0%   { opacity: 0; transform: scale(2.4); filter: blur(16px); }
  55%  { opacity: 1; filter: blur(2px); }
  78%  { transform: scale(.965); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}
.hero-section h1 { animation: djcBlastIn .95s cubic-bezier(.2,.85,.25,1) .12s both; }
.hero-section .hero-content p { animation-delay: .6s; }
@keyframes djcNavIn {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: none; }
}
.pill-bar > * { animation: djcNavIn .5s cubic-bezier(.22,1,.36,1) both; }
.pill-bar > *:nth-child(1) { animation-delay: .55s; }
.pill-bar > *:nth-child(2) { animation-delay: .62s; }
.pill-bar > *:nth-child(3) { animation-delay: .69s; }
.pill-bar > *:nth-child(4) { animation-delay: .76s; }
.pill-bar > *:nth-child(5) { animation-delay: .83s; }
.pill-bar > *:nth-child(6) { animation-delay: .90s; }
.pill-bar > *:nth-child(7) { animation-delay: .97s; }
.pill-bar > *:nth-child(8) { animation-delay: 1.04s; }
.pill-bar > *:nth-child(n+9) { animation-delay: 1.11s; }
#djGrid.djc-anim .dj-card-slot { opacity: 0; transform: translateY(20px); transition: opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1); }
#djGrid.djc-anim .dj-card-slot.slot-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-section h1, .hero-section .hero-content p, .pill-bar > * { animation: none; }
  #djGrid.djc-anim .dj-card-slot { opacity: 1; transform: none; transition: none; }
}
/* djc-motion2-v2: search fades down from the top */

/* ===== djc-pin-jump-fix-v1 (Oct 21 2026): keep the pill row at the exact same offset across the pin handoff. ===== */
/* Unpinned: 10px margin, no top border. Pinned was: 0px margin + 2px border = 8px hop. */
/* Now pinned: 8px margin + 2px border = 10px content offset - identical, cyan line docks into the gap. */
body.home-hero.home-past-header .home-sticky-nav,
body.home-hero.home-nav-is-pinned .home-sticky-nav { margin-top: 8px !important; }
/* ===== end djc-pin-jump-fix-v1 ===== */

/* ===== djc-pin-parity-v2 (Oct 21 2026): nav flush in BOTH states; cyan border docks in reserved space ===== */
body.home-hero .home-sticky-nav { margin-top: 0 !important; border-top: 2px solid transparent; }
body.home-hero.home-past-header .home-sticky-nav,
body.home-hero.home-nav-is-pinned .home-sticky-nav { margin-top: 0 !important; }
#homeStickyChrome > #djcAuthTabs { margin-bottom: 0 !important; }
/* ===== end djc-pin-parity-v2 ===== */