/* Sprintix storefront — cinematic VFX layer */

.store-cinematic {
  --cmx: 0.5;
  --cmy: 0.5;
}

body.cine-intro-active {
  overflow: hidden;
}

/* Persistent film grain on viewport */
.cine-viewport-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9990;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.65'/%3E%3C/svg%3E");
  animation: cineGrain 0.35s steps(2) infinite;
}

/* ── Film hero banner (replaces green hero) ── */
.hero-film {
  position: relative;
  height: 100vh;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  background: #0A0908;
}

body.hero-intro-lock {
  overflow: hidden;
  height: 100vh;
}

.hero-film .cine-intro-flare-2 {
  top: 52%;
  width: 45%;
  transform: rotate(6deg);
  opacity: 0;
}

.hero-film-flash {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  background: radial-gradient(circle at 50% 42%, rgba(255, 252, 245, 0.95), rgba(239, 234, 224, 0.4) 40%, transparent 70%);
  opacity: 0;
}

.hero-film .cine-intro-logo {
  will-change: transform, filter, opacity;
}

.hero-film .cine-intro-stage {
  will-change: transform;
}

.hero-film .cine-intro-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-film .cine-letterbox {
  position: absolute;
  left: 0;
  right: 0;
  height: 11vh;
  background: #000;
  z-index: 3;
  pointer-events: none;
}

.hero-film .cine-letterbox-top { top: 0; }
.hero-film .cine-letterbox-bottom { bottom: 0; }

.hero-film .cine-intro-grain,
.hero-film .cine-intro-scanlines {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.hero-film .cine-intro-grain {
  opacity: 0.12;
  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.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.8'/%3E%3C/svg%3E");
  animation: cineGrain 0.25s steps(2) infinite;
}

.hero-film .cine-intro-scanlines {
  opacity: 0.06;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.35) 2px,
    rgba(0, 0, 0, 0.35) 4px
  );
}

.hero-film .cine-intro-flare {
  position: absolute;
  top: 38%;
  left: 0;
  width: 55%;
  height: 2px;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 248, 235, 0.15), rgba(255, 255, 255, 0.85), rgba(124, 148, 115, 0.35), transparent);
  box-shadow: 0 0 40px rgba(255, 255, 255, 0.35), 0 0 80px rgba(124, 148, 115, 0.2);
  transform: rotate(-8deg);
}

.hero-film .cine-intro-stage {
  position: relative;
  z-index: 5;
  text-align: center;
  color: #EFEAE0;
  padding: 0 24px;
  margin-top: -2vh;
}

.hero-film .cine-intro-kicker {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #B8A088;
  margin-bottom: 28px;
}

.hero-film .cine-intro-logo {
  font-size: clamp(72px, 16vw, 148px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-shadow: 0 0 60px rgba(124, 148, 115, 0.25), 0 0 120px rgba(255, 255, 255, 0.08);
}

.hero-film .cine-intro-tagline {
  margin-top: 22px;
  font-size: clamp(18px, 3vw, 28px);
  color: #C9C2B2;
}

.hero-film .cine-intro-count {
  position: absolute;
  bottom: calc(11vh + 28px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(239, 234, 224, 0.45);
}

.hero-film-actions {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: calc(11vh + 56px);
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  opacity: 0;
}

.btn-film {
  display: inline-block;
  padding: 14px 26px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}

.btn-film.primary {
  background: #EFEAE0;
  color: #2A2723;
  border: 1px solid #EFEAE0;
}

.btn-film.primary:hover {
  background: #7C9473;
  border-color: #7C9473;
  color: #EFEAE0;
}

.btn-film.ghost {
  background: transparent;
  color: #EFEAE0;
  border: 1px solid rgba(239, 234, 224, 0.35);
}

.btn-film.ghost:hover {
  border-color: #EFEAE0;
  background: rgba(239, 234, 224, 0.08);
}

.hero-film-ready .hero-film-actions,
.hero-film-ready .scroll-cue {
  opacity: 1;
}

/* Category pills — inside film hero banner */
.hero-film-cat-nav {
  position: absolute;
  top: calc(11vh + 8px);
  left: 0;
  right: 0;
  z-index: 6;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: visible;
  gap: 5px;
  padding: 0 14px;
  margin: 0;
  border: none;
  background: transparent;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.hero-film-ready .hero-film-cat-nav {
  pointer-events: auto;
}

.hero-film-cat-nav::-webkit-scrollbar {
  display: none;
}

.hero-film-cat-nav a {
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
  text-decoration: none;
  padding: 4px 9px;
  border: 1px solid rgba(239, 234, 224, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
  color: rgba(239, 234, 224, 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.22s, border-color 0.22s, color 0.22s;
  will-change: transform, opacity, filter;
}

.hero-film-cat-nav a:hover,
.hero-film-cat-nav a:focus-visible {
  background: rgba(239, 234, 224, 0.12);
  border-color: rgba(239, 234, 224, 0.38);
  color: #EFEAE0;
}

body:has(.hero-film) .hero-head .badge {
  background: rgba(124, 148, 115, 0.85);
  color: #EFEAE0;
}

@media (min-width: 901px) {
  .hero-film-cat-nav {
    top: max(calc(11vh + 36px), 128px);
    gap: 7px;
    padding: 0 max(32px, 4vw);
    justify-content: center;
  }
  .hero-film-cat-nav a {
    font-size: 10px;
    padding: 5px 12px;
    letter-spacing: 0.05em;
  }
}

@media (max-width: 900px) {
  .hero-head nav {
    padding: 14px 16px 12px;
  }
  .hero-film-actions {
    bottom: calc(11vh + 48px);
    width: calc(100% - 32px);
  }
  .hero-film .cine-intro-logo {
    font-size: clamp(56px, 18vw, 96px);
  }
}

/* ── Movie intro overlay (legacy / shop) ── */
.cine-intro {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  pointer-events: all;
}

.cine-intro-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 45%, rgba(26, 23, 20, 0.55), rgba(10, 9, 8, 0.98) 72%),
    #0A0908;
}

.cine-letterbox {
  position: absolute;
  left: 0;
  right: 0;
  height: 11vh;
  background: #000;
  z-index: 3;
  pointer-events: none;
}

.cine-letterbox-top { top: 0; }
.cine-letterbox-bottom { bottom: 0; }

.cine-intro-grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0.12;
  pointer-events: none;
  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.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.8'/%3E%3C/svg%3E");
  animation: cineGrain 0.25s steps(2) infinite;
}

.cine-intro-scanlines {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.06;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.35) 2px,
    rgba(0, 0, 0, 0.35) 4px
  );
}

.cine-intro-flare {
  position: absolute;
  top: 38%;
  left: 0;
  width: 55%;
  height: 2px;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 248, 235, 0.15), rgba(255, 255, 255, 0.85), rgba(124, 148, 115, 0.35), transparent);
  box-shadow: 0 0 40px rgba(255, 255, 255, 0.35), 0 0 80px rgba(124, 148, 115, 0.2);
  transform: rotate(-8deg);
}

.cine-intro-stage {
  position: relative;
  z-index: 5;
  text-align: center;
  color: #EFEAE0;
  padding: 0 24px;
}

.cine-intro-kicker {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #B8A088;
  margin-bottom: 28px;
}

.cine-intro-logo {
  font-size: clamp(72px, 16vw, 148px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-shadow: 0 0 60px rgba(124, 148, 115, 0.25), 0 0 120px rgba(255, 255, 255, 0.08);
}

.cine-intro-tagline {
  margin-top: 22px;
  font-size: clamp(18px, 3vw, 28px);
  color: #C9C2B2;
  letter-spacing: 0.02em;
}

.cine-intro-count {
  position: absolute;
  bottom: calc(11vh + 28px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(239, 234, 224, 0.45);
}

.cine-intro-flash {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: #EFEAE0;
  opacity: 0;
}

.cine-page-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle 520px at calc(var(--cmx) * 100%) calc(var(--cmy) * 100%), rgba(124, 148, 115, 0.07), transparent 62%),
    radial-gradient(circle 380px at calc((1 - var(--cmx)) * 100%) calc((1 - var(--cmy)) * 80%), rgba(184, 160, 136, 0.05), transparent 58%);
  opacity: 0.9;
  transition: opacity 0.35s ease;
}

/* ── Hero shells (home + shop) ── */
.hero-cinematic,
.shop-hero-cinematic {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  isolation: isolate;
  overflow: hidden;
}

.hero-cinematic {
  transform: perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center center;
  will-change: transform;
}

.shop-hero-cinematic {
  min-height: 280px;
  border-bottom-color: transparent;
  transform: perspective(900px) rotateX(calc(var(--tilt-x) * 0.6)) rotateY(calc(var(--tilt-y) * 0.6));
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
  box-shadow: inset 0 -1px 0 rgba(42, 39, 35, 0.1);
}

.cine-aurora {
  position: absolute;
  inset: -45%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 42% 34% at 18% 28%, rgba(124, 148, 115, 0.18), transparent 58%),
    radial-gradient(ellipse 38% 30% at 82% 62%, rgba(184, 160, 136, 0.16), transparent 55%),
    radial-gradient(ellipse 34% 26% at 52% 18%, rgba(42, 39, 35, 0.06), transparent 50%);
  animation: cineAuroraDrift 16s ease-in-out infinite alternate;
  transform: translate3d(var(--cpx, 0px), var(--cpy, 0px), 0);
}

.cine-aurora-2 {
  inset: -55%;
  opacity: 0.7;
  mix-blend-mode: multiply;
  background:
    radial-gradient(ellipse 36% 28% at 72% 22%, rgba(201, 194, 178, 0.2), transparent 58%),
    radial-gradient(ellipse 30% 24% at 12% 72%, rgba(124, 148, 115, 0.12), transparent 55%);
  animation: cineAuroraDrift2 20s ease-in-out infinite alternate;
}

.cine-mouse-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(
    circle 160px at calc(var(--cmx) * 100%) calc(var(--cmy) * 100%),
    rgba(255, 255, 255, 0.2),
    rgba(124, 148, 115, 0.08) 38%,
    transparent 68%
  );
}

.cine-sweep {
  position: absolute;
  inset: -25% -70%;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(105deg, transparent 44%, rgba(255, 255, 255, 0.12) 50%, transparent 56%);
  animation: cineSweep 8s ease-in-out infinite;
}

.cine-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.cine-particle {
  position: absolute;
  left: var(--px);
  top: var(--py);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 10px rgba(124, 148, 115, 0.35);
  animation: cineParticle var(--pd, 3s) ease-in-out infinite;
  animation-delay: var(--pdelay, 0s);
}

.cine-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0.055;
  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='0.55'/%3E%3C/svg%3E");
  animation: cineGrain 0.5s steps(2) infinite;
}

.cine-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: radial-gradient(ellipse 88% 78% at 22% 42%, transparent 40%, rgba(42, 39, 35, 0.08) 100%);
}

.hero-cinematic .hero-content,
.shop-hero-inner {
  position: relative;
  z-index: 5;
}

.cine-play-target.cine-play .cine-vfx-item {
  animation: cineReveal 1s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--vfx-i, 0) * 0.12s + 0.08s);
}

.hero-cinematic .scroll-cue {
  z-index: 5;
}

/* ── Dark story band ── */
.home-story-cinematic {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.cine-story-glow {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 50% 40% at 20% 50%, rgba(124, 148, 115, 0.14), transparent 60%),
    radial-gradient(ellipse 40% 35% at 80% 40%, rgba(184, 160, 136, 0.1), transparent 55%);
  animation: cineAuroraDrift 18s ease-in-out infinite alternate;
}

.cine-story-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.04;
  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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

.home-story-cinematic .home-story-copy,
.home-story-cinematic .home-story-visual {
  position: relative;
  z-index: 2;
}

/* ── Section polish ── */
.cine-scroll-shift {
  will-change: transform;
}

.home-section-head h2.serif,
.shop-hero-cinematic h1,
.hero-cinematic h1 {
  text-shadow: 0 0 40px rgba(124, 148, 115, 0.08);
}

.press-band {
  position: relative;
  overflow: hidden;
}

.press-band::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.025;
  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.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Product + category cards ── */
.product-card[data-cine-tilt],
.category-tile[data-cine-shimmer] {
  --card-tx: 0deg;
  --card-ty: 0deg;
  will-change: transform;
}

.product-card[data-cine-tilt] {
  transition: box-shadow 0.35s ease;
}

.product-card.style-grid[data-cine-tilt] .card-thumb {
  position: relative;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  transform: perspective(800px) rotateX(var(--card-tx)) rotateY(var(--card-ty));
}

.category-tile[data-cine-shimmer] {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.category-tile[data-cine-shimmer] .category-tile-img {
  position: relative;
  overflow: hidden;
}

.product-card.style-grid[data-cine-tilt] .card-thumb::after,
.category-tile[data-cine-shimmer] .category-tile-img::after {
  content: "";
  position: absolute;
  inset: -60%;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.38) 50%, transparent 58%);
  animation: cineShimmer 5s ease-in-out infinite;
  pointer-events: none;
}

.product-card.style-grid[data-cine-tilt]:hover {
  box-shadow: 0 22px 50px rgba(42, 39, 35, 0.12);
}

.category-tile[data-cine-shimmer]:hover {
  box-shadow: 0 22px 50px rgba(42, 39, 35, 0.12);
  transform: translateY(-4px);
}

.shop-banner {
  position: relative;
  overflow: hidden;
}

.shop-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 55%, rgba(255, 255, 255, 0.06) 62%, transparent 70%);
  animation: cineBannerSweep 9s ease-in-out infinite;
}

@keyframes cineReveal {
  from { opacity: 0; transform: translateY(24px); filter: blur(6px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes cineAuroraDrift {
  from { transform: translate3d(var(--cpx, 0), var(--cpy, 0), 0) translate(-2%, -1%) scale(1); }
  to { transform: translate3d(var(--cpx, 0), var(--cpy, 0), 0) translate(2%, 1%) scale(1.05); }
}

@keyframes cineAuroraDrift2 {
  from { transform: translate3d(calc(var(--cpx, 0px) * -0.4), calc(var(--cpy, 0px) * -0.4), 0) rotate(0deg); }
  to { transform: translate3d(calc(var(--cpx, 0px) * -0.4), calc(var(--cpy, 0px) * -0.4), 0) rotate(5deg); }
}

@keyframes cineSweep {
  0%, 76% { transform: translateX(-40%) skewX(-8deg); opacity: 0; }
  82% { opacity: 1; }
  100% { transform: translateX(40%) skewX(-8deg); opacity: 0; }
}

@keyframes cineParticle {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.3; }
  50% { transform: translateY(-14px) scale(1.2); opacity: 0.85; }
}

@keyframes cineGrain {
  0%, 100% { opacity: 0.028; }
  50% { opacity: 0.045; }
}

@keyframes cineShimmer {
  0% { transform: translateX(-65%) rotate(12deg); }
  100% { transform: translateX(65%) rotate(12deg); }
}

@keyframes cineBannerSweep {
  0%, 70% { transform: translateX(-30%); opacity: 0; }
  80% { opacity: 1; }
  100% { transform: translateX(30%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cine-viewport-grain,
  .cine-intro,
  .hero-film .cine-intro-grain,
  .cine-page-glow,
  .cine-aurora,
  .cine-sweep,
  .cine-particle,
  .cine-grain,
  .cine-story-glow,
  .cine-story-grain,
  .product-card.style-grid[data-cine-tilt] .card-thumb::after,
  .category-tile[data-cine-shimmer] .category-tile-img::after,
  .shop-banner::after {
    animation: none !important;
    opacity: 0 !important;
  }

  .hero-cinematic,
  .shop-hero-cinematic,
  .product-card[data-cine-tilt],
  .category-tile[data-cine-shimmer] {
    transform: none !important;
  }

  .hero-film-actions {
    opacity: 1 !important;
    transform: translateX(-50%) !important;
  }
}


/* Brand logo image inside film intro */
.cine-intro-logo.has-logo-img {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.cine-intro-logo .cine-intro-logo-img {
  display: block;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.35));
}
.cine-intro-logo .site-logo-text {
  display: inline-block;
}