/* mevaapp — theme tokens and bespoke page styles.
   scrollcraft.css is the mechanism and the taste floor; this file only
   rebrands (six colours, two faces) and draws page-specific markup that the
   engine does not own. Nothing here restyles .sc-stage, .sc-copy or any
   [data-sc-*] selector. */

:root {
  /* Light, airy ground: warm paper, not clinical white. */
  --sc-canvas:      #f7f0e4;
  --sc-surface:     #efe2cb;
  --sc-ink:         #221a10;
  --sc-ink-soft:    #6e6152;
  /* The brand's real logo colour is a pale peach chip, which reads too low
     -contrast as body-copy text on this light ground. Same hue, pulled
     darker and more saturated into a terracotta so it clears 4.5:1 as text;
     the literal logo chip below keeps the true pale peach fill regardless. */
  --sc-accent:      #bd5f34;
  --sc-accent-ink:  #fbf3e6;
  --sc-font-display: "Fraunces", ui-serif, Georgia, serif;
  --sc-font-text:    "Archivo", system-ui, -apple-system, sans-serif;

  --mv-logo-bg:  #f2ab7c;
  --mv-logo-ink: #1c150e;

  --mv-ground-ritim: #f2e4c9;
  --mv-ground-yol:   #eae6d3;
}

/* -------------------------------------------------------- the real mark --
   Recreated as real markup (taste.md: "text baked into a generated image" is
   banned; real markup is selectable, translatable and sharp), not an <img>.
   A rounded peach chip with the bold lowercase "meva" wordmark, exactly as
   the brand's own logo. Reused at three sizes: nav, hero, colophon. */
.mv-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--mv-logo-bg);
  color: var(--mv-logo-ink);
  border-radius: var(--sc-r-md);
  font-family: var(--sc-font-text);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  box-shadow: var(--sc-e1);
  flex: none;
}
.mv-logo--sm { width: 2rem; height: 2rem; border-radius: var(--sc-r-sm); font-size: 0.85rem; }
.mv-logo--md { width: 2.75rem; height: 2.75rem; border-radius: var(--sc-r-md); font-size: 1.05rem; }
.mv-logo--lg { width: clamp(3.25rem, 6vw, 4.5rem); height: clamp(3.25rem, 6vw, 4.5rem); font-size: clamp(1.1rem, 2vw, 1.5rem); }

/* ---------------------------------------------------------------- header -- */
/* A real, persistent top header (site-wide: home + both product pages),
   not the minimal editorial folio this build started with — the client
   asked directly for Products / About tabs, so a conventional header wins
   over the grammar's own "no fixed bar" preference here. */
:root { --mv-header-h: 4.5rem; }
.mv-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--sc-z-chrome);
  height: var(--mv-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc-4);
  padding-inline: var(--sc-gutter);
  background: color-mix(in oklab, var(--sc-canvas) 86%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sc-hairline);
}
.mv-header__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--sc-ink);
  flex: none;
}
.mv-header__nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-inline-end: auto;
  padding-inline-start: clamp(1rem, 4vw, 3rem);
}
.mv-header__nav a {
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-sm);
  font-weight: 500;
  letter-spacing: var(--sc-track-normal);
  color: var(--sc-ink-soft);
  text-decoration: none;
  padding-block: 0.3em;
  border-bottom: 1px solid transparent;
  transition: color var(--sc-d-base) var(--sc-ease-out), border-color var(--sc-d-base) var(--sc-ease-out);
}
.mv-header__nav a:hover { color: var(--sc-ink); border-color: var(--sc-hairline-strong); }
@media (max-width: 560px) {
  .mv-header__nav { padding-inline-start: clamp(0.75rem, 4vw, 1.5rem); gap: 1rem; }
}

/* ---------------------------------------------------------- lang toggle -- */
.mv-lang {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  background: color-mix(in oklab, var(--sc-surface) 82%, transparent);
  border: 1px solid var(--sc-hairline);
  border-radius: var(--sc-r-pill);
  padding: 0.4em 0.8em;
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  color: var(--sc-ink-soft);
  cursor: pointer;
  flex: none;
}
.mv-lang:hover { color: var(--sc-ink); border-color: var(--sc-hairline-strong); }
.mv-lang:active { transform: scale(0.97); }
.mv-lang__sep { opacity: 0.5; }
.mv-lang [data-lang-option] { opacity: 0.5; transition: opacity var(--sc-d-base) var(--sc-ease-out); }
.mv-lang [data-lang-option].is-active { opacity: 1; color: var(--sc-accent); }

.mv-detail-hero { padding-top: clamp(7rem, 20vw, 11rem); padding-bottom: 0; }
.mv-detail-hero__inner { max-width: 44rem; }
.mv-detail-hero .mv-eyebrow { display: flex; align-items: center; gap: var(--sc-2); }
.mv-detail-hero .sc-display--xl { text-align: left; }

/* ------------------------------------------------------------ act one --- */
.mv-title { padding-top: clamp(6rem, 18vw, 10rem); position: relative; overflow: clip; }
.mv-title__inner { max-width: 46rem; position: relative; z-index: 1; }
.mv-eyebrow { color: var(--sc-accent); margin-bottom: var(--sc-4); }
/* The eyebrow labels the heading right under it; the stack's own
   section-boundary spacing (--sc-7 above h1/h2/h3) would otherwise push
   them apart. */
.sc-stack > .mv-eyebrow + :is(h1, h2, h3) { margin-top: 0; }
.mv-title .sc-display--xl { text-align: left; text-wrap: balance; }
.mv-title__lede {
  margin-top: var(--sc-6);
  font-size: var(--sc-t-lg);
  color: var(--sc-ink-soft);
}

.mv-brandmark {
  display: flex;
  align-items: center;
  gap: var(--sc-3);
  margin-bottom: var(--sc-7);
}
.mv-brandmark__text {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
}
.mv-brandmark__name {
  font-family: var(--sc-font-text);
  font-weight: 600;
  font-size: var(--sc-t-lg);
  color: var(--sc-ink);
  letter-spacing: var(--sc-track-snug);
}
.mv-brandmark__desc {
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-ink-soft);
}

/* Ambient, always-moving canvas layer behind the hero copy. Not a scroll
   device: a continuous real-time loop (site.js), since there is no source
   footage to encode into a scrub clip. Depth via three planes at different
   drift speeds and opacities, per hero-depth.md's layering principle. */
.mv-title__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.55;
}
@media (max-width: 640px) { .mv-title__canvas { opacity: 0.4; } }

/* -------------------------------------------------------------- about --- */
.mv-about__inner { max-width: 42rem; }
.mv-about .sc-body { margin-top: var(--sc-4); font-size: var(--sc-t-lg); color: var(--sc-ink-soft); }

/* ---------------------------------------------------------- products --- */
/* Each product is a button: the whole block is one link, and clicking it
   opens that product's own page. Two distinct rows, not a matching-card
   grid — different figures, different stats, alternating anchor. */
.mv-products { display: flex; flex-direction: column; gap: var(--sc-6); margin-top: var(--sc-8); }
.mv-product {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border-radius: var(--sc-r-lg);
  text-decoration: none;
  color: var(--sc-ink);
  box-shadow: var(--sc-edge), var(--sc-e1);
  transition: transform var(--sc-d-base) var(--sc-ease-out), box-shadow var(--sc-d-base) var(--sc-ease-out);
}
.mv-product--ritim { background: var(--mv-ground-ritim); }
.mv-product--yol { background: var(--mv-ground-yol); }
@media (hover: hover) and (pointer: fine) {
  .mv-product:hover { transform: translateY(-3px); box-shadow: var(--sc-edge), var(--sc-e2); }
}
.mv-product:active { transform: scale(0.99); }
.mv-product__art { width: 100%; height: auto; max-width: none; }
.mv-product__body h3 {
  margin: 0 0 var(--sc-2);
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-2xl);
}
.mv-product__body p { margin: 0; color: var(--sc-ink-soft); max-width: 32ch; }
.mv-product__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--sc-accent);
  color: var(--sc-accent-ink);
  flex: none;
  transition: transform var(--sc-d-base) var(--sc-ease-out);
}
.mv-product:hover .mv-product__arrow { transform: translateX(3px); }
@media (max-width: 720px) {
  .mv-product { grid-template-columns: 1fr; text-align: left; }
  .mv-product__arrow { display: none; }
}

/* ------------------------------------------------------------ chapters -- */
/* Reused on each product's own page (ritim.html, yol-arkadasim.html). */
.mv-chapter--ritim { background: var(--mv-ground-ritim); }
.mv-chapter--yol   { background: var(--mv-ground-yol); }

.mv-chapter__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.mv-chapter__grid--reverse { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr); }
.mv-chapter__grid--reverse > .mv-figure { order: -1; }

.mv-chapter h2 { text-wrap: balance; }
.mv-chapter .sc-body { margin-top: var(--sc-4); max-width: 34rem; }

.mv-stat {
  margin-top: var(--sc-6);
  display: flex;
  align-items: baseline;
  gap: 0.35em;
  flex-wrap: wrap;
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-2xl);
  color: var(--sc-ink);
}
.mv-stat__slash { font-size: var(--sc-t-lg); color: var(--sc-ink-soft); }
.mv-stat__label {
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-sm);
  letter-spacing: var(--sc-track-normal);
  color: var(--sc-ink-soft);
  max-width: 16rem;
  line-height: var(--sc-leading-tight);
}

.mv-facts { list-style: none; margin: var(--sc-8) 0 0; padding: 0; max-width: 34rem; }
.mv-facts li {
  padding-block: var(--sc-4);
  border-top: 1px solid var(--sc-hairline);
}
.mv-facts li:last-child { border-bottom: 1px solid var(--sc-hairline); }
.mv-facts h3 {
  margin: 0 0 var(--sc-2);
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-base);
  font-weight: 600;
  color: var(--sc-ink);
}
.mv-facts p { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }

/* -------------------------------------------------------------- figure -- */
.mv-figure { margin: 0; }
.mv-figure__art { width: 100%; height: auto; max-width: none; }
.mv-figure figcaption {
  margin-top: var(--sc-3);
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-normal);
  color: var(--sc-ink-soft);
  max-width: 26rem;
}

.mv-waveform__bars rect { fill: var(--sc-accent); transform-box: fill-box; transform-origin: center; }
.mv-waveform__bars rect:nth-child(3n+1) { fill: color-mix(in oklab, var(--sc-accent) 72%, var(--sc-ink)); }
.mv-waveform__bars rect:nth-child(3n+2) { fill: color-mix(in oklab, var(--sc-accent) 88%, transparent); }

.mv-figure__parallax { will-change: transform; }
.mv-route__line { stroke: var(--sc-accent); }
.mv-route__poi { fill: var(--sc-accent-ink); stroke: var(--sc-accent); stroke-width: 3; }

/* A quiet idle life in the two product figures, independent of scroll, so
   neither illustration reads as a still frame. Amplitude only (never
   position), and it stops entirely under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .mv-waveform__bars rect { animation: mvBar 2.6s var(--sc-ease-in-out) infinite; }
  .mv-waveform__bars rect:nth-child(2n) { animation-duration: 3.1s; animation-delay: -0.6s; }
  .mv-waveform__bars rect:nth-child(3n) { animation-duration: 2.2s; animation-delay: -1.3s; }
  .mv-waveform__bars rect:nth-child(4n) { animation-duration: 3.6s; animation-delay: -0.2s; }
  @keyframes mvBar { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.72); } }

  .mv-route__line { stroke-dasharray: 6 14; animation: mvDash 5s linear infinite; }
  @keyframes mvDash { to { stroke-dashoffset: -80; } }
}

/* ------------------------------------------------------------- act four -- */
.mv-peak { background: var(--sc-canvas); }
.mv-peak__stage {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-inline: var(--sc-gutter);
  text-align: center;
}
.mv-morph {
  width: min(64rem, 92vw);
  height: auto;
  max-width: none;
}
.mv-morph path { stroke: var(--sc-accent); }
.mv-peak__copy { max-width: 40rem; }
.mv-peak__copy .sc-body { margin-top: var(--sc-4); color: var(--sc-ink-soft); }

/* ------------------------------------------------------------- act five -- */
/* A flow section directly after a pinned act takes reduced top padding: the
   pinned stage already needs a full viewport-height to slide off, so full
   section padding on top of that reads as dead scroll (devices.md §8). */
.mv-close { padding-top: var(--sc-6); padding-bottom: clamp(6rem, 16vw, 10rem); }
.mv-close .sc-wrap { max-width: 40rem; }
.mv-close__mark {
  display: inline-flex;
  align-items: center;
  gap: var(--sc-3);
  text-decoration: none;
}
.mv-close__mark-text {
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-sm);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-ink);
  border-bottom: 1px solid var(--sc-hairline-strong);
  padding-bottom: 0.2em;
  transition: color var(--sc-d-base) var(--sc-ease-out), border-color var(--sc-d-base) var(--sc-ease-out);
}
.mv-close__mark:hover .mv-close__mark-text { color: var(--sc-accent); border-color: var(--sc-accent); }
.mv-close__sentence { margin-top: var(--sc-6); font-size: var(--sc-t-lg); }
.mv-close__sentence a {
  color: var(--sc-ink);
  text-decoration-color: var(--sc-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
.mv-close__sentence a:hover { color: var(--sc-accent); }
.mv-close__foot {
  margin-top: var(--sc-9);
  color: var(--sc-ink-soft);
}

/* -------------------------------------------------------------- motion -- */
@media (prefers-reduced-motion: no-preference) {
  .mv-lang { transition: color var(--sc-d-base) var(--sc-ease-out), border-color var(--sc-d-base) var(--sc-ease-out), transform var(--sc-d-fast) var(--sc-ease-out); }
}

/* ---------------------------------------------------------- responsive -- */
@media (max-width: 860px) {
  .mv-chapter__grid, .mv-chapter__grid--reverse {
    grid-template-columns: 1fr;
  }
  .mv-chapter__grid--reverse > .mv-figure { order: 0; }
  .mv-figure { margin-bottom: var(--sc-6); }
}

@media (max-width: 560px) {
  .mv-lang { padding: 0.4em 0.7em; }
  .mv-stat { font-size: var(--sc-t-xl); }
}