/* ──────────────────────────────────────────────
   NoeMi Creative — Editorial Magazine components
   Marquee tickers, Roman numeral section openers,
   off-grid pull quotes, decorative dingbats, grain
   texture overlay, animated underline links.

   Reference language: Cosmoss / Kinfolk / The Cut.
   ────────────────────────────────────────────── */

/* ── Grain texture overlay ─────────────────────────
   Subtle noise across the entire page. Inline SVG turbulence
   filter — ~3% opacity. Renders behind no event capture. */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.07 0 0 0 0 0.05 0 0 0 0 0.04 0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}

/* ── Marquee ticker ────────────────────────────────
   Auto-scrolling text strip between sections. Editorial signature. */
.marquee {
  background: var(--bg-deep);
  color: var(--text-on-deep);
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.78rem;
  padding: 18px 0;
  border-top: 1px solid rgba(251, 248, 243, 0.08);
  border-bottom: 1px solid rgba(251, 248, 243, 0.08);
  position: relative;
}

.marquee-track {
  display: inline-block;
  white-space: nowrap;
  animation: marquee-scroll 42s linear infinite;
  /* The HTML duplicates each item once; we translate by -50% so the
     second copy fills the right edge as the first slides off the left,
     producing a seamless infinite loop. */
  will-change: transform;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

.marquee-track > span {
  display: inline-block;
  margin: 0 1.4rem;
  vertical-align: middle;
}

.marquee-dot {
  color: var(--accent-300) !important;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.7rem;
  margin: 0 0.4rem !important;
  vertical-align: middle;
  opacity: 0.65;
}

@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Marquee variant for accent moments (workshop, sale, etc.) */
.marquee-accent {
  background: var(--accent);
  color: var(--bg);
}
.marquee-accent .marquee-dot { color: var(--accent-100) !important; }

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; padding-left: 0; }
}

/* ── Roman numeral section opener ─────────────────
   `I.  CE FACEM` pattern — Roman numeral in italic display
   on the left, section name in tracked uppercase sans on the
   same baseline. With horizontal rules above and below. */
.section-roman {
  display: flex;
  align-items: baseline;
  gap: clamp(1rem, 2vw, 1.5rem);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section-roman-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 3.25rem);
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  min-width: 1.6em;
}

.section-roman-label {
  font-family: var(--sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* On dark sections */
.section-dark .section-roman { border-color: rgba(251, 248, 243, 0.12); }
.section-dark .section-roman-num { color: var(--accent-200); }
.section-dark .section-roman-label { color: var(--text-on-deep-muted); }

/* ── Editorial section head (sits below the Roman opener) ─── */
.section-head-editorial {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 900px) {
  .section-head-editorial {
    grid-template-columns: 1.2fr 1fr;
    gap: clamp(3rem, 5vw, 5rem);
    align-items: end;
  }
}

.section-head-editorial h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0;
}

.section-head-editorial h2 em {
  font-style: italic;
  color: var(--accent);
}

.section-head-editorial p {
  font-family: var(--sans);
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--text-muted);
  font-weight: 300;
  max-width: 32em;
  margin: 0;
}

.section-dark .section-head-editorial h2 { color: var(--text-on-deep); }
.section-dark .section-head-editorial h2 em { color: var(--accent-200); }
.section-dark .section-head-editorial p { color: var(--text-on-deep-muted); }

/* ── Off-grid pull quote ─────────────────────────
   Centerpiece editorial moment. Giant opening "
   floats above-and-left of the body, rotated slightly. */
.pull-quote {
  position: relative;
  padding: clamp(3rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 3rem);
  margin: 0;
}

.pull-quote::before {
  content: '\201C';
  position: absolute;
  top: clamp(-2.5rem, -3vw, -1.5rem);
  left: clamp(-1rem, -1.5vw, -0.5rem);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(7rem, 14vw, 12rem);
  color: var(--accent);
  opacity: 0.22;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  transform: rotate(-4deg);
  transition: transform var(--dur-slow) var(--ease-out),
              opacity var(--dur-slow) var(--ease-out);
}

.pull-quote.visible::before {
  transform: rotate(-2deg);
  opacity: 0.28;
}

.pull-quote p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 1.5rem 0;
  position: relative;
  z-index: 1;
}

.pull-quote cite {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
}

/* ── Animated underline link ─────────────────────
   Underline draws in left-to-right on hover. */
.link-underline {
  position: relative;
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  color: var(--text);
  text-decoration: none;
  padding-bottom: 4px;
  transition: color var(--dur-base) var(--ease);
}

.link-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: right;
  transition: transform var(--dur-base) var(--ease);
}

.link-underline:hover {
  color: var(--accent);
}

.link-underline:hover::after {
  transform: scaleX(0);
  transform-origin: right;
}

.link-underline.reveal::after {
  /* reveal variant: starts hidden, draws in on hover */
  transform: scaleX(0);
  transform-origin: left;
}

.link-underline.reveal:hover::after {
  transform: scaleX(1);
}

/* ── Section dark variant adjustments for editorial ── */
.section-dark.section-soft { background: var(--bg-deep); }

/* ── Bracketed editorial tag ─────────────────────
   Kinfolk pattern: [ Strategie, 2026 ] used as link-styled tags */
.tag-bracket {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px dashed currentColor;
  padding-bottom: 1px;
  display: inline-block;
}

.tag-bracket::before { content: '[ '; }
.tag-bracket::after  { content: ' ]'; }

/* ── Em-dash decorative rule ──────────────────────
   Long horizontal rule with em-dash at center break */
.rule-em {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin: clamp(3rem, 5vw, 4rem) 0;
  font-family: var(--serif);
  color: var(--text-faint);
}
.rule-em::before,
.rule-em::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-strong);
  max-width: 8rem;
}

/* ── Promo strip refresh ─────────────────────────── */
.promo-strip a:hover { letter-spacing: 0.18em; }

/* ── Workshop visibility toggle ───────────────────
   When admin sets workshop_active=false, content-loader.js adds
   `no-workshop` class on body and these rules hide the promo strip,
   the workshop marquee, and the IV. WORKSHOP AI section on the homepage.

   When workshop_page_active=false, the webinar page's main content is
   hidden and `.no-workshop-message` is revealed. */
body.no-workshop .promo-strip,
body.no-workshop .marquee.marquee-accent,
body.no-workshop .home-workshop {
  display: none !important;
}

body.no-workshop-page .web-hero,
body.no-workshop-page .marquee,
body.no-workshop-page .pain-grid,
body.no-workshop-page .solution,
body.no-workshop-page .learn-grid,
body.no-workshop-page .speaker-cards,
body.no-workshop-page .register,
body.no-workshop-page .faq-list,
body.no-workshop-page .final-strip,
body.no-workshop-page .sticky-cta,
body.no-workshop-page section:not(.no-workshop-fallback) {
  display: none !important;
}

.no-workshop-fallback {
  display: none;
  padding: clamp(80px, 12vh, 160px) 0 clamp(60px, 8vh, 120px);
  text-align: center;
}
body.no-workshop-page .no-workshop-fallback {
  display: block;
}

.no-workshop-fallback .ornament {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--accent);
  display: block;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.no-workshop-fallback h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 auto clamp(1.25rem, 2vw, 1.75rem);
  max-width: 16em;
}

.no-workshop-fallback p {
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 30em;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
}

/* Also hide workshop-related links in nav when no upcoming workshop */
body.no-workshop .nav-links a[href="/webinar"],
body.no-workshop .nav-mobile-list a[href="/webinar"] {
  display: none;
}

/* ── Hero photo intentional treatment override ────
   Replace the default "N" watermark with a more refined editorial mark. */
.home-hero-portrait::before {
  /* Already styled in homepage CSS */
}