/* Landing art direction: staged, scroll-aware, app-specific without blocking content. */

/* Progressive enhancement: no JavaScript means no invisible page. */
html[data-surface="app"] .reveal,
html[data-surface="app"] .reveal-child,
html[data-surface="app"] .reveal-immediate,
html[data-surface="app"] .reveal-fade {
  opacity: 1;
  transform: none;
  filter: none;
}

html[data-surface="app"].motion-ready .reveal,
html[data-surface="app"].motion-ready .reveal-child,
html[data-surface="app"].motion-ready .reveal-immediate,
html[data-surface="app"].motion-ready .reveal-fade {
  opacity: 0;
  transform: translateY(12px);
  filter: blur(4px);
}

html[data-surface="app"].motion-ready .reveal.on,
html[data-surface="app"].motion-ready .reveal-child.on,
html[data-surface="app"].motion-ready .reveal-immediate.on,
html[data-surface="app"].motion-ready .reveal-fade.on,
html[data-surface="app"].motion-ready .reveal-stagger.on .reveal-child {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Preserve the art-directed offsets when a staggered block becomes visible. */
html[data-surface="app"].motion-ready .reveal-stagger .pg-item.reveal-child,
html[data-surface="app"].motion-ready .reveal-stagger .trio-item.reveal-child {
  transform: translateY(calc(var(--y, 0px) + 40px));
}

html[data-surface="app"].motion-ready .reveal-stagger.on .pg-item.reveal-child,
html[data-surface="app"].motion-ready .reveal-stagger.on .trio-item.reveal-child {
  transform: translateY(var(--y, 0px));
}

html[data-surface="app"] .landing-hero-shell {
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: min(820px, 86vh);
  background: var(--app-surface);
}

html[data-surface="app"] .landing-hero-shell .hero {
  min-height: clamp(520px, 70vh, 760px);
}

html[data-surface="app"] .landing-hero-shell .pg-wrap {
  position: relative;
  z-index: 2;
  margin-bottom: 0;
  padding-bottom: 72px;
}

/* Hero words: visual spans preserve one accessible H1 underneath. */
html[data-surface="app"] .hero-word + .hero-word {
  margin-left: 0.25em;
}

html[data-surface="app"].motion-ready .hero-word {
  opacity: 0;
  transform: translateY(0.56em) rotate(2deg);
  filter: blur(8px);
  animation: landing-word-in 760ms cubic-bezier(0.22, 1, 0.36, 1) var(--word-delay, 0ms) both;
}

html[data-surface="app"].motion-ready .hero-desc,
html[data-surface="app"].motion-ready .hero-cta,
html[data-surface="app"].motion-ready .tm-hero-copy,
html[data-surface="app"].motion-ready .tm-hero-shot {
  opacity: 0;
  transform: translateY(16px);
  filter: blur(4px);
  animation: landing-rise 780ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

html[data-surface="app"].motion-ready .hero-desc { animation-delay: 520ms; }
html[data-surface="app"].motion-ready .hero-cta { animation-delay: 620ms; }
html[data-surface="app"].motion-ready .tm-hero-copy { animation-delay: 480ms; }
html[data-surface="app"].motion-ready .tm-hero-shot { animation-delay: 620ms; }

html[data-surface="app"] .reveal-stagger > .reveal-child,
html[data-surface="app"] .reveal-stagger > .reveal {
  transition-delay: calc(var(--sd, 0ms) + var(--d, 0s));
}

html[data-surface="app"] .pg-item,
html[data-surface="app"] .trio-item,
html[data-surface="app"] .sc-img,
html[data-surface="app"] .fs-img,
html[data-surface="app"] .fcard {
  transition-property: transform, opacity, filter;
  transition-duration: 700ms;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-surface="app"] .pg-item:hover,
html[data-surface="app"] .trio-item:hover,
html[data-surface="app"] .sc-img:hover,
html[data-surface="app"] .fs-img:hover {
  transform: translateY(calc(var(--y, 0px) - 8px)) rotate(1deg);
}

/* Hero-specific art direction: solid surfaces, one accent per app. */
html[data-app="chefly"] .landing-hero-shell--chefly {
  background: #f8fbff;
}

html[data-app="shine"] .landing-hero-shell--shine {
  background: #fffaf3;
}

html[data-app="dazzled"] .landing-hero-shell--dazzled {
  --app-surface: #100b17;
  --app-text: #fff5fb;
  --app-muted: rgba(255, 245, 251, 0.64);
  --app-card: #1b1020;
  min-height: 760px;
  background: #100b17;
}

html[data-app="absrank"] .landing-hero-shell--absrank {
  --app-surface: #0a0a0a;
  --app-text: #ffffff;
  --app-muted: rgba(255, 255, 255, 0.64);
  --app-card: #111111;
  background: #0a0a0a;
}

html[data-app="roastme"] .landing-hero-shell--roastme {
  background: #f8fbff;
}

html[data-app="roastme"] .landing-hero-shell--roastme::before {
  position: absolute;
  top: 12%;
  right: -4%;
  width: 180px;
  height: 180px;
  border: 2px solid rgba(0, 115, 255, 0.18);
  border-radius: 38% 62% 54% 46%;
  content: "";
  transform: rotate(18deg);
}

html[data-app="countmycal"] .landing-hero-shell--countmycal {
  background: #f7f4ef;
}

html[data-app="reciapp"] .landing-hero-shell--reciapp {
  background: #fff8f3;
}

/* Each landing gets one structural rhythm change, while components remain shared. */
html[data-app="chefly"] [data-landing-block="features"] .fcard:first-child {
  background: #eef6ff;
}

html[data-app="shine"] [data-landing-block="features"] .fcard {
  border-radius: 28px 28px 28px 8px;
  background: #fffaf5;
}

html[data-app="dazzled"] [data-landing-block="features"] .fcard {
  background: #1d111b;
  color: #fff5fb;
}

html[data-app="dazzled"] [data-landing-block="features"] .fcard-title {
  color: #fff5fb;
}

html[data-app="dazzled"] [data-landing-block="features"] .fcard-body {
  color: rgba(255, 245, 251, 0.64);
}

html[data-app="absrank"] [data-landing-block="features"] .fcards-grid {
  grid-template-columns: 1fr;
  max-width: 760px;
  margin: 0 auto;
}

html[data-app="absrank"] [data-landing-block="features"] .fcard {
  position: relative;
  overflow: hidden;
  background: #111;
}

html[data-app="absrank"] [data-landing-block="features"] .fcard-title {
  color: #fff;
}

html[data-app="absrank"] [data-landing-block="features"] .fcard-body {
  color: rgba(255, 255, 255, 0.62);
}

html[data-app="tanmeter"] [data-landing-block="timeline"] .hit-card {
  border-radius: 22px;
}

html[data-app="countmycal"] [data-landing-block="features"] .fcard:first-child {
  background: #1a2e1f;
}

html[data-app="countmycal"] [data-landing-block="features"] .fcard:first-child .fcard-title,
html[data-app="countmycal"] [data-landing-block="features"] .fcard:first-child .fcard-body {
  color: #f3f7f0;
}

html[data-app="reciapp"] [data-landing-block="timeline"] .hit-card {
  border-radius: 26px 12px 26px 12px;
}

html[data-app="roastme"] [data-landing-block="features"] .fcard {
  transform: rotate(var(--card-tilt, 0deg));
}

html[data-app="roastme"] [data-landing-block="features"] .fcard:nth-child(1) { --card-tilt: -1deg; }
html[data-app="roastme"] [data-landing-block="features"] .fcard:nth-child(2) { --card-tilt: 1deg; }
html[data-app="roastme"] [data-landing-block="features"] .fcard:nth-child(3) { --card-tilt: -0.5deg; }

html[data-surface="app"].motion-ready[data-app="roastme"] .reveal-stagger.on .fcard.reveal-child {
  transform: rotate(var(--card-tilt, 0deg));
}

@keyframes landing-word-in {
  from { opacity: 0; transform: translateY(0.56em) rotate(2deg); filter: blur(8px); }
  to { opacity: 1; transform: translateY(0) rotate(0); filter: blur(0); }
}

@keyframes landing-rise {
  from { opacity: 0; transform: translateY(16px); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes landing-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-8px, -12px, 0); }
}

@media (max-width: 640px) {
  html[data-surface="app"] .landing-hero-shell {
    min-height: 680px;
  }

  html[data-surface="app"] .landing-hero-shell .hero {
    min-height: 570px;
  }

  html[data-app="dazzled"] .landing-hero-shell--dazzled,
  html[data-app="absrank"] .landing-hero-shell--absrank {
    min-height: 700px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-surface="app"].motion-ready .hero-word,
  html[data-surface="app"].motion-ready .hero-desc,
  html[data-surface="app"].motion-ready .hero-cta,
  html[data-surface="app"].motion-ready .tm-hero-copy,
  html[data-surface="app"].motion-ready .tm-hero-shot {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
  }

}