@font-face{
    font-family:"Vatsal-logo";
    src:url("../../assets/data/vatsal-logo-font.woff2") format("woff2");
    font-display:swap;
}
:root {
      color-scheme: dark;
      --bg: #000;
      --text: #f7fbff;
      --soft: rgba(247, 251, 255, 0.72);
      --muted: rgba(247, 251, 255, 0.48);
      --line: rgba(255, 255, 255, 0.14);
      --glass: rgba(255, 255, 255, 0.075);
      --glass-strong: rgba(255, 255, 255, 0.12);
      --cyan: #7df9ff;
      --blue: #7aa2ff;
      --gold: #ffd27a;
      --rose: #ff4f8b;
      --violet: #b679ff;
      --green: #78ffb5;
      --ease: cubic-bezier(.19, 1, .22, 1);
    }

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

    html {
      background: #000;
      scroll-behavior: smooth;
    }

    body {
      min-height: 100vh;
      overflow-x: hidden;
      background:
        radial-gradient(circle at 12% 16%, rgba(125, 249, 255, 0.16), transparent 30rem),
        radial-gradient(circle at 88% 8%, rgba(255, 79, 139, 0.14), transparent 28rem),
        radial-gradient(circle at 56% 70%, rgba(182, 121, 255, 0.1), transparent 36rem),
        #000;
      color: var(--text);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      letter-spacing: 0;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -3;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
      background-size: 72px 72px;
      mask-image: radial-gradient(circle at center, black, transparent 82%);
    }

    button,
    input {
      font: inherit;
    }

    button {
      cursor: pointer;
    }

    canvas#stars {
      position: fixed;
      inset: 0;
      z-index: -2;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    .aurora {
      position: fixed;
      inset: -20% -10%;
      z-index: -1;
      opacity: .8;
      pointer-events: none;
      background:
        radial-gradient(ellipse at 30% 20%, rgba(125, 249, 255, .18), transparent 35%),
        radial-gradient(ellipse at 70% 42%, rgba(255, 79, 139, .12), transparent 34%),
        radial-gradient(ellipse at 48% 82%, rgba(255, 210, 122, .1), transparent 38%);
      filter: blur(36px);
      animation: drift 16s var(--ease) infinite alternate;
    }

    .grain {
      position: fixed;
      inset: 0;
      z-index: 20;
      pointer-events: none;
      opacity: .08;
      mix-blend-mode: screen;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
    }

    .sound-toggle {
      position: fixed;
      top: 18px;
      right: 18px;
      z-index: 10;
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 999px;
      color: var(--text);
      background: rgba(255,255,255,.08);
      backdrop-filter: blur(18px);
      box-shadow: 0 18px 60px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.16);
      transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
    }

    .sound-toggle:hover,
    .sound-toggle:focus-visible {
      transform: translateY(-2px);
      border-color: rgba(125,249,255,.55);
      background: rgba(125,249,255,.12);
      outline: none;
    }

    .sound-toggle svg {
      width: 21px;
      height: 21px;
    }
    .page {
      position: relative;
      min-height: 100vh;
    }

    .hero {
      min-height: 100svh;
      display: grid;
      align-items: center;
      padding: 76px 18px 56px;
      overflow: hidden;
    }

    .hero-inner {
      width: min(1120px, 100%);
      margin: 0 auto;
      text-align: center;
    }

    
    h1 {
      position: relative;
      max-width: 980px;
      margin: 0 auto;
      font-size: clamp(4.2rem, 13vw, 11rem);
      line-height: .82;
      font-weight: 850;
      letter-spacing: 0;
      text-wrap: balance;
      text-shadow: 0 0 70px rgba(125,249,255,.16);
    }

    .gradient-text {
      background: linear-gradient(95deg, #fff 8%, #9efcff 36%, #ffd27a 65%, #ff79ad 94%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .subtitle {
      position: relative;
      max-width: 720px;
      margin: 30px auto 0;
      color: var(--soft);
      font-size: clamp(1.05rem, 2.5vw, 1.45rem);
      line-height: 1.6;
    }

    .birth-console {
      position: relative;
      width: min(720px, 100%);
      margin: 54px auto 0;
      padding: 12px;
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      border: 1px solid rgba(255,255,255,.16);
      border-radius: 28px;
      background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.045));
      box-shadow:
        0 30px 110px rgba(0,0,0,.44),
        0 0 80px rgba(125,249,255,.14),
        inset 0 1px 0 rgba(255,255,255,.18);
      backdrop-filter: blur(22px);
    }

    .birth-console::before {
      content: "";
      position: absolute;
      inset: -1px;
      border-radius: inherit;
      pointer-events: none;
      background: linear-gradient(90deg, transparent, rgba(125,249,255,.38), rgba(255,210,122,.22), transparent);
      mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      mask-composite: exclude;
      padding: 1px;
    }

    .field-wrap {
      position: relative;
    }

    .field-wrap label {
      position: absolute;
      left: 22px;
      top: 12px;
      color: var(--muted);
      font-size: .72rem;
      font-weight: 800;
      letter-spacing: .15em;
      text-transform: uppercase;
    }

    input[type="date"] {
      width: 100%;
      min-height: 72px;
      padding: 28px 20px 10px;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 20px;
      color: var(--text);
      background: rgba(0,0,0,.48);
      font-size: 1.12rem;
      font-weight: 700;
      outline: none;
      transition: border-color .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
    }

    input[type="date"]:focus {
      border-color: rgba(125,249,255,.72);
      background: rgba(0,0,0,.62);
      box-shadow: 0 0 0 5px rgba(125,249,255,.1), 0 0 44px rgba(125,249,255,.18);
    }

    input[type="date"]::-webkit-calendar-picker-indicator {
      filter: invert(1);
      opacity: .72;
      cursor: pointer;
    }

    .primary-btn,
    .secondary-btn {
      min-height: 68px;
      border: 0;
      border-radius: 20px;
      color: #03060a;
      background: linear-gradient(135deg, #f8ffff, #7df9ff 42%, #ffd27a);
      font-weight: 850;
      letter-spacing: 0;
      box-shadow: 0 18px 60px rgba(125,249,255,.22);
      transition: transform .35s var(--ease), filter .35s var(--ease), box-shadow .35s var(--ease);
    }

    .primary-btn:hover,
    .primary-btn:focus-visible,
    .secondary-btn:hover,
    .secondary-btn:focus-visible {
      transform: translateY(-3px);
      filter: saturate(1.12) brightness(1.06);
      box-shadow: 0 24px 80px rgba(125,249,255,.28);
      outline: none;
    }

    .error {
      min-height: 20px;
      margin-top: 12px;
      color: #ff9fbd;
      font-size: .95rem;
    }

    .scroll-cue {
      position: absolute;
      bottom: 22px;
      left: 50%;
      transform: translateX(-50%);
      color: var(--muted);
      font-size: .72rem;
      font-weight: 800;
      letter-spacing: .16em;
      text-transform: uppercase;
      opacity: 0;
      transition: opacity .8s var(--ease);
    }

    body.revealed .scroll-cue {
      opacity: .85;
    }

  /* REPLACE the existing .story rule */
.story {
  opacity: 0;
  transform: translateY(40px);
  pointer-events: none;
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  visibility: hidden;    /* ADD THIS — removes it from scroll height */
  height: 0;             /* ADD THIS — collapses the story area */
  overflow: clip;      /* ADD THIS */
}

body.revealed .story {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;   /* ADD THIS */
  height: auto;          /* ADD THIS */
  overflow: visible;     /* ADD THIS */
}

    .section {
      position: relative;
      min-height: 100svh;
      display: grid;
      align-items: center;
      padding: 110px 18px;
      overflow: clip;
    }

    .section-inner {
      width: min(1320px, 100%);
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }

    .section-title {
      max-width: 860px;
      font-size: clamp(2.7rem, 8vw, 7rem);
      line-height: .92;
      font-weight: 850;
      letter-spacing: 0;
      text-wrap: balance;
    }

    .section-copy {
      max-width: 690px;
      margin-top: 24px;
      color: var(--soft);
      font-size: clamp(1rem, 2vw, 1.28rem);
      line-height: 1.75;
    }

    .mega-stat {
      margin: 34px 0 0;
      font-size: clamp(4.2rem, 17vw, 14rem);
      line-height: .84;
      font-weight: 900;
      letter-spacing: 0;
      background: linear-gradient(110deg, #fff 0%, var(--cyan) 45%, var(--gold) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      filter: drop-shadow(0 0 48px rgba(125,249,255,.17));
    }

    .unit {
      display: block;
      margin-top: 18px;
      color: var(--muted);
      font-size: .82rem;
      font-weight: 850;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

  /* REPLACE .glass-grid */
.glass-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;             /* slightly more breathing room */
  margin-top: 38px;
  align-items: stretch;  /* ADD — makes cards same height per row */
  width: 100%;          /* ADD THIS */
  box-sizing: border-box; /* ADD THIS */
}

/* REPLACE .metric-card and .metric-card::after */
.metric-card{
    min-height:auto;
    padding:20px 0;
    border:none;
    border-radius:0;
    background:none;
    box-shadow:none;
    backdrop-filter:none;
}
.metric-card::before,
.metric-card::after{
    display:none;
}
/* Inner clip wrapper so glow bleeds but content stays tidy */

    .metric-label {
      color: var(--muted);
      font-size: .76rem;
      font-weight: 850;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

   .metric-value {
  margin-top: 16px;

  font-size: clamp(1.8rem, 3.6vw, 3.8rem);
  line-height: .92;
  font-weight: 900;

  letter-spacing: -.04em;

  transition: color .2s ease;

  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;

  max-width: 100%;
}
.metric-value span {
  display: inline-block;
  max-width: 100%;
}

.metric-value small {
  display: block;

  margin-top: 10px;

  font-size: .78rem;
  font-weight: 800;

  letter-spacing: .16em;
  text-transform: uppercase;

  color: rgba(255,255,255,.52);
}
    .metric-note {
      margin-top: 12px;
      color: var(--soft);
      line-height: 1.5;
    }

    .timeline-bg {
      position: absolute;
      inset: 0;
      opacity: .52;
      pointer-events: none;
      background:
        repeating-linear-gradient(90deg, transparent 0 110px, rgba(125,249,255,.11) 111px, transparent 112px),
        linear-gradient(180deg, transparent, rgba(125,249,255,.08), transparent);
      mask-image: linear-gradient(90deg, transparent, black 20%, black 80%, transparent);
      animation: timelineMove 18s linear infinite;
    }

    .body-layout,
    .space-layout,
    .world-layout,
    .generation-layout {
      display: grid;
      grid-template-columns:
    minmax(340px, .9fr)
    minmax(520px, 1.1fr);

  gap: clamp(30px, 5vw, 90px);
      align-items: center;
    }

    .body-layout {
      grid-template-columns: minmax(0, 680px) minmax(260px, 1fr);
      gap: clamp(24px, 4vw, 54px);
    }

    .body-layout .glass-grid {
      grid-template-columns: repeat(2, minmax(min(100%, 250px), 1fr));
    }

    .body-layout .metric-card {
      min-width: 0;
      min-height: clamp(132px, 11vw, 154px);
      animation: vitalCardGlow 4.8s ease-in-out infinite;
      animation-delay: calc(var(--beat-delay, 0) * .18s);
    }

    .body-layout .metric-card:nth-child(1) { --beat-delay: 0; }
    .body-layout .metric-card:nth-child(2) { --beat-delay: 1; }
    .body-layout .metric-card:nth-child(3) { --beat-delay: 2; }
    .body-layout .metric-card:nth-child(4) { --beat-delay: 3; }
    .body-layout .metric-card:nth-child(5) { --beat-delay: 4; }
    .body-layout .metric-card:nth-child(6) { --beat-delay: 5; }

    .body-layout .metric-value {
      font-size: clamp(2.45rem, 4.7vw, 4rem);
      max-width: 100%;
      transform-origin: left center;
    }

    .body-layout .visual-stage {
      min-height: clamp(390px, 44vw, 540px);
      overflow: visible;
    }

    .visual-stage {
      position: relative;
      min-height: 540px;
      display: grid;
      place-items: center;
    }

    .heart {
      position: relative;
      width: min(54vw, 250px);
      aspect-ratio: 1;
      transform: rotate(-45deg);
      background: linear-gradient(135deg, #ff2c75, #ff8fb3);
      box-shadow: 0 0 80px rgba(255,79,139,.45);
      animation: heartbeat 1.35s ease-in-out infinite;
    }

    .heart::before,
    .heart::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: inherit;
    }

    .heart::before { top: -50%; left: 0; }
    .heart::after { left: 50%; top: 0; }

    .breath-ring,
    .breath-ring::before,
    .breath-ring::after {
      position: absolute;
      inset: 9%;
      content: "";
      border: 1px solid rgba(125,249,255,.22);
      border-radius: 50%;
      animation: breath 4.8s var(--ease) infinite;
    }

    .breath-ring::before {
      inset: 14%;
      border-color: rgba(255,255,255,.16);
      animation-delay: -1.1s;
    }

    .breath-ring::after {
      inset: 28%;
      border-color: rgba(255,210,122,.2);
      animation-delay: -2.2s;
    }

    .eye {
      position: absolute;
      bottom: 58px;
      right: 10%;
      width: 132px;
      height: 70px;
      border: 1px solid rgba(255,255,255,.16);
      border-radius: 100% 0;
      transform: rotate(45deg);
      background: rgba(255,255,255,.05);
      box-shadow: 0 0 40px rgba(125,249,255,.13);
      overflow: hidden;
    }

    .eye::before {
      content: "";
      position: absolute;
      inset: 19px 50px;
      border-radius: 50%;
      background: radial-gradient(circle, #fff 0 10%, #7df9ff 12% 40%, #071017 43%);
      animation: look 6s ease-in-out infinite;
    }

    .eye::after {
      content: "";
      position: absolute;
      inset: -5px;
      background: #030407;
      transform: translateY(-105%);
      animation: blink 5.2s ease-in-out infinite;
    }

    .blood-stream {
      position: absolute;
      left: 4%;
      bottom: 12%;
      width: 68%;
      height: 46px;
      border-radius: 999px;
      background: linear-gradient(90deg, transparent, rgba(255,79,139,.1), transparent);
      overflow: hidden;
      transform: rotate(-11deg);
    }

    .blood-stream span {
      position: absolute;
      top: 13px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #ff4f8b;
      box-shadow: 0 0 18px rgba(255,79,139,.75);
      animation: blood 4.8s linear infinite;
      animation-delay: calc(var(--i) * -.65s);
    }

    .solar-system {
      position: relative;
      width: min(90vw, 720px);
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background:
        radial-gradient(circle at center, rgba(255,210,122,.18), transparent 17%),
        radial-gradient(circle, rgba(125,249,255,.08), transparent 64%);
      box-shadow: 0 0 100px rgba(125,249,255,.12);
      opacity: .88;
    }

    .sun {
      width: 88px;
      aspect-ratio: 1;
      border-radius: 50%;
      background: radial-gradient(circle, #fff7cc, #ffd27a 40%, #ff7a3d 72%);
      box-shadow: 0 0 80px rgba(255,210,122,.62);
    }

    .orbit {
      position: absolute;
      border: 1px solid rgba(255,255,255,.15);
      border-radius: 50%;
      transform: rotateX(64deg);
    }

    .orbit.one { inset: 18%; animation: spin 14s linear infinite; }
    .orbit.two { inset: 4%; animation: spin 22s linear infinite reverse; border-color: rgba(125,249,255,.2); }
    .orbit.three { inset: 31%; animation: spin 9s linear infinite; border-color: rgba(255,79,139,.18); }

    .planet {
      position: absolute;
      top: -9px;
      left: 50%;
      width: 18px;
      aspect-ratio: 1;
      border-radius: 50%;
      background: var(--cyan);
      box-shadow: 0 0 28px var(--cyan);
    }

    .moon {
      position: absolute;
      right: 17%;
      top: 23%;
      width: 46px;
      aspect-ratio: 1;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, #fff, #aab1bd 62%, #343943);
      box-shadow: 0 0 36px rgba(255,255,255,.18);
      animation: float 5s var(--ease) infinite alternate;
    }

    .earth {
      width: min(74vw, 380px);
      aspect-ratio: 1;
      border-radius: 50%;
      background:
        radial-gradient(circle at 42% 35%, rgba(255,255,255,.8), transparent 0 6%, transparent 8%),
        radial-gradient(circle at 38% 50%, #78ffb5 0 12%, transparent 13%),
        radial-gradient(circle at 63% 42%, #78ffb5 0 10%, transparent 11%),
        radial-gradient(circle at 58% 67%, #78ffb5 0 7%, transparent 8%),
        linear-gradient(135deg, #103ca8, #07162e 64%, #02040a);
      box-shadow: inset -54px -26px 80px rgba(0,0,0,.6), 0 0 90px rgba(122,162,255,.28);
      animation: earthSpin 16s linear infinite;
    }

    .graph-lines {
      position: absolute;
      inset: auto 8% 4% 8%;
      height: 160px;
      border-bottom: 1px solid rgba(255,255,255,.18);
      border-left: 1px solid rgba(255,255,255,.12);
    }

    .graph-lines span {
      position: absolute;
      bottom: 0;
      width: 10px;
      border-radius: 999px 999px 0 0;
      background: linear-gradient(to top, var(--cyan), var(--gold));
      box-shadow: 0 0 22px rgba(125,249,255,.25);
      height: var(--h);
      left: var(--x);
      transform-origin: bottom;
      animation: rise 1.8s var(--ease) both;
      animation-delay: calc(var(--i) * .08s);
    }

    .generation-tape {
      position: relative;
      display: grid;
      gap: 14px;
      transform: rotate(-2deg);
    }

    .tape-row {
      display: flex;
      gap: 14px;
      white-space: nowrap;
      animation: marquee 28s linear infinite;
    }

    .tape-row:nth-child(2) {
      animation-direction: reverse;
      opacity: .72;
    }

    .tape-chip {
      flex: 0 0 auto;
      padding: 16px 20px;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 999px;
      color: var(--soft);
      background: rgba(255,255,255,.07);
      backdrop-filter: blur(12px);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
    }

    .ending {
      text-align: center;
    }

    .ending .section-title {
      margin: 0 auto;
      max-width: 1040px;
    }

    .ending .section-copy {
      margin-left: auto;
      margin-right: auto;
      font-size: clamp(1.25rem, 3vw, 2.1rem);
      color: rgba(255,255,255,.84);
    }

    .slow-star {
      position: absolute;
      width: 2px;
      height: 2px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 0 18px #fff;
      animation: slowStar 12s linear infinite;
      animation-delay: var(--d);
      left: var(--x);
      top: var(--y);
    }

   .share-section{
    width:min(1000px,100%);
    margin:40px auto 0;
    padding:0;
    border:none;
    border-radius:0;
    background:none;
    box-shadow:none;
    backdrop-filter:none;
}

    .share-section h2 {
      font-size: clamp(2.6rem, 8vw, 5.6rem);
      line-height: .9;
      letter-spacing: 0;
    }

    .summary-line {
      margin-top: 20px;
      color: var(--soft);
      font-size: clamp(1rem, 2vw, 1.2rem);
      line-height: 1.7;
    }

    .summary-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-top: 30px;
    }

    .summary-stat {
      padding: 18px;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 18px;
      background: rgba(0,0,0,.28);
    }

    .summary-stat strong {
      display: block;
      font-size: clamp(1.4rem, 4vw, 2.8rem);
      line-height: 1;
    }

    .summary-stat span {
      display: block;
      margin-top: 8px;
      color: var(--muted);
      font-size: .76rem;
      font-weight: 850;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .share-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: center;
      margin-top: 34px;
    }

    .secondary-btn {
      min-height: 54px;
      padding: 0 18px;
      color: var(--text);
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.08);
      box-shadow: none;
      backdrop-filter: blur(12px);
    }

    .secondary-btn.primary-share {
      color: #03060a;
      border: 0;
      background: linear-gradient(135deg, #f8ffff, #7df9ff 48%, #ffd27a);
    }

    .reveal {
      opacity: 0;
      transform: translateY(46px) scale(.985);
      transition: opacity .9s var(--ease), transform .9s var(--ease);
    }

    .reveal.visible {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .parallax {
      will-change: transform;
    }
/* Heartbeat EKG pulse ripple on the heart visual */
.heart-pulse-ring {
  position: absolute;
  width: min(54vw, 250px);
  aspect-ratio: 1;
  border-radius: 38% 62% 62% 38% / 38% 38% 62% 62%;  /* matches heart shape loosely */
  border: 2px solid rgba(255, 79, 139, 0.55);
  animation: pulseRing 1.35s ease-in-out infinite;
  pointer-events: none;
}

.heart-pulse-ring:nth-child(2) {
  animation-delay: -0.45s;
  opacity: 0.5;
}

@keyframes pulseRing {
  0%   { transform: scale(1);    opacity: .75; }
  60%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}


.metric-value.counting {
  animation: countFlash .08s ease-in-out;
}

@keyframes countFlash {
  0%   { opacity: 1; }
  50%  { opacity: 0.55; color: var(--cyan); }
  100% { opacity: 1; }
}

/* Floating number particles (optional — add to .section#body) */
@keyframes floatUp {
  0%   { transform: translateY(0) scale(1); opacity: .7; }
  100% { transform: translateY(-120px) scale(.4); opacity: 0; }
}

.float-particle {
  position: absolute;
  font-size: .7rem;
  font-weight: 900;
  color: var(--rose);
  pointer-events: none;
  animation: floatUp 2.2s var(--ease) forwards;
}
@keyframes vitalCardGlow {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.18),
      0 18px 70px rgba(0,0,0,.32),
      0 0 0 1px rgba(255,255,255,.06);
    transform: translateY(0);
  }
  8% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.2),
      0 22px 76px rgba(0,0,0,.35),
      0 0 30px var(--glow, rgba(125,249,255,.24));
    transform: translateY(-2px);
  }
  15%, 28% { transform: translateY(0); }
}

    @keyframes drift {
      from { transform: translate3d(-2%, -1%, 0) scale(1); }
      to { transform: translate3d(2%, 1.5%, 0) scale(1.05); }
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    @keyframes counterSpin {
      to { transform: rotate(-360deg); }
    }

    @keyframes breathe {
      0%, 100% { transform: translate(-50%, -50%) scale(.98); opacity: .38; }
      50% { transform: translate(-50%, -50%) scale(1.04); opacity: .8; }
    }

    @keyframes timelineMove {
      from { background-position: 0 0, 0 0; }
      to { background-position: 460px 0, 0 0; }
    }

    @keyframes heartbeat {
      0%, 100% { transform: rotate(-45deg) scale(1); }
      12% { transform: rotate(-45deg) scale(1.12); }
      22% { transform: rotate(-45deg) scale(.96); }
      34% { transform: rotate(-45deg) scale(1.07); }
      48% { transform: rotate(-45deg) scale(1); }
    }

    @keyframes breath {
      0%, 100% { transform: scale(.9); opacity: .28; }
      50% { transform: scale(1.13); opacity: .82; }
    }

    @keyframes blink {
      0%, 88%, 100% { transform: translateY(-105%); }
      91%, 94% { transform: translateY(0); }
    }

    @keyframes look {
      0%, 100% { transform: translate(-8px, 0); }
      50% { transform: translate(8px, 0); }
    }

    @keyframes blood {
      from { left: -20px; opacity: 0; }
      8%, 88% { opacity: 1; }
      to { left: calc(100% + 20px); opacity: 0; }
    }

    @keyframes float {
      from { transform: translateY(-14px); }
      to { transform: translateY(16px); }
    }

    @keyframes earthSpin {
      from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
      to { background-position: 80px 0, -120px 0, 130px 0, -70px 0, 0 0; }
    }

    @keyframes rise {
      from { transform: scaleY(0); }
      to { transform: scaleY(1); }
    }

    @keyframes marquee {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }

    @keyframes slowStar {
      from { transform: translate3d(-10vw, 10vh, 0); opacity: 0; }
      15%, 75% { opacity: .8; }
      to { transform: translate3d(28vw, -22vh, 0); opacity: 0; }
    }

    @media (min-width: 760px) {
      .birth-console {
        grid-template-columns: 1fr 220px;
      }
    }

    @media (max-width: 1050px) {
      .body-layout {
        grid-template-columns: 1fr;
      }

      .body-layout .visual-stage {
        order: -1;
        min-height: 360px;
      }
    }

    @media (max-width: 900px) {
      .body-layout,
      .space-layout,
      .world-layout,
      .generation-layout {
        grid-template-columns: 1fr;
      }

      .visual-stage {
        min-height: 420px;
        order: -1;
      }

      .glass-grid {
        grid-template-columns: 1fr;
      }

      .body-layout .glass-grid {
        grid-template-columns: 1fr;
      }

      .summary-grid {
        grid-template-columns: 1fr;
      }

      .metric-card {
        min-height: 132px;
      }
    }

    @media (max-width: 560px) {
      .hero {
        padding-top: 78px;
      }

      h1 {
        max-width: 350px;
        font-size: clamp(3.35rem, 17vw, 4.05rem);
        line-height: .88;
      }

      .subtitle {
        max-width: 330px;
        font-size: 1rem;
        line-height: 1.55;
      }

      .birth-console {
        width: min(100%, 356px);
        border-radius: 24px;
      }

      input[type="date"],
      .primary-btn {
        min-height: 66px;
      }

      .section {
        padding: 82px 16px;
      }

      .share-actions {
        display: grid;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      *,
      *::before,
      *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
      }
    }