/* ==========================================================================
   Folio — warm editorial theme
   Loaded only on /folio/. Overrides the site-wide indigo/gradient identity
   with Folio's own visual language: cream paper, terracotta ink, Playfair
   Display headings, DM Sans body. Tokens from folio-f14-design-report §2.
   ========================================================================== */

/* ---------- Token overrides ---------- */

:root {
  --color-bg-primary: #faf8f3;
  --color-bg-elevated: #ffffff;
  --color-bg-subtle: #f0ead8;
  --color-border: #e5ddd4;
  --color-text-primary: #2c2218;
  --color-text-secondary: #8c7b6e;
  --color-accent: #c2714e;
  --color-accent-hover: #a85f3f;
  --color-accent-light: #f7ede6;
  --color-accent-secondary: #5e8c61;
  --color-gradient-start: #c2714e;
  --color-gradient-end: #a85f3f;
  --color-success: #5e8c61;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  --shadow-sm: 0 1px 3px rgba(44, 34, 24, 0.06);
  --shadow-md: 0 4px 12px rgba(44, 34, 24, 0.08);
  --shadow-lg: 0 8px 24px rgba(44, 34, 24, 0.12);
}

/* ---------- Page atmosphere ---------- */

body {
  background:
    radial-gradient(1200px 600px at 80% -10%, #fff6ec 0%, transparent 60%),
    var(--color-bg-primary);
}

/* ---------- Serif headings ---------- */

h1, h2, h3 {
  font-family: var(--font-serif);
}

.product-hero__brand {
  font-family: var(--font-serif);
}

/* ---------- Navigation — warm frosted glass ---------- */

.nav {
  background-color: rgba(250, 248, 243, 0.85);
}

/* ---------- Hero — orchestrated load entrance ---------- */

@media (prefers-reduced-motion: no-preference) {
  .product-hero__card    { animation: folio-card-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .product-hero__brand   { animation: folio-rise 0.6s ease both 0.18s; }
  .product-hero__title   { animation: folio-rise 0.7s ease both 0.30s; }
  .product-hero__subtitle{ animation: folio-rise 0.7s ease both 0.44s; }
  .product-hero__actions { animation: folio-rise 0.7s ease both 0.58s; }
  .product-hero__platforms { animation: folio-rise 0.7s ease both 0.70s; }
  .product-hero__visual  { animation: folio-visual-in 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both 0.38s; }
}

@keyframes folio-card-in {
  from { opacity: 0; transform: translateY(24px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

@keyframes folio-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@keyframes folio-visual-in {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ---------- Hero — warm cream card ---------- */

.product-hero__card {
  background:
    radial-gradient(ellipse 70% 60% at 100% 0%, rgba(255, 243, 224, 0.8) 0%, transparent 60%),
    radial-gradient(ellipse 60% 55% at 0% 100%, rgba(247, 237, 230, 0.8) 0%, transparent 60%),
    linear-gradient(135deg, #faf6ef 0%, #f7ede6 50%, #faf6ef 100%);
  border-color: rgba(229, 221, 212, 0.5);
  box-shadow:
    0 1px 2px rgba(44, 34, 24, 0.04),
    0 12px 40px -16px rgba(194, 113, 78, 0.12),
    0 24px 80px -24px rgba(194, 113, 78, 0.08);
}

.product-hero__card::before {
  background: radial-gradient(circle, rgba(194, 113, 78, 0.15) 0%, transparent 70%);
}

.product-hero__card::after {
  background: radial-gradient(circle, rgba(240, 234, 216, 0.4) 0%, transparent 70%);
}

.product-hero__title-accent {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: var(--color-accent);
  color: var(--color-accent);
}

.product-hero__visual img {
  box-shadow:
    0 0 0 1px rgba(44, 34, 24, 0.06),
    0 2px 4px rgba(44, 34, 24, 0.05),
    0 20px 50px -12px rgba(44, 34, 24, 0.18),
    0 44px 96px -24px rgba(44, 34, 24, 0.16);
}

.product-hero__visual img:hover {
  box-shadow:
    0 0 0 1px rgba(44, 34, 24, 0.08),
    0 4px 8px rgba(44, 34, 24, 0.06),
    0 28px 60px -12px rgba(44, 34, 24, 0.2),
    0 56px 110px -24px rgba(44, 34, 24, 0.2);
}

.product-hero__brand img {
  box-shadow:
    0 1px 2px rgba(44, 34, 24, 0.08),
    0 4px 12px -4px rgba(194, 113, 78, 0.25);
}

/* ---------- Buttons — solid terracotta ---------- */

.btn--primary:hover {
  box-shadow: 0 4px 16px rgba(194, 113, 78, 0.3);
  filter: none;
}

.btn--secondary {
  background-color: var(--color-bg-primary);
}

.btn--secondary:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background-color: var(--color-accent-light);
}

/* ---------- Stats bar — count-up + letter roll ---------- */

.stat__number {
  font-variant-numeric: tabular-nums;
}

.stat__letter {
  display: inline-block;
  min-width: 0.62em;
  text-align: center;
}

/* ---------- Feature cards ---------- */

.feature-card {
  position: relative;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(44, 34, 24, 0.05);
}

.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -8px rgba(44, 34, 24, 0.15);
}

.feature-card__icon {
  background-color: var(--color-accent-light);
  border-radius: 10px;
  transition: background-color 0.2s ease;
}

.feature-card:hover .feature-card__icon {
  background-color: #f0ddd0;
}

/* Scroll-reveal stagger — cascade left to right per row */
.feature-grid .feature-card:nth-child(3n + 1) { transition-delay: 0ms; }
.feature-grid .feature-card:nth-child(3n + 2) { transition-delay: 90ms; }
.feature-grid .feature-card:nth-child(3n + 3) { transition-delay: 180ms; }

/* Tracing accent border on hover */
@property --fc-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.feature-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 1.5px;
  background: conic-gradient(from var(--fc-angle), transparent 0 70%, var(--color-accent) 88%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.feature-card:hover::after {
  opacity: 1;
  animation: fc-trace 1s linear;
}

@keyframes fc-trace {
  to { --fc-angle: 360deg; }
}

/* Icon micro-motion on hover */
.feature-card__icon svg {
  transition: transform 0.25s ease;
}

.feature-card:hover .fx-flip svg   { animation: fx-flip 0.6s ease; }
.feature-card:hover .fx-lift svg   { transform: translateY(-4px) scale(1.08); }
.feature-card:hover .fx-wiggle svg { animation: fx-wiggle 0.5s ease; }
.feature-card:hover .fx-pulse svg  { animation: fx-pulse 0.6s ease; }
.feature-card:hover .fx-spin svg   { animation: fx-spin 0.7s ease; }
.feature-card:hover .fx-bounce svg { animation: fx-bounce 0.6s ease; }
.feature-card:hover .fx-pop svg    { animation: fx-pop 0.5s ease; }
.feature-card:hover .fx-slide svg  { animation: fx-slide 0.5s ease; }

@keyframes fx-flip   { to { transform: rotateY(360deg); } }
@keyframes fx-spin   { to { transform: rotate(360deg); } }
@keyframes fx-wiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-9deg); } 50% { transform: rotate(7deg); } 75% { transform: rotate(-4deg); } }
@keyframes fx-pulse  { 50% { transform: scale(1.2); } }
@keyframes fx-bounce { 30% { transform: translateY(-5px); } 60% { transform: translateY(-2px); } }
@keyframes fx-pop    { 40% { transform: scale(1.22); } 70% { transform: scale(0.94); } }
@keyframes fx-slide  { 30% { transform: translateX(-4px); } 70% { transform: translateX(4px); } }

@media (prefers-reduced-motion: reduce) {
  .feature-card::after { display: none; }
  .feature-card__icon svg { animation: none !important; transition: none; }
  .feature-grid .feature-card { transition-delay: 0ms !important; }
}

.feature-card__title {
  font-weight: 700;
}

/* ---------- Guide promo ---------- */

.guide-promo {
  background-color: #f5f1ea;
}

/* ---------- Download ---------- */

.download-card {
  border-radius: 14px;
}

.download-btn:hover {
  box-shadow: 0 4px 12px rgba(194, 113, 78, 0.3);
}

/* ---------- CTA — terracotta gradient ---------- */

.product-cta .btn--primary:hover {
  box-shadow: 0 4px 16px rgba(44, 34, 24, 0.15);
  filter: none;
}

/* ---------- "Why it feels different" — editorial alignment ---------- */

.lds-why p {
  text-align: left;
}

/* ---------- Docs — warm focus ring + screenshot shadow ---------- */

.docs-hook-search__input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(194, 113, 78, 0.15);
}

.docs-screenshot img {
  box-shadow: 0 4px 12px rgba(44, 34, 24, 0.08);
}

.docs-nav__title {
  font-family: var(--font-serif);
}

/* ---------- Footer — warm accent line ---------- */

.footer::before {
  background: var(--color-accent);
  opacity: 0.25;
}