/* AuraPass Desktop - 1 — design-spec.md (Figma 3:2). Do not approximate. */

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

html,
body {
  width: 100%;
  height: 100%;
  background: #090003;
}

body {
  min-height: 100%;
  min-height: 100dvh;
  overflow: auto;
  font-family: "Inter Tight", sans-serif;
  -webkit-font-smoothing: antialiased;

  /*
    Liquid-glass tokens from https://codepen.io/fooontic/pen/KwpRaGr
    Rest: barely-visible red fill (not grey/white). Hover lifts opacity a bit.
  */
  --c-glass: #ff1a1a;
  --c-light: #fff;
  --c-dark: #000;
  --glass-reflex-dark: 2;
  --glass-reflex-light: 0.45;
  --saturation: 150%;
  --cta-fill: 6%;
  --cta-fill-hover: 12%;
}

/*
  Light Rays — Magic UI
  https://magicui.design/docs/components/light-rays
  Vanilla port (light-rays.js). Screen-blended OVER bg-figure, under UI.
*/
.light-rays {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  /* blend beams into the hero raster instead of sitting under it */
  mix-blend-mode: screen;
}

.light-rays__layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.light-rays__glow {
  position: absolute;
  inset: 0;
  opacity: 0.6;
  pointer-events: none;
}

.light-rays__glow--a {
  background: radial-gradient(
    circle at 20% 15%,
    color-mix(in srgb, var(--light-rays-color) 45%, transparent),
    transparent 70%
  );
}

.light-rays__glow--b {
  background: radial-gradient(
    circle at 80% 10%,
    color-mix(in srgb, var(--light-rays-color) 35%, transparent),
    transparent 75%
  );
}

.light-rays__ray {
  --ray-left: 50%;
  --ray-width: 200px;
  --ray-rotate: 0deg;
  --ray-swing: 1deg;
  --ray-delay: 0s;
  --ray-duration: 14s;
  --ray-intensity: 0.7;
  --ray-repeat-delay: 1.4s;

  pointer-events: none;
  position: absolute;
  top: -12%;
  left: var(--ray-left);
  height: var(--light-rays-length);
  width: var(--ray-width);
  transform-origin: top center;
  translate: -50% 0;
  border-radius: 9999px;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--light-rays-color) 70%, transparent),
    transparent
  );
  opacity: 0;
  mix-blend-mode: screen;
  filter: blur(var(--light-rays-blur));
  animation: light-ray-pulse var(--ray-duration) ease-in-out var(--ray-delay) infinite;
  animation-delay: var(--ray-delay);
}

@keyframes light-ray-pulse {
  0% {
    opacity: 0;
    transform: rotate(calc(var(--ray-rotate) - var(--ray-swing)));
  }
  50% {
    opacity: var(--ray-intensity);
    transform: rotate(calc(var(--ray-rotate) + var(--ray-swing)));
  }
  100% {
    opacity: 0;
    transform: rotate(calc(var(--ray-rotate) - var(--ray-swing)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .light-rays__ray {
    animation: none;
    opacity: 0.25;
    transform: rotate(var(--ray-rotate));
  }
}

/* Viewport shell — full-bleed flex stage (no transform scale) */
.stage {
  width: 100%;
  min-height: 100%;
  min-height: 100dvh;
  height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: stretch;
  overflow: hidden;
  background: #090003;
}

/*
  Desktop / fluid canvas.
  Positions derived from Figma 1440×1024 as % of the live frame
  so intermediate widths flex instead of scaling the whole artboard.
*/
.desktop {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 100dvh;
  flex: 1 1 auto;
  background: #090003;
  overflow: hidden;
}

/* 41:4 — status line */
.status {
  position: absolute;
  top: clamp(28px, 5.76vh, 59px);
  left: 50%;
  transform: translateX(-50%);
  width: min(488px, 92%);
  height: auto;
  min-height: 19px;
  z-index: 2;
  font-family: "Inter Tight", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(14px, 1.11vw, 16px);
  line-height: normal;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  background-image: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: rgba(237, 151, 151, 0.3);
  color: rgba(237, 151, 151, 0.3);
}

/*
  41:5 — bg figure full node raster (Figma export 633×718 PNG).
  Centered (Figma center ≈ artboard center). Fluid width.
*/
.bg-figure {
  position: absolute;
  left: 50%;
  top: clamp(72px, 13.67vh, 140px);
  width: min(633px, 44vw);
  height: auto;
  aspect-ratio: 633 / 718;
  transform: translateX(-50%);
  display: block;
  max-width: none;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/*
  41:2 — CTA button / link
  Liquid glass CSS from https://codepen.io/fooontic/pen/KwpRaGr (.switcher)
  Geometry from Figma 41:2; top tracks viewport instead of fixed 632px.
*/
.cta {
  --mx: 50%;
  --my: 50%;
  --nx: 0;
  --ny: 0;
  --glow: 0;
  position: absolute;
  top: clamp(420px, 61.72vh, 632px);
  left: 50%;
  translate: -50% 0;
  width: min(288px, 72vw);
  height: 68px;
  z-index: 2;
  box-sizing: border-box;
  border: none;
  padding: 0;
  margin: 0;
  border-radius: 83px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: #ffffff;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  display: block;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;

  background-color: color-mix(in srgb, var(--c-glass) var(--cta-fill), transparent);
  /* No url(#cta-glass): feDisplacementMap map stretches into hard-edged blotches on the pill */
  backdrop-filter: blur(12px) saturate(var(--saturation));
  -webkit-backdrop-filter: blur(12px) saturate(var(--saturation));
  transition: background-color 0.28s ease, backdrop-filter 0.28s ease;

  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
    inset 1.8px 3px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
    inset -2px -2px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
    inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
    inset -0.3px -1px 4px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent),
    inset -1.5px 2.5px 0px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 0px 3px 4px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 2px -6.5px 1px -4px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
    0px 1px 5px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
    0px 6px 16px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
}

/* Soft red caustic / light blob that follows the pointer */
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: calc(var(--glow) * 0.95);
  transition: opacity 0.25s ease;
  background:
    radial-gradient(
      150px 100px at var(--mx) var(--my),
      rgba(255, 64, 64, 0.5) 0%,
      rgba(255, 24, 24, 0.18) 32%,
      rgba(120, 0, 0, 0.04) 58%,
      transparent 72%
    );
  mix-blend-mode: screen;
  /* slight optical stretch toward pointer for a refraction feel */
  transform: translate(
      calc(var(--nx) * 2.5px),
      calc(var(--ny) * 2px)
    )
    scale(calc(1 + var(--glow) * 0.03));
  filter: blur(calc(var(--glow) * 0.4px));
}

/* Edge rim + outer bloom lit from the pointer side */
.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: var(--glow);
  transition: opacity 0.25s ease;
  box-shadow:
    inset calc(var(--nx) * -7px) calc(var(--ny) * -6px) 16px -1px rgba(255, 72, 72, 0.62),
    inset calc(var(--nx) * -2px) calc(var(--ny) * -2px) 6px 0 rgba(255, 160, 160, 0.28),
    inset calc(var(--nx) * 5px) calc(var(--ny) * 4px) 12px -3px rgba(0, 0, 0, 0.45),
    calc(var(--nx) * 5px) calc(var(--ny) * 4px) 22px -4px rgba(255, 32, 32, 0.32),
    calc(var(--nx) * 2px) calc(var(--ny) * 2px) 10px -2px rgba(255, 60, 60, 0.18);
}

.cta.is-hot {
  background-color: color-mix(in srgb, var(--c-glass) var(--cta-fill-hover), transparent);
  backdrop-filter: blur(14px) saturate(calc(var(--saturation) + 20%));
  -webkit-backdrop-filter: blur(14px) saturate(calc(var(--saturation) + 20%));
}

.cta:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--c-light) 40%, transparent);
  outline-offset: 3px;
}

.cta__label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  font-family: "Inter Tight", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  line-height: normal;
  letter-spacing: -1px;
  text-align: center;
  color: #ffffff;
  white-space: nowrap;
  word-break: break-word;
  pointer-events: none;
}

/* -------------------------------------------------------------------------- */
/* Large tablet / small laptop — flex denser composition                      */
/* -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .status {
    top: clamp(24px, 4.5vh, 48px);
    font-size: 15px;
  }

  .bg-figure {
    top: clamp(64px, 11vh, 120px);
    width: min(580px, 56vw);
  }

  .cta {
    top: clamp(380px, 58vh, 560px);
    width: min(288px, 70vw);
    height: 64px;
  }
}

/* -------------------------------------------------------------------------- */
/* Tablet portrait / landscape mid                                            */
/* -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .status {
    top: clamp(20px, 4vh, 40px);
    width: min(440px, 88%);
    font-size: 14px;
    white-space: normal;
    line-height: 1.3;
  }

  .bg-figure {
    top: clamp(56px, 10vh, 100px);
    width: min(520px, 68vw);
  }

  .cta {
    top: clamp(340px, 56vh, 520px);
    width: min(280px, 72vw);
    height: 62px;
  }

  .cta__label {
    font-size: 18px;
  }
}

/* -------------------------------------------------------------------------- */
/* Small tablet — still absolute/flex hero, closer to mobile proportions      */
/* -------------------------------------------------------------------------- */
@media (max-width: 834px) {
  .status {
    top: 20px;
    width: min(360px, 90%);
    font-size: 14px;
    font-weight: 500;
    white-space: normal;
    line-height: 19px;
    background-image: none;
    -webkit-text-fill-color: rgba(237, 151, 151, 0.3);
    color: rgba(237, 151, 151, 0.3);
  }

  .bg-figure {
    top: 56px;
    width: min(640px, 92vw);
  }

  .cta {
    top: auto;
    bottom: clamp(28px, 6vh, 48px);
    width: min(288px, 78vw);
    height: 60px;
  }

  .cta__label {
    font-size: 18px;
  }
}

/* -------------------------------------------------------------------------- */
/* Mobile / narrow reflow — readable stack, no tiny scaled artboard           */
/* -------------------------------------------------------------------------- */
body.reflow {
  overflow: hidden;
  height: 100%;
  height: 100dvh;
}

body.reflow .stage {
  display: block;
  height: 100% !important;
  height: 100dvh !important;
  min-height: 0;
  max-height: 100dvh;
  overflow: hidden;
}

body.reflow .desktop {
  width: 100%;
  max-width: 100%;
  /* One screen only — hero may clip; no vertical page scroll */
  height: 100%;
  height: 100dvh;
  min-height: 0;
  max-height: 100dvh;
  margin: 0 auto;
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Figma Mobile - 390 (45:2): pad 20 / 20 / 28 */
  padding:
    max(20px, env(safe-area-inset-top))
    20px
    max(28px, env(safe-area-inset-bottom));
  overflow: hidden;
}

body.reflow .status {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  z-index: 2;
  /* Mobile status — #ED9797, 12pt */
  width: 350px;
  max-width: 100%;
  height: auto;
  min-height: 0;
  margin: 8px 0 0;
  padding: 0;
  font-size: 11pt;
  font-weight: 500;
  line-height: 1.35;
  white-space: normal;
  background-image: none;
  -webkit-text-fill-color: rgba(237, 151, 151, 0.3);
  color: rgba(237, 151, 151, 0.3);
}

body.reflow .bg-figure {
  /*
    Mobile hero — sized large with bleed; anchored on the optical center of
    .connect / AURA / glass (not the full PNG box, which includes upper rays).
    Measured on bg-figure.png 633×718: bright COM ≈ (321, 353) → 50.7% × 49.2%.
  */
  --bg-w: 694px;
  --bg-optic-x: 50.7%;
  --bg-optic-y: 49.2%;
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--bg-w);
  max-width: none;
  height: auto;
  aspect-ratio: 633 / 718;
  margin: 0;
  transform: translate(calc(-1 * var(--bg-optic-x)), calc(-1 * var(--bg-optic-y)));
  flex: none;
  z-index: 0;
  pointer-events: none;
}

body.reflow .cta {
  position: relative;
  top: auto;
  bottom: auto;
  left: auto;
  translate: none;
  z-index: 2;
  /* Figma 45:8 — 288×60 overlaid on lower hero; bg stays put */
  width: 288px;
  max-width: 100%;
  height: 60px;
  /* keep CTA in the lower half of the 100dvh frame, over the logo */
  margin-top: auto;
  margin-bottom: max(28px, env(safe-area-inset-bottom));
  flex: 0 0 auto;
}

body.reflow .cta__label {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Figma 45:9 — 18px, tracking -1 */
  font-size: 18px;
  letter-spacing: -1px;
}

/* Short landscape phones — tighter vertical rhythm */
@media (max-width: 720px) and (max-height: 560px) {
  body.reflow .desktop {
    padding-top: 12px;
    padding-bottom: 16px;
  }

  body.reflow .bg-figure {
    --bg-w: 560px;
  }

  body.reflow .cta {
    margin-bottom: 16px;
  }
}