:root {
  --wood-dark: #4a2c14;
  --wood-mid: #8a5a32;
  --wood-light: #c8a274;
  --cream: #f6efe0;
  --ink: #2a1a0d;
  --muted: #6b5640;
  --accent: #b86a2b;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  scroll-behavior: smooth;
  /* All text bold by default. Specific elements (Google Play button text,
     etc.) override below to keep their original weight. */
  font-weight: 700;
}

/* Sticky-footer layout: body fills viewport, main grows to fill the
   space between header and footer. Keeps footer at the bottom even on
   short subpages (About Us, Contact Us). */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1 0 auto;
}
.site-footer {
  flex-shrink: 0;
}

/* Google Play button — keep its original button-style typography
   (small "GET IT ON" label at normal weight, big "Google Play" at 600).
   The explicit weight on .gplay-big further down preserves the 600. */
.gplay-button { font-weight: normal; }

/* ============ SCROLL-SNAP (desktop only) ============ */
/* Proximity snap means the page only snaps when you stop near a snap point.
   Mandatory would fight the user — proximity feels natural. Disabled on
   mobile where rows stack into one column and snapping is more disorienting. */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  html {
    scroll-snap-type: y proximity;
    scroll-padding-top: 80px; /* keep sticky header from covering snap target */
  }
  .feature {
    scroll-snap-align: center;
    /* Reduced from 56vh → 36vh to pull each feature ~200px closer to
       the next vertically while still being tall enough for scroll-snap. */
    min-height: 36vh;
  }
}

.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ============ HEADER ============ */
.site-header {
  background-color: var(--wood-dark);
  color: var(--cream);
  /* Shorter than before (was 18px, now 13px — 10px less total height).
     Text size unchanged. */
  padding: 13px 0;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  overflow: hidden;
}
/* Wood-grain texture overlay — actual horizontal "grain lines" warped by
   a turbulence displacement filter, instead of pure noise. Reads much more
   like real wood grain. The pattern is 1500px wide (well over the 1000px
   target) and stretches to fill the header/footer with no tiling. */
.site-header::before,
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1500' height='180'><defs><filter id='warp'><feTurbulence baseFrequency='0.0008 0.006' numOctaves='2' seed='5'/><feDisplacementMap in='SourceGraphic' scale='22'/></filter></defs><g filter='url(%23warp)' stroke='%23fbf6e8' fill='none' opacity='0.55'><line x1='-50' y1='15' x2='1550' y2='15' stroke-width='1.5'/><line x1='-50' y1='35' x2='1550' y2='35' stroke-width='1'/><line x1='-50' y1='55' x2='1550' y2='55' stroke-width='2'/><line x1='-50' y1='80' x2='1550' y2='80' stroke-width='1'/><line x1='-50' y1='100' x2='1550' y2='100' stroke-width='1.5'/><line x1='-50' y1='125' x2='1550' y2='125' stroke-width='1'/><line x1='-50' y1='150' x2='1550' y2='150' stroke-width='2'/><line x1='-50' y1='170' x2='1550' y2='170' stroke-width='1'/></g></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
}

.header-inner {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  z-index: 1;
}

.brand {
  color: var(--cream);
  font-size: 31px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-decoration: none;
}

@media (max-width: 640px) {
  .header-inner { justify-content: center; }
  .brand { font-size: 26px; }
}

/* ============ WOOD GRAIN BACKGROUND ============ */
/* Subtle turbulence-based wood grain. Lives on a pseudo-element so content
   stays crisp. The animation pans it horizontally so it feels "alive." */
.hero, .features, .get-it {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hero::before,
.features::before,
.get-it::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.012 0.55' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 0.29  0 0 0 0 0.17  0 0 0 0 0.08  0 0 0 1.2 -0.2'/></filter><rect width='600' height='600' filter='url(%23g)'/></svg>");
  background-size: 600px 600px;
  background-repeat: repeat;
  opacity: 0.09;
  pointer-events: none;
  z-index: -1;
}
@media (prefers-reduced-motion: no-preference) {
  .hero::before,
  .features::before,
  .get-it::before {
    animation: wood-pan 90s linear infinite;
  }
}
@keyframes wood-pan {
  from { background-position: 0 0; }
  to   { background-position: 600px 0; }
}

/* ============ HERO ============ */
.hero {
  padding: 48px 0 40px;
  background: linear-gradient(180deg, var(--cream) 0%, #ecdfc4 100%);
}

.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
}

.phone-illustration svg {
  width: 420px;
  height: auto;
  max-width: 90vw;
  filter: drop-shadow(0 12px 24px rgba(74, 44, 20, 0.25));
}

.tagline {
  font-size: 24px;
  font-weight: 600;
  color: var(--wood-dark);
  max-width: 600px;
  margin: 0;
}

@media (min-width: 720px) {
  .tagline { font-size: 29px; }
  .phone-illustration svg { width: 480px; }
}

/* ============ FEATURES ============ */
.features {
  padding: 56px 0 64px;
  background: var(--cream);
}

.section-title {
  text-align: center;
  font-size: 35px;
  color: var(--wood-dark);
  margin: 0 0 28px;
}

.feature {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  margin-bottom: 24px;
}

.feature:last-child { margin-bottom: 0; }

/* Phone-frame screenshot mockup — uses the SAME SVG content as the hero
   phone (notch, volume buttons, power button, dark gradient body, cream
   screen), just without the hand around it. ViewBox is cropped tight to
   the phone + side buttons, matching the hero phone's visual size. */
.feature-shot {
  position: relative;
  width: 240px;
  max-width: 100%;
  /* viewBox is "144 48 192 354" → 192 wide × 354 tall.
     At width 240, the inner phone (180 wide in viewBox units)
     renders ~225 px wide — matching the hero phone. */
  aspect-ratio: 192 / 354;
  flex-shrink: 0;
}

.feature-shot .phone-frame {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 10px 22px rgba(74, 44, 20, 0.22));
}

.screenshot-content {
  position: absolute;
  /* Match the screen rect inside the SVG (x=10/220, y=10/411 insets) */
  top: 2.433%;
  bottom: 2.433%;
  left: 4.545%;
  right: 4.545%;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  font-size: 17px;
  color: var(--wood-dark);
  text-align: center;
  background: repeating-linear-gradient(
    45deg,
    rgba(232, 216, 184, 0.55),
    rgba(232, 216, 184, 0.55) 10px,
    rgba(221, 200, 159, 0.55) 10px,
    rgba(221, 200, 159, 0.55) 20px
  );
  overflow: hidden;
}

/* Inside a .screenshot-content, an <img> is rendered oversized and shifted
   up so the top 90px and bottom 140px of the original 1080x2340 screenshot
   are clipped off. Visible portion: rows 90–2200 (height 2110).
   - img height = 2340/2110 = 110.9% of container
   - img top    = -90/2110  =  -4.265% of container -->
.screenshot-content img {
  display: block;
  position: absolute;
  width: 100%;
  height: 110.9%;
  top: -4.265%;
  left: 0;
  cursor: zoom-in;
}

.feature-text { text-align: center; }
.feature-text h3 {
  /* 32 × 0.9 ≈ 29px (another 10% smaller) */
  font-size: 29px !important;
  text-transform: uppercase !important;
  color: var(--wood-dark);
  margin: 0 0 8px;
}
.feature .feature-text p {
  /* Slightly brighter version of --muted (#6b5640 → #8c7358) */
  color: #8c7358 !important;
  font-size: 16px;
  /* Semi-bold */
  font-weight: 600;
  margin: 0;
  max-width: 480px;
}

@media (min-width: 600px) {
  /* Switch from flex to grid for the side-by-side layout so the
     alternating left/right placement is explicit (no reliance on
     row-reverse, which can be flaky if anything else touches order). */
  .feature {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "shot text";
    gap: 40px;
    align-items: center;
    text-align: left;
  }
  /* Reverse rows flip the columns: text on left, phone on right. */
  .feature.reverse {
    grid-template-columns: 1fr auto;
    grid-template-areas: "text shot";
  }
  .feature .feature-shot { grid-area: shot; }
  .feature .feature-text { grid-area: text; }

  .feature-text { text-align: left; }
  /* 20 × 0.9 = 18px (10% smaller than previous 20) */
  .feature-text p { font-size: 18px; }

  /* Pull each text block 200px inward on the side opposite its phone.
     - Left phone (no .reverse): text on the right, right edge pulled in 200px
     - Right phone (.reverse): text on the left, left edge pushed in 200px
     The result: text hugs closer to its phone with whitespace on the far edge. */
  .feature:not(.reverse) .feature-text { padding-right: 280px; }
  .feature.reverse .feature-text       { padding-left: 280px; }
}

/* ============ FEATURE GRID ============ */
.subsection-title {
  text-align: center;
  /* 35 × 0.9 ≈ 32px (10% smaller) */
  font-size: 32px;
  color: var(--wood-dark);
  /* Margin-top bumped 72 → 122 (+50px padding above) */
  margin: 122px 0 32px;
}

.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 560px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
}

.feature-card {
  background: #fff8e8;
  border: 1px solid #e0cea0;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(74, 44, 20, 0.12);
}

/* Small phone-shaped thumbnail for grid cards. Aspect matches the cropped
   screenshot (1080:2110) so the image fills it cleanly. */
.feature-card-shot {
  width: 170px;
  max-width: 100%;
  margin: 0 auto;
  aspect-ratio: 1080 / 2110;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  font-size: 15px;
  color: var(--wood-dark);
  position: relative;
  overflow: hidden;
}
/* Placeholder styling only when there's no <img> inside */
.feature-card-shot:not(:has(img)) {
  background: repeating-linear-gradient(
    45deg,
    #e8d8b8,
    #e8d8b8 10px,
    #ddc89f 10px,
    #ddc89f 20px
  );
  border: 2px dashed var(--wood-mid);
}
/* Same crop math as .screenshot-content img: height 110.9%, top -4.265%
   so the top 90px and bottom 140px of the 1080x2340 original are clipped. */
.feature-card-shot img {
  display: block;
  position: absolute;
  width: 100%;
  height: 110.9%;
  top: -4.265%;
  left: 0;
  cursor: zoom-in;
  border-radius: 12px;
}

.feature-card h4 {
  font-size: 20px;
  color: var(--wood-dark);
  margin: 0;
}

.feature-card p {
  /* Lighter than --muted (#6b5640) — same family but easier on the eye. */
  color: #9a8268;
  font-size: 17px;
  /* Semi-bold instead of inheriting body bold (700) */
  font-weight: 600;
  margin: 0;
  line-height: 1.4;
}

/* ============ GET IT ============ */
.get-it {
  padding: 56px 0;
  background: #ecdfc4;
  text-align: center;
}

.get-it-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.gplay-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #000;
  color: #fff;
  padding: 12px 22px;
  border-radius: 10px;
  text-decoration: none;
  border: 1px solid #444;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.gplay-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}

.gplay-icon { width: 28px; height: 28px; }

.gplay-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  text-align: left;
}
.gplay-small { font-size: 12px; letter-spacing: 1px; opacity: 0.85; }
.gplay-big { font-size: 22px; font-weight: 600; }

.not-yet {
  color: var(--muted);
  font-style: italic;
  font-weight: 700;
  font-size: 17px;
  margin: 0;
}

/* Hide the Google Play button + "Available when project is done" text
   (both the top hero copy and the bottom .get-it section). Mailing-list
   form stays visible in the hero. */
.gplay-button,
.not-yet,
.get-it { display: none; }

/* ============ MAILING LIST FORM ============ */
/* Bumped 10% bigger across the board (sizes, padding, gaps, fonts). */
.mailing-list {
  margin: 13px 0 0;
  width: 100%;
  max-width: 462px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}
.mailing-list-label {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--wood-dark);
}
.mailing-list-row {
  display: flex;
  gap: 9px;
  width: 100%;
}
.mailing-list input[type="email"] {
  flex: 1;
  min-width: 0;
  padding: 11px 15px;
  font-size: 17px;
  font-family: inherit;
  border: 2px solid var(--wood-light);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mailing-list input[type="email"]:focus {
  border-color: var(--wood-mid);
  box-shadow: 0 0 0 3px rgba(138, 90, 50, 0.18);
}
.mailing-list button {
  padding: 11px 20px;
  font-size: 17px;
  font-family: inherit;
  font-weight: 700;
  background: var(--wood-mid);
  color: var(--cream);
  border: none;
  border-radius: 9px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.15s ease;
}
.mailing-list button:hover {
  background: var(--wood-dark);
  transform: translateY(-1px);
}
.mailing-list-msg {
  min-height: 1.2em;
  margin: 0;
  font-size: 15px;
  color: var(--wood-mid);
}
.mailing-list-msg.success { color: #2d7a3d; }
.mailing-list-msg.error   { color: #b91c1c; }

/* ============ FOOTER ============ */
.site-footer {
  background-color: var(--wood-dark);
  color: var(--cream);
  padding: 24px 0;
  position: relative;
  overflow: hidden;
}

.footer-inner {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.footer-link {
  color: var(--cream);
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  padding: 6px 10px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s ease;
}
.footer-link:hover { border-bottom-color: var(--wood-light); }

/* ============ SCREENSHOT HOVER ZOOM ============
   Hovering on any phone (hero, feature row, or grid card) gently scales
   it up by 10% so it feels interactive. For the hero, the entire
   hand+phone SVG is wrapped in .phone-illustration which is what gets
   scaled — so hand and phone grow together at the same rate. */
.phone-illustration,
.feature-shot,
.feature-card-shot {
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.phone-illustration:hover,
.feature-shot:hover {
  transform: scale(1.1);
}
/* "And so much more" grid thumbnails — small 5% zoom only since
   they're tightly packed and a bigger jump feels too aggressive. */
.feature-card-shot:hover {
  transform: scale(1.05);
}

/* ============ SUBPAGES (About, Contact) ============ */
.subpage {
  background: var(--cream);
  padding: 32px 0 80px;
  min-height: calc(100vh - 200px); /* fill enough so footer sits near bottom */
}
.subpage-container {
  max-width: 960px;
}

.back-link {
  display: inline-block;
  color: var(--wood-mid);
  text-decoration: none;
  font-weight: 600;
  font-size: 21px;
  margin-bottom: 24px;
  transition: color 0.15s ease;
}
.back-link::before {
  content: "← ";
}
.back-link:hover {
  color: var(--wood-dark);
  text-decoration: underline;
}

.subpage-title {
  font-size: 42px;
  color: var(--wood-dark);
  margin: 0 0 28px;
}

/* About page layout: text on the left, image on the right (desktop);
   stacked on mobile. */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
}
@media (min-width: 720px) {
  .about-grid {
    /* Single column now that the photo is removed — text fills the
       available width. (If you add an <img class="about-image"> back,
       the :has() rule below switches to two columns automatically.) */
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .about-grid:has(.about-image) {
    grid-template-columns: 1fr 1fr;
  }
}

.about-text {
  font-size: 20px;
  line-height: 1.65;
  color: var(--ink);
  /* Semi-bold instead of inheriting body bold (700) */
  font-weight: 600;
  margin: 0;
}

/* About-page image. Displays at the source's native aspect ratio so
   nothing gets stretched or cropped, scaled to fit the column width. */
.about-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(74, 44, 20, 0.12);
}
/* If you swap back to a <div class="about-image"> placeholder, this
   gives it a fallback dashed look. */
div.about-image {
  aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(
    45deg,
    #e8d8b8,
    #e8d8b8 12px,
    #ddc89f 12px,
    #ddc89f 24px
  );
  border: 2px dashed var(--wood-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  font-size: 15px;
  color: var(--wood-dark);
  box-shadow: none;
}

.contact-info {
  font-size: 20px;
  line-height: 2;
  color: var(--ink);
}

/* ============ TIMELINE (About page) ============ */
.timeline-heading {
  font-size: 29px;
  color: var(--wood-dark);
  text-align: center;
  margin: 56px 0 32px;
}

.timeline {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 0;
}

/* Vertical line down the center */
.timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--wood-mid);
  transform: translateX(-50%);
  border-radius: 2px;
}

.timeline-entry {
  position: relative;
  margin-bottom: 28px;
  display: flex;
  min-height: 60px;
}
.timeline-entry:last-child { margin-bottom: 0; }

.timeline-entry.left  { justify-content: flex-start; }
.timeline-entry.right { justify-content: flex-end; }

/* Dot on the center line for every entry */
.timeline-entry::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  background: var(--wood-dark);
  border: 3px solid var(--cream);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  box-shadow: 0 0 0 2px var(--wood-mid);
}

.timeline-content {
  width: calc(50% - 28px);
  background: #fff8e8;
  border: 2px solid var(--wood-light);
  border-radius: 12px;
  padding: 14px 18px;
  position: relative;
  box-shadow: 0 2px 8px rgba(74, 44, 20, 0.08);
}

/* Pointer arrow from the bubble toward the center line */
.timeline-entry.left .timeline-content::after,
.timeline-entry.right .timeline-content::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}
.timeline-entry.left .timeline-content::after {
  right: -11px;
  border-left: 11px solid var(--wood-light);
}
.timeline-entry.right .timeline-content::after {
  left: -11px;
  border-right: 11px solid var(--wood-light);
}

.timeline-date {
  font-weight: 800;
  font-size: 18px;
  color: var(--wood-dark);
  margin-bottom: 4px;
}
.timeline-event {
  font-size: 17px;
  color: var(--ink);
  /* Semi-bold instead of inheriting body bold (700) */
  font-weight: 600;
}

/* Mobile: stack all entries on one side with the line on the left */
@media (max-width: 600px) {
  .timeline { padding-left: 12px; }
  .timeline::before { left: 18px; }

  .timeline-entry,
  .timeline-entry.left,
  .timeline-entry.right {
    justify-content: flex-start;
    padding-left: 44px;
  }
  .timeline-entry::before { left: 18px; }

  .timeline-content { width: 100%; }

  /* All bubbles point left toward the line */
  .timeline-entry.left .timeline-content::after,
  .timeline-entry.right .timeline-content::after {
    left: -11px;
    right: auto;
    border-left: none;
    border-right: 11px solid var(--wood-light);
  }
}
.contact-info p { margin: 0 0 8px; }
.contact-info a {
  color: var(--wood-mid);
  text-decoration: none;
}
.contact-info a:hover {
  color: var(--wood-dark);
  text-decoration: underline;
}

/* ============ LIGHTBOX ============ */
/* Full-page overlay that shows a clicked screenshot scaled to fit the
   viewport. The image inside is cropped the same way as in the phone
   mockups (top 90px and bottom 140px of the original 1080x2340 hidden). */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  cursor: zoom-out;
  /* Smooth fade-in once opened */
  opacity: 0;
  transition: opacity 0.2s ease-out;
}
.lightbox.open {
  display: flex;
  opacity: 1;
}
.lightbox-frame {
  position: relative;
  /* Explicit width so the box has a size (aspect-ratio + max-* alone collapses
     to 0 inside a flex container). Width is the smaller of: 95vw, or the width
     that would let it fit in 95vh given the cropped aspect ratio (1080:2110). */
  width: min(95vw, calc(95vh * 1080 / 2110));
  aspect-ratio: 1080 / 2110;
  overflow: hidden;
  cursor: default;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.lightbox-frame img {
  display: block;
  position: absolute;
  width: 100%;
  height: 110.9%;   /* 2340/2110 */
  top: -4.265%;      /* -(90/2110) */
  left: 0;
}

/* ============ SCROLL PROGRESS BAR ============ */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(74, 44, 20, 0.08);
  z-index: 20;
  pointer-events: none;
}
.scroll-progress-bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--wood-mid), var(--accent));
  transition: width 0.1s linear;
}

/* ============ MOTION ============ */
/* Sticky header gets a stronger shadow once you scroll. We deliberately
   DO NOT change the header's height — doing so caused a feedback loop
   where the layout shift would push the scroll position back across the
   threshold and the header would oscillate between sizes. */
.site-header { transition: box-shadow 0.25s ease; }
.site-header.scrolled {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

@media (prefers-reduced-motion: no-preference) {
  /* --- Generic reveal-on-scroll --- */
  .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
      opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
      transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
    will-change: opacity, transform;
  }
  .reveal.in-view {
    opacity: 1;
    transform: translateY(0);
  }

  /* --- Feature rows: alternating slide-in --- */
  .feature.reveal {
    transform: translateX(-70px);
  }
  .feature.reverse.reveal {
    transform: translateX(70px);
  }
  .feature.reveal.in-view {
    transform: translateX(0);
  }

  /* --- Feature cards: staggered fade-up --- */
  .feature-card.reveal { transform: translateY(36px); }
  .feature-card.reveal.in-view { transform: translateY(0); }
  .feature-card:nth-child(3n + 1) { transition-delay: 0s; }
  .feature-card:nth-child(3n + 2) { transition-delay: 0.1s; }
  .feature-card:nth-child(3n + 3) { transition-delay: 0.2s; }

  /* --- Hero phone: SVG strokes draw on, then fills appear, then float --- */
  .phone-float {
    /* Delay the float until the draw-on finishes (~3s) */
    animation: phone-float 5s ease-in-out 3.6s infinite;
  }
  @keyframes phone-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
  }

  /* Stroked shapes use pathLength="100" on the element, so a dasharray of 100
     normalizes the draw across paths of any real length (small details like the
     band-aid draw on smoothly, not pop in). */
  .draw-stroke {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    fill-opacity: 0;
    animation:
      stroke-on 1.4s cubic-bezier(0.5, 0, 0.25, 1) var(--d, 0s) forwards,
      fill-on   0.6s ease-out calc(var(--d, 0s) + 1.1s) forwards;
  }
  /* Fill-only shapes: fade in (no stroke to draw) */
  .draw-fill {
    opacity: 0;
    animation: opacity-on 0.5s ease-out var(--d, 0s) forwards;
  }
  @keyframes stroke-on  { to { stroke-dashoffset: 0; } }
  @keyframes fill-on    { to { fill-opacity: 1; } }
  @keyframes opacity-on { to { opacity: 1; } }

  /* --- Tagline fades in after the phone settles --- */
  .tagline {
    animation: fade-up 0.7s ease-out 0.55s both;
  }
  @keyframes fade-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* --- Google Play button: gentle attention pulse --- */
  .gplay-button {
    animation: gplay-pulse 2.6s ease-in-out infinite;
  }
  @keyframes gplay-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(184, 106, 43, 0.45); }
    50%      { box-shadow: 0 0 0 14px rgba(184, 106, 43, 0); }
  }

  /* --- TOP get-it (under tagline): wait for sketch to finish drawing
         before fading in. Button first (3.5s), text 0.5s after (4.0s). --- */
  .hero .gplay-button {
    opacity: 0;
    /* Two animations: keep the pulse + add an opacity fade-in. */
    animation:
      gplay-pulse 2.6s ease-in-out infinite,
      opacity-on  0.6s ease-out 3.5s forwards;
  }
  .hero .not-yet {
    opacity: 0;
    animation: opacity-on 0.5s ease-out 4.0s forwards;
  }

  /* --- Brand: subtle underline draw on hover --- */
  .brand { position: relative; }
  .brand::after {
    content: "";
    position: absolute;
    left: 0; bottom: -4px;
    height: 2px; width: 0;
    background: var(--wood-light);
    transition: width 0.3s ease;
  }
  .brand:hover::after { width: 100%; }
}