/* ════════════════════════════════════════════════════════════════
   WINR v21 — Directory page polish
   Final hover + empty-state polish per Notion Week 1 task.
   Loads after _v13_features.css so it can override safely.

   Touches ONLY :is(.directory-page, .homepage) surfaces. Community lobby + inside-
   community view (.community-lobby) are owned by _v18_community_view.css
   and are intentionally NOT touched here.
   ════════════════════════════════════════════════════════════════ */

/* ── Empty state — cinematic polish ──────────────────────────── */
:is(.directory-page, .homepage) .explore-empty{
  /* Override the baseline 60px-20px-40px padding with a more breathable
     vertical layout that feels intentional, not "we ran out of stuff" */
  padding:80px 20px 60px;
  animation:dirEmptyRise 480ms cubic-bezier(0.22, 1, 0.36, 1) both
}

@keyframes dirEmptyRise{
  from { opacity:0; transform:translateY(12px) }
  to   { opacity:1; transform:translateY(0) }
}

/* Icon — soft idle pulse so it feels alive, not stuck */
:is(.directory-page, .homepage) .explore-empty .explore-empty-icon{
  position:relative;
  width:72px;
  height:72px;
  background:linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border-color:rgba(255,255,255,0.1);
  animation:dirEmptyPulse 3.2s ease-in-out infinite
}
:is(.directory-page, .homepage) .explore-empty .explore-empty-icon::before{
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.06);
  animation:dirEmptyRing 3.2s ease-in-out infinite;
  pointer-events:none
}
:is(.directory-page, .homepage) .explore-empty .explore-empty-icon svg{
  transition:transform 400ms cubic-bezier(0.22, 1, 0.36, 1)
}
:is(.directory-page, .homepage) .explore-empty:hover .explore-empty-icon svg{
  transform:scale(1.1) rotate(-4deg)
}

@keyframes dirEmptyPulse{
  0%,100% { box-shadow:0 0 0 0 rgba(255,255,255,0.06) }
  50%     { box-shadow:0 0 32px 0 rgba(255,255,255,0.12) }
}
@keyframes dirEmptyRing{
  0%,100% { transform:scale(1);   opacity:0.6 }
  50%     { transform:scale(1.12); opacity:0 }
}

/* Title — slightly larger, tighter */
:is(.directory-page, .homepage) .explore-empty .explore-empty-title{
  font-size:20px;
  letter-spacing:-0.3px;
  margin-bottom:8px
}

/* Text — wider line for better rhythm */
:is(.directory-page, .homepage) .explore-empty .explore-empty-text{
  max-width:420px;
  font-size:14px;
  line-height:1.55;
  color:rgba(255,255,255,0.5)
}

/* CTA buttons — make them feel like primary actions, not afterthoughts */
:is(.directory-page, .homepage) .explore-empty .explore-btn-ghost,
:is(.directory-page, .homepage) .explore-empty .explore-btn-primary{
  padding:11px 20px;
  font-size:13px;
  letter-spacing:0.2px;
  transition:transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
             background 200ms ease,
             border-color 200ms ease,
             box-shadow 240ms ease
}

:is(.directory-page, .homepage) .explore-empty .explore-btn-ghost:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,0.1);
  border-color:rgba(255,255,255,0.28)
}

:is(.directory-page, .homepage) .explore-empty .explore-btn-primary{
  position:relative;
  overflow:hidden;
  box-shadow:0 6px 20px rgba(255,255,255,0.12)
}
:is(.directory-page, .homepage) .explore-empty .explore-btn-primary::before{
  content:'';
  position:absolute;
  top:0; bottom:0; left:-100%;
  width:60%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
  transform:skewX(-20deg);
  transition:left 600ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events:none
}
:is(.directory-page, .homepage) .explore-empty .explore-btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(255,255,255,0.22)
}
:is(.directory-page, .homepage) .explore-empty .explore-btn-primary:hover::before{
  left:150%
}

/* ── Category tab — clean transition only (audit hotfix: the active glow
   was creating a visible "box" around Business which looked broken) ── */
:is(.directory-page, .homepage) .category-tab{
  transition:background 200ms ease,
             color 200ms ease
}

/* ── Grid fade-in stagger on category swap ────────────────────── */
:is(.directory-page, .homepage) .directory-grid > *{
  animation:dirCardIn 360ms cubic-bezier(0.22, 1, 0.36, 1) both
}
@keyframes dirCardIn{
  from { opacity:0; transform:translateY(8px) scale(0.985) }
  to   { opacity:1; transform:translateY(0) scale(1) }
}

/* ── Mobile tightening ───────────────────────────────────────── */
@media (max-width:720px){
  :is(.directory-page, .homepage) .explore-empty{
    padding:56px 16px 40px
  }
  :is(.directory-page, .homepage) .explore-empty .explore-empty-icon{
    width:64px;
    height:64px
  }
  :is(.directory-page, .homepage) .explore-empty .explore-empty-title{
    font-size:18px
  }
  :is(.directory-page, .homepage) .explore-empty .explore-empty-text{
    font-size:13px
  }
}

/* ════════════════════════════════════════════════════════════════
   v21 EXTENSION — Explore page final pass (Notion Week 2)
   Community card hover/active polish. Cards are `.cinematic-landscape-card`
   rendered by renderCommunityCard() in components.js.
   ════════════════════════════════════════════════════════════════ */

:is(.directory-page, .homepage) .cinematic-landscape-card{
  transition:transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
             box-shadow 360ms cubic-bezier(0.22, 1, 0.36, 1),
             border-color 240ms ease;
  will-change:transform;
  cursor:pointer
}

:is(.directory-page, .homepage) .cinematic-landscape-card:hover{
  transform:translateY(-4px) scale(1.012);
  box-shadow:0 24px 48px rgba(0,0,0,0.5),
             0 0 0 1px rgba(255,255,255,0.14),
             inset 0 1px 0 rgba(255,255,255,0.12)
}

/* Banner gets a subtle zoom on card hover (Ken Burns micro) */
:is(.directory-page, .homepage) .cinematic-landscape-card .c-bg{
  transition:transform 800ms cubic-bezier(0.22, 1, 0.36, 1),
             filter 400ms ease
}
:is(.directory-page, .homepage) .cinematic-landscape-card:hover .c-bg{
  transform:scale(1.06);
  filter:saturate(1.15) brightness(1.03)
}

/* CTA arrow nudges right on hover */
:is(.directory-page, .homepage) .cinematic-landscape-card .c-cta{
  transition:transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
             letter-spacing 280ms ease
}
:is(.directory-page, .homepage) .cinematic-landscape-card:hover .c-cta{
  transform:translateX(4px);
  letter-spacing:0.5px
}

/* Price tag — subtle scale on card hover */
:is(.directory-page, .homepage) .cinematic-landscape-card .c-price-tag{
  transition:transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
             box-shadow 280ms ease
}
:is(.directory-page, .homepage) .cinematic-landscape-card:hover .c-price-tag{
  transform:scale(1.04);
  box-shadow:0 4px 12px rgba(0,0,0,0.3)
}
:is(.directory-page, .homepage) .cinematic-landscape-card .c-price-tag.price-free{
  /* Make the Free tier feel earned, not bland */
  background:rgba(57,255,20,0.12);
  border-color:rgba(57,255,20,0.3);
  color:#39FF14
}

/* Members tag — pulse on card hover */
:is(.directory-page, .homepage) .cinematic-landscape-card .c-members-tag{
  transition:color 280ms ease, transform 280ms ease
}
:is(.directory-page, .homepage) .cinematic-landscape-card:hover .c-members-tag{
  color:rgba(255,255,255,0.9);
  transform:translateX(-2px)
}

/* Title — slight letter-spacing tighten on hover for "alive" feel */
:is(.directory-page, .homepage) .cinematic-landscape-card .c-title{
  transition:letter-spacing 320ms cubic-bezier(0.22, 1, 0.36, 1)
}
:is(.directory-page, .homepage) .cinematic-landscape-card:hover .c-title{
  letter-spacing:-0.5px
}

/* Search field — soft ambient glow on focus, no sharp ring
   (audit hotfix: the 1px box-shadow was rendering as a visible square) */
:is(.directory-page, .homepage) .explore-search{
  transition:border-color 240ms ease, box-shadow 320ms ease
}
:is(.directory-page, .homepage) .explore-search:focus-within{
  box-shadow:0 0 28px rgba(255,255,255,0.04)
}

/* Kill native browser outlines on input + clear button */
:is(.directory-page, .homepage) .explore-search input:focus,
:is(.directory-page, .homepage) .explore-search input:focus-visible,
:is(.directory-page, .homepage) .explore-search-clear:focus,
:is(.directory-page, .homepage) .explore-search-clear:focus-visible{
  outline:none
}

/* Clear button glow on hover — no transform (audit hotfix: scale was making
   the X drift as the cursor approached it, felt broken) */
:is(.directory-page, .homepage) .explore-search-clear:hover{
  background:rgba(255,255,255,0.08) !important;
  color:#FFFFFF !important
}

/* Search icon — make clickable to focus the input (audit hotfix: was a
   passive <span> indicator that felt broken when clicked) */
:is(.directory-page, .homepage) .explore-search-icon{
  cursor:pointer
}

@media (prefers-reduced-motion: reduce){
  :is(.directory-page, .homepage) .cinematic-landscape-card,
  :is(.directory-page, .homepage) .cinematic-landscape-card .c-bg,
  :is(.directory-page, .homepage) .cinematic-landscape-card .c-cta,
  :is(.directory-page, .homepage) .cinematic-landscape-card .c-price-tag,
  :is(.directory-page, .homepage) .cinematic-landscape-card .c-members-tag,
  :is(.directory-page, .homepage) .cinematic-landscape-card .c-title{
    transition:none;
    transform:none !important
  }
}