/* ==========================================================================
   co-cine.css — shared design system for the cinematic homepage sections.
   Everything is scoped under .co-cine / .cine-* so it cannot leak into
   Empire's own components. Motion pairs with assets/co-cine.js.
   ========================================================================== */

:root {
  --cine-bg: #0a0a0a;
  --cine-card: #111111;
  --cine-raised: #161616;
  --cine-plate: #fafafa;
  --cine-white: #ffffff;
  --cine-body: rgba(229, 229, 229, 0.72);
  --cine-muted: rgba(229, 229, 229, 0.5);
  --cine-faint: rgba(255, 255, 255, 0.4);
  --cine-line: rgba(255, 255, 255, 0.08);
  --cine-line-hover: rgba(255, 255, 255, 0.2);
  --cine-green: #4caf54;
  --cine-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --cine-dur: 0.9s;
  --cine-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --cine-serif: 'Instrument Serif', Georgia, serif;
}

/* ---- Light scheme -------------------------------------------------------
   Sections opt in via the "Color scheme" setting, which adds .cine-light to
   the section root. Tokens flip; component-level tweaks live at the bottom
   of this file. --cine-white becomes "headline ink" (near-black) here. */

.co-cine.cine-light {
  --cine-bg: #ffffff;
  --cine-card: #ffffff;
  --cine-raised: #ffffff;
  --cine-white: #0a0a0a;
  --cine-body: rgba(10, 10, 10, 0.72);
  --cine-muted: rgba(10, 10, 10, 0.5);
  --cine-faint: rgba(10, 10, 10, 0.42);
  --cine-line: rgba(10, 10, 10, 0.08);
  --cine-line-hover: rgba(10, 10, 10, 0.25);
  --cine-green: #3c9342;
}

/* ---- Zone transitions ----------------------------------------------------
   Sections that open a new brightness zone fade in from the previous zone's
   color across a tall band at their top ("dawn"/"dusk"). Extra top padding
   keeps the section's own text past the blend, on solid ground. */

.co-cine.cine-fade-from-dark {
  background: linear-gradient(to bottom, #0a0a0a 0px, var(--cine-bg) 420px);
  padding-top: calc(clamp(80px, 11vw, 140px) + 140px);
}
.co-cine.cine-fade-from-light {
  background: linear-gradient(to bottom, #ffffff 0px, var(--cine-bg) 420px);
  padding-top: calc(clamp(80px, 11vw, 140px) + 140px);
}

/* ---- Section shell ------------------------------------------------------ */

.co-cine {
  background: var(--cine-bg);
  color: var(--cine-body);
  font-family: var(--cine-font);
  padding-block: clamp(80px, 11vw, 140px);
  position: relative;
  overflow: hidden;
}
.co-cine *,
.co-cine *::before,
.co-cine *::after { box-sizing: border-box; }

.cine-inner { max-width: 1240px; margin-inline: auto; padding-inline: 24px; position: relative; z-index: 2; }
.cine-inner--narrow { max-width: 880px; }
.cine-inner--copy { max-width: 980px; }

/* ---- Typography ---------------------------------------------------------- */

.co-cine h1, .co-cine h2, .co-cine h3 {
  font-family: var(--cine-font);
  color: var(--cine-white);
  margin: 0;
}
.cine-display {
  font-size: clamp(44px, 7.2vw, 92px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.cine-heading {
  font-size: clamp(32px, 4.5vw, 56px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
}
.cine-italic {
  font-family: var(--cine-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.cine-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cine-faint);
  margin-bottom: 22px;
}
.cine-body-lg { font-size: 18px; line-height: 1.6; color: var(--cine-body); }
.co-cine p { font-family: var(--cine-font); }
.co-cine a { color: inherit; }

/* ---- Glass + noise ------------------------------------------------------- */

.cine-glass {
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.cine-noise::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Buttons / pills ----------------------------------------------------- */

.cine-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  padding: 16px 32px;
  font-family: var(--cine-font);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.5s var(--cine-ease), background 0.5s var(--cine-ease),
    border-color 0.5s var(--cine-ease), color 0.5s var(--cine-ease);
}
.cine-btn:hover { transform: translateY(-2px); }
/* .co-cine prefix keeps these above `.co-cine a { color: inherit }` in
   specificity — without it the button text inherits the section body gray */
.co-cine .cine-btn--primary { background: var(--cine-green); color: #ffffff; }
.co-cine .cine-btn--primary:hover { background: #5abf62; color: #ffffff; }
.co-cine .cine-btn--glass {
  background: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--cine-white);
}
.co-cine .cine-btn--glass:hover { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.18); color: var(--cine-white); }

.cine-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.85);
}

/* Text-roll hover (duplicated label slides up) */
.cine-roll { display: inline-block; overflow: hidden; height: 1.15em; }
.cine-roll__stack { display: flex; flex-direction: column; transition: transform 0.5s var(--cine-ease); }
.cine-roll__stack > span { display: block; line-height: 1.15; }
a:hover .cine-roll__stack,
button:hover .cine-roll__stack { transform: translateY(-50%); }

/* Arrow icon: rests at ↗ (-45deg), straightens on hover */
.cine-arrow { flex: none; transition: transform 0.5s var(--cine-ease); transform: rotate(-45deg); }
a:hover .cine-arrow,
button:hover .cine-arrow { transform: rotate(0deg); }

/* ---- Check / cross lists (coverage terms) --------------------------------- */
.cine-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.cine-check li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--cine-body);
}
.cine-check__glyph { display: inline-flex; margin-top: 3px; }
.cine-check--ok .cine-check__glyph { color: var(--cine-green); }
.cine-check--no .cine-check__glyph { color: var(--cine-faint); }

/* ---- Entrance reveals (paired with co-cine.js) --------------------------- */

.cine-js [data-cine-reveal] {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(8px);
  transition: opacity var(--cine-dur) var(--cine-ease), transform var(--cine-dur) var(--cine-ease),
    filter var(--cine-dur) var(--cine-ease);
  transition-delay: var(--cine-d, 0s);
}
.cine-js [data-cine-reveal].is-in { opacity: 1; transform: none; filter: blur(0); }

/* Word-by-word reveal (spans injected by JS) */
.cine-w-line { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.cine-js .cine-w {
  display: inline-block;
  transform: translateY(115%);
  opacity: 0;
  filter: blur(6px);
  transition: transform var(--cine-dur) var(--cine-ease), opacity var(--cine-dur) var(--cine-ease),
    filter var(--cine-dur) var(--cine-ease);
}
.cine-js .is-in .cine-w { transform: translateY(0); opacity: 1; filter: blur(0); }

/* Scroll-scrubbed character reveal */
.cine-chw { display: inline-block; white-space: nowrap; }
.cine-ch { opacity: 0.16; transition: opacity 0.3s linear; }
.cine-ch.is-lit { opacity: 1; }
.is-done .cine-ch { opacity: 1; }

/* ---- Focus + reduced motion ---------------------------------------------- */

.co-cine :focus-visible {
  outline: 2px solid var(--cine-green);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .cine-js [data-cine-reveal],
  .cine-js .cine-w {
    transform: none;
    filter: none;
    transition: opacity 0.3s linear;
    transition-delay: 0s;
  }
  .cine-ch { opacity: 1 !important; }
  .cine-btn:hover { transform: none; }
  .cine-roll__stack, .cine-arrow { transition: none; }
}

/* ---- Light-scheme component overrides ------------------------------------
   Central here (rather than per-section) because component class names are
   shared. Only rules that hardcode white/black need flipping. */

.cine-light .cine-glass,
.cine-light.cine-glass {
  background: rgba(10, 10, 10, 0.05);
  border-color: rgba(10, 10, 10, 0.1);
}
.cine-light .cine-chip { color: rgba(10, 10, 10, 0.85); }
.cine-light .cine-btn--primary { background: var(--cine-green); color: #ffffff; }
.cine-light .cine-btn--primary:hover { background: #348a3a; color: #ffffff; }
.cine-light .cine-btn--glass {
  background: rgba(10, 10, 10, 0.05);
  border-color: rgba(10, 10, 10, 0.12);
  color: #0a0a0a;
}
.cine-light .cine-btn--glass:hover { background: rgba(10, 10, 10, 0.09); border-color: rgba(10, 10, 10, 0.25); color: #0a0a0a; }
.cine-light .cine-noise::after { opacity: 0.05; }

/* Hero — the light hero is a different composition (white studio + 3D-tilt
   product; markup branch in co-cine-hero.liquid). Only the press logos need
   a shared override: multiply melts white PNG backgrounds into the page. */
.cine-light .cine-hero__logo { filter: grayscale(1); mix-blend-mode: multiply; opacity: 0.55; }

/* Categories: black-native imagery sits in dark framed wells on light */
.cine-light .cine-cat__imgwrap { background: #0a0a0a; border-radius: 20px; overflow: hidden; }

/* Product cards */
.cine-light .cine-pcard__title { color: rgba(10, 10, 10, 0.9); }
.cine-light .cine-pcard__price { color: #0a0a0a; }
.cine-light .cine-pcard { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); }
.cine-light .cine-fc__link { color: rgba(10, 10, 10, 0.85); }
.cine-light .cine-fc__link:hover { color: #0a0a0a; }

/* Proof */
.cine-light.cine-proof { --cine-star: #f6a41c; }
.cine-light .cine-proof__stat-source { color: rgba(10, 10, 10, 0.85); }
.cine-light .cine-proof__stat:hover { background: rgba(10, 10, 10, 0.06); }
.cine-light .cine-promise__icon { color: rgba(10, 10, 10, 0.65); }
.cine-light .cine-promise:hover { background: rgba(10, 10, 10, 0.08); }

/* Newsletter */
.cine-light .cine-nl__field { background: rgba(10, 10, 10, 0.04); border-color: rgba(10, 10, 10, 0.12); }
.cine-light .cine-nl__field:focus-within { border-color: rgba(10, 10, 10, 0.3); }
.cine-light .cine-nl__input { color: #0a0a0a; }
.cine-light .cine-nl__input::placeholder { color: rgba(10, 10, 10, 0.4); }
.cine-light .cine-nl__submit { background: #0a0a0a; color: #ffffff; }
.cine-light .cine-nl__submit:hover { background: #222222; }
.cine-light .cine-nl__glow { background: radial-gradient(circle, rgba(60, 147, 66, 0.07) 0%, rgba(60, 147, 66, 0) 65%); }