/* Tokens, base layout, .store-btn and footer live in ../shared/shared.css.
   Calm paper-and-ink palette: soft warm accent, gentle motion (off for reduced motion). */

:root { --accent: #8a6d3b; }
@media (prefers-color-scheme: dark) { :root { --accent: #d2b070; } }

/* Hero: still image, then a veil so text keeps WCAG AA contrast in both schemes. */
:root { --veil: rgba(250, 247, 240, 0.6); --hero-text: #1d1d1f; --hero-soft: #48484a; }
@media (prefers-color-scheme: dark) { :root { --veil: rgba(24, 24, 26, 0.65); --hero-text: #f5f5f7; --hero-soft: #d1d1d6; } }

.hero {
  position: relative;
  overflow: hidden; /* header sits outside <main>, so it is already full width: no 100vw trick */
  text-align: center;
  padding: 72px 24px 56px;
  min-height: min(90vh, 820px);
  display: flex; align-items: center; justify-content: center;
  background: url("images/hero.jpg") center / cover no-repeat;
  color: var(--hero-text);
}
.hero::after { content: ""; position: absolute; inset: 0; background: var(--veil); pointer-events: none; }
.hero-inner { position: relative; z-index: 1; }
.logo { width: 128px; max-width: 100%; height: auto; border-radius: 28px; box-shadow: var(--shadow); }
.hero h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 600; letter-spacing: -0.02em; margin: 20px 0 6px; }
.tagline { color: var(--hero-text); font-size: 1.15rem; font-weight: 700; margin: 0 0 28px; }
.hero .store-buttons { margin-bottom: 16px; }
.links { margin: 0; font-size: 0.95rem; }
.links a { color: var(--hero-text); text-decoration: underline; display: inline-block; padding: 12px 8px; }

/* Themed sections: text next to an image, alternating sides; one column on mobile. */
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 48px 0; }
.row:nth-child(even) figure { order: -1; }
.row h2 { font-size: 1.5rem; margin: 0 0 12px; }
.row p, .row li { color: var(--text-soft); font-size: 1.05rem; }
.row strong { color: var(--text); }
.row a { color: var(--accent); }
.row figure { margin: 0; overflow: hidden; border-radius: 16px; box-shadow: var(--shadow); }
.row img { display: block; width: 100%; height: auto; transition: transform 0.6s ease; }
.row figure:hover img { transform: scale(1.04); }
.points { list-style: none; padding: 0; margin: 0 0 16px; }
.points li { padding: 8px 0; border-bottom: 1px solid var(--border); }

footer a { display: inline-block; padding: 12px 4px; }

@media (max-width: 720px) {
  .row { grid-template-columns: 1fr; gap: 20px; padding: 32px 0; }
  .row:nth-child(even) figure { order: 0; }
  .hero { padding: 48px 16px 36px; }
}

/* Scroll reveal: only hidden when script.js ran and motion is allowed. */
.js-reveal .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js-reveal .reveal.in { opacity: 1; transform: none; }