/* Aluna - hero + glass stylesheet for the Home page.
   Served as a site asset because Webflow's page custom-code field caps out
   below this file's size. Source of truth for the design dials below:
   edit, then re-upload as a new asset and update the <link> in Page settings
   -> Custom code -> Head. */

/* MARBLING PAGE: the pattern is the only background. The very first paint is an
   872-byte inline placeholder (scan 1, tone-matched, 64px wide, blurred) on body
   and .hero, so there is never an ink/black frame while the real scan downloads. */
html { background-color: #0e0e10; }
body, .hero { background: #0e0e10 url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA4KCw0LCQ4NDA0QDw4RFiQXFhQUFiwgIRokNC43NjMuMjI6QVNGOj1OPjIySGJJTlZYXV5dOEVmbWVabFNbXVn/2wBDAQ8QEBYTFioXFypZOzI7WVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVlZWVn/wAARCAAoAEADASIAAhEBAxEB/8QAGgAAAgMBAQAAAAAAAAAAAAAAAAUDBAYBAv/EACUQAAICAgIBBQADAQAAAAAAAAECAAMEEQUSIRMiMUFhBhRRgf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AxvGvWmWhtHs+4xyM2u5zWy9qgfH5EwUkjr8xxxNWMFY5R1CHHGcNVZWMmqslB58xJz2Va+Wa/hB4Amt43lsXA45kVwyn/YppOBmZdltgDb+pRklJrbz9zmtvL/J41VeSejDRPxPOItPqDudgQLvG2W8YTZ02HXXmcbLWgs7LtmO9QzMxPagPYASnd1trDL8j6kHnYR+rJ0Y/EhyWK2FQ2x+Qy7Wut7MZEF8bMCRGdqygJ1PKWWVbCkgztN3RxoRpk11+gtwUDYlCndlmydkyWjYYnU90ZAFmtDRM1nF8Xhe21yCGHwZBj7rRZoKujBe9Xkg/9muP8bQZhyFZfTB2FnOVxxe6p6Nar+QEWJXj3pq49T9GV+Rxf61nVTtSNiEIFOke8Fh4EnuzGuHT4X6EIQJMXjrLGDE6T/Y3e/qyJVbsIPqEJRQzeWySSgsIH5KP97I7BjaxI/YQkH//2Q==) center / cover no-repeat; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
.hero, .hero-inner { min-height: 100svh; }

/* MARBLING PAGE: the poster is scan 1 (preloaded above), tone-matched to the
   shader's TONE curve with brightness/contrast so the canvas can fade in over it
   with no visible jump. It is the Designer-canvas / no-WebGL fallback too. */
.hero-bg { background-image: url(https://cdn.prod.website-files.com/6a8f1589b88c08f7923a4efd/6a906a6072aa12858e7f968a_aluna-marble-1.jpg) !important; background-position: 50% 50% !important; filter: brightness(.74) contrast(1.3); }

/* Copy and logo in #EFEEEF rather than pure white. The logo is a white PNG, so
   it is dimmed to 239/255 with a brightness filter (an image, not a glass layer). */
.hero-headline, .hero-headline-em, .glass-label, .hero-sub, .hero-note, .signup-input, .signup-success, .signup-error { color: #efeeef; }
.hero-logo { filter: brightness(0.937); }

.signup-input::placeholder { color: #c1c4c3; opacity: 1; }
.signup-input::-webkit-input-placeholder { color: #c1c4c3; }
.signup-input:focus { outline: none; box-shadow: none; }

/* Webflow focuses the success/error message after submit (for screen readers);
   Chromium then paints its blue focus ring on it. Keep the focus, drop the ring. */
.signup-success, .signup-error,
.signup-success:focus, .signup-error:focus,
.signup-success:focus-visible, .signup-error:focus-visible { outline: none !important; }

/* ==================== GLASS COMPONENT ====================
   Figma Glass: fill #EFEEEF 8%, light -45deg @ 29% (from the TOP-RIGHT),
   frost 9.99, refraction 100, depth 108, dispersion 100, splay 88.

   Two surfaces share it: the COMING SOON badge and the form success capsule.
   Both hold the same five layer divs (frost, refract, tint, dispersion, edge).

   REFRACTION is a shaped lens map (footer SVG, #aluna-lens): an image whose
   red/green channels push sampling outward near the rim, so the backdrop is
   magnified in the body and visibly compressed at the edge - a convex glass
   edge, not a ripple. Fed into backdrop-filter; Chromium only, blur-only
   base ships first.

   CRITICAL - never put ANY of these on a glass container or on a layer that
   has backdrop-filter: filter, transform, opacity<1, mix-blend-mode,
   isolation. Each turns the container into a backdrop root and the frost
   silently dies. */
.glass-badge, .signup-success {
  --glass-fill: 239,238,239;
  --glass-opacity: .03;
  --glass-blur: 2.5px;
  --glass-saturate: 112%;
  --glass-light: .29;
  --glass-dispersion: .30;
  --glass-radius: 999px;
  position: relative;
  overflow: hidden;
  border-radius: var(--glass-radius);
  border: 0;
  box-shadow: 0 12px 32px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.05);
  transition: none;
}
.signup-success { --glass-dispersion: .14; }
.glass-badge > *, .signup-success > * { border-radius: inherit; }
.signup-success > div { position: relative; z-index: 2; }
.signup-success .glass-frost, .signup-success .glass-refract, .signup-success .glass-tint,
.signup-success .glass-dispersion, .signup-success .glass-edge {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;
}

/* 1 - FROST + LENS: one pass. blur() runs first, then the lens map bends it. */
.glass-frost {
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}
@supports (backdrop-filter: url(#aluna-lens)) {
  .glass-frost { backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)) url(#aluna-lens); }
}
/* Desktop Safari has no SVG lens, so the frost carries the whole effect there. */
@supports not (backdrop-filter: url(#aluna-lens)) {
  .glass-badge, .signup-success { --glass-blur: 14px; --glass-opacity: .14; --glass-saturate: 140%; --glass-light: .38; }
}
/* Touch devices: iOS cannot backdrop-filter a WebGL canvas at all, so the embed's
   shader draws the pill's frost + lens into the canvas itself (matching the
   desktop lens). The CSS frost is switched off and the fill goes back to the
   desktop value so the two don't stack. */
@media (hover: none) {
  .glass-badge, .signup-success { --glass-blur: 2.5px; --glass-opacity: .03; --glass-saturate: 112%; --glass-light: .29; }
  .glass-badge .glass-frost { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* 2 - the old noise-refraction layer is retired; kept as a no-op so the DOM is stable */
.glass-refract { display: none; }

/* 3 - TINT + LIGHT: fill plus the -45deg sheen. */
.glass-tint {
  background-color: rgba(var(--glass-fill), var(--glass-opacity));
  background-image:
    linear-gradient(225deg,
      rgba(255,255,255, calc(var(--glass-light) * .22)) 0%,
      rgba(255,255,255, calc(var(--glass-light) * .06)) 34%,
      rgba(255,255,255, 0) 60%,
      rgba(0,0,0, .08) 100%);
}

/* 4 - DISPERSION: cyan where light enters, magenta on the far edge - the
   colour split real glass shows right at the rim */
.glass-dispersion {
  box-shadow:
    inset -2px 2px 2px -1px rgba(150,215,255, calc(var(--glass-dispersion) * .55)),
    inset  2px -2px 2px -1px rgba(255,170,210, calc(var(--glass-dispersion) * .40));
}

/* 5 - EDGE: this is what sells the thickness. A bright, sharp specular line
   along the lit top-right rim, a dark line along the far bottom-left rim, and
   a faint full ring. */
.glass-edge {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    inset -1px 1.5px 1px -.5px rgba(255,255,255, calc(var(--glass-light) * 1.9)),
    inset -5px 6px 9px -6px rgba(255,255,255, calc(var(--glass-light) * .55)),
    inset 1px -1.5px 1px -.5px rgba(0,0,0,.42),
    inset 4px -5px 8px -6px rgba(0,0,0,.30);
}

.glass-label { position: relative; z-index: 2; }

/* No hover state on the COMING SOON pill: it is a label, not a control. */
.glass-badge:hover { box-shadow: 0 12px 32px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.05); }
.glass-badge:hover .glass-tint { background-color: rgba(var(--glass-fill), var(--glass-opacity)); }

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass-tint { background-color: rgba(var(--glass-fill), .18); }
}
/* ================== END GLASS COMPONENT ================== */

/* ---- Headline entrance, line by line ----
   The footer script wraps each word in .w, switches them to inline-block with
   animations held (.is-measuring), reads which rendered row each sits on,
   tags it with --line (0 = top row), then releases. Words on the same row
   share a delay, so the copy rises one line at a time, top to bottom.
   Without JS the whole h1 rises as one block. */
@supports (animation-name: aluna-rise) {
  @keyframes aluna-rise {
    from { opacity: 0; transform: translateY(26px); filter: blur(8px); }
    to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
  }
  /* Phones: same rise, no blur. Animated filter() on text is main-thread work on
     iOS and it stalled half-blurred next to the WebGL loop. */
  @keyframes aluna-rise-lite {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .hero-headline { opacity: 0; animation: aluna-rise 1.1s cubic-bezier(.22,.61,.36,1) .2s forwards; }
  .hero-headline.is-split { opacity: 1; animation: none; }
  .hero-headline.is-split .w {
    display: inline-block; opacity: 0;
    animation: aluna-rise 1.05s cubic-bezier(.22,.61,.36,1) forwards;
    animation-delay: calc(.15s + var(--line, 0) * .26s);
  }
  @media (hover: none) {
    .hero-headline { animation-name: aluna-rise-lite; }
    .hero-headline.is-split .w { animation-name: aluna-rise-lite; filter: none; }
  }
  /* while the script measures line positions, hold every word still */
  .hero-headline.is-measuring .w { animation: none; }
}

@media (min-width: 992px) and (max-height: 960px) {
  .hero-inner { padding-top: 32px; padding-bottom: 48px; }
  .hero-logo { margin-bottom: 56px; }
  .glass-badge { margin-bottom: 24px; }
  .hero-rule { margin-top: 16px; height: 44px; }
  .hero-sub { margin-top: 20px; }
  .signup { margin-top: 40px; }
  .hero-note { margin-top: 16px; line-height: 32px; }
}
@media (min-width: 992px) and (max-height: 840px) {
  .hero-inner { padding-top: 24px; padding-bottom: 36px; }
  .hero-logo { width: 210px; height: 98px; margin-bottom: 40px; }
  .glass-badge { margin-bottom: 20px; }
  .hero-headline { font-size: 52px; max-width: 818px; }
  .hero-rule { margin-top: 14px; height: 36px; }
  .hero-sub { margin-top: 18px; font-size: 24px; line-height: 34px; }
  .signup { margin-top: 32px; }
  .hero-note { margin-top: 14px; font-size: 18px; line-height: 28px; }
}
/* Phones (all of this is phone-only):
   - COMING SOON pill 10% smaller (206x43 / 18px -> 185x39 / 16.2px)
   - logo -> pill -> headline -> rule -> body stack tightened
     (logo mb 64 -> 52, pill mb 34 -> 26, rule 26/37 -> 20/34, body mt 30 -> 24) */
@media (max-width: 479px) {
  .glass-badge { width: 185px; height: 39px; margin-bottom: 26px; }
  .glass-label { font-size: 16.2px; line-height: 21.6px; letter-spacing: 1.62px; }
  .hero-logo { margin-bottom: 52px; }
}
@media (min-width: 390px) and (max-width: 479px) {
  .hero-rule { margin-top: 20px; height: 34px; }
  .hero-sub { margin-top: 24px; }
}
@media (max-width: 389px) {
  .hero-inner { padding-left: 18px; padding-right: 18px; }
  .hero-logo { width: 180px; height: 84px; margin-bottom: 44px; }
  .glass-badge { margin-bottom: 22px; }
  .hero-headline { font-size: 29px; max-width: 100%; }
  .hero-rule { margin-top: 6px; height: 34px; }
  .hero-sub { margin-top: 10px; font-size: 18px; max-width: 100%; }
  .hero-note { font-size: 13px; max-width: 100%; }
  .signup { max-width: 100%; }
}
@media (max-width: 339px) {
  .hero-logo { width: 160px; height: 75px; margin-bottom: 38px; }
  .hero-headline { font-size: 26px; }
  .glass-badge { margin-bottom: 18px; }
}

/* Phones: the stack is scaled in three height tiers (under 900 / 760 / 640px
   tall) so logo -> footnote always fits in one screen. The page itself is not
   locked, so it keeps its natural little bounce. */
@media (max-width: 479px) and (max-height: 900px) {
  .hero-inner { padding-top: 20px; padding-bottom: 20px; }
  .hero-logo { width: 180px; height: 84px; margin-bottom: 36px; }
  .glass-badge { margin-bottom: 20px; }
  .hero-headline { font-size: 30px; }
  .hero-rule { margin-top: 16px; height: 30px; }
  .hero-sub { margin-top: 18px; font-size: 18px; line-height: 1.3; }
  .signup { margin-top: 24px; }
  .signup-input, .signup-submit { height: 50px; }
  .signup-submit { margin-top: 12px; }
  .hero-note { margin-top: 16px; font-size: 13px; line-height: 1.25; }
}
@media (max-width: 479px) and (max-height: 760px) {
  .hero-inner { padding-top: 18px; padding-bottom: 18px; }
  .hero-logo { width: 160px; height: 75px; margin-bottom: 28px; }
  .glass-badge { width: 172px; height: 36px; margin-bottom: 18px; }
  .glass-label { font-size: 15px; line-height: 20px; letter-spacing: 1.5px; }
  .hero-headline { font-size: 27px; }
  .hero-rule { margin-top: 12px; height: 24px; }
  .hero-sub { margin-top: 14px; font-size: 17px; line-height: 1.3; max-width: 330px; }
  .signup { margin-top: 20px; }
  .signup-input, .signup-submit { height: 46px; }
  .signup-submit { margin-top: 10px; }
  .hero-note { margin-top: 14px; font-size: 12px; line-height: 1.25; }
}
@media (max-width: 479px) and (max-height: 640px) {
  .hero-inner { padding-top: 12px; padding-bottom: 12px; }
  .hero-logo { width: 136px; height: 64px; margin-bottom: 18px; }
  .glass-badge { width: 156px; height: 32px; margin-bottom: 12px; }
  .glass-label { font-size: 14px; line-height: 18px; letter-spacing: 1.4px; }
  .hero-headline { font-size: 24px; }
  .hero-rule { margin-top: 8px; height: 18px; }
  .hero-sub { margin-top: 10px; font-size: 15px; line-height: 1.3; max-width: 300px; }
  .signup { margin-top: 14px; }
  .signup-input, .signup-submit { height: 42px; }
  .signup-submit { margin-top: 8px; }
  .hero-note { margin-top: 10px; font-size: 11px; line-height: 1.25; }
}

@media (prefers-reduced-motion: reduce) {
  .glass-badge, .signup-submit { transition: none !important; }
  .signup-submit:hover { transform: none !important; }
  .hero-headline, .hero-headline .w { opacity: 1 !important; animation: none !important; filter: none !important; transform: none !important; }
}