/* ============================================================
   SOPHISTIPLANTS — EDITORIAL ART-DIRECTION LAYER
   Cinematic, magazine-grade UI built on top of the existing
   design tokens (main.css). Loaded AFTER main.css so it can
   override where the new visual language requires it.
   ============================================================ */

/* ── Reusable editorial primitives ─────────────────────────── */

/* Micro metadata label — the tiny intentional text that makes
   the site feel art-directed ("PLANT / 001", "EST. 2026"). */
.ed-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--caption);
}
.ed-label--light { color: rgba(247,245,240,0.62); }

/* Eyebrow with a hairline before the text */
.ed-eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 500; letter-spacing: 3px;
  text-transform: uppercase; color: rgba(247,245,240,0.7);
}
.ed-eyebrow::before {
  content: ''; width: 42px; height: 1px;
  background: currentColor; opacity: 0.5;
}

/* Oversized editorial index number for section openers ("01") */
.ed-index {
  font-family: var(--font-display);
  font-weight: 300; font-size: clamp(48px, 7vw, 112px);
  line-height: 0.9; color: var(--sage);
  letter-spacing: -0.02em;
}

/* Vertical running text (left/right rails) */
.ed-vtext {
  writing-mode: vertical-rl;
  font-size: 11px; font-weight: 500; letter-spacing: 3px;
  text-transform: uppercase; color: rgba(247,245,240,0.5);
  user-select: none;
}

/* Text + arrow link — the editorial replacement for chunky buttons */
.ed-link {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: inherit;
  padding-bottom: 4px; position: relative;
}
.ed-link::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(1); transform-origin: right;
  transition: transform 0.55s cubic-bezier(0.25,1,0.5,1);
}
.ed-link:hover::after { transform: scaleX(0); transform-origin: left; }
.ed-link .ed-arrow {
  transition: transform 0.55s cubic-bezier(0.25,1,0.5,1);
}
.ed-link:hover .ed-arrow { transform: translateX(6px); }

/* Thin bordered pill CTA (used sparingly) */
.ed-cta {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 15px 30px; border-radius: 999px;
  border: 1px solid rgba(247,245,240,0.35);
  font-size: 12.5px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--white);
  background: transparent;
  transition: background 0.5s cubic-bezier(0.25,1,0.5,1),
              color 0.5s cubic-bezier(0.25,1,0.5,1),
              border-color 0.5s;
  overflow: hidden; position: relative;
}
.ed-cta .ed-arrow { transition: transform 0.55s cubic-bezier(0.25,1,0.5,1); }
.ed-cta:hover { background: var(--white); color: var(--forest); border-color: var(--white); }
.ed-cta:hover .ed-arrow { transform: translateX(6px); }
.ed-cta--solid { background: var(--white); color: var(--forest); border-color: var(--white); }
.ed-cta--solid:hover { background: transparent; color: var(--white); border-color: rgba(247,245,240,0.6); }

/* ============================================================
   HOMEPAGE — CINEMATIC HERO
   ============================================================ */
.ed-hero {
  position: relative;
  min-height: 100svh;
  background: var(--forest-dark);
  overflow: hidden;
  display: flex; flex-direction: column;
  isolation: isolate;
}

/* Full-bleed botanical media — set via --hero-img so it's trivial to swap.
   A deep gradient sits beneath so the hero is never blank/broken. */
.ed-hero-media {
  position: absolute; inset: 0; z-index: 0;
  background-color: var(--forest-dark);
  background-image:
    radial-gradient(ellipse 90% 70% at 78% 30%, rgba(34,160,88,0.16), transparent 60%),
    var(--hero-img, none);
  background-size: cover, cover;
  background-position: center, 70% center;
  background-repeat: no-repeat;
  transform: scale(1.06);
  will-change: transform;
  animation: ed-kenburns 24s ease-out forwards;
}
@keyframes ed-kenburns {
  from { transform: scale(1.14); }
  to   { transform: scale(1.06); }
}

/* Scrims for legibility — dark on the left where text lives, and along
   the bottom. Kept as separate layer for clean parallax on media. */
.ed-hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6,14,4,0.92) 0%, rgba(6,14,4,0.72) 34%, rgba(6,14,4,0.28) 62%, rgba(6,14,4,0.08) 100%),
    linear-gradient(0deg, rgba(6,14,4,0.85) 0%, transparent 34%);
}
/* Subtle film grain on top of everything */
.ed-hero-grain {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  opacity: 0.5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

.ed-hero-inner {
  position: relative; z-index: 3;
  flex: 1;
  width: 100%; max-width: 1440px;
  margin: 0 auto;
  padding: calc(var(--nav-height) + 4vh) clamp(24px, 6vw, 96px) 6vh;
  display: flex; flex-direction: column; justify-content: center;
}

/* Corner + rail metadata */
.ed-hero-meta { position: absolute; z-index: 4; }
.ed-hero-meta.tr { top: calc(var(--nav-height) + 26px); right: clamp(24px, 6vw, 96px); text-align: right; }
.ed-hero-meta.bl { bottom: 5vh; left: clamp(24px, 6vw, 96px); }
.ed-hero-meta.rail-l {
  left: 22px; top: 50%; transform: translateY(-50%);
}

/* The massive wordmark */
.ed-hero-eyebrow { margin-bottom: clamp(20px, 3vw, 34px); }
.ed-wordmark {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(64px, 15.5vw, 250px);
  line-height: 0.86;
  letter-spacing: -0.035em;
  color: var(--white);
  margin: 0;
}
.ed-wordmark .ln { display: block; overflow: hidden; }
.ed-wordmark .ln > span { display: block; }
.ed-wordmark em {
  font-style: italic;
  color: var(--sage-light);
  font-weight: 300;
}
.ed-tagline {
  font-family: var(--font-display);
  font-style: italic; font-weight: 300;
  font-size: clamp(20px, 2.6vw, 34px);
  color: rgba(247,245,240,0.86);
  margin-top: clamp(22px, 3vw, 40px);
  max-width: 30ch;
}

.ed-hero-actions {
  display: flex; align-items: center; gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(34px, 5vw, 60px);
  flex-wrap: wrap;
  color: var(--white);
}

/* Editorial stat metadata row along the bottom */
.ed-hero-stats {
  display: flex; gap: clamp(28px, 5vw, 68px);
  margin-top: clamp(40px, 6vw, 72px);
}
.ed-hero-stat-num {
  font-family: var(--font-display);
  font-weight: 300; font-size: clamp(30px, 4vw, 52px);
  line-height: 1; color: var(--white); letter-spacing: -0.01em;
}
.ed-hero-stat-label {
  font-size: 10.5px; font-weight: 500; letter-spacing: 2px;
  text-transform: uppercase; color: rgba(247,245,240,0.55);
  margin-top: 10px;
}

/* ── Load-in reveal (staggered) ────────────────────────────── */
.ed-rise { transform: translateY(115%); }
/* Resting target is translateY(0): the keyframe animates INTO it, but if the
   animation never runs the wordmark still ends visible (never stuck hidden). */
.ed-hero .ed-in .ed-rise,
.ed-hero.ed-in .ed-rise {
  transform: translateY(0);
  animation: ed-rise-up 1s cubic-bezier(0.25,1,0.5,1) both;
}
@keyframes ed-rise-up { from { transform: translateY(115%); } to { transform: translateY(0); } }

.ed-fade {
  opacity: 0; transform: translateY(16px);
  transition: opacity 1s cubic-bezier(0.25,1,0.5,1),
              transform 1s cubic-bezier(0.25,1,0.5,1);
}
.ed-hero.ed-in .ed-fade { opacity: 1; transform: translateY(0); }
.ed-d1 { transition-delay: 0.35s; animation-delay: 0.15s; }
.ed-d2 { transition-delay: 0.5s;  animation-delay: 0.28s; }
.ed-d3 { transition-delay: 0.65s; animation-delay: 0.4s; }
.ed-d4 { transition-delay: 0.8s;  animation-delay: 0.5s; }
.ed-d5 { transition-delay: 0.95s; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ed-hero-meta.rail-l { display: none; }
  .ed-hero-scrim {
    background:
      linear-gradient(90deg, rgba(6,14,4,0.9) 0%, rgba(6,14,4,0.6) 55%, rgba(6,14,4,0.35) 100%),
      linear-gradient(0deg, rgba(6,14,4,0.9) 0%, transparent 40%);
  }
}
@media (max-width: 640px) {
  .ed-hero-inner { padding: calc(var(--nav-height) + 6vh) 22px 12vh; }
  .ed-wordmark { font-size: clamp(58px, 20vw, 120px); }
  .ed-hero-stats { gap: 22px; flex-wrap: wrap; }
  .ed-hero-meta.tr { top: calc(var(--nav-height) + 14px); }
  .ed-hero-actions { gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .ed-hero-media { animation: none; transform: scale(1.02); }
  .ed-rise { transform: none; }
  .ed-hero .ed-in .ed-rise, .ed-hero.ed-in .ed-rise { animation: none; }
  .ed-fade { opacity: 1; transform: none; transition: none; }
}