/* Magic Unicorn Inc. — homepage styles
   Layout modes
   - default (no JS, reduced motion, phones): stacked sections, screenshot strips
   - html.js + >=900px + motion OK: pinned "scroll story" chapter with the phone stage
*/

@font-face {
  font-family: "Fraunces";
  src: url("/static/fonts/fraunces-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/static/fonts/fraunces-italic-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #07060d;
  --ink: #f5f3fb;
  --muted: rgba(245, 243, 251, 0.74);
  --faint: rgba(245, 243, 251, 0.56);
  --line: rgba(245, 243, 251, 0.14);
  --accent: #c9b8ff;
  --f-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --f-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --gutter: clamp(16px, 4.4vw, 64px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --rainbow: linear-gradient(100deg, #ff4f8b 0%, #ff8a3d 18%, #ffd34d 34%, #4ee08a 52%, #36c3ff 70%, #7d6bff 86%, #c55bff 100%);
}

/* per-app accents */
[data-app="shapeyard"] { --accent: #93bdff; --glow: 47, 107, 255; }
[data-app="homeai"]    { --accent: #f6c85a; --glow: 20, 184, 166; }
[data-app="makeapp"]   { --accent: #ffa3a0; --glow: 226, 102, 122; }
[data-app="sticker"]   { --accent: #ff7cb6; --glow: 255, 45, 135; }
[data-app="ella"]      { --accent: #e3bd78; --glow: 201, 154, 75; }
[data-app="moonq"]     { --accent: #bdb9ff; --glow: 91, 87, 230; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
ul, ol { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
::selection { background: rgba(197, 91, 255, .45); color: #fff; }

:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  border-radius: 6px;
  box-shadow: 0 0 0 5px rgba(125, 107, 255, .55);
}

.sr {
  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 {
  position: fixed; left: 16px; top: -60px; z-index: 100;
  background: #fff; color: #000; padding: 10px 16px; border-radius: 10px; font-weight: 600; text-decoration: none;
}
.skip:focus { top: 16px; }

.eyebrow {
  font-family: var(--f-text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ------------------------------------------------------------------ background */
.bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--bg); overflow: hidden; }
.bg__theme, .bg__aurora, .bg__stars, .bg__const { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.1s ease; }
.bg__theme--hero {
  opacity: 1;
  background:
    radial-gradient(42% 52% at 22% 30%, rgba(255, 79, 139, .26), transparent 70%),
    radial-gradient(40% 50% at 78% 26%, rgba(54, 195, 255, .24), transparent 70%),
    radial-gradient(46% 50% at 62% 82%, rgba(125, 107, 255, .26), transparent 70%),
    radial-gradient(36% 40% at 30% 78%, rgba(78, 224, 138, .14), transparent 70%),
    var(--bg);
}
.bg__theme--shapeyard {
  background:
    radial-gradient(55% 70% at 74% 46%, rgba(47, 107, 255, .50), transparent 70%),
    radial-gradient(45% 55% at 8% 92%, rgba(90, 176, 255, .20), transparent 70%),
    linear-gradient(180deg, #050b24, #030716);
}
.bg__theme--homeai {
  background:
    radial-gradient(55% 70% at 74% 42%, rgba(20, 184, 166, .42), transparent 70%),
    radial-gradient(42% 52% at 10% 90%, rgba(242, 182, 48, .20), transparent 70%),
    linear-gradient(180deg, #031b1b, #020f10);
}
.bg__theme--makeapp {
  background:
    radial-gradient(55% 70% at 74% 44%, rgba(226, 102, 122, .44), transparent 70%),
    radial-gradient(42% 52% at 8% 88%, rgba(176, 64, 96, .28), transparent 70%),
    linear-gradient(180deg, #1d0a11, #10050a);
}
.bg__theme--sticker {
  background:
    radial-gradient(52% 64% at 76% 36%, rgba(255, 45, 135, .44), transparent 70%),
    radial-gradient(42% 52% at 10% 88%, rgba(35, 209, 96, .26), transparent 70%),
    linear-gradient(180deg, #15050f, #0b0308);
}
.bg__theme--ella {
  background:
    radial-gradient(50% 62% at 74% 40%, rgba(201, 154, 75, .36), transparent 70%),
    radial-gradient(40% 46% at 12% 86%, rgba(242, 237, 230, .08), transparent 70%),
    radial-gradient(30% 30% at 30% 20%, rgba(201, 154, 75, .10), transparent 70%),
    linear-gradient(180deg, #1c1511, #0e0a08);
}
.bg__theme--moonq {
  background:
    radial-gradient(50% 58% at 74% 38%, rgba(91, 87, 230, .34), transparent 70%),
    radial-gradient(38% 40% at 18% 82%, rgba(160, 140, 255, .10), transparent 70%),
    linear-gradient(180deg, #05051a, #020210);
}
.bg[data-active="hero"] .bg__aurora,
.bg[data-active="shapeyard"] .bg__theme--shapeyard,
.bg[data-active="homeai"] .bg__theme--homeai,
.bg[data-active="makeapp"] .bg__theme--makeapp,
.bg[data-active="sticker"] .bg__theme--sticker,
.bg[data-active="ella"] .bg__theme--ella,
.bg[data-active="moonq"] .bg__theme--moonq,
.bg[data-active="moonq"] .bg__stars,
.bg[data-active="moonq"] .bg__const { opacity: 1; }
.bg[data-active="studio"] .bg__theme--hero { opacity: .55; }
.bg[data-active="studio"] .bg__aurora { opacity: .5; }
.bg:not([data-active="hero"]):not([data-active="studio"]) .bg__theme--hero { opacity: 0; }
html:not(.js) .bg__aurora, html:not(.js) .bg__stars { display: none; }

.bg__const { fill: none; }
.bg__const polyline { stroke: rgba(200, 196, 255, .55); stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
.bg__const circle { fill: #fff; stroke: none; }
.bg__grain {
  position: absolute; inset: 0; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.bg__vignette { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, .55) 100%); }

main, .top, .foot { position: relative; z-index: 1; }

/* ------------------------------------------------------------------ top bar */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--gutter);
  padding-top: max(14px, env(safe-area-inset-top));
  transition: background .4s ease, backdrop-filter .4s ease;
}
.top.is-scrolled { background: rgba(7, 6, 13, .55); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
.top__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; letter-spacing: -.01em; font-size: 16px; }
.top__brand img { height: 28px; width: auto; }
.top__nav { display: flex; gap: clamp(14px, 2.6vw, 34px); font-size: 15px; }
.top__nav a { text-decoration: none; color: var(--muted); padding: 6px 2px; transition: color .2s; }
.top__nav a:hover { color: var(--ink); }

/* ------------------------------------------------------------------ hero */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 120px var(--gutter) 150px;
  text-align: center;
  isolation: isolate;
}
.hero__inner { position: relative; z-index: 2; max-width: 1240px; }
.hero__mark { position: relative; width: clamp(96px, 10vw, 150px); aspect-ratio: 1; margin: 0 auto clamp(18px, 3vh, 30px); }
.hero__mark .mk { position: relative; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 12px 30px rgba(125, 107, 255, .38)); }
.hero__halo {
  position: absolute; inset: -38%; border-radius: 50%;
  background: conic-gradient(from 0deg, #ff4f8b, #ff8a3d, #ffd34d, #4ee08a, #36c3ff, #7d6bff, #c55bff, #ff4f8b);
  filter: blur(34px); opacity: .38;
  -webkit-mask: radial-gradient(closest-side, transparent 46%, #000 62%, transparent 100%);
  mask: radial-gradient(closest-side, transparent 46%, #000 62%, transparent 100%);
}
.hero__title {
  font-family: var(--f-display);
  font-weight: 380;
  font-size: clamp(46px, 9.2vw, 152px);
  line-height: .96;
  letter-spacing: -.035em;
  font-variation-settings: "opsz" 144;
  text-wrap: balance;
}
.hero__title .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .02em .02em .12em; margin: -.02em -.02em -.12em; }
.hero__title .w > span { display: inline-block; will-change: transform; }
.hero__title .w--em { padding-right: .1em; margin-right: -.06em; }
.hero__title em {
  font-style: italic; font-weight: 340;
  background: var(--rainbow); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: .04em;
}
.hero__lede { margin: clamp(22px, 3.2vh, 34px) auto 0; max-width: 34em; font-size: clamp(16px, 1.45vw, 20px); color: var(--muted); text-wrap: balance; }

.hero__icons { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero__icons li { position: absolute; left: var(--x); top: var(--y); width: calc(clamp(52px, 6.2vw, 96px) * var(--s)); translate: -50% -50%; pointer-events: auto; }
.hero__icons a { display: block; border-radius: 23%; transition: transform .35s var(--ease-out); }
.hero__icons a:hover img { scale: 1.08; }
.hero__icons img { transition: scale .35s var(--ease-out); }
.hero__icons img {
  width: 100%; height: auto; border-radius: 23%;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08);
  rotate: var(--r);
}
.hero__cue {
  position: absolute; left: 50%; bottom: max(28px, env(safe-area-inset-bottom)); translate: -50% 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--faint); text-decoration: none;
}
.hero__cue i { position: relative; width: 1px; height: 44px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.hero__cue i::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 40%; background: #fff; }

/* ------------------------------------------------------------------ apps: stacked (default) */
.apps { position: relative; }
.apps__title { padding: 40px var(--gutter) 0; max-width: 1240px; margin: 0 auto; }
.apps__title { font-family: var(--f-text); font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }
.rail, .apps__device { display: none; }

.app {
  position: relative;
  max-width: 1240px; margin: 0 auto;
  padding: clamp(64px, 12vh, 120px) var(--gutter);
}
html:not(.js) .app { border-top: 1px solid var(--line); background: radial-gradient(60% 50% at 80% 30%, rgba(var(--glow), .22), transparent 70%); }
.app__kicker { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.app__num { font-family: var(--f-display); font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--faint); font-variant-numeric: lining-nums tabular-nums; }
.app__num::after { content: ""; display: inline-block; width: 26px; height: 1px; background: currentColor; vertical-align: middle; margin-left: 12px; opacity: .6; }
.app__head { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 22px); margin-top: 18px; }
.app__icon { width: clamp(48px, 4.6vw, 64px); height: auto; border-radius: 23%; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .1); flex: none; }
.app__name {
  font-family: var(--f-display);
  font-size: clamp(46px, 6.6vw, 104px);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.035em;
  font-variation-settings: "opsz" 144;
}
.app__name .mask { display: inline-block; overflow: hidden; padding: 0 .04em .1em 0; margin-bottom: -.1em; vertical-align: top; }
.app__name .mask > span { display: inline-block; }
.app__line { margin-top: 20px; max-width: 30em; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.app__proof { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 26px; color: var(--muted); font-size: 15px; }
.app__proof strong { font-family: var(--f-display); font-weight: 450; font-size: clamp(36px, 3.2vw, 48px); line-height: 1; letter-spacing: -.02em; color: var(--ink); font-variation-settings: "opsz" 96; }
.app__star { width: 22px; height: 22px; color: var(--accent); align-self: center; margin-left: -4px; }
.app__proof--text { font-family: var(--f-display); font-size: clamp(24px, 2.2vw, 32px); line-height: 1.2; color: var(--ink); font-variation-settings: "opsz" 72; letter-spacing: -.01em; }
.app__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 26px; margin-top: 30px; }
.app__badge { display: inline-block; border-radius: 10px; transition: transform .3s var(--ease-out), box-shadow .3s; }
.app__badge:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -10px rgba(var(--glow), .8); }
.app__badge img { height: 48px; width: auto; }
.app__legal { display: flex; gap: 18px; font-size: 13px; }
.app__legal a { color: var(--faint); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .25); text-underline-offset: 3px; }
.app__legal a:hover { color: var(--ink); text-decoration-color: currentColor; }

/* screenshot strip */
.app__strip {
  margin: 36px calc(-1 * var(--gutter)) 0;
  padding: 6px var(--gutter) 18px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.app__strip::-webkit-scrollbar { display: none; }
.app__strip:focus-visible { outline-offset: -4px; }
.strip { display: flex; gap: 14px; width: max-content; }
.strip li { flex: none; width: clamp(200px, 58vw, 250px); scroll-snap-align: start; }
.strip--land li { width: clamp(300px, 86vw, 560px); }
.strip img {
  width: 100%; height: auto; border-radius: 20px;
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .08);
}
.strip--land img { border-radius: 16px; }

@media (min-width: 900px) {
  .app { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
  .app__strip { margin: 0; padding: 6px 2px 18px; -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent); mask-image: linear-gradient(90deg, #000 80%, transparent); }
  .strip li { width: 230px; }
  .strip--land li { width: 520px; }
}

/* ------------------------------------------------------------------ studio + contact */
.studio, .contact { max-width: 1240px; margin: 0 auto; padding: clamp(96px, 16vh, 180px) var(--gutter) 0; }
.studio__text {
  margin-top: 26px;
  font-family: var(--f-display);
  font-size: clamp(30px, 4.6vw, 72px);
  line-height: 1.12;
  letter-spacing: -.025em;
  font-variation-settings: "opsz" 120;
  font-weight: 360;
  max-width: 19em;
  text-wrap: balance;
}
.studio__text .hl { text-decoration: none; font-style: italic; color: var(--c); transition: opacity .2s; }
.studio__text .hl:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
.hl--sy { --c: #93bdff; } .hl--ha { --c: #f6c85a; } .hl--mk { --c: #ffa3a0; } .hl--st { --c: #ff7cb6; } .hl--el { --c: #e3bd78; } .hl--mq { --c: #bdb9ff; }
.studio__text .wd { display: inline; }

.contact { padding-bottom: clamp(96px, 14vh, 160px); }
.contact__lead { margin-top: 22px; font-size: clamp(17px, 1.4vw, 20px); color: var(--muted); }
.contact__email {
  display: inline-flex; align-items: center; gap: .35em; margin-top: 18px;
  font-family: var(--f-display); font-weight: 380;
  font-size: clamp(26px, 6.2vw, 96px); line-height: 1.08; letter-spacing: -.03em;
  font-variation-settings: "opsz" 144;
  text-decoration: none; color: var(--ink);
  will-change: transform;
}
.contact__email-text {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0% 2px no-repeat;
  transition: background-size .5s var(--ease-out);
  overflow-wrap: anywhere;
}
.contact__email:hover .contact__email-text, .contact__email:focus-visible .contact__email-text { background-image: var(--rainbow); background-size: 100% 3px; }
.contact__arrow { display: inline-block; font-family: var(--f-text); font-weight: 400; font-size: .6em; transition: transform .4s var(--ease-out); }
.contact__email:hover .contact__arrow { transform: translateX(.18em) rotate(-35deg); }
.contact__addr { margin-top: 34px; color: var(--muted); font-size: 16px; line-height: 1.7; }

/* ------------------------------------------------------------------ footer */
.foot { border-top: 1px solid var(--line); padding: 34px var(--gutter) max(34px, env(safe-area-inset-bottom)); max-width: 1240px; margin: 0 auto; font-size: 14px; color: var(--faint); }
.foot__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; }
.foot__brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 600; }
.foot__brand img { width: 28px; height: 28px; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.foot__nav a { color: var(--muted); text-decoration: none; }
.foot__nav a:hover { color: var(--ink); text-decoration: underline; }
.foot__copy { margin-top: 18px; }
.foot__tm { margin-top: 8px; font-size: 12px; max-width: 60em; color: rgba(245, 243, 251, .5); }

/* ------------------------------------------------------------------ phone (desktop stage) */
.device { position: relative; --ph: min(74vh, 720px); --u: calc(var(--ph) / 100); }
.device__rot { position: relative; z-index: 2; transform-origin: 50% 50%; }
.phone {
  position: relative;
  height: var(--ph);
  width: calc(var(--ph) * .4748);
  border-radius: calc(var(--u) * 7.6);
  background: #0b0b0e;
  box-shadow:
    inset 0 0 0 calc(var(--u) * .22) #3d3d44,
    inset 0 0 0 calc(var(--u) * .4) #17171b,
    0 0 0 1px rgba(255, 255, 255, .08),
    0 60px 120px -40px rgba(0, 0, 0, .9),
    0 0 160px -30px rgba(var(--glow, 125, 107, 255), .65);
  transition: box-shadow 1s ease;
}
.phone::before, .phone::after { content: ""; position: absolute; width: calc(var(--u) * .5); background: linear-gradient(90deg, #2b2b31, #4a4a52); border-radius: 2px; }
.phone::before { left: calc(var(--u) * -.42); top: 19%; height: 7%; box-shadow: 0 calc(var(--ph) * .1) 0 #3a3a41, 0 calc(var(--ph) * .19) 0 #3a3a41; }
.phone::after { right: calc(var(--u) * -.42); top: 27%; height: 11%; }
.phone__screen {
  position: absolute; inset: calc(var(--u) * 1.25);
  border-radius: calc(var(--u) * 6.4);
  overflow: hidden; background: #000;
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.phone__island {
  position: absolute; z-index: 6; left: 50%; top: calc(var(--u) * 2.45);
  width: calc(var(--u) * 13.6); height: calc(var(--u) * 4);
  translate: -50% 0; border-radius: 99px; background: #000;
  box-shadow: inset calc(var(--u) * -2.6) 0 0 calc(var(--u) * -1.2) #0d1020;
}
.scr { position: absolute; inset: 0; opacity: 0; overflow: hidden; }
.scr--shapeyard { opacity: 1; background: #141414; }
.scr > img, .cmp__b > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.scr__land {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--ph) * .975); height: calc(var(--ph) * .4498);
  translate: -50% -50%; rotate: 90deg;
  background: #141414;
}
.scr__land > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sy-clear { position: absolute; inset: 0; opacity: 0; background: radial-gradient(34% 92% at 50% 44%, #141414 66%, rgba(20, 20, 20, 0) 100%); }
.sy-mesh { position: absolute; left: 50%; top: 5%; height: 90%; width: auto; translate: -50% 0; overflow: visible; }
.sy-mesh .wire polygon { fill: none; stroke: #b4cfff; stroke-width: 2.2; stroke-linejoin: round; }
.sy-mesh .fill polygon { stroke-width: 1.2; stroke-linejoin: round; }

/* compare (before / after wipe) */
.cmp { --wipe: 0%; }
.cmp__b { position: absolute; inset: 0; }
.cmp--ltr .cmp__b { clip-path: inset(0 calc(100% - var(--wipe)) 0 0); }
.cmp--rtl { --wipe: 100%; }
.cmp--rtl .cmp__b { clip-path: inset(0 0 0 var(--wipe)); }
.cmp__line { position: absolute; inset: 0; transform: translateX(var(--wipe)); opacity: 0; pointer-events: none; z-index: 3; }
.cmp__line::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: rgba(255, 255, 255, .95); box-shadow: 0 0 18px rgba(0, 0, 0, .35); }
.cmp__knob {
  position: absolute; left: 0; top: 52%; width: calc(var(--u) * 6.4); height: calc(var(--u) * 6.4);
  translate: -50% -50%; border-radius: 50%; background: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}
.cmp__knob::before, .cmp__knob::after {
  content: ""; position: absolute; top: 50%; width: 22%; height: 22%;
  border: solid #222; border-width: 0 0 calc(var(--u) * .32) calc(var(--u) * .32);
}
.cmp__knob::before { left: 22%; transform: translateY(-50%) rotate(45deg); }
.cmp__knob::after { right: 22%; transform: translateY(-50%) rotate(-135deg); }

.pill {
  position: absolute; z-index: 4; top: calc(var(--u) * 7.6);
  padding: calc(var(--u) * .7) calc(var(--u) * 1.7);
  border-radius: 99px; font-size: calc(var(--u) * 1.7); font-weight: 600; line-height: 1.2; letter-spacing: .01em;
  color: #fff; background: rgba(20, 20, 24, .62);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.pill--l { left: calc(var(--u) * 2.2); }
.pill--r { right: calc(var(--u) * 2.2); }
.pill--warm { background: #c0532f; }
.pill--rose { background: #d24a63; }
.pill--bottom { top: auto; bottom: calc(var(--u) * 4); left: 50%; translate: -50% 0; white-space: nowrap; background: rgba(250, 248, 244, .9); color: #2a2622; }
.cmp .pill--b { opacity: 0; }

/* status bar */
.sb {
  position: absolute; z-index: 5; left: 0; right: 0; top: 0;
  height: calc(var(--u) * 6.6);
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--u) * .5) calc(var(--u) * 4.6) 0 calc(var(--u) * 5.4);
  font-size: calc(var(--u) * 1.95); font-weight: 600; letter-spacing: -.01em;
}
.sb svg { width: calc(var(--u) * 8.2); height: auto; }
.sb--light { color: #fff; background: linear-gradient(rgba(0, 0, 0, .35), transparent); }
.sb--dark { color: #111; }

.scr--sticker { background: #1a1a1a; }
.scr--sticker > img { top: calc(var(--u) * 6.6); height: auto; bottom: auto; object-fit: initial; }
.scr--moonq { background: #fcfbf8; }
.scr--moonq > img { top: calc(var(--u) * 5.4); height: auto; bottom: auto; object-fit: initial; }
.scr--moonq::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12%; background: linear-gradient(rgba(252, 251, 248, 0), #fcfbf8 70%); }
.scr--sticker::before, .scr--moonq::before { content: ""; position: absolute; z-index: 6; left: 50%; bottom: calc(var(--u) * 1.1); width: 36%; height: calc(var(--u) * .62); translate: -50% 0; border-radius: 99px; background: rgba(255, 255, 255, .85); }
.scr--moonq::before { background: rgba(0, 0, 0, .8); }

/* Ella: real Lock Screen + a widget that drops in */
.scr--ella { background: #d9c8bd; }
.scr--ella > img { top: 0; height: auto; bottom: auto; object-fit: initial; }
.scr--ella .sb { justify-content: flex-end; }
.ella-w {
  position: absolute; z-index: 4; left: 6.3%; width: 87.4%; top: 28.1%; height: 8.3%;
  display: flex; align-items: center; justify-content: center;
  border-radius: calc(var(--u) * 2.3);
  background: rgba(242, 237, 230, .66);
  -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%);
  box-shadow: 0 calc(var(--u) * .6) calc(var(--u) * 2) rgba(43, 38, 34, .12);
  opacity: 0;
}
.ella-w__glow {
  position: absolute; inset: calc(var(--u) * -.5); border-radius: calc(var(--u) * 2.8); opacity: 0; pointer-events: none;
  box-shadow: 0 0 0 calc(var(--u) * .3) rgba(226, 184, 102, .9), 0 0 calc(var(--u) * 5) calc(var(--u) * 1) rgba(201, 154, 75, .75);
}
.ella-w__text {
  position: relative; margin: 0; padding: 0 calc(var(--u) * 2);
  font-family: ui-serif, "New York", "New York Medium", "Fraunces", Georgia, serif;
  font-size: calc(var(--u) * 2.35); line-height: 1.25; color: #2b2622; text-align: center; letter-spacing: -.005em;
}
.ella-w__text span { display: inline-block; opacity: 0; }
.ella-sp { position: absolute; z-index: 5; color: #c99a4b; opacity: 0; filter: drop-shadow(0 0 calc(var(--u) * .8) rgba(226, 184, 102, .8)); }
.ella-sp svg { width: 100%; height: 100%; }
.ella-sp--1 { width: calc(var(--u) * 3.2); height: calc(var(--u) * 3.2); left: 4%; top: 24.6%; }
.ella-sp--2 { width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2); right: 4.5%; top: 36.4%; }
.ella-sp--3 { width: calc(var(--u) * 1.7); height: calc(var(--u) * 1.7); left: 52%; top: 38.6%; }
.scr--ella.is-twinkling .ella-sp svg { animation: twinkle 1.6s ease-in-out infinite alternate; }
.scr--ella.is-twinkling .ella-sp--2 svg { animation-delay: -.6s; animation-duration: 1.3s; }
.scr--ella.is-twinkling .ella-sp--3 svg { animation-delay: -1.1s; animation-duration: 1.9s; }
@keyframes twinkle { from { transform: scale(1) rotate(0deg); opacity: 1; } to { transform: scale(.55) rotate(25deg); opacity: .55; } }

.stickers { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.stk { position: absolute; left: 50%; top: 50%; width: calc(var(--ph) * .165); margin: calc(var(--ph) * -.0825) 0 0 calc(var(--ph) * -.0825); opacity: 0; }
.stk img { width: 100%; height: auto; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .45)); }

/* ------------------------------------------------------------------ motion: initial states (only with JS) */
@media (prefers-reduced-motion: no-preference) {
  html.js .hero__mark,
  html.js .hero__lede,
  html.js .hero__cue,
  html.js .hero__icons li { opacity: 0; }
  html.js .hero__title .w > span { transform: translateY(110%); }
  .hero__halo { animation: halo-spin 18s linear infinite; }
  .hero__icons img { animation: bob var(--d) ease-in-out infinite alternate; }
  .hero__icons li:nth-child(2n) img { animation-delay: -3s; }
  .hero__title em { animation: shimmer 9s ease-in-out infinite alternate; }
  .hero__cue i::after { animation: cue 2.2s cubic-bezier(.65, 0, .35, 1) infinite; }
  .stk img { animation: bob 4.6s ease-in-out infinite alternate; }
  .stk:nth-child(2n) img { animation-duration: 5.4s; animation-delay: -2s; }
}
@keyframes halo-spin { to { transform: rotate(360deg); } }
@keyframes bob { from { transform: translateY(-7px); } to { transform: translateY(7px); } }
@keyframes shimmer { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes cue { 0% { transform: translateY(-110%); } 60%, 100% { transform: translateY(260%); } }

/* ------------------------------------------------------------------ pinned scroll story (desktop + JS + motion OK) */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  html.js .apps__stage {
    position: relative;
    height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
    padding: 0 var(--gutter) 0 calc(var(--gutter) + 84px);
    overflow: hidden;
  }
  html.js .apps__title { position: absolute; top: 92px; left: calc(var(--gutter) + 84px); padding: 0; margin: 0; z-index: 3; }
  html.js .apps__text { position: relative; height: 100%; z-index: 3; }
  html.js .app {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: center;
    max-width: none; margin: 0; padding: 60px 0 0;
    pointer-events: none;
  }
  html.js .app.is-active { pointer-events: auto; }
  html.js .app:not(:first-child) .rv { opacity: 0; }
  html.js .app:not(:first-child) .app__name .mask > span { transform: translateY(110%); }
  html.js .app__copy { max-width: 560px; }
  html.js .app__strip { display: none; }
  html.js .apps__device { display: flex; align-items: center; justify-content: center; height: 100%; position: relative; z-index: 2; }
  html.js .device__rot { transform: rotate(-90deg) scale(.92); }

  html.js .rail { display: block; position: absolute; left: var(--gutter); top: 50%; translate: 0 -50%; z-index: 4; }
  .rail ol { display: flex; flex-direction: column; gap: 16px; }
  .rail a { position: relative; display: flex; align-items: center; text-decoration: none; }
  .rail img { width: 40px; height: 40px; border-radius: 23%; opacity: .42; filter: saturate(.4); transform: scale(.82); transition: opacity .4s, filter .4s, transform .5s var(--ease-out), box-shadow .4s; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
  .rail a:hover img, .rail a[aria-current="true"] img { opacity: 1; filter: none; transform: scale(1); }
  .rail a[aria-current="true"] img { box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 8px 24px -6px rgba(0, 0, 0, .6); }
  .rail span {
    position: absolute; left: 54px; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--ink);
    opacity: 0; translate: -6px 0; transition: opacity .3s, translate .3s; pointer-events: none;
    background: rgba(10, 10, 16, .7); padding: 4px 10px; border-radius: 99px;
  }
  .rail a:hover span, .rail a:focus-visible span { opacity: 1; translate: 0 0; }
  .rail__bar { position: absolute; left: -16px; top: 4px; bottom: 4px; width: 2px; border-radius: 2px; background: rgba(255, 255, 255, .12); overflow: hidden; }
  .rail__bar i { position: absolute; inset: 0; background: #fff; transform-origin: 50% 0; transform: scaleY(0); }
}

@media (max-width: 899.98px) {
  .hero { padding-top: 104px; padding-bottom: 130px; }
  .bg[data-active="moonq"] .bg__const { opacity: .5; }
  .hero__br { display: none; }
  .hero__icons li { width: calc(46px * var(--s)); }
  .hero__icons li:nth-child(1) { --x: 12% !important; --y: 15% !important; }
  .hero__icons li:nth-child(2) { --x: 86% !important; --y: 17% !important; }
  .hero__icons li:nth-child(3) { --x: 10% !important; --y: 84% !important; }
  .hero__icons li:nth-child(4) { --x: 88% !important; --y: 80% !important; }
  .hero__icons li:nth-child(5) { --x: 28% !important; --y: 91% !important; }
  .hero__icons li:nth-child(6) { --x: 72% !important; --y: 91% !important; }
  .top__nav { gap: 16px; font-size: 14px; }
}
@media (max-width: 380px) {
  .top__nav a:first-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}