/* ============================================================
   ARCTIC SHOP BD — Loading States & UX Polish  (Step 5–7)
   Import this AFTER style.css
   ============================================================ */

/* ── Skeleton loader animation ───────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.09) 37%,
    rgba(255,255,255,0.04) 63%
  );
  background-size: 600px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
}

/* ── Product grid skeleton ───────────────────────────────── */
.pc-skeleton {
  position: relative;
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,0.05);
  aspect-ratio: 3/4;
  overflow: hidden;
}

.pc-skeleton .sk-img {
  width: 100%; height: 70%;
}

.pc-skeleton .sk-body {
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
}

.pc-skeleton .sk-line {
  height: 12px; border-radius: 3px;
}

.pc-skeleton .sk-line.wide   { width: 80%; }
.pc-skeleton .sk-line.med    { width: 55%; }
.pc-skeleton .sk-line.narrow { width: 35%; }
.pc-skeleton .sk-btn {
  height: 34px; width: 100%; border-radius: 2px; margin-top: 6px;
}

/* ── Button loading state ────────────────────────────────── */
.btn-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.75;
}

.btn-loading::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Disabled button guard ───────────────────────────────── */
button:disabled,
button[aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: 0.52 !important;
  pointer-events: none;
}

/* ── Place order button spinner (already in style.css, enhanced) */
.place-btn .spinner { animation: spin 0.8s linear infinite; }

/* ── Global error banner ─────────────────────────────────── */
#error-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9100;
  background: #e8325a;
  color: #fff;
  padding: 12px 52px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-align: center;
  transform: translateY(-100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

#error-banner.show { transform: translateY(0); }

#error-banner-close {
  position: absolute; top: 50%; right: 16px;
  transform: translateY(-50%);
  background: none; border: none; color: #fff;
  font-size: 18px; cursor: pointer; opacity: 0.75;
}
#error-banner-close:hover { opacity: 1; }

/* ── Inline field error ──────────────────────────────────── */
.field-err {
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  color: #e8325a;
  margin-top: 5px;
  display: none;
}
.field-err.show { display: block; }

/* ── Network offline indicator ───────────────────────────── */
#offline-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9200;
  background: #2a2a2a;
  border-top: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
  padding: 10px 24px;
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-align: center;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
#offline-bar.show { display: flex; }
.offline-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #e8325a;
}

/* ── Image lazy load fade-in ─────────────────────────────── */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.4s ease;
}
img[loading="lazy"].loaded { opacity: 1; }

/* All images that loaded before JS ran */
img.loaded,
img:not([loading="lazy"]) { opacity: 1; }

/* ── Product card image progressive loading ──────────────── */
.pc-img {
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.pc-img.loaded { opacity: 1; }

/* ── Cart item image ─────────────────────────────────────── */
.ci-thumb img {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.ci-thumb img.loaded { opacity: 1; }

/* ── Retry button for failed loads ──────────────────────── */
.retry-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.6);
  font-family: "DM Mono", monospace;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 8px 18px;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 12px;
}
.retry-btn:hover {
  border-color: var(--glow);
  color: var(--glow);
}

/* ── Products section empty/error state ──────────────────── */
.pg-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 72px 20px;
  color: rgba(17,17,17,0.35);
}
.pg-empty-icon { font-size: 52px; margin-bottom: 18px; opacity: 0.4; }
.pg-empty-text {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

/* ── Checkout form field focus highlight ─────────────────── */
.f input:focus,
.f select:focus,
.f textarea:focus {
  outline: none;
  border-color: rgba(17,17,17,0.5) !important;
  box-shadow: 0 0 0 3px rgba(17,17,17,0.08) !important;
}

.f input.err,
.f select.err,
.f textarea.err {
  border-color: #e8325a !important;
  box-shadow: 0 0 0 3px rgba(232,50,90,0.08) !important;
  animation: shake 0.35s ease;
}

@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-5px); }
  60%     { transform: translateX(5px); }
  80%     { transform: translateX(-3px); }
}

/* ── Success pulse on cart badge ─────────────────────────── */
@keyframes cartPulse {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(17,17,17,0.6); }
  50%  { transform: scale(1.4); box-shadow: 0 0 0 8px rgba(17,17,17,0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(17,17,17,0); }
}
.cart-count.bump { animation: cartPulse 0.4s ease forwards; }

/* ── Intro layer: force dark theme regardless of site-wide --ink value ──
   The site uses --ink: #ffffff (light theme) but the intro layer was
   designed for a dark cinema look. We re-declare the relevant variables
   locally so the intro always renders dark without touching anything else.
   ────────────────────────────────────────────────────────────────────── */
#intro-layer {
  --ink:   #070d17;   /* dark background */
  --white: #eef6ff;   /* light text       */
  --glow:  #111111;   /* accent (dark CTA button) */
  --muted: rgba(238, 246, 255, 0.45);
  background: #070d17 !important;
  color: #eef6ff !important;
}

/* ── Intro layer CSS-only entrance (replaces missing GSAP timeline) ── */
/*
   All intro elements start at opacity:0 in style.css and rely on GSAP to
   animate them in. Since that timeline was never written, we provide a
   CSS-only fallback. Using !important to win the specificity fight against
   the #intro-layer #element { opacity:0 } rules in style.css.
*/

/* ── Keyframes ─────────────────────────────────────────── */
@keyframes introFadeIn {
  from { opacity: 0 !important; }
  to   { opacity: 1 !important; }
}
@keyframes introWordRise {
  from { opacity: 0 !important; transform: translateY(60px) !important; }
  to   { opacity: 1 !important; transform: translateY(0)    !important; }
}
@keyframes introSlideUp {
  from { opacity: 0 !important; transform: translateY(16px) !important; }
  to   { opacity: 1 !important; transform: translateY(0)    !important; }
}
@keyframes introRuleGrow {
  from { opacity: 0 !important; width: 0    !important; }
  to   { opacity: 1 !important; width: 100% !important; }
}
@keyframes introBadgePop {
  from { opacity: 0 !important; transform: scale(0.85) !important; }
  to   { opacity: 1 !important; transform: scale(1)    !important; }
}

/* ── Staged entrance — each rule uses !important animation ─ */

html:not(.entered) #intro-layer .bracket {
  animation: introFadeIn 0.5s 0.2s ease both !important;
}
html:not(.entered) #intro-layer .mist-line {
  animation: introFadeIn 0.6s 0.25s ease both !important;
}
html:not(.entered) #intro-layer #grid-floor,
html:not(.entered) #intro-layer #beam {
  animation: introFadeIn 0.8s 0.1s ease both !important;
}

/* Logo block: fade in as a unit — children animate on top */
html:not(.entered) #intro-layer #logo-block {
  opacity: 1 !important;
  transform: translate(-50%, -52%) !important; /* keep positioning */
}
html:not(.entered) #intro-layer #overline {
  animation: introSlideUp 0.5s 0.35s ease both !important;
}
html:not(.entered) #intro-layer #brand-name .word:nth-child(1) {
  animation: introWordRise 0.55s 0.5s cubic-bezier(0.22,1,0.36,1) both !important;
}
html:not(.entered) #intro-layer #brand-name .word:nth-child(2) {
  animation: introWordRise 0.55s 0.65s cubic-bezier(0.22,1,0.36,1) both !important;
}
html:not(.entered) #intro-layer #gold-rule {
  animation: introRuleGrow 0.6s 0.85s ease both !important;
}
html:not(.entered) #intro-layer #tagline {
  animation: introSlideUp 0.5s 0.95s ease both !important;
}
html:not(.entered) #intro-layer #bd-badge {
  animation: introBadgePop 0.45s 1.05s ease both !important;
}
html:not(.entered) #intro-layer #cta {
  animation: introSlideUp 0.5s 1.15s cubic-bezier(0.34,1.56,0.64,1) both !important;
}
html:not(.entered) #intro-layer #stats-strip {
  animation: introFadeIn 0.6s 1.25s ease both !important;
}
html:not(.entered) #intro-layer #intro-ticker {
  animation: introFadeIn 0.5s 1.35s ease both !important;
}

/* Reduced-motion: reveal everything immediately */
@media (prefers-reduced-motion: reduce) {
  html:not(.entered) #intro-layer .bracket,
  html:not(.entered) #intro-layer .mist-line,
  html:not(.entered) #intro-layer #grid-floor,
  html:not(.entered) #intro-layer #beam,
  html:not(.entered) #intro-layer #overline,
  html:not(.entered) #intro-layer #brand-name .word,
  html:not(.entered) #intro-layer #gold-rule,
  html:not(.entered) #intro-layer #tagline,
  html:not(.entered) #intro-layer #bd-badge,
  html:not(.entered) #intro-layer #cta,
  html:not(.entered) #intro-layer #stats-strip,
  html:not(.entered) #intro-layer #intro-ticker {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    width: auto !important;
  }
  html:not(.entered) #intro-layer #gold-rule { width: 100% !important; }
}

/* ── Responsive: ensure buttons never overflow on mobile ─── */
@media (max-width: 480px) {
  .pc-btn {
    font-size: 8px !important;
    padding: 9px 4px !important;
    letter-spacing: 1px !important;
  }
  .co-btn {
    font-size: 10px !important;
  }
}