/* ═══════════════════════════════════════════════════════════
   KRYPTAA — Cinematic Experience Engine
   cinematic.css — Preloader · Entry · Grain · Scroll · Typing
═══════════════════════════════════════════════════════════ */

/* ── Gold token ── */
:root {
  --kg: #d2ae5b;
  --kg-lite: #f2d98b;
  --kg-dim: rgba(210,174,91,0.35);
  --kg-glow: rgba(210,174,91,0.18);
}

/* ────────────────────────────────────────────
   GLOBAL GRAIN OVERLAY
──────────────────────────────────────────── */
#k-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 88888;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px;
  opacity: 0.032;
  animation: kGrainShift 0.75s steps(1) infinite;
  mix-blend-mode: overlay;
}
@keyframes kGrainShift {
  0%   { background-position:   0px   0px; }
  25%  { background-position: -32px -18px; }
  50%  { background-position:  22px  44px; }
  75%  { background-position: -44px  12px; }
}


/* ────────────────────────────────────────────
   PRELOADER
──────────────────────────────────────────── */
#k-preloader {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.k-pre-noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 220px;
  opacity: 0.055;
  animation: kGrainShift 0.65s steps(1) infinite;
  pointer-events: none;
}
.k-pre-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -58%);
  width: 520px;
  height: 200px;
  background: radial-gradient(ellipse at center,
    rgba(210,174,91,0.22) 0%,
    rgba(140,100,0,0.08) 50%,
    transparent 75%
  );
  pointer-events: none;
  animation: kGlowBreathe 3.5s ease-in-out infinite;
}
@keyframes kGlowBreathe {
  0%,100% { opacity:0.55; transform: translate(-50%,-58%) scale(1); }
  50%     { opacity:1;    transform: translate(-50%,-58%) scale(1.1); }
}
/* Scanline sweep */
.k-pre-scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,0.08) 3px,
    rgba(0,0,0,0.08) 4px
  );
  pointer-events: none;
  opacity: 0.6;
}
.k-pre-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 20px;
  width: 100%;
  max-width: 580px;
}
.k-pre-logo {
  width: clamp(200px, 48vw, 380px);
  height: auto;
  margin-bottom: 36px;
  opacity: 0;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 0 0px rgba(210,174,91,0)) brightness(1.1) contrast(1.06);
  animation: kLogoEmerge 1.1s cubic-bezier(0.16,1,0.3,1) 0.2s forwards;
}
@keyframes kLogoEmerge {
  to {
    opacity: 1;
    filter: drop-shadow(0 0 42px rgba(210,174,91,0.38)) drop-shadow(0 0 12px rgba(210,174,91,0.22)) brightness(1.12) contrast(1.06);
  }
}
.k-pre-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 32px;
  min-height: 72px;
}
.k-pre-line {
  font-family: 'Space Mono', monospace;
  font-size: clamp(8px, 1.4vw, 10px);
  letter-spacing: 0.26em;
  color: rgba(210,174,91,0.45);
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  white-space: nowrap;
}
.k-pre-line.k-lit {
  opacity: 1;
  transform: translateX(0);
}
.k-pre-line.k-active {
  color: rgba(210,174,91,0.75);
}
.k-pre-bottom {
  display: flex;
  align-items: center;
  gap: 18px;
  width: clamp(200px, 50vw, 340px);
}
.k-pre-bar {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.07);
  overflow: hidden;
  position: relative;
}
.k-pre-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(to right, rgba(210,174,91,0.3), #d2ae5b, #f2d98b);
  transition: width 0.08s linear;
  box-shadow: 0 0 6px rgba(210,174,91,0.6);
}
.k-pre-pct {
  font-family: 'Space Mono', monospace;
  font-size: clamp(9px, 1.5vw, 11px);
  letter-spacing: 0.18em;
  color: rgba(210,174,91,0.6);
  min-width: 42px;
  text-align: right;
}

/* ── Preloader fade-out ── */
#k-preloader.k-out {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s ease;
}


/* ────────────────────────────────────────────
   ENTRY SCREEN
──────────────────────────────────────────── */
#k-entry {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 99998;
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1);
}
#k-entry.k-show {
  display: flex;
}
#k-entry.k-visible {
  opacity: 1;
}
.k-entry-noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 220px;
  opacity: 0.065;
  animation: kGrainShift 0.6s steps(1) infinite;
  pointer-events: none;
  z-index: 0;
}
.k-entry-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 640px;
  height: 260px;
  background: radial-gradient(ellipse at center,
    rgba(210,174,91,0.16) 0%,
    rgba(150,100,0,0.06) 50%,
    transparent 72%
  );
  pointer-events: none;
  z-index: 0;
  animation: kEntryGlow 2.8s ease-in-out infinite;
}
@keyframes kEntryGlow {
  0%,100% { opacity:0.65; transform:translate(-50%,-50%) scale(1); }
  50%     { opacity:1;    transform:translate(-50%,-50%) scale(1.14); }
}
.k-entry-scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 3px,
    rgba(0,0,0,0.07) 3px, rgba(0,0,0,0.07) 4px
  );
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}
/* Canvas for shatter particles */
#k-shatter-canvas {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  display: none;
}
/* Void expansion circle */
#k-void-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  background: #000;
  transform: scale(1);
  z-index: 9;
  display: none;
  pointer-events: none;
}
#k-void-ring.k-expand {
  transition: transform 0.72s cubic-bezier(0.36,0,0.66,1);
  transform: scale(150) !important;
}
.k-entry-inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px;
  gap: 0;
}
.k-entry-logo {
  width: clamp(240px, 54vw, 420px);
  height: auto;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 0 52px rgba(210,174,91,0.32)) drop-shadow(0 0 18px rgba(210,174,91,0.18)) brightness(1.12) contrast(1.06);
  animation: kEntryFloat 4.2s ease-in-out infinite;
  margin-bottom: 36px;
}
@keyframes kEntryFloat {
  0%,100% { transform: translateY(0px); }
  50%     { transform: translateY(-7px); }
}
.k-enter-btn {
  font-family: 'Space Mono', monospace;
  font-size: clamp(10px, 1.6vw, 13px);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #000;
  background: var(--kg);
  border: none;
  padding: 17px 56px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  transition: background 0.25s ease, transform 0.18s ease, opacity 0.3s ease;
  -webkit-tap-highlight-color: transparent;
  margin-bottom: 20px;
}
.k-enter-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, transparent 55%);
  pointer-events: none;
}
.k-enter-btn:hover {
  background: var(--kg-lite);
  transform: scale(1.05);
}
.k-enter-btn:active {
  transform: scale(0.96);
}
.k-enter-btn.k-clicked {
  opacity: 0;
}
/* Pulse ring around button */
.k-enter-btn::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 1px solid rgba(210,174,91,0.3);
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  animation: kBtnPulse 2.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes kBtnPulse {
  0%,100% { opacity:0.4; transform:scale(1); }
  50%     { opacity:0;   transform:scale(1.12); }
}
.k-entry-hint {
  font-family: 'Space Mono', monospace;
  font-size: clamp(7px, 1.2vw, 9px);
  letter-spacing: 0.26em;
  color: rgba(255,255,255,0.18);
  text-transform: uppercase;
}


/* ────────────────────────────────────────────
   CINEMATIC SCROLL REVEALS
──────────────────────────────────────────── */
.k-reveal {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 1s cubic-bezier(0.16,1,0.3,1),
              transform 1s cubic-bezier(0.16,1,0.3,1);
}
.k-reveal.k-vis {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger children */
.k-reveal-stagger > * {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1),
              transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.k-reveal-stagger.k-vis > *:nth-child(1) { opacity:1; transform:none; transition-delay:0s; }
.k-reveal-stagger.k-vis > *:nth-child(2) { opacity:1; transform:none; transition-delay:0.1s; }
.k-reveal-stagger.k-vis > *:nth-child(3) { opacity:1; transform:none; transition-delay:0.2s; }
.k-reveal-stagger.k-vis > *:nth-child(4) { opacity:1; transform:none; transition-delay:0.3s; }
.k-reveal-stagger.k-vis > *:nth-child(5) { opacity:1; transform:none; transition-delay:0.4s; }
.k-reveal-stagger.k-vis > *:nth-child(6) { opacity:1; transform:none; transition-delay:0.5s; }


/* ────────────────────────────────────────────
   TYPING TEXT SECTION (injected by cinematic.js)
──────────────────────────────────────────── */
#k-typing-section {
  padding: clamp(60px,10vw,100px) clamp(20px,5vw,60px);
  background: #000;
  border-top: 1px solid rgba(30,30,38,0.8);
  border-bottom: 1px solid rgba(30,30,38,0.8);
  text-align: center;
  position: relative;
  overflow: hidden;
}
#k-typing-section .k-ts-noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px;
  opacity: 0.04;
  pointer-events: none;
}
.k-type-hero {
  display: block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(52px, 10vw, 120px);
  letter-spacing: 0.04em;
  color: rgba(240,237,232,0.88);
  line-height: 0.88;
  margin-bottom: 24px;
  min-height: 0.9em;
}
.k-type-tag {
  display: block;
  font-family: 'Space Mono', monospace;
  font-size: clamp(9px, 1.8vw, 12px);
  letter-spacing: 0.28em;
  color: rgba(210,174,91,0.6);
  text-transform: uppercase;
  line-height: 2.4;
  min-height: 1.6em;
}

/* Cursor blink on active typing line */
.k-typing-cursor::after {
  content: '▮';
  font-size: 0.75em;
  color: rgba(210,174,91,0.7);
  animation: kBlink 0.7s step-end infinite;
  margin-left: 2px;
}
@keyframes kBlink {
  0%,100% { opacity: 1; }
  50%     { opacity: 0; }
}


/* ────────────────────────────────────────────
   HERO PARALLAX
──────────────────────────────────────────── */
#kryptaa-hero-v2 {
  will-change: transform;
}
#kryptaa-hero-v2 .hero-inner {
  will-change: transform, opacity;
  transition: none; /* let GSAP handle it */
}


/* ────────────────────────────────────────────
   CATEGORY ROWS — cinematic entry
──────────────────────────────────────────── */
#k-categories > div > a {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.85s cubic-bezier(0.16,1,0.3,1),
              transform 0.85s cubic-bezier(0.16,1,0.3,1);
}
#k-categories > div > a.k-cat-vis {
  opacity: 1;
  transform: translateY(0);
}


/* ────────────────────────────────────────────
   VIDEO SECTION — cinematic scale
──────────────────────────────────────────── */
#k-video-section > div:last-child {
  will-change: transform, opacity;
}


/* ────────────────────────────────────────────
   SECTION OVERLAY TRANSITIONS
   A sticky dark grad that creates depth between sections
──────────────────────────────────────────── */
.k-depth-fade {
  height: 80px;
  background: linear-gradient(to bottom, #000 0%, transparent 100%);
  pointer-events: none;
  margin-bottom: -80px;
  position: relative;
  z-index: 2;
}
.k-depth-fade.k-df-bottom {
  background: linear-gradient(to top, #060608 0%, transparent 100%);
  margin-bottom: 0;
  margin-top: -80px;
}


/* ────────────────────────────────────────────
   MOBILE
──────────────────────────────────────────── */
@media (max-width: 768px) {
  .k-pre-glow      { width: 300px; height: 140px; }
  .k-entry-glow    { width: 340px; height: 160px; }
  .k-entry-logo    { margin-bottom: 28px; }
  .k-enter-btn     { padding: 16px 44px; }
  #k-typing-section { padding: 52px 20px; }
  .k-type-hero     { font-size: clamp(44px, 12vw, 80px); }
}


/* ────────────────────────────────────────────
   REDUCED MOTION
──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .k-pre-logo,
  .k-entry-logo,
  .k-pre-glow,
  .k-entry-glow,
  #k-grain,
  .k-pre-noise,
  .k-entry-noise {
    animation: none !important;
  }
  .k-reveal,
  .k-reveal-stagger > *,
  #k-categories > div > a {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .k-enter-btn::after { animation: none !important; }
}


/* ═══════════════════════════════════════════════════════════
   SNAP SCROLL CINEMATIC LAYOUT
   Activated by snap-scroll.js adding .k-snap-active to <html>
═══════════════════════════════════════════════════════════ */

html.k-snap-active {
  scroll-snap-type: y mandatory;
  /* No overflow/height changes — body still scrolls naturally */
}

/* ── Snap panel base ── */
.snap-panel {
  position: relative;
  height: 100vh;
  scroll-snap-align: start;
  overflow: hidden;
}

/* ── Layer system ── */
/* Initially hidden — snap-scroll.js drives opacity in via GSAP */
.snap-panel .layer-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  will-change: transform, opacity;
  opacity: 0;
}

.snap-panel .layer-figure {
  position: absolute;
  z-index: 1;
  will-change: transform, opacity;
  opacity: 0;
  pointer-events: none;
}

.snap-panel .layer-copy {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* Hero panel overrides */
.v3-hero.snap-panel {
  height: 100vh;
  min-height: unset;
}

/* hero-video-bg is the bg layer — already absolute in global.css */
.v3-hero.snap-panel .hero-video-bg.layer-bg {
  /* JS will animate opacity from 0; initial CSS sets 0.28 opacity which conflicts.
     We override so GSAP controls it cleanly. */
  opacity: 0;
}

/* hero-media (the product image grid) is the figure layer */
.v3-hero.snap-panel .hero-media.layer-figure {
  opacity: 0;
  pointer-events: none;
}

/* hero-copy is the copy layer */
.v3-hero.snap-panel .hero-copy.layer-copy {
  z-index: 4; /* above the ::after overlay */
  padding-left: clamp(24px, 5vw, 80px);
  padding-right: clamp(24px, 5vw, 80px);
}

/* ── Editorial panel ── */
.snap-editorial {
  display: flex;
  align-items: center;
  background: #020202;
}

.snap-editorial .layer-bg {
  background:
    radial-gradient(ellipse at 65% 50%, rgba(210,174,91,0.07), transparent 52%),
    #020202;
}

/* Editorial-split — 2-column grid: text LEFT, image RIGHT */
.snap-editorial .section-shell.editorial-split {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  max-width: 100%;
  padding: 0;
  pointer-events: none;
}

/* Left half — centered text block */
.snap-editorial .editorial-copy.layer-copy {
  position: relative;
  inset: unset;
  bottom: unset; left: unset;
  transform: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  max-width: unset;
  padding: clamp(40px, 6vw, 90px) clamp(32px, 5vw, 72px);
  background: linear-gradient(135deg, rgba(2,2,2,0.97) 0%, rgba(4,2,2,0.90) 100%);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-right: 1px solid rgba(210,174,91,0.20);
  border-left: none; border-bottom: none;
  z-index: 5;
  pointer-events: auto;
}

/* Right half — editorial image fills full height */
.snap-editorial .editorial-image.layer-figure {
  position: relative;
  inset: unset;
  width: 100%;
  height: 100%;
  min-height: unset;
  border: none;
  overflow: hidden;
}

.snap-editorial .editorial-image.layer-figure img {
  width: 100%;
  height: 100%;
  min-height: unset;
  object-fit: cover;
  object-position: center top;
}

/* ── Collections panel ── */
.snap-collections {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #020202;
  padding: 0;
}

.snap-collections .layer-bg {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(210,174,91,0.04), transparent 60%),
    #020202;
}

.snap-collections .layer-copy.section-shell {
  padding-top: clamp(20px, 4vh, 48px);
  padding-bottom: clamp(20px, 4vh, 48px);
  max-height: 100vh;
  display: flex;
  flex-direction: column;
}

.snap-collections .category-grid {
  flex: 1;
  min-height: 0;
  grid-template-columns: repeat(3, 1fr);
  max-height: 62vh;
}

/* ── Brand Video panel — full screen ── */
.brand-video-section.snap-panel {
  position: relative;
  overflow: hidden;
}

/* Full-bleed video */
.bv-video-full.layer-figure {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Gradient scrim for legibility */
.bv-overlay-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.15) 45%, rgba(0,0,0,0.82) 100%),
    linear-gradient(to right, rgba(0,0,0,0.55) 0%, transparent 55%);
  pointer-events: none;
}

/* Overlay copy container */
.bv-overlay-copy.layer-copy {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(28px, 5vw, 60px);
  pointer-events: none;
}

/* Top-left: eyebrow label */
.bv-corner-tl {
  align-self: flex-start;
  pointer-events: none;
}

/* Bottom-right: headline + body + CTA */
.bv-corner-br {
  align-self: flex-end;
  text-align: right;
  max-width: clamp(280px, 44vw, 600px);
  pointer-events: auto;
}

.bv-headline {
  font-size: clamp(1.4rem, 3.2vw, 3.2rem);
  line-height: 1.0;
  margin-top: 10px;
  margin-bottom: 18px;
}
/* Space between "No compromises." text and "Shop The Drop" button */
.bv-corner-br .bv-cta {
  margin-top: 24px;
}

/* ── Featured Products panel ── */
.snap-featured {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #020202;
  padding: 0;
}

.snap-featured .layer-bg {
  background:
    radial-gradient(ellipse at 30% 50%, rgba(210,174,91,0.03), transparent 55%),
    #020202;
}

.snap-featured .layer-copy.section-shell {
  padding-top: clamp(20px, 3vh, 40px);
  padding-bottom: clamp(20px, 3vh, 40px);
  max-height: 100vh;
  display: flex;
  flex-direction: column;
}

.snap-featured .featured-grid {
  flex: 1;
  min-height: 0;
  max-height: 64vh;
  grid-template-columns: repeat(4, 1fr);
}

/* ── Brand Story panel ── */
.brand-story-section.snap-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.brand-story-section.snap-panel .bs-glow.layer-bg {
  opacity: 0; /* GSAP controls this */
}

.brand-story-section.snap-panel .bs-inner.section-shell.layer-copy {
  padding-top: clamp(20px, 3vh, 40px);
  padding-bottom: clamp(20px, 3vh, 40px);
  max-height: 100vh;
  overflow: hidden;
}


/* ── Last panel: Join Drop + Footer ── */
.snap-footer-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #020202;
}

.snap-footer-panel .join-drop-section,
.snap-footer-panel .site-footer {
  flex-shrink: 0;
}

/* Countdown overlay inside hero */
.hero-countdown-bar {
  position: absolute;
  bottom: clamp(50px, 6vh, 72px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: clamp(10px, 2vw, 24px);
  align-items: center;
  pointer-events: none;
}

/* Marquee at very bottom of hero */
.v3-hero .k-marquee {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
  border-top: 1px solid rgba(210,174,91,0.1);
  margin: 0;
}

/* Particles canvas overlay */
#k-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  opacity: 0.38;
}

/* ── Mobile: keep mandatory snap ── */
@media (max-width: 767px) {
  html.k-snap-active {
    scroll-snap-type: y mandatory;
  }
  .snap-editorial .section-shell.editorial-split {
    grid-template-columns: 1fr;
  }
  .snap-editorial .editorial-image.layer-figure {
    display: none;
  }
  .snap-editorial .editorial-copy.layer-copy {
    border-right: none;
    padding: clamp(28px, 6vw, 60px) clamp(20px, 5vw, 40px);
  }
  /* Fill the editorial panel on mobile — bigger type, tighter line-height */
  .snap-editorial .editorial-copy h2 {
    font-size: clamp(3rem, 11.5vw, 4.8rem);
    line-height: 0.96;
    letter-spacing: -0.01em;
  }
  .snap-editorial .editorial-copy p {
    font-size: clamp(0.92rem, 3.8vw, 1.05rem);
    max-width: 100%;
    margin-top: 20px;
  }
  .snap-editorial .editorial-copy .eyebrow {
    font-size: 0.6rem;
    letter-spacing: 0.32em;
    margin-bottom: 28px;
  }
  /* Extra breathing room between text and buttons */
  .snap-editorial .hero-actions,
  .snap-editorial .editorial-actions {
    margin-top: 36px;
    gap: 12px;
  }
  .snap-collections .category-grid {
    grid-template-columns: repeat(2, 1fr);
    max-height: 70vh;
  }
  .snap-featured .featured-grid {
    grid-template-columns: repeat(2, 1fr);
    max-height: 72vh;
  }
  .bv-corner-br {
    align-self: flex-end;
    text-align: left;
    max-width: 92vw;
  }
  .bv-headline {
    font-size: clamp(2rem, 10vw, 4rem);
  }
  /* Extra gap between body text and CTA on mobile */
  .bv-corner-br .bv-cta {
    margin-top: 28px;
    pointer-events: auto;
  }
  /* Push bv copy up enough to clear the mobile bag bar */
  .bv-overlay-copy.layer-copy {
    padding-bottom: calc(clamp(28px, 5vw, 60px) + 76px);
  }
  /* Brand story: fix nested scroll conflicting with snap on iOS */
  .brand-story-section.snap-panel .bs-inner.section-shell.layer-copy {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }
  /* Footer/join panel: same nested scroll fix */
  .snap-footer-panel {
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }
  /* Join the Club modal: cap height on small phones */
  .k-club-box {
    max-height: 88dvh;
    overflow-y: auto;
    padding: 32px 20px 28px;
  }
}


/* ═══════════════════════════════════════════════════════════
   WOW EDITION — Character animation · HUD · Particles · Collab
═══════════════════════════════════════════════════════════ */

/* ── Character spans for blast-in animation ── */
.k-char {
  display: inline-block;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.k-char.k-sp {
  display: inline;
  width: 0.28em;
}

/* ── Ambient particle canvas ── */
#k-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9;
  opacity: 0.5;
  mix-blend-mode: screen;
}

/* ── HUD corner brackets ── */
.hud-corner {
  position: absolute;
  width: clamp(20px, 3vw, 36px);
  height: clamp(20px, 3vw, 36px);
  z-index: 10;
  pointer-events: none;
  will-change: transform, opacity;
}
.hud-tl {
  top:  clamp(68px, 10vh, 100px);
  left: clamp(12px, 2vw, 38px);
  border-top:  1px solid rgba(210,174,91,0.85);
  border-left: 1px solid rgba(210,174,91,0.85);
}
.hud-tr {
  top:   clamp(68px, 10vh, 100px);
  right: clamp(12px, 2vw, 38px);
  border-top:   1px solid rgba(210,174,91,0.85);
  border-right: 1px solid rgba(210,174,91,0.85);
}
.hud-bl {
  bottom: clamp(12px, 2vh, 32px);
  left:   clamp(12px, 2vw, 38px);
  border-bottom: 1px solid rgba(210,174,91,0.85);
  border-left:   1px solid rgba(210,174,91,0.85);
}
.hud-br {
  bottom: clamp(12px, 2vh, 32px);
  right:  clamp(12px, 2vw, 38px);
  border-bottom: 1px solid rgba(210,174,91,0.85);
  border-right:  1px solid rgba(210,174,91,0.85);
}

/* ── Glow burst (created + removed by JS) ── */
.k-glow-burst {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(240px, 40vw, 480px);
  height: clamp(240px, 40vw, 480px);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(210,174,91,0.5) 0%,
    rgba(210,174,91,0.12) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 4;
  will-change: transform, opacity;
}

/* ── COLLAB / HEAVYWEIGHT TEES PANEL ── */
.snap-collab {
  display: flex;
  align-items: center;
  background: #020202;
}

.snap-collab .layer-bg {
  background:
    radial-gradient(ellipse at 65% 55%, rgba(150, 8, 8, 0.1), transparent 48%),
    radial-gradient(ellipse at 30% 35%, rgba(210,174,91,0.07), transparent 50%),
    #020202;
}

/* Three floating tee images */
.collab-images {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 56%;
  pointer-events: none;
  overflow: hidden;
}

.collab-img {
  position: absolute;
  object-fit: contain;
  will-change: transform;
}

.collab-img.ci-1 {
  height: clamp(260px, 52vh, 540px);
  right: 24%;
  bottom: 0;
  transform-origin: bottom center;
  z-index: 2;
  filter: contrast(1.12) brightness(0.88) saturate(0.9);
}
.collab-img.ci-2 {
  height: clamp(280px, 60vh, 620px);
  right: 2%;
  top: 4%;
  z-index: 3;
  filter: contrast(1.18) brightness(0.85) saturate(0.85);
}
.collab-img.ci-3 {
  height: clamp(180px, 36vh, 380px);
  right: 50%;
  bottom: 8%;
  z-index: 1;
  opacity: 0.55;
  filter: contrast(1.05) brightness(0.7);
}

/* Copy sits left of the images */
.collab-copy.layer-copy {
  position: relative;
  z-index: 5;
  padding: 0 0 0 clamp(20px, 5vw, 80px);
  max-width: 48%;
}

/* Collab h2 — extra oversized */
.snap-collab h2 {
  font-size: clamp(3rem, 9vw, 10rem);
  line-height: 0.88;
  margin-top: 18px;
}

/* ── Oversized editorial h2 on editorial panel ── */
.snap-editorial .editorial-copy h2 {
  font-size: clamp(2.2rem, 4.2vw, 5.5rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-align: center;
}
.snap-editorial .editorial-copy.layer-copy {
  padding: clamp(28px, 3.5vw, 56px) clamp(28px, 4vw, 64px);
}
.snap-editorial .editorial-copy .eyebrow {
  text-align: center;
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  margin-bottom: 20px;
}
.snap-editorial .editorial-copy p {
  text-align: center;
  font-size: clamp(0.88rem, 1.1vw, 0.98rem);
  line-height: 1.75;
  max-width: 380px;
  margin: 0 auto;
}

/* ── Brand Story h2 ── */
.brand-story-section .bs-headline {
  font-size: clamp(2.8rem, 5.5vw, 6rem);
  line-height: 1.02;
}

/* ── Wordmark idle glow (CSS, not GSAP — avoids filter-type mismatch) ── */
@keyframes wm-glow {
  0%, 100% { filter: drop-shadow(0 0 60px rgba(210,174,91,0.45)) brightness(1.15) contrast(1.1); }
  50%       { filter: drop-shadow(0 0 100px rgba(210,174,91,0.72)) brightness(1.28) contrast(1.1); }
}
.wm-glow-active {
  animation: wm-glow 3.2s ease-in-out infinite;
}

/* ── Mobile collab ── */
@media (max-width: 767px) {
  .collab-images {
    width: 100%;
    opacity: 0.22;
  }
  .collab-copy.layer-copy {
    max-width: 100%;
    padding: 0 clamp(16px, 4vw, 28px);
    position: relative;
    z-index: 5;
  }
  .snap-collab h2 {
    font-size: clamp(3rem, 14vw, 6rem);
  }
}


/* bv-eyebrow is top-left, bv-* copy lives in .bv-corner-br */

/* ═══════════════════════════════════════════════════════════
   PLEASANT COLORS — soften harsh pure blacks
═══════════════════════════════════════════════════════════ */
:root {
  --k-black:  #0a0a0b;   /* barely-off-black — easier on eyes than #020202 */
  --k-panel:  #111114;
  --k-bone:   #f0ede6;   /* warm bone, less harsh than stark white */
  --k-sub:    rgba(240,237,230,0.52);
}

body {
  background: var(--k-black);
  color: var(--k-bone);
}

/* Softer link hover */
a { color: inherit; }

/* ═══════════════════════════════════════════════════════════
   JOIN THE CLUB POPUP MODAL
═══════════════════════════════════════════════════════════ */
#k-club-modal {
  position: fixed;
  inset: 0;
  z-index: 99990;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
#k-club-modal.k-open {
  opacity: 1;
  pointer-events: all;
}
.k-club-box {
  position: relative;
  width: min(92vw, 560px);
  background: #0f0f10;
  border: 1px solid rgba(210,174,91,0.3);
  box-shadow:
    0 0 80px rgba(210,174,91,0.08),
    inset 0 0 60px rgba(210,174,91,0.02);
  padding: clamp(28px,5vw,52px) clamp(24px,5vw,48px);
  text-align: center;
  overflow: hidden;
}
.k-club-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 3px,
    rgba(210,174,91,0.015) 3px, rgba(210,174,91,0.015) 4px
  );
  pointer-events: none;
}
/* Corner accents */
.k-club-box::after {
  content: '';
  position: absolute;
  top: 12px; left: 12px; right: 12px; bottom: 12px;
  border: 1px solid rgba(210,174,91,0.1);
  pointer-events: none;
}
.k-club-corner {
  position: absolute;
  width: 18px; height: 18px;
  border-color: rgba(210,174,91,0.75);
  border-style: solid;
}
.k-club-corner.tl { top: 6px; left: 6px; border-width: 1px 0 0 1px; }
.k-club-corner.tr { top: 6px; right: 6px; border-width: 1px 1px 0 0; }
.k-club-corner.bl { bottom: 6px; left: 6px; border-width: 0 0 1px 1px; }
.k-club-corner.br { bottom: 6px; right: 6px; border-width: 0 1px 1px 0; }
.k-club-close {
  position: absolute;
  top: 14px; right: 14px;
  background: none; border: none;
  color: rgba(210,174,91,0.6);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px 8px;
  z-index: 2;
}
.k-club-close:hover { color: var(--k-gold,#d2ae5b); }
.k-club-eyebrow {
  font-family: var(--f-mono, 'Space Mono', monospace);
  font-size: 0.55rem;
  letter-spacing: 0.32em;
  color: rgba(210,174,91,0.7);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.k-club-title {
  font-family: var(--f-primary, 'Cinzel', serif);
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f0ede6;
  line-height: 1;
  margin-bottom: 10px;
}
.k-club-sub {
  font-family: var(--f-secondary, 'Rajdhani', sans-serif);
  font-size: 0.88rem;
  color: rgba(240,237,230,0.5);
  line-height: 1.6;
  margin-bottom: 24px;
}
.k-club-form {
  display: flex;
  gap: 8px;
  position: relative;
  z-index: 2;
}
.k-club-input {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(210,174,91,0.25);
  color: #f0ede6;
  font-family: var(--f-mono, 'Space Mono', monospace);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  padding: 12px 16px;
  outline: none;
  transition: border-color 0.25s;
}
.k-club-input:focus { border-color: rgba(210,174,91,0.65); }
.k-club-input::placeholder { color: rgba(240,237,230,0.3); }
.k-club-btn {
  background: #d2ae5b;
  color: #000;
  border: none;
  font-family: var(--f-mono, 'Space Mono', monospace);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 12px 18px;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  white-space: nowrap;
}
.k-club-btn:hover { background: #f2d98b; transform: scale(1.03); }
.k-club-fine {
  margin-top: 14px;
  font-size: 0.6rem;
  color: rgba(240,237,230,0.28);
  letter-spacing: 0.1em;
}
.k-club-success {
  color: #d2ae5b;
  font-family: var(--f-mono, 'Space Mono', monospace);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  margin-top: 12px;
  min-height: 1.2em;
}


/* ═══════════════════════════════════════════════════════════
   BLUEPRINT SNAP PANEL — technical garment construction
═══════════════════════════════════════════════════════════ */
.snap-blueprint {
  background: #060f1a;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.snap-blueprint .layer-bg {
  background:
    linear-gradient(rgba(100,180,255,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100,180,255,0.07) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 50%, rgba(30,80,140,0.35) 0%, transparent 70%),
    #060f1a;
  background-size: 36px 36px, 36px 36px, 100% 100%;
}
.snap-blueprint .layer-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 35px, rgba(100,180,255,0.025) 35px, rgba(100,180,255,0.025) 36px);
  pointer-events: none;
}

.blueprint-inner {
  position: relative;
  z-index: 2;
  width: min(1400px, 96vw);
  height: calc(100% - 32px);
  box-sizing: border-box;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  gap: clamp(8px, 1.5vw, 20px);
  align-items: stretch;
  padding: clamp(14px, 2vh, 24px) clamp(16px, 2vw, 32px);
  /* outer frame */
  outline: 1px solid rgba(100,180,255,0.18);
  outline-offset: -8px;
}
/* corner frame decorations on the blueprint panel */
.blueprint-inner::before,
.blueprint-inner::after {
  content: '';
  position: absolute;
  width: 22px; height: 22px;
  border-color: rgba(100,180,255,0.55);
  border-style: solid;
  pointer-events: none;
  z-index: 10;
}
.blueprint-inner::before { top: 10px; left: 10px; border-width: 2px 0 0 2px; }
.blueprint-inner::after  { bottom: 10px; right: 10px; border-width: 0 2px 2px 0; }

.blueprint-header {
  grid-column: 1 / -1;
  text-align: center;
  margin-bottom: 0;
}

.bp-eyebrow {
  font-family: var(--f-mono, 'Space Mono', monospace);
  font-size: 0.52rem;
  letter-spacing: 0.36em;
  color: rgba(100,180,255,0.85);
  text-transform: uppercase;
  margin-bottom: 5px;
}

.bp-title {
  font-family: var(--f-primary, 'Cinzel', serif);
  font-size: clamp(1.5rem, 3.2vw, 2.6rem);
  font-weight: 900;
  letter-spacing: 0.1em;
  color: #e8f4ff;
  text-transform: uppercase;
  line-height: 1;
  text-shadow: 0 0 40px rgba(100,180,255,0.3);
}

.bp-subtitle {
  font-family: var(--f-mono, 'Space Mono', monospace);
  font-size: 0.48rem;
  letter-spacing: 0.25em;
  color: rgba(100,180,255,0.45);
  text-transform: uppercase;
  margin-top: 5px;
}

/* SVG blueprint drawings */
.blueprint-drawing {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.blueprint-drawing svg {
  width: 100%;
  flex: 1;
  min-height: 0;
  display: block;
}

.bp-spec-table {
  flex-shrink: 0;
  font-family: var(--f-mono, 'Space Mono', monospace);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  border: 1px solid rgba(100,180,255,0.3);
  width: 100%;
  margin-top: 8px;
}
.bp-spec-table td {
  padding: 5px 10px;
  border-bottom: 1px solid rgba(100,180,255,0.15);
  color: #fff;
}
.bp-spec-table td:first-child {
  color: rgba(100,180,255,0.7);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  width: 40%;
  border-right: 1px solid rgba(100,180,255,0.15);
}

.bp-notes {
  flex-shrink: 0;
  margin-top: 8px;
  font-family: var(--f-mono, 'Space Mono', monospace);
  font-size: 0.6rem;
  color: rgba(100,180,255,0.6);
  line-height: 1.8;
}
.bp-notes li { margin-left: 14px; }

/* Blueprint label text style */
.bp-label {
  font-family: var(--f-mono, 'Space Mono', monospace);
  font-size: 9px;
  fill: rgba(180,220,255,0.8);
  letter-spacing: 0.08em;
}
.bp-dim-text {
  font-family: var(--f-mono, 'Space Mono', monospace);
  font-size: 8px;
  fill: rgba(180,220,255,0.65);
  letter-spacing: 0.05em;
}
.bp-line   { stroke: rgba(100,180,255,0.55); stroke-width: 1; fill: none; }
.bp-line-h { stroke: rgba(100,180,255,0.85); stroke-width: 1.2; fill: none; }
.bp-dash   { stroke: rgba(100,180,255,0.38); stroke-width: 0.8; fill: none; stroke-dasharray: 4 3; }
.bp-fill   { fill: rgba(100,180,255,0.1); }

/* Draw-in animation for baggy jeans blueprint */
@keyframes bpDraw {
  from { stroke-dashoffset: 1000; opacity: 0; }
  to   { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes bpFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bp-svg-animated .bp-draw {
  stroke-dasharray: 1000;
  /* stroke-dashoffset and opacity are set by GSAP before animating (snap-scroll.js case 4) */
}
/* Draw animation is handled entirely by GSAP in snap-scroll.js — no CSS animation conflicts */

/* ── Blueprint header: flex row to fit collab badge ── */
.blueprint-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(12px, 2vw, 28px);
}

/* ── Collab corner badge inside blueprint ── */
.blueprint-collab-badge {
  padding: 14px 18px;
  border: 1px solid rgba(100,180,255,0.22);
  border-left: 3px solid rgba(100,180,255,0.6);
  background: rgba(100,180,255,0.05);
  text-align: right;
  flex-shrink: 0;
  max-width: 260px;
}

.bcb-eyebrow {
  font-family: var(--f-mono, 'Space Mono', monospace);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: rgba(100,180,255,0.7);
  text-transform: uppercase;
  margin-bottom: 5px;
}

.bcb-title {
  font-family: var(--f-primary, 'Cinzel', serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: #d2ae5b;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  line-height: 1.2;
}

.bcb-spec {
  font-family: var(--f-mono, 'Space Mono', monospace);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  color: rgba(100,180,255,0.55);
  text-transform: uppercase;
  margin-bottom: 10px;
  line-height: 1.6;
}

.bcb-link {
  font-family: var(--f-mono, 'Space Mono', monospace);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: rgba(210,174,91,0.8);
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.2s;
}
.bcb-link:hover { color: #d2ae5b; }

/* Remove home-section padding from snap panels so 100vh fills correctly */
.snap-blueprint.home-section {
  padding: var(--nav-h, 82px) 0;
  box-sizing: border-box;
}
.snap-editorial.home-section {
  padding: 0;
}

@media (max-width: 767px) {
  .snap-blueprint.snap-panel {
    height: 100svh;
  }
  .blueprint-inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr 1fr;
    height: calc(100% - 20px);
    overflow-y: hidden;
    padding: clamp(10px, 1.5vh, 16px) clamp(12px, 3vw, 20px);
    gap: clamp(4px, 1vw, 10px);
  }
  .blueprint-header {
    flex-direction: row;
    align-items: center;
    margin-bottom: 0;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(100,180,255,0.15);
  }
  .blueprint-collab-badge {
    display: none;
  }
  .bp-spec-table,
  .bp-notes {
    display: none;
  }
  .blueprint-drawing svg {
    width: 100%;
    height: 100%;
    flex: 1;
  }
}