/*
  mathematically.co.il — public landing page.
  Palette anchored on the mobile app theme (apps/mobile/src/theme/colors.ts):
    --purple          #8B2FD6  palette.primary
    --purple-deep     #6B21A8  palette.primaryDeep
    --purple-highlight#B366E5  palette.primaryHighlight
    --lavender-bg     #F1EAFF  palette.creamSurfaceAlt
    --lavender-soft   #EFE9FA  palette.chipLavender
    --ink             #22174B  palette.ink
    --ink-muted       #6D6386  palette.inkMuted
    --mint            #4CE0A8  palette.storyBarWatched
    --footer-bg       #4A3F7A  darker-lavender strip (page-local tone,
                                sits between palette.ink and primaryDeep)
*/

:root {
  --purple: #8B2FD6;
  --purple-deep: #6B21A8;
  --purple-highlight: #B366E5;
  --lavender-bg: #F1EAFF;
  --lavender-soft: #EFE9FA;
  --ink: #22174B;
  --ink-muted: #6D6386;
  --mint: #4CE0A8;
  --footer-bg: #4A3F7A;
  --white: #ffffff;
}

* { box-sizing: border-box; }

/*
  Font: Rubik (loaded from Google Fonts in index.html), matching the mobile
  app — apps/mobile/src/theme/useFonts.ts:11-26 loads @expo-google-fonts/rubik
  and apps/mobile/src/theme/typography.ts:21-26 maps the same 400/500/600/700
  weights (regular/medium/semibold/bold) for body / strong / tagline / headings.
  Fallback stack keeps the page readable before webfont load and on hostile
  networks.
*/
html, body {
  margin: 0;
  padding: 0;
  background: var(--lavender-bg);
  color: var(--ink);
  font-family: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Helvetica Neue", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

main { display: block; }

/* ----- Hero -------------------------------------------------------------- */

.hero {
  /* Sticky "curtain" pattern (desktop only — mobile re-flows to static
     below). Hero pins at the top of <main>, features scrolls over it.
     Background is the EXACT section bg, so the hero image's masked
     bottom edge (see `.hero-art` mask-image) fades onto the same hue
     that `.features` paints below — no colour seam, at any width. */
  position: sticky;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 90vh;
  max-height: 90vh;
  overflow: hidden;
  background: var(--lavender-bg);
}

.hero-art {
  display: block;
  width: 100%;
  height: 100%;
  /* `cover` crops the composited scene to fill the capped hero at every
     ratio. The vertical bias (35%) keeps the hilltop + flag at top-right
     and the boy's full body (head to feet) in frame while sacrificing a
     slice of lower-meadow foreground when needed. */
  object-fit: cover;
  object-position: center 35%;
  /* Bottom-edge fade — baked into the IMAGE's alpha via mask-image, so
     it's immune to stacking contexts, overflow clips, and container
     sizing (unlike the previous `::after` overlay which collapsed to
     0 on auto-height mobile heroes). The lower 18% of the image fades
     to transparent, revealing `.hero { background: var(--lavender-bg) }`
     which is the exact section bg below. Renders at every width. */
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
}

.hero-copy {
  position: absolute;
  top: 4.5vw;
  right: unset;
  left: 4vw;
  /* Hard pixel cap (not %) so the block cannot grow wide enough to
     push into the boy's area as the viewport shrinks. Combined with
     the raised stacked-layout breakpoint (≥1150 is the only width
     range this absolute layout exists), the text clears the character
     on all common desktop sizes. */
  max-width: 520px;
  text-align: right;
  z-index: 2;  /* keep text crisp above the hero image */
  padding: 0;
  /* Fade/rise-in on load. */
  opacity: 0;
  transform: translateY(14px);
  animation: rise-in 720ms cubic-bezier(.2,.7,.2,1) 120ms forwards;
}

.hero-copy h1 {
  margin: 0 0 .15em;
  font-size: clamp(38px, 5.2vw, 80px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.01em;
  /* Deep-purple → brand purple → warm pink-violet. The pink accent is
     palette.quizSubmitHighlight (#D479EE) — the mobile theme's warmest
     purple ink — giving the H1 a premium gradient without a rainbow.
     Fallback `color` paints the glyphs if a browser skips background-clip. */
  color: var(--purple-deep);
  background: linear-gradient(100deg,
                              var(--purple-deep) 0%,
                              var(--purple)      55%,
                              #D479EE            100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          text-fill-color: transparent;
}

.hero-copy .tagline {
  margin: 0 0 1em;
  font-size: clamp(18px, 1.8vw, 28px);
  font-weight: 600;
  color: #001c84;
}

.hero-copy .lede {
  margin: 0 0 1.4em;
  font-size: clamp(14px, 1.15vw, 18px);
  line-height: 1.6;
  color: var(--ink);
  max-width: 46ch;
}

/* Store badges — official Apple + Google artwork, each saved as a flat
   file under assets/. The <button> wraps the image so clicks are
   keyboard-reachable; no navigation happens — the controller script
   opens the coming-soon modal instead. */
.badges {
  display: flex;
  align-items: center;      /* same baseline centre regardless of per-badge height */
  flex-wrap: wrap;
  gap: 12px;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  animation: float 5.6s ease-in-out infinite;
  transition: transform 200ms ease, filter 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.badge:nth-child(2) { animation-delay: 1.2s; }

/* Both PNG/SVG files are now content-tight (Google was trimmed from
   646×250 → 564×168 with `Image.getbbox()`; Apple's SVG viewBox is
   already edge-to-edge). One height rule now gives identical visible
   height by construction — no per-badge compensation needed. */
.badge img {
  display: block;
  height: 52px;
  width: auto;
  pointer-events: none;  /* clicks target the <button>, not the <img> */
}

.badge:hover { transform: translateY(-2px); filter: brightness(1.04); }
.badge:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 3px;
}

/* ----- Features ---------------------------------------------------------- */

.features {
  /* Curtain over the sticky hero (desktop). ONE variable controls how
     far the rounded top crosses the hero's bottom edge — kept small
     enough to land inside the image's mask fade zone, so no hero
     content is ever hidden. Zeroed on mobile below. */
  --curtain-overlap: 48px;

  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1180px;
  margin: calc(var(--curtain-overlap) * -1) auto 0;
  padding: calc(72px + var(--curtain-overlap)) 24px 96px;
  background: var(--lavender-bg);
  border-top-left-radius: 36px;
  border-top-right-radius: 36px;
  box-shadow: 0 -24px 48px -16px rgba(34, 23, 75, 0.18);
}

.card {
  background: var(--white);
  border-radius: 22px;
  padding: 36px 24px 28px;
  text-align: center;
  box-shadow:
    0 2px 6px rgba(107, 33, 168, 0.06),
    0 18px 40px rgba(107, 33, 168, 0.10);
  transition: transform 320ms cubic-bezier(.2,.7,.2,1),
              box-shadow 320ms cubic-bezier(.2,.7,.2,1);
}

.card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 2px 6px rgba(107, 33, 168, 0.08),
    0 26px 50px rgba(107, 33, 168, 0.16);
}

.card-icon {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 128px;
  margin-bottom: 14px;
}

.card-icon img {
  max-height: 163px;
  max-width: 85%;
  object-fit: contain;
}

.card h2 {
  margin: 0;
  font-size: 19px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--ink);
}

/* ----- Footer ------------------------------------------------------------ */

footer {
  background: linear-gradient(45deg, #0f0735, var(--footer-bg));
  color: #ECE6FF;
  text-align: center;
  padding: 28px 20px 30px;
}

footer .copy    { margin: 0 0 4px; font-size: 14px; letter-spacing: .04em; }
footer .contact { margin: 0; font-size: 14px; }
footer a {
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.4);
  padding-bottom: 1px;
  transition: border-color 200ms ease;
}
footer a:hover { border-color: var(--white); }

/* ----- Animations -------------------------------------------------------- */

@keyframes rise-in {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-copy  { opacity: 1; transform: none; animation: none; }
  .badge      { animation: none; }
  .card       { transition: none; }
  .card:hover { transform: none; }
}

/* ----- Responsive -------------------------------------------------------- */

/* Stacked layout (<1150 px) — text block ABOVE the art; CURTAIN
   DISABLED. The overlay layout is reserved for ≥1150 px where there
   is enough horizontal room for a 520-px text column to sit beside
   the boy without crossing him. Below that, the absolute text block
   would overlap the character no matter how it's capped, so we stack
   instead. Sections flow normally; the hero image's own mask fade is
   the entire seam treatment on this layout. No overlap, no rounded
   top, no top shadow, no sticky positioning — simple and unbreakable
   on tablet + phone. Background still matches the section bg so the
   mask fade lands on the correct colour. */
@media (max-width: 1149.98px) {
  .hero {
    position: static;             /* curtain disabled: no sticky */
    display: flex;
    flex-direction: column;
    height: auto;
    max-height: 90vh;
    background: var(--lavender-bg);
  }
  .hero-copy {
    position: static;
    max-width: 100%;
    padding: 28px 20px 10px;
    animation-delay: 60ms;
    flex: 0 0 auto;
  }
  .hero-copy h1 { font-size: 46px; }
  .hero-copy .tagline { font-size: 20px; }
  .hero-copy .lede { font-size: 16px; max-width: none; }
  .hero-art {
    width: 100%;
    height: auto;
    flex: 1 1 auto;
    min-height: 0;
    object-fit: cover;
    object-position: center 35%;
  }
  .features {
    --curtain-overlap: 0px;       /* zero overlap: hides nothing */
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 40px 20px 60px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: none;
  }
  .card { padding: 28px 20px 22px; }
  .card-icon { height: 112px; }
  .card-icon img { max-height: 112px; }
}

/* Narrow phones — 360-ish. Compact typography, tighter padding. */
@media (max-width: 400px) {
  .hero-copy { padding: 22px 16px 8px; }
  .hero-copy h1 { font-size: 40px; }
  .hero-copy .tagline { font-size: 18px; }
  .hero-copy .lede { font-size: 15px; }
  .badge img { height: 44px; }   /* uniform on narrow phones */
  .features { padding: 32px 14px 48px; }  /* radii + overlap already zeroed in ≤768 */
  .card { padding: 24px 16px 20px; border-radius: 18px; }
  .card h2 { font-size: 17px; }
}

/* ----- Coming-soon modal ------------------------------------------------ */

.modal[hidden] { display: none; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--bg-scrim, rgba(34, 23, 75, 0.55)); /* palette.overlayScrim */
  animation: modal-fade 180ms ease-out;
}

.modal-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 32px 28px 24px;
  background: var(--white);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(34, 23, 75, 0.28);
  text-align: center;
  animation: modal-pop 240ms cubic-bezier(.2, .9, .3, 1.15);
}

.modal-title {
  margin: 0 0 10px;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.15;
  background: linear-gradient(100deg,
                              var(--purple-deep) 0%,
                              var(--purple)      55%,
                              #D479EE            100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          text-fill-color: transparent;
}

.modal-body {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
}

.modal-cta {
  display: inline-block;
  padding: 12px 28px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(100deg, var(--purple-deep), var(--purple));
  color: var(--white);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(107, 33, 168, 0.30);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.modal-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(107, 33, 168, 0.36);
}
.modal-cta:focus-visible {
  outline: 3px solid var(--purple-highlight);
  outline-offset: 2px;
}

@keyframes modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes modal-pop {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

@media (prefers-reduced-motion: reduce) {
  .modal-backdrop,
  .modal-card,
  .modal-cta { animation: none; transition: none; }
  .modal-cta:hover { transform: none; }
}