/*
Theme Name: DeltaLoop Marketing
Theme URI: https://deltaloop.io/
Author: DeltaLoop
Author URI: https://deltaloop.io/
Description: The marketing landing page for DeltaLoop - the AI marketing team for WordPress. Pure HTML/CSS/SVG, zero JS bundle, built to be audited and optimized by DeltaLoop's own SEO Agent.
Version: 2.0.0
Requires at least: 6.6
Tested up to: 6.7
Requires PHP: 8.0
License: Proprietary
License URI: https://deltaloop.io/legal/terms
Text Domain: deltaloop-marketing
Tags: custom-theme, editorial, dark, minimal
*/

/* ============================================================
   Theme-wide utilities, page chrome, keyframes.
   Block-specific styles live in inc/blocks/<slug>/style.css
   and are auto-enqueued via each block.json's `style` key.
   ============================================================ */

/* Oversized display headlines - use for main page titles only */

.display-headline {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--text-heading);
  text-wrap: balance;
}

/* Muted body copy that sits under a headline */

.editorial-subhead {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--on-surface-variant);
  max-width: 42ch;
  text-wrap: pretty;
}

/* Mono stamp - 10px uppercase label, the signature voice */

.mono-stamp {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}

.mono-stamp-accent { color: var(--primary); }

/* Font family pass-through (inherit size/weight/color) */

.font-heading { font-family: var(--font-heading); }

.font-sans { font-family: var(--font-sans); }

.font-display { font-family: var(--font-display); }

.font-mono { font-family: var(--font-mono); }

/* The wordmark - Bricolage is RESERVED for this one element */

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--text-heading);
  font-variation-settings: "opsz" 48;
  display: inline-flex;
  align-items: baseline;
}

.wordmark-accent { color: var(--primary-container); }

/* Semantic text roles - use these in HTML artifacts */

h1,
.h1 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text-heading);
}

h2,
.h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-heading);
}

h3,
.h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  color: var(--text-heading);
}

p,
.body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--on-surface-variant);
}

small,
.caption {
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 1.45;
  color: var(--on-surface-variant);
}

code,
pre,
.code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--primary);
}

/* ═══════════════════════════════════════════════════════════
   Signature component classes - paper, noise, ledger
   ═══════════════════════════════════════════════════════════ */

.ledger-card {
  position: relative;
  background: var(--surface-paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  transition: border-color var(--duration-base) var(--ease-expo),
              background var(--duration-base) var(--ease-expo);
}

.ledger-card::after {
  /* offset hairline shadow - the "printed paper" tell */
  content: "";
  position: absolute;
  left: 8px; right: 8px; bottom: -1px;
  height: 1px;
  background: var(--hairline);
  border-radius: 1px;
  pointer-events: none;
}

.ledger-card:hover { border-color: var(--hairline-strong); }

.onboarding-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--noise-url);
  background-size: 180px 180px;
  opacity: 0.35;
  mix-blend-mode: overlay;
}

.stage-ambient {
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(20, 227, 156, 0.10), transparent 60%),
    linear-gradient(180deg, var(--surface-stage) 0%, var(--surface-canvas) 100%);
}

/* Primary CTA gradient - ONE per screen. Precious. */

.cta-gradient {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-image: linear-gradient(
    115deg,
    #0a9968 0%,  #14e39c 25%, #2dd4bf 45%,
    #7ef7c5 55%, #2dd4bf 70%, #14e39c 85%, #0a9968 100%
  );
  background-size: 220% 220%;
  background-position: 15% 50%;
  color: #00140a;
  font-weight: 600;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.3) inset,
    0 12px 28px -12px rgba(20, 227, 156, 0.55),
    0 0 0 1px rgba(20, 227, 156, 0.4);
  transition:
    transform var(--duration-fast) var(--ease-expo),
    box-shadow var(--duration-base) var(--ease-expo),
    background-position var(--duration-slow) var(--ease-expo);
}

.cta-gradient:hover:not(:disabled) {
  transform: translateY(-1px);
  background-position: 85% 50%;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 18px 40px -14px rgba(20, 227, 156, 0.75),
    0 0 0 1px rgba(20, 227, 156, 0.65),
    0 0 40px -8px rgba(20, 227, 156, 0.45);
}

.cta-gradient:active:not(:disabled) {
  transform: translateY(0) scale(0.985);
}

/* Signal-pulse keyframe used by LiveDot etc. */

@keyframes signal-pulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   DeltaLoop Marketing - extends Signal Loop design system
   All tokens inherited from /colors_and_type.css
   ============================================================ */

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  padding: 0;
  background: var(--surface-canvas);
  color: var(--on-surface);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { overflow-x: hidden; }

/* ─────────────────────────────────────────────────────────
   Page shell
   ───────────────────────────────────────────────────────── */

.marketing-page {
  min-height: 100vh;
  position: relative;
}

.section {
  position: relative;
  padding: 120px 48px;
  max-width: 1440px;
  margin: 0 auto;
}

.section--full-bleed {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.section--dark-band {
  background: var(--surface-stage);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

/* ─────────────────────────────────────────────────────────
   Generated page wrapper (page.php)

   Used for About / Contact / Privacy and every page the content
   pipeline produces. The fixed nav (--nav-height) sits above the
   article, so the first line of content would otherwise underlap
   it; this padding pushes the generator's first section down into
   the clear, and leaves the same breathing room before the footer.
   The scale mirrors .section padding so generated pages sit at the
   same rhythm as hand-authored sections.

   The generated HTML brings its own inner max-width (1200px) and
   per-section backgrounds, so we set no width or background here -
   only vertical clearance.
   ───────────────────────────────────────────────────────── */

.marketing-generated-page {
  padding-top: 120px;
  padding-bottom: 120px;
}

/* Baseline vertical padding for generator-emitted sections.

   page_generator's system prompt instructs the model to set 120 px
   top/bottom on every <section> inline. This CSS is the fallback for
   the rare case where the inline padding is missing entirely - it
   does NOT use !important, so the LLM's inline styles always win when
   present. An earlier version used !important and inadvertently
   capped every section at 96 px (the floor) instead of honouring the
   120 px the generator emits; hence the preview-vs-published rhythm
   discrepancy when sections were shipped live.

   Scoped to ``.marketing-generated-page`` so hand-authored pages
   (homepage, index.php fallback, editorial posts) are untouched - the
   baseline only applies to agent-produced content. */

.marketing-generated-page section {
  padding-top: max(96px, 8vh);
  padding-bottom: max(96px, 8vh);
}

@media (max-width: 640px) {
  .marketing-generated-page section {
    padding-top: 72px;
    padding-bottom: 72px;
  }
}

/* Eyebrow mono stamp - used at the top of every section */

.section-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--outline);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.section-eyebrow::before {
  content: "";
  width: 20px; height: 1px;
  background: var(--primary-container);
  display: inline-block;
}

/* Oversized editorial headline scale */

.editorial-headline {
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.98;
  color: var(--text-heading);
  margin: 0;
  text-wrap: balance;
}

.editorial-headline--hero {
  font-size: clamp(56px, 9vw, 148px);
  line-height: 0.94;
  letter-spacing: -0.045em;
}

.editorial-headline--xl {
  font-size: clamp(44px, 6vw, 104px);
}

.editorial-headline--lg {
  font-size: clamp(36px, 4.2vw, 72px);
}

.editorial-headline .accent { color: var(--primary-container); }

.editorial-headline .muted { color: var(--outline); font-weight: 500; }

.editorial-subhead-lg {
  font-family: var(--font-sans);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.5;
  font-weight: 400;
  color: var(--on-surface-variant);
  max-width: 52ch;
  text-wrap: pretty;
  margin: 0;
}

/* ─────────────────────────────────────────────────────────
   Buttons
   ───────────────────────────────────────────────────────── */

.btn-primary-lg {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--on-primary-container);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-image: linear-gradient(
    115deg,
    #0a9968 0%, #14e39c 25%, #2dd4bf 45%,
    #7ef7c5 55%, #2dd4bf 70%, #14e39c 85%, #0a9968 100%
  );
  background-size: 220% 220%;
  background-position: 15% 50%;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.3) inset,
    0 14px 32px -12px rgba(20,227,156,0.55),
    0 0 0 1px rgba(20,227,156,0.4);
  transition: transform var(--duration-fast) var(--ease-expo),
              box-shadow var(--duration-base) var(--ease-expo),
              background-position var(--duration-slow) var(--ease-expo);
}

.btn-primary-lg:hover {
  transform: translateY(-1px);
  background-position: 85% 50%;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.45) inset,
    0 20px 44px -14px rgba(20,227,156,0.75),
    0 0 0 1px rgba(20,227,156,0.65),
    0 0 44px -8px rgba(20,227,156,0.45);
}

.btn-primary-lg:active { transform: translateY(0) scale(0.985); }

.btn-primary-lg .arrow { transition: transform var(--duration-fast) var(--ease-expo); }

.btn-primary-lg:hover .arrow { transform: translateX(3px); }

.btn-ghost-lg {
  background: none;
  border: 0;
  color: var(--on-surface);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  padding: 14px 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color var(--duration-fast) var(--ease-expo);
}

.btn-ghost-lg:hover { color: var(--primary); }

.btn-ghost-lg .arrow { transition: transform var(--duration-fast) var(--ease-expo); }

.btn-ghost-lg:hover .arrow { transform: translateX(3px); }

@keyframes hero-v3-breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.08); opacity: 0.8; }
}

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

@keyframes hero-v3-underline-show { to { opacity: 1; } }

@keyframes hero-v3-underline-draw { to { stroke-dashoffset: 0; } }

@keyframes hero-v3-scroll-drop {
  0%   { transform: translateY(0); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateY(64px); opacity: 0; }
}

@keyframes hs-float-a {
  0%, 100% { transform: rotate(-1.4deg) translateY(0); }
  50%      { transform: rotate(-1.4deg) translateY(-8px); }
}

@keyframes hs-float-b {
  0%, 100% { transform: rotate(1deg) translate(14px, 0); }
  50%      { transform: rotate(1deg) translate(14px, -6px); }
}

@keyframes hs-caret-blink {
  0%, 50%  { opacity: 1; }
  51%, 100% { opacity: 0; }
}

@keyframes hs-feed-in {
  to { opacity: 1; transform: translateX(0); }
}

@keyframes coreCaret { 50% { opacity: 0; } }

@keyframes coreTick {
  0%   { color: var(--primary); text-shadow: 0 0 12px rgba(20,227,156,0.6); }
  100% { color: var(--text-heading); text-shadow: none; }
}

@keyframes pegPulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50%      { transform: scale(1.6); opacity: 0; }
}

/* ============================================================
   SCROLL REVEAL - primitives + section effects
   ============================================================ */

.reveal {
  opacity: 0;
  transition:
    opacity 900ms cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms),
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms),
    filter 900ms cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms);
  will-change: opacity, transform, filter;
}

.reveal--up { transform: translate3d(0, 32px, 0); }

.reveal--down { transform: translate3d(0, -32px, 0); }

.reveal--right { transform: translate3d(-36px, 0, 0); }

.reveal--left { transform: translate3d(36px, 0, 0); }

.reveal--scale { transform: scale(0.92); }

.reveal--blur { filter: blur(16px); opacity: 0; }

.reveal--tilt { transform: perspective(1200px) rotateX(14deg) translate3d(0, 40px, 0); transform-origin: 50% 100%; }

.reveal--rise { transform: translate3d(0, 60px, 0) scale(0.96); filter: blur(6px); }

.reveal--clip {
  clip-path: inset(100% 0 0 0);
  transform: translate3d(0, 24px, 0);
}

.reveal--mask {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 0%, transparent 0%);
          mask-image: linear-gradient(180deg, #000 0%, #000 0%, transparent 0%);
  -webkit-mask-size: 100% 200%;
          mask-size: 100% 200%;
  -webkit-mask-position: 0 100%;
          mask-position: 0 100%;
  transition:
    opacity 1000ms cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms),
    -webkit-mask-position 1200ms cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms),
            mask-position 1200ms cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: inset(0 0 0 0);
  -webkit-mask-position: 0 0;
          mask-position: 0 0;
}

/* ── Scroll progress bar (top of page) ── */

.scroll-progress {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  height: 2px;
  z-index: 49;
  pointer-events: none;
  background: transparent;
}

.scroll-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--primary-container) 30%,
    var(--primary) 70%,
    transparent 100%);
  box-shadow: 0 0 12px rgba(20,227,156,0.5);
  transition: width 80ms linear;
}

/* Section eyebrow - rule animates in on reveal */

.section-eyebrow.reveal.is-in::before {
  animation: eyebrow-rule 700ms cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms) both;
}

@keyframes eyebrow-rule {
  from { width: 0; }
  to   { width: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
.reveal.is-in,
.scroll-progress-bar {
    transition: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
    clip-path: none !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }
}

/* Kill browser default underlines on every link inside the marketing
   surface. Links that need a visual mark (e.g. faq-contact) set their
   own border-bottom. */

.marketing-page a,
.marketing-body a {
  text-decoration: none;

}

.marketing-page a:hover,
.marketing-page a:focus-visible {
  text-decoration: none;
}

/* Inline content links - anything <a> inside the_content() that isn't
   styled by a more specific block/component rule. Without this, links
   the SEO agent injects (fix_links) and editorial body links fall
   through to the browser default, which renders blue→purple on visited
   and is visually broken on a dark theme. Brand mint + subtle underline
   keeps them recognisably link-shaped without screaming. */

.marketing-generated-page a,
.marketing-generated-page a:visited {
  color: var(--primary-container);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(20, 227, 156, 0.45);
  transition: color var(--duration-fast) var(--ease-expo),
              text-decoration-color var(--duration-fast) var(--ease-expo);
}

.marketing-generated-page a:hover,
.marketing-generated-page a:focus-visible {
  color: var(--primary);
  text-decoration-color: var(--primary);
}

/* ────────────────── TABLET (< 1024px) ────────────────── */

@media (max-width: 1024px) {
  .section { padding: 84px 32px; }
  .marketing-generated-page { padding-top: 88px; padding-bottom: 88px; }
}

/* ────────────────── PHONE (< 640px) ────────────────── */

@media (max-width: 640px) {
  /* Nav becomes hamburger */
  /* Section padding tightened */
  .section { padding: 72px 20px; }
  .marketing-generated-page { padding-top: 76px; padding-bottom: 76px; }
  .editorial-headline--xl { font-size: clamp(32px, 9vw, 48px); }
  .editorial-headline--lg { font-size: clamp(28px, 7vw, 42px); }
}

/* Very small phones - tiny extra tighten */

@media (max-width: 380px) {
  .section { padding: 64px 16px; }
  .marketing-generated-page { padding-top: 68px; padding-bottom: 68px; }
}

/* Global: prevent horizontal scroll, smooth anchor nav, kill
   iOS text-size auto-inflation, remove the gray tap flash. */

html {
  scroll-behavior: smooth;
  /* Anchor-click lands past the fixed nav + 8px visual breathing room. */
  scroll-padding-top: var(--content-top-offset);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body.marketing-body,
.marketing-page {
  overflow-x: hidden;
  max-width: 100vw;
}

.marketing-page *,
.marketing-body * {
  -webkit-tap-highlight-color: transparent;
}

/* Respect user's motion preference - pause the expensive stuff. */

@media (prefers-reduced-motion: reduce) {
  svg animate,
svg animateMotion,
svg animateTransform {
    animation-play-state: paused;
  }
  html { scroll-behavior: auto; }
}

/* ────────────────── PHONE overrides (refined) ────────────────── */

@media (max-width: 640px) {
  /* Nav CTA: tappable size (40px meets Android, 44px preferred) */
  /* CTA buttons keep 44+px touch area even with mobile font sizes */
  .btn-primary-lg {
    min-height: 48px;
    height: auto;
    padding: 12px 22px;
  }
  .btn-ghost-lg {
    min-height: 44px;
    padding: 12px 0;
  }
}