/* Linary v2 — warm scene-based redesign */

@font-face {
  font-family: 'Kollektif';
  src: url('fonts/Kollektif.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Kollektif';
  src: url('fonts/Kollektif-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Kollektif';
  src: url('fonts/Kollektif-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'CrimsonText';
  src: url('fonts/CrimsonText-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'CrimsonText';
  src: url('fonts/CrimsonText-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  /* Linary warm — soft theme palette (matches app) */
  --cream:        #FAF8F5;
  --cream-2:      #F5F1E8;
  --peach:        #EDE5D4;
  --peach-deep:   #E5C4B0;
  --clay:         #C8956D;
  --clay-deep:    #B5825C;
  --terra:        #8E6948;
  --bark:         #EDE5D4;
  --ink:          #4A3728;
  --soft:         #6B6058;
  --line:         rgba(74, 55, 40, 0.08);
  --line-strong:  rgba(74, 55, 40, 0.16);
  --shadow-sm:    0 6px 20px rgba(62, 42, 28, 0.06);
  --shadow-md:    0 18px 50px rgba(62, 42, 28, 0.12);
  --shadow-lg:    0 40px 90px rgba(62, 42, 28, 0.20);
}

html[data-theme="sage"] {
  --cream: #F4F6EE; --cream-2: #E7EDDD; --peach: #D9E5C7;
  --peach-deep: #B7CC9A; --clay: #87A96B; --clay-deep: #6F925B;
  --terra: #4F6B3D; --bark: #29381F; --ink: #1B2614; --soft: #5B6B4D;
  --line: rgba(27, 38, 20, 0.10); --line-strong: rgba(27, 38, 20, 0.20);
}
html[data-theme="lavender"] {
  --cream: #F7F4FA; --cream-2: #ECE5F2; --peach: #DCCCE6;
  --peach-deep: #C0AAD2; --clay: #9D8DB3; --clay-deep: #7E6E94;
  --terra: #574870; --bark: #2E2440; --ink: #1F1730; --soft: #6B5F7C;
  --line: rgba(31, 23, 48, 0.10); --line-strong: rgba(31, 23, 48, 0.20);
}
html[data-theme="ocean"] {
  --cream: #F0F6FA; --cream-2: #DDE9F0; --peach: #C3DCE8;
  --peach-deep: #95BAD0; --clay: #5B8FA8; --clay-deep: #406F87;
  --terra: #2A5165; --bark: #16323F; --ink: #0E2230; --soft: #506B7A;
  --line: rgba(14, 34, 48, 0.10); --line-strong: rgba(14, 34, 48, 0.20);
}
html[data-theme="bloom"] {
  --cream: #FCF1EE; --cream-2: #F8DFDA; --peach: #F1C2BD;
  --peach-deep: #DD9A95; --clay: #C97570; --clay-deep: #A85650;
  --terra: #7C3B36; --bark: #401D1B; --ink: #2B100E; --soft: #7A5552;
  --line: rgba(43, 16, 14, 0.10); --line-strong: rgba(43, 16, 14, 0.20);
}
html[data-theme="stone"] {
  --cream: #F4F2EC; --cream-2: #E5E1D6; --peach: #D6CFBF;
  --peach-deep: #B8B1A0; --clay: #8C8780; --clay-deep: #6B6760;
  --terra: #4D4A45; --bark: #2A2825; --ink: #1A1816; --soft: #6A645C;
  --line: rgba(26, 24, 22, 0.10); --line-strong: rgba(26, 24, 22, 0.20);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Kollektif', system-ui, sans-serif;
  font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 700; letter-spacing: -0.025em; }
.serif { font-family: 'CrimsonText', Georgia, serif !important; font-weight: 400; letter-spacing: -0.005em; }

a { color: inherit; }

.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 720px) { .container { padding: 0 22px; } }

/* ── Scene = full-bleed colored block w/ rounded corners on inner panels ── */
.scene {
  position: relative;
  padding: clamp(80px, 11vw, 160px) 0;
  overflow: hidden;
}
/* All scenes use cream tones from the app; tan is reserved for accents only */
.scene--cream  { background: var(--cream); color: var(--ink); }
.scene--cream2 { background: var(--cream-2); color: var(--ink); }
.scene--peach  { background: var(--peach); color: var(--ink); }
.scene--bark   { background: var(--cream); color: var(--ink); }
.scene--clay   { background: var(--clay); color: #fff; }
.scene--clay h1, .scene--clay h2, .scene--clay h3 { color: #fff; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; height: 56px; padding: 0 28px;
  border-radius: 999px;
  font-family: 'Kollektif', sans-serif;
  font-weight: 700; font-size: 16px; letter-spacing: 0.005em;
  text-decoration: none; cursor: pointer; border: none;
  transition: transform 0.25s cubic-bezier(.2,.7,.2,1), background 0.2s ease, color 0.2s ease, box-shadow 0.25s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary  { background: var(--ink); color: var(--cream); }
.btn-primary:hover { background: var(--bark); box-shadow: var(--shadow-md); }
.btn-clay     { background: var(--clay); color: #fff; }
.btn-clay:hover { background: var(--clay-deep); box-shadow: var(--shadow-md); }
.btn-cream    { background: var(--cream); color: var(--ink); }
.btn-cream:hover { box-shadow: var(--shadow-md); }
.btn-ghost    { background: transparent; color: var(--ink); border: 1.5px solid var(--line-strong); }
.btn-ghost:hover { background: rgba(0,0,0,0.04); border-color: var(--ink); }
.btn-on-clay  { background: #fff; color: var(--clay-deep); }
.btn-on-bark  { background: var(--cream); color: var(--ink); }
.btn-sm       { height: 42px; padding: 0 18px; font-size: 14px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: currentColor; opacity: 0.7;
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; opacity: 0.6; }

.card-soft {
  background: var(--cream);
  border-radius: 32px;
  box-shadow: var(--shadow-sm);
}

/* ── Headlines ── */
.h-display {
  font-size: clamp(48px, 8vw, 116px);
  line-height: 0.96;
  letter-spacing: -0.04em;
  font-weight: 700;
}
.h-section {
  font-size: clamp(40px, 5.5vw, 78px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.lede {
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
  font-weight: 400;
  color: currentColor;
  opacity: 0.78;
}

/* ── Reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 1s cubic-bezier(0.2,0.7,0.2,1), transform 1s cubic-bezier(0.2,0.7,0.2,1);
  transition-delay: var(--rev-delay, 0s);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-scale { transform: scale(0.94); }
.reveal-scale.in { transform: scale(1); }

/* ── Floating blob layer ── */
.blob-field {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
}
.blob-field > svg { position: absolute; }
.scene > .container { position: relative; z-index: 1; }

@keyframes drift1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(20px, -28px) rotate(8deg); }
}
@keyframes drift2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50%      { transform: translate(-24px, 22px) rotate(-6deg); }
}
@keyframes drift3 {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  50%      { transform: translate(14px, 18px) rotate(4deg) scale(1.04); }
}
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
@keyframes float1 {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

.drift-a { animation: drift1 18s ease-in-out infinite; }
.drift-b { animation: drift2 22s ease-in-out infinite; }
.drift-c { animation: drift3 16s ease-in-out infinite; }
.breathe { animation: breathe 7s ease-in-out infinite; transform-origin: center; }
.float1  { animation: float1 6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .drift-a, .drift-b, .drift-c, .breathe, .float1 { animation: none !important; }
}

/* ── Misc ── */
::selection { background: var(--clay); color: #fff; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--peach-deep); border-radius: 8px; border: 2px solid var(--cream); }

/* Marquee for "trusted by" */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee {
  display: flex; gap: 64px; width: max-content;
  animation: marquee 38s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .marquee { animation: none; } }