/*
Theme Name: SaintSinners
Theme URI: https://saintsinners.co.uk
Author: SaintSinners
Description: Luxury streetwear theme for SaintSinners.co.uk — black / red / white, cult-community aesthetic, built-in 360° 3D product viewing (.glb uploads), WooCommerce ready.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: saintsinners
Tags: e-commerce, black, one-column, custom-logo
*/

/* ============ TOKENS ============ */
:root {
  --black: #0a0a0a;
  --ink: #111111;
  --panel: #141414;
  --line: #262626;
  --blood: #e10600;
  --blood-dark: #8f0400;
  --bone: #f2f0ec;
  --grey: #8a8a8a;
  --font-display: 'Anton', Impact, sans-serif;
  --font-body: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --pad: clamp(20px, 4vw, 64px);
}

/* ============ RESET / BASE ============ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--black);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* film grain */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: .02;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--blood); }
::selection { background: var(--blood); color: var(--bone); }

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .01em;
  text-transform: uppercase;
  line-height: .95;
  margin: 0 0 .4em;
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--blood);
  color: var(--bone);
  padding: 10px 16px;
  z-index: 10001;
}
.skip-link:focus { left: 0; }

.container { padding-left: var(--pad); padding-right: var(--pad); max-width: 1560px; margin: 0 auto; }

/* labels — small mono-ish tags */
.tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--blood);
  margin-bottom: 26px;
}

/* buttons */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 16px 34px;
  border: 1px solid var(--bone);
  color: var(--bone);
  background: transparent;
  cursor: pointer;
  transition: all .25s ease;
}
.btn:hover { background: var(--bone); color: var(--black); }
.btn-red { border-color: var(--blood); background: var(--blood); color: var(--bone); }
.btn-red:hover { background: transparent; color: var(--blood); }
.btn-small { padding: 10px 20px; font-size: 11px; }

/* ============ HEADER ============ */
.site-head {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(10,10,10,.7);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.head-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px var(--pad);
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand-mark, .brand .custom-logo, .brand img { height: 42px; width: auto; }

/* Brand logo is dark artwork on transparency — invert to bone-white for the black UI.
   Pixels are unchanged; this only recolours the displayed mark. */
.brand-mark, .brand .custom-logo, .brand img,
.ph-mark, .member-card img {
  filter: invert(1) brightness(1.06);
}
.brand-name {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: .06em;
  color: var(--bone);
}
.brand-name .sin { color: var(--blood); }
.site-nav ul { list-style: none; display: flex; gap: 34px; margin: 0; padding: 0; }
.site-nav a {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  position: relative;
  padding: 4px 0;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--blood);
  transition: width .25s ease;
}
.site-nav a:hover::after { width: 100%; }
.head-actions { display: flex; align-items: center; gap: 18px; }
.cart-link { font-size: 12px; font-weight: 700; letter-spacing: .2em; }

/* ============ HERO ============ */
.hero {
  position: relative;
  min-height: calc(100vh - 90px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px var(--pad) 60px;
  overflow: hidden;
}
.hero-mark {
  position: absolute;
  right: 4vw;
  top: 50%;
  transform: translateY(-50%);
  height: 78vh;
  max-height: 720px;
  opacity: .08;
  pointer-events: none;
  filter: invert(1) brightness(1.06) drop-shadow(0 0 60px rgba(225,6,0,.35));
  animation: markPulse 6s ease-in-out infinite;
}
@keyframes markPulse { 0%,100% { opacity:.06; } 50% { opacity:.11; } }
.hero h1 {
  font-size: clamp(64px, 13vw, 220px);
  margin: 0;
}
.hero h1 .line { display: block; }
.hero h1 .sinners {
  color: transparent;
  -webkit-text-stroke: 2px var(--blood);
  transition: color .3s ease;
}
.hero h1 .sinners:hover { color: var(--blood); }
.hero-tagline {
  max-width: 520px;
  margin: 30px 0 40px;
  font-size: 15px;
  letter-spacing: .06em;
  color: var(--grey);
  text-transform: uppercase;
}
.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-meta {
  position: absolute;
  bottom: 24px;
  left: var(--pad);
  right: var(--pad);
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--grey);
}

/* ============ SECTIONS ============ */
.section { padding: clamp(90px, 12vw, 170px) 0; border-top: 1px solid var(--line); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 64px; flex-wrap: wrap; }
.section-head h2 { font-size: clamp(40px, 6vw, 96px); margin: 0; }
.section-head .sub { color: var(--grey); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; max-width: 380px; }

/* ============ DROP / COUNTDOWN ============ */
.drop { background: var(--ink); color: var(--bone); border-top: none; }
.drop h2 { font-size: clamp(44px, 7vw, 110px); color: var(--bone); margin-bottom: 10px; }
.drop-note { font-weight: 700; letter-spacing: .2em; text-transform: uppercase; font-size: 13px; color: var(--grey); margin-bottom: 40px; }
.countdown { display: flex; gap: clamp(14px, 3vw, 40px); flex-wrap: wrap; }
.count-unit { text-align: center; min-width: 90px; }
.count-unit b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, 110px);
  line-height: 1;
  color: var(--bone);
  background: var(--blood);
  padding: 14px 10px 8px;
}
.count-unit span { display: block; margin-top: 10px; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--grey); font-weight: 700; }

/* ============ PRODUCT GRID ============ */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3vw, 48px); }
.card {
  position: relative;
}
.card-media {
  aspect-ratio: 3 / 4;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 20px;
}
.card-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(30%) contrast(1.05); transition: transform .5s ease, filter .5s ease; }
.card:hover .card-media img { transform: scale(1.05); filter: grayscale(0%); }
.card-media .ph-mark { height: 45%; opacity: .18; }
.card-sin { position: absolute; top: 14px; left: 18px; font-size: 10px; letter-spacing: .3em; color: var(--blood); z-index: 2; }
.card-badge { position: absolute; top: 12px; right: 14px; z-index: 2; background: var(--blood); color: var(--bone); font-size: 10px; font-weight: 700; letter-spacing: .2em; padding: 4px 8px; }
.card h3 { font-size: 20px; margin: 0 0 6px; }
.card .price { color: var(--grey); font-size: 14px; letter-spacing: .1em; }
.card .price ins { color: var(--bone); text-decoration: none; }

/* ============ RELIC HOVER-LIST + SLIDE-IN PANEL ============ */
.relics { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.relic-list { list-style: none; margin: 0; padding: 0; }
.relic-item {
  display: flex;
  align-items: baseline;
  gap: 20px;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 26px 8px;
  cursor: pointer;
  color: var(--bone);
  font-family: var(--font-body);
  transition: padding-left .25s ease;
}
.relic-index { font-size: 10px; font-weight: 700; letter-spacing: .3em; color: var(--blood); min-width: 64px; }
.relic-name { font-family: var(--font-display); font-size: clamp(22px, 3vw, 40px); text-transform: uppercase; letter-spacing: .02em; line-height: 1; flex: 1; transition: color .2s ease; }
.relic-item .relic-price { color: var(--grey); font-size: 14px; letter-spacing: .1em; }
.relic-item:hover .relic-name, .relic-item.active .relic-name { color: var(--blood); }
.relic-item.active { padding-left: 20px; box-shadow: inset 3px 0 0 var(--blood); }
.relic-panel {
  position: sticky;
  top: 110px;
  border: 1px solid var(--line);
  background: var(--ink);
  overflow: hidden;
}
.relic-panel.slide { animation: panelSlide .35s cubic-bezier(.16, 1, .3, 1); }
@keyframes panelSlide { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
.rp-media {
  aspect-ratio: 4 / 3;
  background: radial-gradient(ellipse at 50% 60%, #1c1c1c 0%, var(--ink) 75%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.rp-media img { width: 100%; height: 100%; object-fit: cover; }
.rp-media img.rp-mark { object-fit: contain; padding: 16%; opacity: .22; }
.rp-body { padding: 26px 28px 30px; }
.rp-body h3 { font-size: 26px; margin-bottom: 6px; }
.rp-body p { color: var(--grey); font-size: 14px; margin: 0 0 18px; }
.rp-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 22px; }
.rp-price { font-family: var(--font-display); font-size: 26px; }
#rp-buy.soldout { pointer-events: none; opacity: .4; background: transparent; border-color: var(--grey); color: var(--grey); }

/* ============ CREED ============ */
.creed { background: var(--ink); text-align: center; }
.creed-line {
  font-family: var(--font-display);
  font-size: clamp(40px, 7.5vw, 120px);
  line-height: .98;
  text-transform: uppercase;
  color: var(--bone);
  margin: 0;
}
.creed-line span { display: block; }
.creed-line .sin-line { color: transparent; -webkit-text-stroke: 2px var(--blood); }
.creed-sub { margin: 30px 0 0; color: var(--grey); letter-spacing: .28em; text-transform: uppercase; font-size: 11px; }

/* ============ 3D SHOWCASE ============ */
.showcase-wrap { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: center; }
.viewer-frame {
  position: relative;
  border: 1px solid var(--line);
  background: radial-gradient(ellipse at 50% 60%, #1a1a1a 0%, var(--black) 75%);
}
.viewer-frame::before, .viewer-frame::after {
  content: "";
  position: absolute;
  width: 26px; height: 26px;
  border: 2px solid var(--blood);
  z-index: 2;
  pointer-events: none;
}
.viewer-frame::before { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.viewer-frame::after { bottom: -2px; right: -2px; border-left: none; border-top: none; }
model-viewer.saint-viewer {
  width: 100%;
  height: clamp(420px, 60vh, 680px);
  background: transparent;
  --progress-bar-color: var(--blood);
  --progress-bar-height: 2px;
}
.viewer-hint {
  position: absolute;
  bottom: 14px;
  left: 0; right: 0;
  text-align: center;
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--grey);
  pointer-events: none;
}
.viewer-empty {
  height: clamp(420px, 60vh, 680px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--grey);
  text-align: center;
  padding: 30px;
  font-size: 13px;
  letter-spacing: .1em;
}
.showcase-copy h2 { font-size: clamp(38px, 4.5vw, 72px); }
.showcase-copy p { color: var(--grey); margin-bottom: 28px; }
.spec-list { list-style: none; margin: 0 0 34px; padding: 0; }
.spec-list li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.spec-list li b { color: var(--blood); font-weight: 700; }

/* ============ MANIFESTO ============ */
.manifesto { background: var(--ink); }
.commandments { display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px 48px; counter-reset: cmd; }
.commandment { background: transparent; }
.commandment::before {
  counter-increment: cmd;
  content: "0" counter(cmd);
  display: block;
  font-family: var(--font-display);
  font-size: 44px;
  color: transparent;
  -webkit-text-stroke: 1px var(--blood);
  margin-bottom: 18px;
}
.commandment h3 { font-size: 20px; }
.commandment p { color: var(--grey); font-size: 14px; margin: 0; }

/* ============ CONGREGATION ============ */
.congregation { text-align: center; position: relative; overflow: hidden; }
.congregation .bg-word {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(120px, 22vw, 380px);
  color: transparent;
  -webkit-text-stroke: 1px rgba(225,6,0,.22);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.congregation .inner { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; }
.congregation h2 { font-size: clamp(44px, 7vw, 110px); }
.congregation p { color: var(--grey); margin-bottom: 40px; }
.join-form { display: flex; gap: 0; max-width: 520px; margin: 0 auto; }
.join-form input[type=email] {
  flex: 1;
  background: transparent;
  border: 1px solid var(--bone);
  border-right: none;
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: .15em;
  padding: 16px 20px;
  outline: none;
}
.join-form input[type=email]:focus { border-color: var(--blood); }
.join-form input::placeholder { color: var(--grey); text-transform: uppercase; letter-spacing: .2em; }
.join-note { margin-top: 18px; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--grey); }

/* Claim gate — medal-locked pieces */
#sidebar { display: none; }
.saint-claim { max-width: 560px; margin: clamp(80px, 16vh, 180px) auto; padding: 0 var(--pad); }
.saint-claim .claim-note {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 34px);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--bone);
  margin-bottom: 10px;
}
.saint-claim .claim-sub { font-size: 11px; letter-spacing: .25em; text-transform: uppercase; color: var(--grey); margin-bottom: 24px; }
.saint-claim .claim-row { display: flex; gap: 0; }
.saint-claim input[type=password] {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 1px solid var(--bone);
  border-right: none;
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: .3em;
  text-transform: uppercase;
  padding: 16px 20px;
  outline: none;
}
.saint-claim input[type=password]:focus { border-color: var(--blood); box-shadow: 0 0 20px rgba(225,6,0,.25); }
.saint-claim input::placeholder { color: var(--grey); letter-spacing: .25em; }
.join-success {
  border: 1px solid var(--blood);
  color: var(--blood);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-size: 13px;
  padding: 18px;
  margin-bottom: 30px;
}

/* ============ FOOTER ============ */
.site-foot { border-top: 1px solid var(--line); padding: 60px var(--pad) 30px; }
.foot-word {
  font-family: var(--font-display);
  font-size: clamp(48px, 10vw, 160px);
  line-height: .9;
  color: transparent;
  -webkit-text-stroke: 1px var(--grey);
  text-transform: uppercase;
  margin-bottom: 50px;
  transition: -webkit-text-stroke-color .3s;
}
.foot-word:hover { -webkit-text-stroke-color: var(--blood); }
.foot-cols { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: 50px; }
.foot-cols nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; flex-wrap: wrap; }
.foot-cols a, .foot-cols p { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--grey); margin: 0; }
.foot-cols a:hover { color: var(--blood); }
.foot-legal { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 24px; font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: var(--grey); }
.foot-legal-links { display: flex; gap: 22px; flex-wrap: wrap; }
.foot-legal-links a:hover { color: var(--blood); }

/* ============ CONTENT / BLOG / WOO BASICS ============ */
.entry { max-width: 860px; margin: 0 auto; padding: 80px var(--pad); }
.entry h1 { font-size: clamp(40px, 6vw, 90px); }
.entry a { color: var(--blood); }
.entry input, .entry textarea, .entry select {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--bone);
  padding: 12px 14px;
  font-family: var(--font-body);
}
.woocommerce .button, .woocommerce button.button, .single_add_to_cart_button {
  background: var(--blood) !important;
  color: var(--bone) !important;
  border-radius: 0 !important;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 700 !important;
}
.woocommerce .button:hover { background: var(--bone) !important; color: var(--black) !important; }
.woocommerce span.price, .woocommerce .price { color: var(--bone) !important; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--font-display); text-transform: uppercase; color: var(--bone); }
.saint-product-3d { margin: 30px 0; }
/* Shop pages: keep it dark and quiet */
.woocommerce .product_meta, .woocommerce-breadcrumb { display: none; }
.woocommerce p.stock.in-stock { color: var(--blood) !important; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; font-size: 12px !important; }
.woocommerce p.stock.out-of-stock { color: var(--grey) !important; text-transform: uppercase; letter-spacing: .18em; font-size: 12px !important; }
.woocommerce div.product .product_title { font-size: clamp(34px, 4vw, 60px); }
.woocommerce div.product p.price { color: var(--bone) !important; font-size: 22px; }
.woocommerce ul.products li.product { background: transparent; text-align: left; }
.woocommerce span.onsale { background: var(--blood); border-radius: 0; }

/* ============ SCROLL BLOOD-LINE ============ */
#saint-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: var(--blood);
  z-index: 10004;
  box-shadow: 0 0 12px rgba(225,6,0,.7);
}
body.admin-bar #saint-progress { top: 32px; }

/* ============ HERO ENTRANCE + GLITCH ============ */
.hero h1 .line-wrap { display: block; overflow: hidden; }
.hero h1 .line { display: block; animation: heroRise 1s cubic-bezier(.16, 1, .3, 1) both; animation-delay: .25s; }
.hero h1 .line-wrap:nth-child(2) .line { animation-delay: .4s; }
@keyframes heroRise { from { transform: translateY(112%); } to { transform: none; } }
.glitch { position: relative; }
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.glitch:hover::before {
  opacity: .9;
  color: var(--blood);
  -webkit-text-stroke: 0;
  animation: glitchA .4s steps(2) infinite;
}
.glitch:hover::after {
  opacity: .7;
  color: var(--bone);
  -webkit-text-stroke: 0;
  animation: glitchB .3s steps(2) infinite reverse;
}
@keyframes glitchA {
  0%   { clip-path: inset(12% 0 58% 0); transform: translate(-7px, 2px); }
  50%  { clip-path: inset(62% 0 8% 0);  transform: translate(6px, -2px); }
  100% { clip-path: inset(30% 0 42% 0); transform: translate(-4px, 1px); }
}
@keyframes glitchB {
  0%   { clip-path: inset(55% 0 20% 0); transform: translate(6px, -1px); }
  50%  { clip-path: inset(8% 0 70% 0);  transform: translate(-6px, 2px); }
  100% { clip-path: inset(40% 0 35% 0); transform: translate(5px, -2px); }
}

/* ============ SCARCITY METERS ============ */
.stock { margin-top: 14px; }
.stock span {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 7px;
}
.stock i {
  display: block;
  height: 3px;
  background: var(--blood);
  box-shadow: 0 0 8px rgba(225,6,0,.55);
  transition: width .8s ease;
}
.stock.low span { color: var(--blood); animation: lowPulse 1.2s ease-in-out infinite; }
.stock.sold-out span { color: var(--grey); text-decoration: line-through; animation: none; }
@keyframes lowPulse { 50% { opacity: .45; } }

/* ============ OATH BUTTON ============ */
.oath { position: relative; overflow: hidden; --p: 0%; touch-action: none; user-select: none; -webkit-user-select: none; }
.oath::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: var(--p);
  background: rgba(0, 0, 0, .55);
  pointer-events: none;
}
.oath .oath-label { position: relative; z-index: 1; }

/* ============ MEMBERSHIP CARD ============ */
.member-card {
  display: flex;
  align-items: center;
  gap: 24px;
  text-align: left;
  border: 1px solid var(--blood);
  background: linear-gradient(135deg, #150404 0%, var(--black) 60%);
  padding: 26px 30px;
  margin: 0 auto 30px;
  max-width: 480px;
  box-shadow: 0 0 40px rgba(225,6,0,.18);
}
.member-card img { height: 64px; flex: none; }
.member-card .mc-body { display: flex; flex-direction: column; gap: 6px; }
.member-card .mc-label { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--blood); }
.member-card strong { font-family: var(--font-display); font-size: 30px; letter-spacing: .04em; color: var(--bone); }
.member-card .mc-sub { font-size: 12px; color: var(--grey); letter-spacing: .06em; }

/* ============ SOULS COUNT ============ */
.souls { margin: 26px 0 0; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--grey); }
.souls span { color: var(--blood); font-weight: 700; }

/* ============ REVEAL ANIM ============ */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }
/* ============ PUNK ACCENTS ============ */
/* Hand-placed, taped labels with a marker swipe behind */
.tag { position: relative; transform: rotate(-2deg); z-index: 1; align-self: flex-start; }
.tag::before {
  content: "";
  position: absolute;
  left: -5px; right: -5px; bottom: 1px;
  height: 8px;
  background: var(--blood);
  opacity: .3;
  transform: skewX(-14deg);
  z-index: -1;
}

/* Ripped-zine ticket-stub dividers between sections */
.section { border-top: 3px solid var(--line); border-image: repeating-linear-gradient(90deg, var(--line) 0 9px, transparent 9px 16px) 3; }
.drop { border-top: none; border-image: none; }

/* Slapped-on SIN sticker */
.card-sin {
  top: 12px; left: 12px;
  background: var(--blood);
  color: var(--bone);
  padding: 4px 8px 3px;
  transform: rotate(-4deg);
  box-shadow: 2px 2px 0 rgba(0,0,0,.5);
}

/* Ransom-note commandment numerals — chaotic paste-up angles */
.commandment:nth-child(2n)::before { transform: rotate(2.5deg); }
.commandment:nth-child(3n)::before { transform: rotate(-3deg) translateX(4px); }

/* Askew paste-up section headings */
.section-head h2 { transform: rotate(-1deg); }

/* Neon nav underline */
.site-nav a::after { height: 2px; box-shadow: 0 0 10px rgba(225,6,0,.8); }

/* ============ AFTER-DARK LIGHTING ============ */
/* A dim red lamp in a dark room — the mood does the talking. */
.hero {
  background:
    radial-gradient(55% 45% at 72% 30%, rgba(225,6,0,.12), transparent 70%),
    radial-gradient(40% 35% at 12% 88%, rgba(225,6,0,.05), transparent 70%);
}
/* SINNERS as a neon sign: soft glow, occasional flicker.
   The glow is a STATIC filter; only opacity animates. Animating drop-shadow
   re-renders the blur on huge display type every frame — that was the lag. */
.hero h1 .sinners {
  filter: drop-shadow(0 0 14px rgba(225,6,0,.55)) drop-shadow(0 0 42px rgba(225,6,0,.25));
  animation: neonSign 7s ease-in-out infinite;
  will-change: opacity;
}
@keyframes neonSign {
  0%, 6%, 10%, 70%, 74%, 100% { opacity: 1; }
  7%  { opacity: .8; }
  9%  { opacity: 1; }
  50% { opacity: .93; }
  71% { opacity: .88; }
  73% { opacity: 1; }
}
/* Red buttons cast light */
.btn-red { box-shadow: 0 0 26px rgba(225,6,0,.32); }
.btn-red:hover { box-shadow: 0 0 38px rgba(225,6,0,.5); }
/* After Dark sits in a red-lit room */
.congregation {
  background: radial-gradient(45% 40% at 50% 42%, rgba(225,6,0,.09), transparent 72%);
}
/* Silk sheen across product imagery */
.rp-media { position: relative; overflow: hidden; }
.rp-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 42%, rgba(242,240,236,.05) 50%, transparent 58%);
  pointer-events: none;
}

/* ============ PUNK PRINT (refined) ============ */
/* Misregistered screen-print offsets — subtle */
.hero h1 .line:not(.sinners) { text-shadow: 3px 3px 0 rgba(225,6,0,.22); }
.section-head h2 { text-shadow: 2px 2px 0 rgba(225,6,0,.16); }
/* Cross out the saint — keep the sinner */
.creed-line span:first-child { position: relative; }
.creed-line span:first-child::after {
  content: "";
  position: absolute;
  left: -2%; right: -2%;
  top: 52%;
  height: .09em;
  background: var(--blood);
  transform: rotate(-2.5deg);
  box-shadow: 0 0 18px rgba(225,6,0,.5);
}
/* Sticker chaos — gentle angles */
.relic-list li:nth-child(2n) .relic-index { transform: rotate(2deg); }
.relic-list li:nth-child(3n) .relic-index { transform: rotate(-2.5deg); }
/* HUSH pasted slightly off */
.congregation .bg-word { transform: translate(-50%, -50%) rotate(-3deg); }

/* ============ SLEEK NEON ============ */
/* Neon hairline dividers */
.section { border-top-width: 1px; border-image: linear-gradient(90deg, transparent, rgba(225,6,0,.45) 50%, transparent) 1; }
.drop { border-top: none; border-image: none; }
/* Buttons: lift + light, no rough offsets */
.btn:hover { transform: translateY(-2px); }
.btn-red { box-shadow: 0 0 26px rgba(225,6,0,.32); }
.btn-red:hover { box-shadow: 0 8px 34px rgba(225,6,0,.45); }
/* Neon countdown */
.count-unit b {
  background: transparent;
  border: 1px solid var(--blood);
  color: var(--bone);
  text-shadow: 0 0 16px rgba(225,6,0,.55);
  box-shadow: 0 0 22px rgba(225,6,0,.22), inset 0 0 22px rgba(225,6,0,.12);
}
/* Active item bar glows */
.relic-item.active { box-shadow: inset 3px 0 0 var(--blood), inset 14px 0 22px -14px rgba(225,6,0,.6); }
/* Panel depth */
.relic-panel { box-shadow: 0 30px 80px rgba(0,0,0,.55); }
/* Neon focus */
.join-form input[type=email]:focus { box-shadow: 0 0 20px rgba(225,6,0,.25); }
/* After Dark heading glow */
.congregation h2 { text-shadow: 0 0 26px rgba(225,6,0,.35); }
/* Footer word lights up */
.foot-word:hover { text-shadow: 0 0 34px rgba(225,6,0,.35); }
/* Wordmark ember */
.brand-name .sin { text-shadow: 0 0 12px rgba(225,6,0,.5); }
/* Sleek scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: var(--line); }
::-webkit-scrollbar-thumb:hover { background: var(--blood); }

/* ============ FUTURE GLOW ============ */
/* Light travels the edge of the detail panel */
@property --sweep { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.relic-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  background: conic-gradient(from var(--sweep), transparent 0 82%, rgba(225,6,0,.85) 91%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
  z-index: 2;
}
/* The orbiting edge light only runs on hover — a masked conic gradient is one
   of the most expensive things to animate continuously. */
.relic-panel:hover::before {
  opacity: 1;
  animation: edgeSweep 7s linear infinite;
}
@keyframes edgeSweep { to { --sweep: 360deg; } }
/* A faint scanline drifts down the hero.
   Animates transform, never `top` — moving `top` relayouts the hero every frame. */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: 10%;
  background: linear-gradient(180deg, transparent, rgba(225,6,0,.05), transparent);
  animation: heroScan 9s linear infinite;
  will-change: transform;
  pointer-events: none;
}
@keyframes heroScan {
  from { transform: translateY(-120%); }
  to   { transform: translateY(1120%); }
}
/* Light sweep across buttons on hover */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(242,240,236,.22), transparent);
  transform: skewX(-20deg);
  transition: left .45s ease;
  pointer-events: none;
}
.btn:hover::after { left: 130%; }
/* Countdown frames breathe — a glow layer fading in/out, not an animated
   box-shadow (each box-shadow keyframe repaints the blur). */
.count-unit b { position: relative; }
.count-unit b::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: 0 0 34px rgba(225,6,0,.4), inset 0 0 30px rgba(225,6,0,.18);
  animation: unitBreathe 4s ease-in-out infinite;
  will-change: opacity;
  pointer-events: none;
}
@keyframes unitBreathe {
  0%, 100% { opacity: .35; }
  50%      { opacity: 1; }
}
/* Red-glow keyboard focus */
:focus-visible { outline: 1px solid var(--blood); outline-offset: 3px; box-shadow: 0 0 14px rgba(225,6,0,.4); }

/* ============ NIGHT PASS ============ */
/* Cinematic low light: image-first flow, faceless stills, one colour pop. */
.hero { isolation: isolate; }
.hero-bg {
  position: absolute;
  inset: -4%;
  z-index: -1;
  background-size: cover;
  background-position: center 28%;
  opacity: .13;
  /* Darkening is baked into a static filter and the layer is promoted once, so
     the slow drift is a pure GPU transform rather than a per-frame re-filter. */
  filter: grayscale(.4) brightness(.55) contrast(1.12);
  animation: heroDrift 40s ease-in-out infinite alternate;
  will-change: transform;
  transform: translateZ(0);
  pointer-events: none;
}
@keyframes heroDrift { from { transform: scale(1) translateZ(0); } to { transform: scale(1.06) translateZ(0); } }

/* NOTE: `content-visibility: auto` was tried here for below-the-fold sections
   and removed — skipping the subtree left the scroll-reveal elements inside it
   stuck at opacity 0 even once .in was applied, so the reel never appeared.
   The transform-only animation work above is where the real win came from. */

/* The night reel — the feed, on the site */
.reel-section { padding-bottom: 40px; }
.reel {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 var(--pad) 24px;
  scrollbar-width: none;
}
.reel::-webkit-scrollbar { display: none; }
.reel-tile {
  flex: 0 0 clamp(220px, 30vw, 340px);
  aspect-ratio: 3 / 4;
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink);
}
.reel-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.35) brightness(.78) contrast(1.05);
  transition: filter .5s ease, transform .7s ease;
}
.reel-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(130% 95% at 50% 18%, transparent 42%, rgba(0, 0, 0, .58) 100%);
  pointer-events: none;
}
.reel-tile:hover img { filter: grayscale(0) brightness(.95) contrast(1.05); transform: scale(1.045); }

/* Typographic tile — stands in until photography exists, and reads as
   deliberate editorial rather than a missing image. */
.reel-tile-type {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: 26px 24px;
  text-decoration: none;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(225,6,0,.10), transparent 62%),
    linear-gradient(180deg, #121212, #0a0a0a);
  transition: border-color .35s ease;
}
.reel-tile-type:hover { border-color: rgba(225,6,0,.55); }
.reel-tile-type::after { display: none; }
.reel-tile-type .rt-no {
  position: absolute;
  top: 20px;
  left: 24px;
  font-size: 10px;
  letter-spacing: .3em;
  color: rgba(242,240,236,.28);
}
.reel-tile-type .rt-name {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: .95;
  text-transform: uppercase;
  color: var(--bone);
  transition: color .35s ease;
}
.reel-tile-type:hover .rt-name { color: var(--blood); }
.reel-tile-type .rt-price { font-size: 11px; letter-spacing: .26em; color: var(--grey); }

/* HERS — the locked room */
.hers {
  position: relative;
  overflow: hidden;
  padding-top: clamp(70px, 11vw, 130px);
  padding-bottom: clamp(70px, 11vw, 130px);
  background: radial-gradient(50% 45% at 50% 40%, rgba(225,6,0,.10), transparent 72%);
}
.hers-word {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: clamp(160px, 34vw, 520px);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(225,6,0,.16);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.hers-inner { position: relative; z-index: 2; text-align: center; }
.hers-title {
  font-size: clamp(66px, 13vw, 190px);
  line-height: .9;
  margin: 8px 0 14px;
  color: var(--bone);
  text-shadow: 0 0 40px rgba(225,6,0,.3);
}
.hers-sub {
  color: var(--grey);
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  margin-bottom: 44px;
}
.hers-doors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 720px;
  margin: 0 auto;
}
.hers-door {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 22px;
  text-align: left;
  text-decoration: none;
  background: rgba(20,20,20,.6);
  border: 1px solid var(--line);
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
.hers-door:hover { border-color: var(--blood); background: rgba(28,10,10,.6); transform: translateY(-2px); }
.hers-door .hd-k { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--grey); }
.hers-door .hd-v {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 30px);
  letter-spacing: .03em;
  color: var(--bone);
  text-transform: uppercase;
}
.hers-door-gift:hover .hd-v { color: var(--blood); }

/* Gifting form */
.gift-form { max-width: 640px; margin: 34px auto 0; text-align: left; }
.gift-form[hidden] { display: none; }
.gf-line {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.4vw, 26px);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--bone);
  margin-bottom: 18px;
  text-align: center;
}
.gf-row { display: flex; gap: 12px; margin-bottom: 14px; }
.gf-row input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: .12em;
  padding: 15px 18px;
  outline: none;
}
.gf-row input:focus { border-color: var(--blood); box-shadow: 0 0 20px rgba(225,6,0,.22); }
.gf-row input::placeholder { color: var(--grey); text-transform: uppercase; letter-spacing: .2em; }
.gf-pledges { display: flex; gap: 12px; margin-bottom: 18px; }
.gf-pledge { flex: 1; cursor: pointer; }
.gf-pledge input { position: absolute; opacity: 0; pointer-events: none; }
.gf-pledge span {
  display: block;
  padding: 15px 10px;
  text-align: center;
  border: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--grey);
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.gf-pledge input:checked + span { color: var(--bone); border-color: var(--blood); background: rgba(225,6,0,.1); }
.gf-pledge input:focus-visible + span { outline: 1px solid var(--blood); outline-offset: 3px; }
.gift-form .btn { width: 100%; text-align: center; }
.gf-note { margin-top: 14px; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--grey); text-align: center; }
.gift-done {
  max-width: 640px;
  margin: 28px auto 0;
  padding: 16px 20px;
  border: 1px solid var(--blood);
  color: var(--blood);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-align: center;
}
.gift-done.gift-bad { border-color: var(--grey); color: var(--grey); }

/* Phones and small laptops: drop the continuously-animated decoration.
   The mood comes from the stills, not from things moving. */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .hero-bg, .hero::after, .hero-mark, .count-unit b::after { animation: none; }
  .hero-bg { will-change: auto; }
  .hero::after { display: none; }
  .count-unit b::after { opacity: .5; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-mark, .hero h1 .line, .hero h1 .sinners, .stock.low span,
  .relic-panel:hover::before, .count-unit b::after, .hers-word { animation: none; }
  .glitch:hover::before, .glitch:hover::after { animation: none; opacity: 0; }
  .btn::after { display: none; }
  .reel-tile img { transition: none; }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1100px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .showcase-wrap { grid-template-columns: 1fr; gap: 40px; }
  .commandments { grid-template-columns: repeat(2, 1fr); }
  .relics { grid-template-columns: 1fr; }
  .relic-panel { position: static; }
  /* Slide vertically on small screens so the panel never exceeds the viewport width */
  .relic-panel.slide { animation-name: panelSlideY; }
  /* Accordion: the panel nests under the tapped list item */
  .relic-list li .relic-panel { margin: 16px 0 10px; }
  .rp-media { aspect-ratio: 16 / 10; }
}
@keyframes panelSlideY { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (max-width: 720px) {
  .hers-doors { grid-template-columns: 1fr; }
  .gf-row { flex-direction: column; }
  .gf-pledges { flex-wrap: wrap; }
  .gf-pledge { flex: 1 0 28%; }
  .reel-tile { flex-basis: 74vw; }
  .site-nav { display: none; }
  .grid { grid-template-columns: 1fr; }
  .commandments { grid-template-columns: 1fr; }
  .join-form { flex-direction: column; }
  .join-form input[type=email] { border-right: 1px solid var(--bone); }
  .hero-meta { display: none; }
  /* Countdown fits 4-across on phones */
  .countdown { gap: 10px; }
  .count-unit { min-width: 0; flex: 1; }
  .count-unit b { font-size: clamp(34px, 11vw, 48px); }
  /* Detail panel CTA can wrap without crowding */
  .rp-cta { flex-wrap: wrap; }
  /* Membership card stacks on phones */
  .member-card { flex-direction: column; text-align: center; align-items: center; }
  .member-card .mc-body { align-items: center; }
}