/* ==========================================================================
   IAMOTION home page — local rebuild
   Design tokens below were read off the live site (computed styles), not guessed:
     perspective ........ 300px
     back layer ......... translateZ(-75px) scale(1.25)   // 1 + 75/300 = 1.25
     body ............... Helvetica, Arial, sans-serif / #252525 on #f8f8f8
     section label ...... #8c3571  30px/700
     body copy .......... #616976  18px/24px centered
     primary button ..... linear-gradient(to right bottom, #8d1880, #df4747)
                          2px solid #d992ac, radius 12px (hero) / 6px (sections)
     cookie bar ......... #ad0099
     footer bar ......... #4e4e4e
   ========================================================================== */

:root {
  --brand-purple: #8d1880;
  --brand-red: #df4747;
  --brand-label: #8c3571;
  --brand-magenta: #ad0099;
  --ink: #252525;
  --body-copy: #616976;
  --page-bg: #f8f8f8;
  --btn-border: #d992ac;
  --footer-bg: #4e4e4e;
  --perspective: 300px;
  --band-h: 90vh;          /* image band height */
  --hero-h: 80vh;          /* hero runs 10 points shorter than the bands */
  --vig-edge: .30;         /* vignette darkness at the frame edge */
  --badge-h: 34px;         /* store badge height (hero) */
  --badge-h-lg: 40px;      /* store badge height (Remember section) */
  --layer-z: -75px;
  --layer-scale: 1.29;     /* see note on .ia-parallax__layer--back */
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  height: 100%;
  font-family: Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
}

/* ---------- The parallax scroller -------------------------------------- */
/* The document never scrolls; this element does. perspective on the
   scroll container is what makes the back layers drift.                   */
.ia-parallax {
  position: relative;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: var(--perspective);
  perspective-origin: 50% 50%;
  -webkit-overflow-scrolling: touch;
}
/* preserve-3d is REQUIRED here: `perspective` only affects direct children, so
   without it this wrapper flattens the 3D context and the parallax silently
   stops working (layers still transform, they just stop drifting). The live
   site sets it on this same element. */
.ia-parallax__container { position: relative; transform-style: preserve-3d; }

.ia-parallax__group {
  position: relative;
  height: var(--band-h);
  transform-style: preserve-3d;
}

/* Bands run at --band-h; the hero is shorter still at --hero-h. Parallax is
   unaffected either way: the 0.8 travel ratio comes from perspective and
   translateZ, not from band height. */
#hero { height: var(--hero-h); }

.ia-parallax__layer { position: absolute; inset: 0; }

/* Pushed back in Z, then scaled by exactly the amount perspective shrinks it,
   so it lands at 1:1 on screen but travels slower than the page. */
/* The scale is what keeps the pushed-back layer filling its frame after the
   perspective projection shrinks it. It is NOT a free number: for a band of
   height h in a viewport V, coverage needs
       scale >= 1 + V / (4h)
   which is why the reference site's 1.25 is exactly right at h = 100vh and
   silently too small below it — the photo falls short and leaves a strip of
   background at the top of the band. Hence a value per band height. */
#hero { --layer-scale: 1.32; }                        /* h = 80vh -> needs 1.313 */
.ia-parallax__group:not(#hero) { --layer-scale: 1.29; } /* h = 90vh -> needs 1.278 */

.ia-parallax__layer--back {
  transform: translateZ(var(--layer-z)) scale(var(--layer-scale));
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover;
}
.ia-parallax__layer--base { transform: translateZ(0); z-index: 2; }

/* Background images, bound by attribute selector (no JS involved) */
[data-bg="sign-up"]      { background-image: url("assets/img/sign-up.jpg"); }
[data-bg="find-it"]      { background-image: url("assets/img/find-it.jpg"); }
[data-bg="plan-it"]      { background-image: url("assets/img/plan-it.jpg"); }
[data-bg="share-it"]     { background-image: url("assets/img/share-it.jpg"); }
[data-bg="live-it"]      { background-image: url("assets/img/live-it.jpg"); }
[data-bg="remember-it"]  { background-image: url("assets/img/remember-it.jpg"); }

/* ---------- Hero ------------------------------------------------------- */
.hero {
  height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 0 20px;
}
.hero__brand { margin-bottom: 12vh; }

/* "IAMOTION" is 8 wide uppercase glyphs where the old wordmark was 6, so the
   clamp ceiling is lower and the tracking is positive rather than tight. */
.logo {
  margin: 0;
  font-size: clamp(38px, 6.6vw, 96px);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1;
  text-shadow: 0 2px 18px rgba(0,0,0,.28);
  white-space: nowrap;
}
/* Accent half of the wordmark, mirroring the two-tone split of the reference. */
.logo__mark {
  background: linear-gradient(100deg, #e8342f 0%, #c9256a 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.logo__word {
  background: linear-gradient(100deg, #7d1a86 0%, #a3208a 42%, #e4622a 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.logo__tagline {
  margin: 2px 0 0;
  color: #fff;
  font-size: clamp(11px, 1.15vw, 16px);
  letter-spacing: .42em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
}

.hero__actions { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hero__alt {
  margin: 4px 0 0; color: #fff; font-size: 15px;
  text-shadow: 0 1px 6px rgba(0,0,0,.55);
}

.hero__byline {
  position: absolute; left: 18px; bottom: 22px;
  display: flex; align-items: center; gap: 9px;
  color: #fff; font-size: 13px;
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
.byline-badge {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff; color: var(--brand-purple);
  font-weight: 700; font-size: 14px;
}

.hero__stores { position: absolute; right: 18px; bottom: 20px; display: flex; gap: 10px; }

/* Chevron sits inside the notch, on the white — no disc of its own. */
.scroll-cue {
  position: absolute; left: 50%; top: 1px; transform: translateX(-50%);
  width: 34px; height: 24px;
  display: grid; place-items: center;
  border: 0; background: transparent; color: #2b2b2b;
  cursor: pointer; padding: 0;
}
.scroll-cue svg { width: 22px; height: 22px; }

/* ---------- Store badges ---------------------------------------------- */
/* Store badges.
   The real artwork is an <img> (official Apple / Google badges ship with their
   own black plate and rounded corners, so the anchor adds no chrome of its own
   and height-only sizing keeps the aspect ratio undistorted, as both vendors'
   guidelines require). If the image file is absent, an inline-SVG stand-in takes
   over automatically via the img's onerror hook — so the page never shows a
   broken-image icon. */
.store-badge {
  display: inline-flex; align-items: center;
  text-decoration: none; color: #fff;
}
.store-badge__img {
  display: block;
  height: var(--badge-h, 34px); width: auto;
  border-radius: 6px;
}
.content__stores .store-badge__img { height: var(--badge-h-lg, 40px); }

/* --- stand-in, shown only when the real artwork is missing --- */
.store-badge__fallback { display: none; }
.store-badge--fallback {
  gap: 7px; padding: 5px 11px;
  background: #000; border: 1px solid rgba(255,255,255,.55);
  border-radius: 7px;
}
.store-badge--fallback .store-badge__fallback { display: inline-flex; align-items: center; gap: 7px; }
.store-badge--fallback svg { width: 21px; height: 21px; fill: #fff; flex: none; }
.store-badge--fallback .store-badge__fallback > span {
  display: flex; flex-direction: column; line-height: 1.1; text-align: left;
}
.store-badge--fallback small { font-size: 8px; opacity: .92; letter-spacing: .02em; }
.store-badge--fallback strong { font-size: 14px; font-weight: 600; }
.store-badge--dark.store-badge--fallback { border-color: rgba(0,0,0,.25); }

/* ---------- Content sections ------------------------------------------ */
.content {
  position: relative; z-index: 3;
  background: #fff;
  padding: 34px 20px 46px;
  text-align: center;
}

/* The curved notch where each white block meets the image band above it.
   Measured off the reference: ~90 x 23 CSS px, centred, on every boundary.
   Profile fits a smoothstep (control points at 50% of each half-width), which
   tracks the reference's raised-cosine falloff to within a pixel.
   Two mirrored cubic curves give the ogee — horizontal tangents at both the
   baseline and the apex, so it blends into the flat edge with no corner. */
.content::before {
  content: '';
  position: absolute; left: 50%; top: -22px;
  transform: translateX(-50%);
  width: 104px; height: 23px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 104 23' preserveAspectRatio='none'%3E%3Cpath d='M0 23 C26 23 26 0 52 0 C78 0 78 23 104 23 Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  pointer-events: none;
}
.content h2 { margin: 0 0 14px; display: flex; flex-direction: column; gap: 4px; }
.content__label {
  color: var(--brand-label);
  font-size: 30px; font-weight: 700; line-height: 1.1;
}
.content__title {
  color: #3d3d3d;
  font-size: 24px; font-weight: 400; line-height: 1.25;
}
.content p {
  max-width: 640px;
  margin: 0 auto 12px;
  color: var(--body-copy);
  font-size: 18px; line-height: 24px;
}
.content__quote {
  margin: 0 auto 12px; max-width: 640px;
  font-style: italic;
}
.content__quote p { margin-bottom: 4px; }
.content__quote cite {
  display: block;
  font-style: normal; font-size: 15px;
  color: #8a919c;
}
.content .ia-btn { margin-top: 10px; }
.content--last { padding-bottom: 34px; }

.follow { margin-top: 34px !important; font-size: 15px !important; color: #7c8390 !important; }
.social { display: flex; justify-content: center; gap: 14px; margin-bottom: 26px; }
.social__link {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 6px;
}
.social__link svg { width: 19px; height: 19px; fill: #fff; }
.social__link--tw { background: #1da1f2; }
.social__link--fb { background: #1877f2; }
.social__link--ig { background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7); }

.content__stores { display: flex; justify-content: center; gap: 12px; }

/* ---------- Footer ---------------------------------------------------- */
.site-footer {
  position: relative; z-index: 3;
  background: var(--footer-bg); color: #d8d8d8;
  padding: 13px 20px;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 7px;
  font-size: 12px;
}
.site-footer a { color: #d8d8d8; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .dot { opacity: .55; }
/* Photo credit line hidden for now — attribution still lives in CREDITS.md.
   Pexels does not require visible attribution. Delete this rule to restore. */
.site-footer .credit { display: none; }

/* ---------- Buttons --------------------------------------------------- */
.ia-btn {
  display: inline-block;
  padding: 5px 25px;
  border: 2px solid var(--btn-border);
  border-radius: 6px;
  background-image: linear-gradient(to right bottom, var(--brand-purple) 0%, var(--brand-red) 100%);
  color: #fff; text-decoration: none;
  font-size: 16px; font-weight: 400;
  cursor: pointer;
  transition: filter .18s ease, transform .18s ease;
}
.ia-btn:hover { filter: brightness(1.09); }
.ia-btn:active { transform: translateY(1px); }
.ia-btn--lg { border-radius: 12px; font-size: 18px; font-weight: 700; padding: 7px 27px; }
.ia-btn--ghost {
  background-image: none; background-color: rgba(0,0,0,.29);
  border: 1px solid rgba(255,255,255,.5);
  font-size: 16px;
}

/* ---------- Cookie bar ------------------------------------------------ */
.cookie-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--brand-magenta); color: #fff;
  padding: 7px 42px 7px 20px;
  display: flex; align-items: center; justify-content: center;
}
.cookie-bar p { margin: 0; font-size: 12px; text-align: center; }
.cookie-bar a { color: #fff; text-decoration: underline; }
.cookie-bar__close {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.75); border-radius: 50%;
  background: transparent; color: #fff;
  font-size: 15px; line-height: 1; cursor: pointer;
}
.cookie-bar[hidden] { display: none; }

/* ---------- Responsive ------------------------------------------------ */
@media (max-width: 780px) {
  .hero__brand { margin-bottom: 9vh; }
  .content__label { font-size: 25px; }
  .content__title { font-size: 20px; }
  .content p { font-size: 16px; line-height: 22px; }
  .hero__byline span:last-child { display: none; }
  .hero__stores { gap: 7px; }
  .store-badge--fallback strong { font-size: 12px; }
  /* badges scale down with the viewport, aspect ratio untouched */
  :root { --badge-h: 28px; --badge-h-lg: 34px; }
  /* Parallax on small screens is jumpy on iOS; flatten it. */
  .ia-parallax { perspective: none; }
  .ia-parallax__layer--back { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ia-parallax { perspective: none; }
  .ia-parallax__layer--back { transform: none; }
  .ia-btn { transition: none; }
}

.hero__alt      { text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 0 10px rgba(0,0,0,.7); }


/* The hero photo is chosen to be bright in the middle so the purple wordmark
   reads. That makes white unreadable directly beneath it, so the tagline uses
   dark ink with a light halo instead — the CTA cluster lower down sits over the
   darker part of the frame and stays white. */
.logo__tagline {
  color: rgba(38, 28, 44, .8);
  text-shadow: 0 1px 2px rgba(255,255,255,.6), 0 0 12px rgba(255,255,255,.45);
  font-weight: 700;
}

/* ---------- Hero vignette ---------------------------------------------
   Soft black falloff around the frame so the centre of the hero reads as the
   highlight. It lives on the group (not the back layer) at z-index 1, which
   puts it above the photo but below the base layer's content at z-index 2 —
   so it darkens the image without dimming the wordmark or the buttons. Being
   on the group also means it does NOT drift with the parallax, so the frame
   stays put against the viewport while the photo travels underneath.        */
#hero { position: relative; }
#hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 64% 60% at 50% 46%,
                    rgba(0,0,0,0) 54%,
                    rgba(0,0,0,calc(var(--vig-edge) * .3)) 78%,
                    rgba(0,0,0,var(--vig-edge)) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.16) 0%, rgba(0,0,0,0) 16%),
    linear-gradient(to top,    rgba(0,0,0,.24) 0%, rgba(0,0,0,0) 20%);
}


/* The hero photo is bright through the middle, so the helper line uses the same
   dark ink as the tagline rather than white-on-a-shaded-blob. No overlay needed,
   which is why the oval behind the CTA cluster is gone. */
.hero__alt {
  color: rgba(34, 26, 40, .88);
  text-shadow: 0 1px 2px rgba(255,255,255,.6), 0 0 10px rgba(255,255,255,.4);
}

/* ---------- Hero entrance ---------------------------------------------
   Staged so the eye lands on the wordmark first, then the tagline unfurls,
   then the buttons arrive. Only transform/opacity/background are animated —
   all compositor-friendly, no layout thrash. The gradient "settles" from a
   wide crop to its canonical framing, so it ends on the exact brand colours
   rather than drifting off them.                                          */
@keyframes ia-rise {
  from { opacity: 0; transform: translateY(22px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes ia-unfurl {
  from { opacity: 0; letter-spacing: .16em; }
  to   { opacity: 1; letter-spacing: .42em; }
}
@keyframes ia-settle {
  from { background-size: 260% 100%; background-position: 72% 50%; }
  to   { background-size: 100% 100%; background-position: 50% 50%; }
}
@keyframes ia-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 5px); }
}

.logo          { animation: ia-rise .95s cubic-bezier(.2,.7,.25,1) both; }
.logo__mark,
.logo__word    { animation: ia-settle 1.6s cubic-bezier(.25,.8,.3,1) both; }
.logo__tagline { animation: ia-unfurl 1.1s cubic-bezier(.2,.7,.25,1) .34s both; }
.hero__actions { animation: ia-rise .9s cubic-bezier(.2,.7,.25,1) .58s both; }
.hero__byline,
.hero__stores  { animation: ia-rise .8s ease-out .95s both; }
/* the one looping animation: a gentle nudge on the scroll cue */
.scroll-cue    { animation: ia-bob 2.4s ease-in-out 1.8s infinite; }

@media (prefers-reduced-motion: reduce) {
  .logo, .logo__mark, .logo__word, .logo__tagline,
  .hero__actions, .hero__byline, .hero__stores, .scroll-cue { animation: none; }
  .logo__mark, .logo__word { background-size: auto; background-position: 0 0; }
}

/* ======================================================================
   Legal pages (privacy.html, terms.html)
   These share the home page's tokens, buttons and footer, but not its
   full-height parallax shell — hence the body override.
   ====================================================================== */
body.legal-page { height: auto; background: var(--page-bg); }

.legal-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid #e7e7ea;
}
.legal-header__inner {
  max-width: 880px; margin: 0 auto;
  padding: 12px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.legal-header .logo { font-size: 26px; text-shadow: none; }
/* the hero entrance shouldn't replay on every legal page view */
.legal-header .logo,
.legal-header .logo__mark,
.legal-header .logo__word { animation: none; }
.legal-nav { display: flex; gap: 18px; font-size: 14px; }
.legal-nav a { color: #5c6470; text-decoration: none; }
.legal-nav a:hover { color: var(--brand-label); text-decoration: underline; }
.legal-nav a[aria-current="page"] { color: var(--brand-label); font-weight: 700; }

.legal-main { max-width: 880px; margin: 0 auto; padding: 40px 20px 76px; }
.legal-title { color: var(--brand-label); font-size: 34px; margin: 0 0 6px; line-height: 1.15; }
.legal-meta { color: #7c8390; font-size: 14px; margin: 0 0 26px; }
.legal-meta strong { color: #5c6470; }

.legal-intro {
  background: #fff; border: 1px solid #e7e7ea; border-left: 3px solid var(--brand-purple);
  border-radius: 8px; padding: 16px 20px; margin-bottom: 30px;
}
.legal-intro p { margin: 0 0 10px; }
.legal-intro p:last-child { margin-bottom: 0; }

.legal-toc {
  background: #fff; border: 1px solid #e7e7ea; border-radius: 10px;
  padding: 18px 22px; margin-bottom: 38px;
}
.legal-toc h2 { margin: 0 0 10px; font-size: 15px; color: #3d3d3d; text-transform: uppercase; letter-spacing: .06em; }
.legal-toc ol { margin: 0; padding-left: 22px; columns: 2; column-gap: 30px; }
.legal-toc li { margin-bottom: 6px; break-inside: avoid; }
.legal-toc a { color: #4a5260; text-decoration: none; font-size: 15px; }
.legal-toc a:hover { color: var(--brand-label); text-decoration: underline; }

.legal section { scroll-margin-top: 74px; }
.legal h2 {
  color: var(--brand-label); font-size: 21px; line-height: 1.3;
  margin: 40px 0 12px; padding-top: 4px;
}
.legal h3 { color: #3d3d3d; font-size: 17px; margin: 24px 0 8px; }
.legal p, .legal li { color: #4a5260; font-size: 16px; line-height: 26px; }
.legal p { margin: 0 0 14px; }
.legal ul, .legal ol.legal-list { margin: 0 0 16px; padding-left: 24px; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--brand-label); }
.legal strong { color: #343a44; }

.legal-table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 15px; }
.legal-table th, .legal-table td {
  text-align: left; vertical-align: top;
  padding: 10px 12px; border: 1px solid #e7e7ea; color: #4a5260;
}
.legal-table th { background: #fff; color: #343a44; font-weight: 700; }
.legal-table-wrap { overflow-x: auto; }

.legal-contact {
  background: #fff; border: 1px solid #e7e7ea; border-radius: 10px;
  padding: 20px 22px; margin-top: 14px;
}
.legal-contact address { font-style: normal; line-height: 26px; color: #4a5260; }
.legal-back { display: inline-block; margin-top: 34px; font-size: 15px; }

@media (max-width: 700px) {
  .legal-toc ol { columns: 1; }
  .legal-title { font-size: 27px; }
  .legal-header__inner { flex-direction: column; align-items: flex-start; gap: 8px; }
  .legal section { scroll-margin-top: 108px; }
}

/* Sign-up is not open yet. The call-to-action keeps its shape and weight so the
   page composition is unchanged, but it is a <span> rather than a link: nothing
   to click, no hover lift, no pointer cursor — so it never reads as a dead link. */
.ia-btn--soon { cursor: default; }
.ia-btn--soon:hover { filter: none; }
.ia-btn--soon:active { transform: none; }