/* =====================================================================
   YASSU — landing page
   Tokens follow the app's own code (theme.ts / variables.scss / styles.scss):
   Rubik, violet #6600CC → magenta #F40381, primary #8B36E5, navy #04103A.
   ===================================================================== */
:root {
  --violet: #6600cc;
  --violet-deep: #3d007a;
  --purple: #8b36e5;
  --plum: #8a0cbb;
  --magenta: #f40381;
  --pink: #ff4fb0;
  --rose: #ffcbe8;
  --gold: #ffc23d;
  --mint: #2fd3a7;
  --navy: #04103a;
  --night: #0c0627;
  --night-2: #160b3d;
  --lav-50: #fcf9ff;
  --lav-100: #f9f3ff;
  --lav-200: #f3e8ff;
  --lav-300: #e8d9ff;
  --peach: #ffefdb;
  --sky: #e6f7ff;
  --mint-50: #e6ffec;
  --ink: #04103a;
  --ink-2: #3b3561;
  --ink-3: #6f6893;
  --line: rgba(102, 0, 204, .12);
  --grad: linear-gradient(90deg, #6600cc 0%, #8a00c8 38%, #f40381 100%);
  --grad-d: linear-gradient(135deg, #6600cc 0%, #8a00c8 40%, #f40381 100%);
  --grad-soft: linear-gradient(135deg, #f3e8ff 0%, #ffe3f3 100%);
  --shadow-1: 0 4px 16px rgba(139, 31, 230, .12);
  --shadow-2: 0 18px 50px -12px rgba(76, 8, 150, .35);
  --shadow-glow: 0 10px 40px -6px rgba(244, 3, 129, .45);
  --r-card: 20px;
  --r-btn: 15px;
  --r-pill: 999px;
  --font: 'Rubik', 'Heebo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --container: 1240px;
  --gutter: clamp(16px, 4vw, 48px);
  --nav-h: 76px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--lav-50);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
::selection { background: rgba(244, 3, 129, .22); color: var(--navy); }
:focus-visible { outline: 3px solid var(--magenta); outline-offset: 3px; border-radius: 8px; }
section[data-tone="dark"] :focus-visible, .footer :focus-visible { outline-color: #fff; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 10px; inset-inline-start: 10px; z-index: 200; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 12px; transform: translateY(-160%); transition: transform .3s var(--ease-out); }
.skip-link:focus { transform: none; }

/* ---------------------------------------------------------------- layers */
.bg-layer { position: fixed; inset: 0; z-index: 0; background: var(--lav-50); transition: background-color .9s var(--ease-out); pointer-events: none; }
.bg-layer .blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; will-change: transform; transition: background-color 1.2s var(--ease-out), opacity 1.2s; }
.bg-layer .blob--a { width: 46vmax; height: 46vmax; top: -14vmax; inset-inline-end: -12vmax; background: #e9d5ff; animation: drift-a 26s ease-in-out infinite alternate; }
.bg-layer .blob--b { width: 38vmax; height: 38vmax; bottom: -16vmax; inset-inline-start: -10vmax; background: #ffd1ea; animation: drift-b 30s ease-in-out infinite alternate; }
.bg-layer .blob--c { width: 26vmax; height: 26vmax; top: 38%; inset-inline-start: 34%; background: #ddd0ff; opacity: .35; animation: drift-a 34s ease-in-out infinite alternate-reverse; }
@keyframes drift-a { to { transform: translate3d(-8vmax, 6vmax, 0) scale(1.12); } }
@keyframes drift-b { to { transform: translate3d(9vmax, -5vmax, 0) scale(.92); } }
body[data-tone="dark"] .bg-layer .blob { opacity: .22; }

#stage { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .9s var(--ease-out); }
body.stage-on #stage { opacity: 1; }
.grain { position: fixed; inset: -50%; z-index: 3; pointer-events: none; background-image: url(../assets/fx/grain.png); background-size: 96px 96px; opacity: .35; mix-blend-mode: soft-light; animation: grain 1.2s steps(3) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 33% { transform: translate(-3%, 2%); } 66% { transform: translate(2%, -3%); } 100% { transform: translate(0, 0); } }
.cursor-glow { position: fixed; z-index: 2; top: 0; left: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(244, 3, 129, .16) 0%, rgba(139, 54, 229, .10) 35%, transparent 70%); opacity: 0; transition: opacity .6s; will-change: transform; }
body.has-pointer .cursor-glow { opacity: 1; }
main { position: relative; z-index: 2; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { .grain, .bg-layer .blob { animation: none; } }

/* ---------------------------------------------------------------- layout */
.container { width: min(var(--container), 100% - var(--gutter) * 2); margin-inline: auto; }
.section { position: relative; padding-block: clamp(64px, 8vw, 112px); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--plum); background: rgba(255, 255, 255, .7); border: 1px solid var(--line); padding: 7px 14px 7px 16px; border-radius: var(--r-pill); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--magenta); box-shadow: 0 0 0 4px rgba(244, 3, 129, .15); }
.h-display { font-weight: 800; font-size: clamp(44px, 7.2vw, 104px); line-height: .98; letter-spacing: -.035em; }
.h-1 { font-weight: 800; font-size: clamp(38px, 5.2vw, 72px); line-height: 1.04; letter-spacing: -.03em; }
.h-2 { font-weight: 800; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.08; letter-spacing: -.025em; }
.h-3 { font-weight: 700; font-size: clamp(22px, 2vw, 28px); line-height: 1.2; letter-spacing: -.01em; }
.lead { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.65; color: var(--ink-2); max-width: 36em; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.nowrap { white-space: nowrap; }

/* ---------------------------------------------------------------- buttons */
.btn { --h: 58px; position: relative; display: inline-flex; border: 2px solid transparent; align-items: center; justify-content: center; gap: 10px; height: var(--h); padding: 0 28px; border-radius: var(--r-btn); font-weight: 700; font-size: 18px; line-height: 1; white-space: nowrap; transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease-out), background-color .3s; }
.btn--primary { color: #fff; background: var(--grad); box-shadow: var(--shadow-glow); overflow: hidden; isolation: isolate; }
.btn--primary::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #f40381, #8a00c8 60%, #6600cc); opacity: 0; transition: opacity .4s; }
.btn--primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: translateX(-150%) skewX(-18deg); animation: shine 4.2s ease-in-out infinite 1.5s; pointer-events: none; }
.btn--primary:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 16px 50px -8px rgba(244, 3, 129, .6); }
.btn--primary:hover::before { opacity: 1; }
.btn--ghost { color: var(--violet); background: rgba(255, 255, 255, .75); border: 1.5px solid rgba(102, 0, 204, .22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn--ghost:hover { transform: translateY(-2px); border-color: var(--purple); }
.btn--light { color: var(--violet); background: #fff; box-shadow: 0 14px 40px -10px rgba(0, 0, 0, .35); }
.btn--light:hover { transform: translateY(-2px) scale(1.02); }
.btn .ic { width: 22px; height: 22px; flex: none; }
@keyframes shine { 0%, 62% { transform: translateX(-150%) skewX(-18deg); } 100% { transform: translateX(350%) skewX(-18deg); } }
@media (prefers-reduced-motion: reduce) { .btn--primary::after { animation: none; display: none; } }

.store-badges { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.store-badge { display: inline-flex; height: 52px; border-radius: 12px; transition: transform .35s var(--ease-spring), box-shadow .35s; box-shadow: 0 8px 22px -10px rgba(4, 16, 58, .45); }
.store-badge img { height: 100%; width: auto; }
.store-badge:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -12px rgba(4, 16, 58, .55); }

.chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 14px; background: rgba(255, 255, 255, .92); border: 1px solid rgba(102, 0, 204, .1); box-shadow: 0 12px 30px -12px rgba(76, 8, 150, .35); font-size: 15px; font-weight: 600; color: var(--navy); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); white-space: nowrap; }
.chip .emo { font-size: 18px; line-height: 1; }
.chip small { display: block; font-weight: 400; font-size: 12.5px; color: var(--ink-3); line-height: 1.2; }

.rating { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink-2); }
.rating .stars { display: inline-flex; gap: 2px; color: var(--gold); }
.rating .stars svg { width: 18px; height: 18px; fill: currentColor; }
.rating .stars .half { fill: url(#star-half); }
.rating b { color: var(--navy); }

/* ---------------------------------------------------------------- nav */
.nav { position: fixed; inset-inline: 0; top: 0; z-index: 50; height: var(--nav-h); display: flex; align-items: center; transition: background-color .4s, box-shadow .4s, transform .5s var(--ease-out), height .4s; }
.nav .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav__logo { display: inline-flex; align-items: center; height: 40px; }
.nav__logo img { height: 34px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 30px; font-size: 16px; font-weight: 500; color: var(--ink-2); }
.nav__links a:not(.btn):not(.social-btn) { position: relative; padding: 6px 0; transition: color .25s; }
.nav__links a:not(.btn):not(.social-btn)::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--grad); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease-out); }
.nav__links a:not(.btn):not(.social-btn):hover { color: var(--violet); }
.nav__links a:not(.btn):not(.social-btn):hover::after { transform: scaleX(1); }
.nav__links .nav__cta { --h: 46px; font-size: 16px; padding: 0 22px; }
/* social icons share the round look of the motion switch */
.social { display: inline-flex; align-items: center; gap: 6px; }
.social-btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--plum); background: rgba(255, 255, 255, .7); border: 1px solid var(--line); transition: transform .3s var(--ease-spring), color .2s, background-color .2s; }
.social-btn svg { width: 18px; height: 18px; }
.social-btn:hover { transform: scale(1.08); color: var(--magenta); background: #fff; }
.nav[data-tone="dark"] .social-btn { color: #fff; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .2); }
.motion-toggle { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--plum); background: rgba(255, 255, 255, .7); border: 1px solid var(--line); transition: transform .3s var(--ease-spring), background .3s; }
.motion-toggle:hover { transform: scale(1.08); }
.motion-toggle svg { width: 18px; height: 18px; fill: currentColor; }
.motion-toggle .i-play { display: none; }
.motion-toggle[aria-pressed="true"] .i-pause { display: none; }
.motion-toggle[aria-pressed="true"] .i-play { display: inline; }
.nav.is-scrolled { --nav-h: 66px; background: rgba(252, 249, 255, .78); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 1px 0 rgba(102, 0, 204, .08), 0 10px 30px -18px rgba(76, 8, 150, .25); }
.nav.is-hidden { transform: translateY(-110%); }
.nav[data-tone="dark"].is-scrolled { background: rgba(12, 6, 39, .72); box-shadow: 0 1px 0 rgba(255, 255, 255, .06); }
.nav[data-tone="dark"] .nav__links { color: rgba(255, 255, 255, .82); }
.nav[data-tone="dark"] .nav__logo img { filter: brightness(0) invert(1); }
.nav[data-tone="dark"] .motion-toggle { color: #fff; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .2); }
@media (max-width: 1100px) { .nav__links { gap: 20px; } }
/* phones: logo, the social icons and the CTA (the motion switch moves to the footer) */
@media (max-width: 900px) { .nav__links a:not(.btn):not(.social-btn) { display: none; } .nav .motion-toggle { display: none; } .nav__links { gap: 8px; } .nav .social-btn { width: 36px; height: 36px; } .nav .social { gap: 4px; } body.sticky-on .nav__cta { display: none; } }
/* narrow phones fit only two icons beside the logo and the CTA: the rest stay in the footer */
@media (max-width: 480px) { .nav .social-btn:nth-child(n+3) { display: none; } }

/* ---------------------------------------------------------------- reveal on scroll */
[data-reveal] { opacity: 0; transform: translate3d(0, 34px, 0); transition: opacity .9s var(--ease-out), transform 1s var(--ease-out); transition-delay: calc(var(--d, 0) * 90ms); }
[data-reveal="left"] { transform: translate3d(-40px, 0, 0); }
[data-reveal="right"] { transform: translate3d(40px, 0, 0); }
[data-reveal="scale"] { transform: scale(.92); }
[data-reveal].in { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* split headline words */
.st .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.st .w > span { display: inline-block; transform: translateY(105%); transition: transform 1s var(--ease-out); transition-delay: calc(var(--i) * 55ms + var(--d0, 0ms)); }
.st.in .w > span { transform: none; }
@media (prefers-reduced-motion: reduce) { .st .w > span { transform: none; transition: none; } }

/* ---------------------------------------------------------------- phone slot (3D anchor) + static fallback */
.phone-slot { position: relative; }
.phone-slot .fallback { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .6s; }
body.stage-on .phone-slot .fallback { opacity: 0; }
.still { position: relative; width: 100%; height: 100%; isolation: isolate; }
/* a soft contact shadow, painted once (a drop-shadow filter on a moving image would cost more) */
.still::after { content: ""; position: absolute; left: 50%; bottom: 1%; width: 44%; height: 6%; translate: -50% 0; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(76, 8, 150, .3), transparent); }
.still__phone, .still__prop { position: absolute; max-width: none; transition: opacity .7s var(--ease-out), scale .9s var(--ease-spring); }
.still__phone { left: 50%; top: 50%; height: 94%; width: auto; translate: -50% -50%; animation: still-float 6.5s ease-in-out infinite; }
.still__phone--after { opacity: 0; transition: opacity .9s var(--ease-out); }
/* the reveal: when the countdown hits 🎉 the phone turns to the greetings */
.reveal.is-on .phone-slot.is-in .still__phone--after { opacity: 1; }
.still__prop { left: var(--x); top: var(--y); width: var(--w); height: auto; translate: -50% -50%; animation: still-bob var(--t, 5.5s) ease-in-out var(--d, 0s) infinite; }
@keyframes still-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-2.2%) rotate(-.8deg); } }
@keyframes still-bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-14%) rotate(5deg); } }
/* entrance when the slot first scrolls in; loops run only while it is on screen */
html:not(.no-js) .phone-slot:not(.is-in) .still__phone { opacity: 0; scale: .9; }
html:not(.no-js) .phone-slot:not(.is-in) .still__prop { opacity: 0; scale: .3; }
.phone-slot.is-in .still__prop { transition-delay: .25s; }
.phone-slot:not(.is-live) .still__phone, .phone-slot:not(.is-live) .still__prop { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .still__phone, .still__prop { animation: none; } }

/* ---------------------------------------------------------------- calmer typography wrapping */
.lead, .note p, .t-card p, .faq__a p, .reveal__after, .notif p, .fine { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

/* ---------------------------------------------------------------- motion off (WCAG 2.2.2): one switch freezes every loop */
html.motion-off *, html.motion-off *::before, html.motion-off *::after { animation-play-state: paused !important; }
html.motion-off .cursor-glow, html.motion-off .grain { display: none; }
@media (max-width: 900px) { html { scroll-padding-bottom: 110px; } }