/* ==========================================================================
   PROJECT LAZARUS — STORE
   Page-specific styles. Tokens live in tokens.css, components live in
   /components/*.jsx. This file holds layout rules for the React mount
   point and accessibility helpers.
   ========================================================================== */

html, body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
}

body {
  /* The mockup components render at fixed widths (1440 desktop, 390 mobile).
     On wider viewports we center; on narrower ones the page scrolls
     horizontally for now. Proper responsive layout is a later milestone. */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  margin: 0;
}

#root {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* The fixed-width <Page> wrapper rendered by HomeDesktop / HomeMobile.
   Centered, no extra chrome around it. */
#root > div {
  margin: 0 auto;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--laz-green);
  color: var(--ink);
  padding: 8px 14px;
  font-family: var(--font-hed);
  font-weight: 800;
  z-index: 100;
}
.skip-link:focus { left: 12px; top: 12px; }

/* Honor reduced-motion preferences. Disable named decorative animations
   only — DO NOT use the universal animation-duration:0.01ms trick (it
   breaks loops into warp-speed blur rather than pausing them). */
@media (prefers-reduced-motion: reduce) {
  .lz-marquee,
  .lz-ticker,
  .lz-skeleton,
  [data-anim="pulse"],
  [data-anim="shimmer"] {
    animation: none !important;
  }
  /* Drawer / modal slide-in animations — keep the dialog functional but
     skip the slide. Fade is fine. */
  .lz-drawer-slide-in,
  [style*="lz-drawer-slide"],
  [style*="lz-rank-fade"],
  [style*="lz-fade-in"] {
    animation-duration: 0.001s !important;
  }
  .lz-cta:hover, [data-laz-card]:hover { transform: none !important; }
}

/* ==========================================================================
   BUTTON HOVERS
   LzBtn carries `lz-cta` + `lz-cta--<kind>` classes plus a `--lz-accent`
   CSS variable that holds the per-button accent. We use that variable
   here instead of hard-coding green so a Life-gold button hovers gold.
   ========================================================================== */

.lz-cta { will-change: transform, box-shadow; }

.lz-cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}
.lz-cta:active { transform: translateY(0); filter: brightness(0.96); }
.lz-cta:focus-visible {
  outline: 2px solid var(--lz-accent, var(--laz-green));
  outline-offset: 2px;
}

/* Primary (filled) — deep accent glow on hover */
.lz-cta--primary:hover {
  box-shadow:
    0 0 0 1px var(--lz-accent, var(--laz-green)),
    0 14px 36px rgba(0, 0, 0, 0.45),
    0 0 60px color-mix(in srgb, var(--lz-accent, #9dff2b) 55%, transparent);
}

/* Ghost (outlined) — fill in on hover, accent border */
.lz-cta--ghost:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--lz-accent, var(--laz-green));
  color: var(--bone, #e9e6dc);
}

/* Dark variant — accent-coloured border glow */
.lz-cta--dark:hover {
  box-shadow:
    0 0 0 1px var(--lz-accent, var(--laz-green)),
    0 0 28px color-mix(in srgb, var(--lz-accent, #9dff2b) 35%, transparent);
}

/* Steam button — Steam blue brighten */
.lz-cta--steam:hover {
  background: #2a475e;
  border-color: rgba(255, 255, 255, 0.32);
}

/* ==========================================================================
   GAMEMODE / PRODUCT CARD HOVERS
   The mockup renders cards with inline-style borders. We add a soft
   lift + accent glow via a class hook the components carry on hover.
   ========================================================================== */

a:hover { color: inherit; }

/* Generic interactive card class — any card with this gets the lift */
[data-laz-card]:hover {
  transform: translateY(-2px);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

/* ==========================================================================
   NAV LINK HOVER
   Each link sets --nav-accent so Original goes green, Life goes gold,
   Global goes purple. Default falls back to acid green.
   ========================================================================== */
.lz-nav-link:hover {
  color: var(--nav-accent, var(--laz-green)) !important;
  border-bottom-color: color-mix(in srgb, var(--nav-accent, #9dff2b) 60%, transparent) !important;
  background: color-mix(in srgb, var(--nav-accent, #9dff2b) 6%, transparent);
}
/* Brushed-paint icon next to each tab pops on hover — full saturation
   + a subtle scale + drop-shadow in the gamemode accent. */
.lz-nav-link:hover .lz-nav-icon {
  filter:
    saturate(1.15)
    drop-shadow(0 0 10px color-mix(in srgb, var(--nav-accent, #9dff2b) 55%, transparent))
    drop-shadow(0 4px 8px rgba(0,0,0,0.4));
  transform: rotate(-3deg) scale(1.08);
}

/* ==========================================================================
   FOOTER HOVER
   Footer links get a left-shifted underline + accent-green color flash.
   The `before` pseudo creates a slim accent bar that wipes in on hover.
   ========================================================================== */
footer ul li a {
  position: relative;
  display: inline-block;
  padding: 2px 0;
  transition: color .18s ease, transform .18s ease, padding-left .25s cubic-bezier(.2,.8,.2,1);
}
footer ul li a::before {
  content: "";
  position: absolute;
  left: -14px; top: 50%;
  width: 0; height: 1px;
  background: var(--laz-green);
  transition: width .25s cubic-bezier(.2,.8,.2,1);
}
footer ul li a:hover {
  color: var(--laz-green) !important;
  padding-left: 14px;
  text-decoration: none !important;
}
footer ul li a:hover::before {
  width: 10px;
}

/* Bottom-bar small links (Terms · Privacy · Contact) get a similar but
   subtler treatment — color flash only, no padding shift since they're
   inline. */
footer a:not([href^="mailto"]):not(.lz-cta) {
  transition: color .18s ease;
}
footer a:hover {
  color: var(--laz-green) !important;
}

/* Subtle hover for any plain anchor inside #root that doesn't already
   carry a class (footer columns, "VIEW ALL" links, etc.) */
#root a:not(.lz-cta):not(.lz-nav-link):not(footer ul li a):not(footer a):hover {
  color: var(--laz-green);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

/* ==========================================================================
   RESPONSIVE WIDTH
   Page renders at width:100% with max-width:1920 on desktop; we don't
   need extra rules here, but on viewports <768 the body shouldn't
   force-center a 390px child against the left edge — flex-center
   already handles it. Just ensure we never hide horizontal overflow
   hard, in case a section pushes past the viewport during refactors.
   ========================================================================== */
html, body { overflow-x: clip; }

/* ==========================================================================
   TABLET / SMALL DESKTOP PASS  (1024 – 1280px)
   The mockup designs at 1440 desktop. Below 1024 we render the mobile
   component (390 fixed). The 1024–1280 range still gets desktop, but
   the 80px section padding + 4-up grids look cramped. We use
   attribute-style targeting on the inline-styled sections that have
   that exact padding, easing it to ~32–40px and dropping internal
   4-up grids to 2-up.
   ========================================================================== */
@media (min-width: 1024px) and (max-width: 1280px) {
  /* Heuristic: any section that hard-codes 80px horizontal padding gets
     softened. We can't override every inline style cleanly, but most
     "section" padding rules in our components use 80px exactly. */
  #root section[style*="padding:'40px 80px"],
  #root section[style*="padding:'48px 80px"],
  #root section[style*="padding:'60px 80px"],
  #root section[style*="padding:'80px 80px"],
  #root section[style*="padding:'100px 80px"],
  #root section[style*="padding:'120px 80px"],
  #root section[style*="padding: 40px 80px"],
  #root section[style*="padding: 48px 80px"],
  #root section[style*="padding: 60px 80px"],
  #root section[style*="padding: 80px 80px"],
  #root section[style*="padding: 100px 80px"],
  #root section[style*="padding: 120px 80px"] {
    padding-left: 36px !important;
    padding-right: 36px !important;
  }
  /* Drop 4-up product strip to 2-up at this width */
  #root [style*="grid-template-columns: repeat(4, 1fr)"],
  #root [style*="gridTemplateColumns:'repeat(4,1fr)'"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Drop 3-up perk grid to 2-up */
  #root [style*="grid-template-columns: repeat(3, 1fr)"],
  #root [style*="gridTemplateColumns:'repeat(3,1fr)'"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ==========================================================================
   SKELETON LOADERS
   Used while /api/status, /api/auth/me, /api/account/* are in flight.
   The shimmer is a single moving gradient — cheap and instantly readable
   as "loading" without spelling it out in copy.
   ========================================================================== */
@keyframes lz-skeleton-pulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.lz-skeleton {
  display: inline-block;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.05) 0%,
    rgba(255,255,255,0.14) 50%,
    rgba(255,255,255,0.05) 100%
  );
  background-size: 200% 100%;
  animation: lz-skeleton-pulse 1.6s linear infinite;
  vertical-align: middle;
}