/* ===========================================================================
   Tesária homepage hero v6c (background reel)            published 2026-10-30
   ---------------------------------------------------------------------------
   Loaded on index.html only, AFTER /css/style-august-22.css.
   Every rule is scoped to `.hero.hero--reel`, so the live nav, buttons and all
   sections below the hero keep their existing styles from style-august-22.css.
   The old slideshow hero rules (.hero__slide, .hero__pattern, typewriter
   min-heights, black hero CTA) are still in style-august-22.css and are
   neutralised here only where they would leak into the new markup.
   Markup: <!-- HERO v6c START --> ... <!-- HERO v6c END --> in index.html.
   Behaviour: /js/hero-reel-v6c.js
   Breakpoints: 768px (mobile reel + layout), 360px, max-height 520px.
   =========================================================================== */

/* ---------- Local tokens (scoped; global :root tokens are untouched) ---------- */
.hero.hero--reel {
  --reel-obsidian: #06090C;
  --reel-ivory: #EFEBE1;
  --reel-ivory-mute: #C9C2B2;
  --reel-gold: #D4A843;
  --reel-gold-soft: #F0D48A;
  --reel-grad-gold-text: linear-gradient(100deg, #B8924A 0%, #F0D48A 45%, #D4A843 70%, #B8924A 100%);
  --reel-serif: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --reel-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --reel-gutter: clamp(24px, 5vw, 80px);
  --reel-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --reel-focus: 0 0 0 2px var(--reel-obsidian), 0 0 0 4px var(--reel-gold-soft);

  position: relative; min-height: 100vh; min-height: 100svh; padding-top: 140px; padding-bottom: 120px;
  display: flex; align-items: center; overflow: hidden; isolation: isolate;
}

/* ---------- Background: poster (LCP) + reel + scrims ---------- */
.hero.hero--reel .hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--reel-obsidian); }
.hero.hero--reel .hero__bg picture { display: contents; }
.hero.hero--reel .hero__video,
.hero.hero--reel .hero__poster { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 60% 50%; display: block; }
.hero.hero--reel .hero__video { z-index: 1; }
.hero.hero--reel .hero__overlay,
.hero.hero--reel .hero__flashguard { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero.hero--reel.is-poster-only .hero__video,
.hero.hero--reel.is-paused-start .hero__video { visibility: hidden; }

/* Scrim (contrast 1.4.3, measured against every 0.25s frame of the reel) */
.hero.hero--reel .hero__overlay { background:
    linear-gradient(180deg, rgba(6,9,12,0.78) 0%, rgba(6,9,12,0.35) 10%, rgba(6,9,12,0) 20%),
    linear-gradient(90deg, rgba(6,9,12,0.94) 0%, rgba(6,9,12,0.88) 30%, rgba(6,9,12,0.74) 44%, rgba(6,9,12,0.40) 58%, rgba(6,9,12,0) 74%),
    linear-gradient(180deg, rgba(6,9,12,0) 62%, rgba(6,9,12,0.94) 100%); }
/* Extra guard, only on during the bright burst (about 8.2s to 9.0s, toggled by hero-reel-v6c.js) */
.hero.hero--reel .hero__flashguard { opacity: 0; transition: opacity 180ms linear; background:
    linear-gradient(180deg, rgba(6,9,12,0.85) 0%, rgba(6,9,12,0) 16%),
    radial-gradient(70% 85% at 22% 55%, rgba(6,9,12,0.92) 0%, rgba(6,9,12,0.72) 45%, rgba(6,9,12,0.25) 80%, rgba(6,9,12,0) 100%); }
.hero.hero--reel.is-flash .hero__flashguard { opacity: 1; }
.hero.hero--reel.is-flash .hero__title,
.hero.hero--reel.is-flash .hero__sub { text-shadow: 0 2px 30px rgba(6,9,12,0.95), 0 0 2px rgba(6,9,12,0.8); }

/* ---------- Copy ---------- */
.hero.hero--reel .hero__inner { position: relative; z-index: 2; display: block; gap: 0; }
.hero.hero--reel .hero__content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 26px; max-width: 640px; text-align: left; }
.hero.hero--reel .hero__eyebrow { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  font-family: var(--reel-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--reel-gold-soft); text-shadow: 0 1px 12px rgba(0,0,0,0.7); }
.hero.hero--reel .hero__eyebrow .dot { color: var(--reel-gold); opacity: 0.8; letter-spacing: 0; }
.hero.hero--reel .hero__title { margin: 0; min-height: 0; font-family: var(--reel-serif); font-weight: 400;
  font-size: clamp(56px, 7.2vw, 112px); line-height: 1.0; letter-spacing: -0.022em; color: var(--reel-ivory);
  max-width: 9ch; text-shadow: 0 2px 24px rgba(0,0,0,0.55); opacity: 1; transition: text-shadow 180ms; }
.hero.hero--reel .hero__title em { font-style: italic; font-weight: 400; background: var(--reel-grad-gold-text);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--reel-gold);
  text-shadow: none; padding-right: 0.06em; }
.hero.hero--reel .hero__sub { margin: 0; min-height: 0; font-family: var(--reel-sans); font-size: clamp(17px, 1.4vw, 21px); line-height: 1.6;
  max-width: 34ch; color: var(--reel-ivory); opacity: 0.94; text-shadow: 0 1px 14px rgba(0,0,0,0.7); transition: text-shadow 180ms; }

/* ---------- CTA (gold pill, overrides the black hero CTA in style-august-22.css) ---------- */
.hero.hero--reel .hero__ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 6px; }
.hero.hero--reel .hero__ctas .btn { font-family: var(--reel-sans); font-size: 13px; font-weight: 600; letter-spacing: 0.18em;
  padding: 18px 34px; border-radius: 999px; }
.hero.hero--reel .hero__ctas .btn::after { content: none; }
.hero.hero--reel .hero__ctas .btn--primary { background: var(--reel-gold); color: var(--reel-obsidian);
  border: 1px solid transparent; box-shadow: 0 10px 30px -12px rgba(212,168,67,0.55); }
.hero.hero--reel .hero__ctas .btn--primary:hover { background: var(--reel-gold-soft); color: var(--reel-obsidian);
  border-color: transparent; transform: translateY(-1px); box-shadow: 0 14px 36px -12px rgba(212,168,67,0.65); }
.hero.hero--reel .hero__ctas .btn--primary:focus-visible { outline: none; background: var(--reel-gold-soft); box-shadow: var(--reel-focus); }

/* ---------- Scroll cue ---------- */
.hero.hero--reel .hero__scroll { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 3;
  display: inline-flex; flex-direction: column; align-items: center; gap: 12px; min-height: 44px; min-width: 44px; padding: 6px 14px;
  border-radius: 4px; font-family: var(--reel-sans); font-size: 11.5px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--reel-ivory-mute); text-decoration: none; text-shadow: 0 1px 10px rgba(0,0,0,0.7); transition: color 240ms; }
.hero.hero--reel .hero__scroll:hover { color: var(--reel-gold-soft); }
.hero.hero--reel .hero__scroll:focus-visible { outline: none; box-shadow: var(--reel-focus); }
.hero.hero--reel .hero__scroll .hero__scroll-line { display: block; width: 1px; height: 44px;
  background: linear-gradient(to bottom, var(--reel-gold), transparent); animation: heroReelScrollPulse 2.4s ease-in-out infinite; }
@keyframes heroReelScrollPulse {
  0%   { transform: scaleY(0.3); transform-origin: top; opacity: 0.5; }
  50%  { transform: scaleY(1);   transform-origin: top; opacity: 1; }
  100% { transform: scaleY(0.3); transform-origin: bottom; opacity: 0.5; }
}

/* ---------- Pause / play (WCAG 2.2.2) ---------- */
.hero.hero--reel .hero__pause { position: absolute; z-index: 4; right: var(--reel-gutter); bottom: 32px; width: 44px; height: 44px; padding: 0;
  display: inline-grid; place-items: center; cursor: pointer; color: var(--reel-ivory);
  background: rgba(6,9,12,0.62); border: 1px solid rgba(239,235,225,0.42); border-radius: 999px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: border-color 200ms, color 200ms, background 200ms; }
.hero.hero--reel .hero__pause:hover { border-color: var(--reel-gold); color: var(--reel-gold-soft); background: rgba(6,9,12,0.8); }
.hero.hero--reel .hero__pause:focus-visible { outline: none; box-shadow: var(--reel-focus); }
.hero.hero--reel .hero__pause-icon { position: relative; width: 12px; height: 14px; display: block; }
.hero.hero--reel .hero__pause-icon::before,
.hero.hero--reel .hero__pause-icon::after { content: ''; position: absolute; top: 0; width: 4px; height: 14px; background: currentColor; border-radius: 1px; }
.hero.hero--reel .hero__pause-icon::before { left: 0; }
.hero.hero--reel .hero__pause-icon::after { right: 0; }
/* play glyph (triangle) while paused */
.hero.hero--reel .hero__pause[aria-pressed="true"] .hero__pause-icon::before { left: 2px; width: 0; height: 0; background: none; border-radius: 0;
  border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent currentColor; }
.hero.hero--reel .hero__pause[aria-pressed="true"] .hero__pause-icon::after { display: none; }
.hero.hero--reel.is-poster-only .hero__pause { display: none; }
@media (forced-colors: active) {
  .hero.hero--reel .hero__pause { border-color: ButtonText; }
  .hero.hero--reel .hero__pause-icon::before,
  .hero.hero--reel .hero__pause-icon::after { background: ButtonText; }
}

/* Screen-reader-only description of the reel */
.hero.hero--reel .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- Mobile (portrait reel) ---------- */
@media (max-width: 768px) {
  .hero.hero--reel { align-items: flex-end; padding-top: 110px; padding-bottom: 104px; }
  .hero.hero--reel .hero__video,
  .hero.hero--reel .hero__poster { object-position: 50% 40%; }
  .hero.hero--reel .hero__overlay { background:
    linear-gradient(180deg, rgba(6,9,12,0.75) 0%, rgba(6,9,12,0) 16%),
    linear-gradient(180deg, rgba(6,9,12,0) 22%, rgba(6,9,12,0.62) 36%, rgba(6,9,12,0.88) 48%, rgba(6,9,12,0.95) 66%, rgba(6,9,12,0.98) 100%); }
  .hero.hero--reel .hero__flashguard { background: linear-gradient(180deg, rgba(6,9,12,0.5) 0%, rgba(6,9,12,0.9) 40%, rgba(6,9,12,0.97) 100%); }
  .hero.hero--reel .hero__content { gap: 18px; }
  .hero.hero--reel .hero__eyebrow { font-size: 10.5px; letter-spacing: 0.2em; gap: 4px 8px; }
  .hero.hero--reel .hero__title { font-size: clamp(44px, 12.5vw, 72px); line-height: 1.02; max-width: 9ch; }
  .hero.hero--reel .hero__sub { font-size: 16.5px; }
  .hero.hero--reel .hero__ctas { width: 100%; }
  .hero.hero--reel .hero__ctas .btn { width: 100%; padding: 17px 28px; }
  /* style-august-22.css hides .hero__scroll under 720px; the reel hero keeps it */
  .hero.hero--reel .hero__scroll { display: inline-flex; bottom: 22px; gap: 8px; font-size: 10.5px; }
  .hero.hero--reel .hero__scroll .hero__scroll-line { height: 28px; }
  .hero.hero--reel .hero__pause { right: 16px; bottom: 22px; }
}
@media (max-width: 360px) {
  .hero.hero--reel .hero__eyebrow { letter-spacing: 0.14em; }
  .hero.hero--reel .hero__title { font-size: 42px; }
  .hero.hero--reel .hero__ctas .btn { letter-spacing: 0.12em; padding-inline: 18px; }
  .hero.hero--reel .hero__scroll { letter-spacing: 0.2em; }
}
/* Short landscape viewports (phones sideways, 200% zoom on laptops) */
@media (max-height: 520px) {
  .hero.hero--reel { min-height: auto; padding-top: 110px; padding-bottom: 110px; align-items: flex-start; }
  .hero.hero--reel .hero__scroll { display: none; }
}

/* ---------- Reduced motion: poster only, no reel, no pulse ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero.hero--reel .hero__video,
  .hero.hero--reel .hero__pause { display: none; }
  .hero.hero--reel .hero__scroll .hero__scroll-line { animation: none; }
  .hero.hero--reel .hero__ctas .btn { transition: none; }
}

/* Nov 1 2026 (Tes): phones only, hero text lower so the reel shows. */
@media (max-width: 768px) and (min-height: 521px) {
  /* Phone: already bottom anchored, so tighten the space under the button and between lines */
  .hero.hero--reel { padding-bottom: 92px; }
  .hero.hero--reel .hero__content { gap: 14px; }
  .hero.hero--reel .hero__scroll .hero__scroll-line { height: 20px; }
  /* Scrim follows the copy from the bottom (px stops), so the top half of the reel stays clear */
  .hero.hero--reel .hero__overlay { background:
    linear-gradient(180deg, rgba(6,9,12,0.75) 0%, rgba(6,9,12,0) 16%),
    linear-gradient(0deg, rgba(6,9,12,0.97) 0px, rgba(6,9,12,0.95) 200px, rgba(6,9,12,0.88) 360px, rgba(6,9,12,0.70) 450px, rgba(6,9,12,0) 560px); }
}
@media (max-width: 768px) and (min-height: 521px) {
  .hero.hero--reel { padding-bottom: 84px; }
  .hero.hero--reel .hero__content { gap: 10px; }
  .hero.hero--reel .hero__eyebrow { font-size: 10px; }
  .hero.hero--reel .hero__title { font-size: clamp(40px, 11vw, 64px); max-width: 13ch; }  /* two lines: "Brands worth / unboxing." */
  .hero.hero--reel .hero__sub { font-size: 15.5px; line-height: 1.5; }
  .hero.hero--reel .hero__ctas { margin-top: 4px; }
  .hero.hero--reel .hero__scroll .hero__scroll-line { height: 14px; }
  .hero.hero--reel .hero__overlay { background:
    linear-gradient(180deg, rgba(6,9,12,0.75) 0%, rgba(6,9,12,0) 14%),
    linear-gradient(0deg, rgba(6,9,12,0.97) 0px, rgba(6,9,12,0.93) 160px, rgba(6,9,12,0.86) 270px, rgba(6,9,12,0.68) 350px, rgba(6,9,12,0) 440px); }
}
/* v5 preview (Nov 1 2026, Tes): phones only, hero only. The reel keeps exactly its live crop (first screen,
   100svh) and the text starts 120px above the bottom of the first screen, so the phone, box, tissue and tag
   sit fully above the eyebrow. Subline and button continue below on #06090C, reached by a short scroll.
   15px left inset as v3b. Dark scrim only at the foot of the reel, behind the text. Loads after v2. */
@media (max-width: 768px) and (min-height: 521px) {
  .hero.hero--reel { display: block; min-height: 0; background: #06090C;
    padding-top: calc(100vh - 120px); padding-top: calc(100svh - 120px); padding-bottom: 80px; }
  .hero.hero--reel .hero__bg { inset: 0 0 auto 0; height: 100vh; height: 100svh; }
  .hero.hero--reel .hero__inner { padding-left: 15px; padding-right: 33px; }
  .hero.hero--reel .hero__scroll { bottom: 14px; gap: 0; }
  .hero.hero--reel .hero__scroll .hero__scroll-line { display: none; }
  .hero.hero--reel .hero__pause { bottom: 18px; }
  .hero.hero--reel .hero__overlay { background:
    linear-gradient(180deg, rgba(6,9,12,0.75) 0%, rgba(6,9,12,0) 14%),
    linear-gradient(0deg, rgba(6,9,12,1) 0px, rgba(6,9,12,0.92) 60px, rgba(6,9,12,0.6) 110px, rgba(6,9,12,0) 150px); }
}
/* v5 typewriter preview (Nov 1 2026, Tes): phones only, hero eyebrow types one service at a time, no caret.
   The full list stays in the DOM, visually hidden, for SEO and screen readers. */
.hero.hero--reel .hero__eyebrow-full { display: contents; }
.hero.hero--reel .hero__eyebrow-tw { display: none; }
@media (max-width: 768px) and (min-height: 521px) {
  .hero.hero--reel .hero__eyebrow.tw-on { display: block; height: 1.6em; line-height: 1.6em; white-space: nowrap; overflow: hidden; }
  .hero.hero--reel .hero__eyebrow.tw-on .hero__eyebrow-full { display: block; position: absolute !important; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
  .hero.hero--reel .hero__eyebrow.tw-on .hero__eyebrow-tw { display: inline-flex; align-items: center; height: 1.6em; }
}