/* Generated by scripts/build-css-bundles.mjs. Edit the source files, not this bundle. */

/* source: /content/components/interactions/interactions.css */
/* ===================================
   MODERN INTERACTIONS (LIKES & COMMENTS)
   =================================== */

/* --- Like Button (Premium & Compact) --- */
.btn-modern-clap {
  --clap-button-min-width: var(--size-110);

  display: inline-flex;
  align-items: center;
  gap: var(--size-r-0-45);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--clr-blue-600) 15%, transparent),
    color-mix(in srgb, var(--clr-violet-500) 15%, transparent)
  );
  backdrop-filter: blur(var(--size-12));
  -webkit-backdrop-filter: blur(var(--size-12));
  border: var(--size-1) solid color-mix(in srgb, var(--clr-white) 12%, transparent);
  color: var(--clr-slate-300);
  padding: var(--size-r-0-4) var(--size-r-0-9);
  border-radius: var(--size-999);
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.4s var(--ease-standard),
    border-color 0.4s var(--ease-standard),
    box-shadow 0.4s var(--ease-standard),
    color 0.4s var(--ease-standard),
    transform 0.4s var(--ease-standard);
  font-size: var(--type-sm);
  margin-top: var(--size-r-0-5);
  box-shadow:
    0 var(--size-2) var(--size-12) color-mix(in srgb, var(--clr-black) 30%, transparent),
    inset 0 var(--size-1) var(--size-1) color-mix(in srgb, var(--clr-white) 5%, transparent);
  position: relative;
  overflow: visible;
  min-width: var(--clap-button-min-width);
  pointer-events: auto;
  user-select: none;
}

.btn-modern-clap:hover:not(:disabled) {
  transform: translateY(calc(var(--size-1) * -1)) scale(1.03);
  border-color: color-mix(in srgb, var(--clr-blue-400) 40%, transparent);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--clr-blue-600) 25%, transparent),
    color-mix(in srgb, var(--clr-violet-500) 25%, transparent)
  );
  box-shadow:
    0 var(--size-6) var(--size-20) color-mix(in srgb, var(--clr-blue-500) 25%, transparent),
    0 0 var(--size-30) color-mix(in srgb, var(--clr-violet-500) 8%, transparent);
  color: var(--clr-white);
}

.btn-modern-clap.is-liked {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--clr-blue-500) 25%, transparent),
    color-mix(in srgb, var(--clr-violet-500) 25%, transparent)
  );
  border-color: color-mix(in srgb, var(--clr-blue-400) 50%, transparent);
  color: var(--clr-red-400);
  cursor: default;
}

.clap-icon-wrapper {
  position: relative;
  width: var(--size-18);
  height: var(--size-18);
  display: flex;
  align-items: center;
  justify-content: center;
}

.clap-icon-main {
  width: 100%;
  height: 100%;
  transition:
    fill 0.3s var(--ease-standard),
    filter 0.3s var(--ease-standard),
    stroke 0.3s var(--ease-standard),
    transform 0.3s var(--ease-standard);
  stroke: var(--clr-slate-400);
  stroke-width: 2.5px;
}

.btn-modern-clap:hover .clap-icon-main {
  stroke: var(--clr-blue-400);
}

.is-liked .clap-icon-main {
  fill: var(--clr-red-500);
  stroke: var(--clr-red-500);
  filter: drop-shadow(0 0 var(--size-8) color-mix(in srgb, var(--clr-red-500) 60%, transparent));
  animation: heartbeat 1.2s ease-in-out infinite;
}

@keyframes heartbeat {
  0%,
  100% {
    transform: scale(1);
  }

  15% {
    transform: scale(1.25);
  }

  30% {
    transform: scale(1.1);
  }

  45% {
    transform: scale(1.35);
  }
}

.clap-icon-bloom {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  fill: var(--clr-red-400);
  animation: clapBloomNano 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.clap-icon-particle {
  position: absolute;
  top: -80%;
  left: 50%;
  transform: translateX(-50%);
  width: var(--size-14);
  height: var(--size-14);
  pointer-events: none;
  opacity: 0;
  color: var(--clr-red-500);
  animation: clapParticleNano 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes clapBloomNano {
  0% {
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0.8;
  }

  100% {
    transform: translate(-50%, -50%) scale(3.5);
    opacity: 0;
  }
}

@keyframes clapParticleNano {
  0% {
    transform: translateX(-50%) translateY(0) scale(0) rotate(0);
    opacity: 0;
  }

  30% {
    opacity: 1;
    transform: translateX(-50%) translateY(calc(var(--size-12) * -1)) scale(1.1) rotate(10deg);
  }

  100% {
    transform: translateX(-50%) translateY(calc(var(--size-32) * -1)) scale(1.4) rotate(45deg);
    opacity: 0;
  }
}

.btn-modern-clap.is-animating {
  animation: clapBounceNano 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes clapBounceNano {
  0%,
  100% {
    transform: translateY(calc(var(--size-1) * -1)) scale(1.03);
  }

  45% {
    transform: translateY(calc(var(--size-6) * -1)) scale(1.15);
  }

  75% {
    transform: translateY(0) scale(0.95);
  }
}

.clap-count {
  font-family: var(--font-mono);
  font-size: var(--type-xs);
  font-weight: 700;
}

/* --- Comment Section --- */
.comment-section {
  border-top: var(--size-1) solid color-mix(in srgb, var(--clr-blue-500) 20%, transparent);
  padding-top: var(--size-r-3);
  margin-top: var(--size-r-2);
}

.comment-title {
  font-size: var(--type-2xl);
  margin-bottom: var(--size-r-2);
  color: var(--clr-white);
}

.comment-form {
  background: color-mix(in srgb, var(--clr-blue-500) 5%, transparent);
  padding: var(--size-r-1-5);
  border-radius: var(--size-20);
  border: var(--size-1) solid color-mix(in srgb, var(--clr-blue-500) 20%, transparent);
  margin-bottom: var(--size-r-3);
}

.form-group {
  margin-bottom: var(--size-r-1);
}

.comment-input,
.comment-textarea {
  width: 100%;
  background-color: color-mix(in srgb, var(--clr-black) 40%, transparent);
  border: var(--size-1) solid color-mix(in srgb, var(--clr-blue-500) 30%, transparent);
  border-radius: var(--size-12);
  padding: var(--size-r-0-75) var(--size-r-1);
  color: var(--clr-white);
  font-family: inherit;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.comment-input:focus,
.comment-textarea:focus {
  outline: none;
  border-color: var(--clr-blue-500);
  background-color: color-mix(in srgb, var(--clr-black) 60%, transparent);
  box-shadow: 0 0 var(--size-15) color-mix(in srgb, var(--clr-blue-500) 20%, transparent);
}

.comment-textarea {
  min-height: var(--size-120);
  resize: vertical;
}

.comment-error {
  color: var(--clr-red-400);
  font-size: var(--type-sm);
  margin-bottom: var(--size-r-1);
}

.comment-success {
  margin: 0;
  color: var(--state-success-text, #86efac);
}

.comment-turnstile {
  min-height: 65px;
}

.comment-item {
  background: color-mix(in srgb, var(--clr-white) 3%, transparent);
  padding: var(--size-r-1-25);
  border-radius: var(--size-16);
  border-left: var(--size-4) solid var(--clr-blue-500);
  margin-bottom: var(--size-r-1-5);
  animation: fadeInInteraction 0.5s ease-out;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--size-r-0-5);
}

.comment-author {
  color: var(--clr-blue-300);
  font-weight: 700;
}

.comment-date {
  font-size: var(--type-xs);
  color: var(--clr-slate-400);
}

.comment-content {
  color: var(--clr-slate-200);
  line-height: var(--leading-body);
  white-space: pre-wrap;
}

.no-comments {
  text-align: center;
  color: var(--clr-slate-400);
  font-style: italic;
  padding: var(--size-r-2);
}

@keyframes fadeInInteraction {
  from {
    opacity: 0;
    transform: translateY(var(--size-10));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (width <= 640px) {
  .btn-modern-clap {
    backdrop-filter: blur(var(--size-8));
    -webkit-backdrop-filter: blur(var(--size-8));
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-modern-clap,
  .clap-icon-main,
  .comment-input,
  .comment-textarea {
    transition: none;
  }

  .is-liked .clap-icon-main,
  .clap-icon-bloom,
  .clap-icon-particle,
  .btn-modern-clap.is-animating,
  .comment-item {
    animation: none;
  }

  .btn-modern-clap:hover:not(:disabled) {
    transform: none;
  }

  .clap-icon-bloom,
  .clap-icon-particle {
    opacity: 0;
  }
}

.article-actions {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: var(--size-r-0-5) 0;
}

/* source: /content/styles/pages/common.css */
@layer pages {
  /* Shared route-page motion and mobile blur safety rules. */
  @media (prefers-reduced-motion: reduce) {
    .video-card,
    .blog-card,
    .blog-card::before,
    .blog-card::after,
    .blog-card-image,
    .card-category::before,
    .blog-card .card-title,
    .blog-card .btn-read,
    body.blog-page .btn-back,
    .scroll-to-top-btn,
    .scroll-to-top-btn::before,
    .about-main .btn,
    .about-main .btn-primary::before,
    .social-item,
    .stack-tag,
    .mini-card,
    .projects-discovery__chip,
    .hud-category--button,
    .hud-pill--button,
    .hud-related-link,
    .hud-panel,
    .section-view.active,
    .confirm-overlay,
    .confirm-dialog,
    .nav-item,
    .btn,
    .memory-card,
    .user-card,
    .gallery-item,
    .kv-tab,
    .toast,
    .toast.is-leaving {
      animation: none !important;
      transition: none !important;
    }

    .video-card:hover,
    .blog-card:hover,
    .blog-card:hover .blog-card-image,
    .blog-card .btn-read:hover,
    body.blog-page .btn-back:hover,
    .scroll-to-top-btn,
    .scroll-to-top-btn.visible,
    .scroll-to-top-btn:hover,
    .about-main .btn-primary:hover,
    .stack-tag:hover,
    .projects-discovery__chip:hover,
    .projects-discovery__chip:focus-visible,
    .hud-category--button:hover,
    .hud-category--button:focus-visible,
    .hud-pill--button:hover,
    .hud-pill--button:focus-visible,
    .hud-related-link:hover,
    .gallery-item:hover,
    .toast.is-leaving {
      transform: none;
    }

    .blog-skeleton-line,
    .launch-skeleton__tile,
    .launch-overlay-card,
    .scroll-hint,
    .typing-dot {
      animation: none !important;
    }
  }

  @media (width <= 640px) {
    .projects-discovery-card {
      -webkit-backdrop-filter: blur(var(--size-10));
      backdrop-filter: blur(var(--size-10));
    }

    .hud-panel.visible {
      -webkit-backdrop-filter: var(--blur-md);
      backdrop-filter: var(--blur-md);
    }

    .blog-card,
    .blog-article,
    body.blog-page .btn-back,
    .about-main .btn-outline {
      -webkit-backdrop-filter: blur(var(--size-8));
      backdrop-filter: blur(var(--size-8));
    }

    .app-popup.visible {
      -webkit-backdrop-filter: blur(var(--size-8));
      backdrop-filter: blur(var(--size-8));
    }
  }
}

/* source: /content/styles/pages/home.css */
@layer pages {
  /* ================================================================
   HOME / PORTFOLIO COMBINED STYLES
   Combines Hero (Section 1) and Portfolio Notes (Section 3)
   into a single, cohesive cosmic design.
     ================================================================ */

  body {
    --home-type-kicker: var(--type-xs);
    --home-type-context: clamp(var(--type-sm), 0.82rem + 0.22vw, var(--type-body));
    --home-type-hero: clamp(2.25rem, 4.8vw, 4.5rem);
    --home-type-section: clamp(2rem, 4.2vw, 3.5rem);
    --home-type-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
    --home-type-copy: clamp(var(--type-body), 0.95rem + 0.18vw, var(--type-lg));
    --home-type-action: var(--type-body);
    --home-motion-enter: 560ms;
    --home-motion-exit: 420ms;
    --home-motion-fade: 400ms;
    --home-motion-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
    --home-motion-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  }

  html.home-page.snap-page {
    overscroll-behavior-y: none;
  }

  /* ── Global Background Effects (Aurora, Stars, Scanline) ── */
  .home-cosmos-bg {
    position: fixed;
    inset: -15%;
    z-index: calc(var(--z-behind-deep) - 1);
    overflow: hidden;
    pointer-events: none;
    background:
      radial-gradient(circle, rgb(220 232 255 / 14%) 0 0.7px, transparent 1.2px),
      radial-gradient(circle, rgb(132 178 255 / 10%) 0 0.6px, transparent 1.1px),
      radial-gradient(circle, rgb(255 222 181 / 8%) 0 0.5px, transparent 1px),
      radial-gradient(circle at 72% 76%, rgb(21 53 92 / 32%), transparent 34%),
      radial-gradient(circle at 18% 16%, rgb(45 38 86 / 22%), transparent 31%),
      linear-gradient(145deg, #02040a 0%, #050816 46%, #02030a 100%);
    background-size:
      149px 137px,
      211px 193px,
      173px 227px,
      auto,
      auto,
      auto;
    background-position:
      17px 31px,
      83px 11px,
      41px 97px,
      center,
      center,
      center;
  }

  .home-cosmos-bg::before {
    content: "";
    position: absolute;
    inset: -25%;
    opacity: 0.18;
    background:
      radial-gradient(ellipse at 50% 50%, rgb(120 155 220 / 14%) 0%, transparent 58%),
      linear-gradient(
        118deg,
        transparent 28%,
        rgb(102 124 174 / 7%) 44%,
        rgb(192 207 238 / 8%) 50%,
        rgb(93 112 158 / 5%) 57%,
        transparent 72%
      );
    filter: blur(20px);
    transform: rotate(-8deg);
  }

  .home-cosmos-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background:
      radial-gradient(circle at center, transparent 38%, rgb(0 0 0 / 46%) 100%),
      linear-gradient(to bottom, rgb(2 3 10 / 12%), rgb(1 2 7 / 34%));
  }

  /* Aurora (Hero & General Background) */
  .home-aurora {
    --home-aurora-depth: 0px;
    --home-aurora-perspective-x: 50%;
    --home-aurora-perspective-y: 50%;
    --home-aurora-scale: 1;
    --home-aurora-shift-x: 0px;
    --home-aurora-shift-y: 0px;
    --home-aurora-tilt-x: 0deg;
    --home-aurora-tilt-y: 0deg;
    --home-aurora-violet: #405a9f;
    --home-aurora-cyan: #2f83a7;
    --home-aurora-magenta: #714971;
    --home-aurora-amber: #9a7344;
    --home-aurora-teal: #326f72;
    --home-aurora-suncore: #ffffff;
    --home-aurora-blur-a: 64px;
    --home-aurora-blur-b: 60px;
    --home-aurora-blur-c: 68px;
    --home-aurora-blur-d: 72px;
    --home-aurora-blur-e: 72px;

    position: absolute;
    inset: 0;
    perspective: 1200px;
    perspective-origin: var(--home-aurora-perspective-x) var(--home-aurora-perspective-y);
    transform-style: preserve-3d;
    transform: translate3d(
        var(--home-aurora-shift-x),
        var(--home-aurora-shift-y),
        calc(var(--home-aurora-depth) * -1)
      )
      scale(var(--home-aurora-scale)) rotateX(var(--home-aurora-tilt-x))
      rotateY(var(--home-aurora-tilt-y));
    will-change: transform;
    transition: transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  .home-aurora__plane {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    mix-blend-mode: screen;
    will-change: transform, opacity;
    transform-style: preserve-3d;
  }

  @media (prefers-reduced-motion: no-preference) {
    .home-aurora__plane--a {
      opacity: 0.14;
    }
    .home-aurora__plane--b {
      opacity: 0.13;
    }
    .home-aurora__plane--c {
      opacity: 0.1;
    }
    .home-aurora__plane--d {
      opacity: 0.12;
    }
    .home-aurora__plane--e {
      opacity: 0.1;
    }
  }

  .home-aurora__plane--a {
    inset: -10% 45% 45% -15%;
    filter: blur(var(--home-aurora-blur-a));
    background: radial-gradient(
      circle at 35% 30%,
      color-mix(in srgb, var(--home-aurora-violet) 80%, transparent) 0%,
      transparent 60%
    );
    animation: auroraDriftA 26s ease-in-out infinite alternate;
  }
  .home-aurora__plane--b {
    inset: 15% -10% 15% 40%;
    filter: blur(var(--home-aurora-blur-b));
    background: radial-gradient(
      ellipse at 70% 50%,
      color-mix(in srgb, var(--home-aurora-cyan) 85%, #fff 15%) 0%,
      color-mix(in srgb, var(--home-aurora-cyan) 40%, transparent) 45%,
      transparent 70%
    );
    animation: auroraDriftB 20s ease-in-out infinite alternate;
  }
  .home-aurora__plane--c {
    inset: 40% 45% -10% -10%;
    filter: blur(var(--home-aurora-blur-c));
    background: radial-gradient(
      circle at 30% 70%,
      color-mix(in srgb, var(--home-aurora-magenta) 80%, transparent) 0%,
      transparent 58%
    );
    animation: auroraDriftC 18s ease-in-out infinite alternate;
  }
  .home-aurora__plane--d {
    inset: 10% 20% 30% 20%;
    filter: blur(var(--home-aurora-blur-d));
    background: radial-gradient(
      circle at 50% 50%,
      var(--home-aurora-suncore) 0%,
      color-mix(in srgb, var(--home-aurora-amber) 90%, #fff) 15%,
      color-mix(in srgb, var(--home-aurora-amber) 60%, transparent) 45%,
      transparent 70%
    );
    animation: auroraDriftD 24s ease-in-out infinite alternate;
  }
  .home-aurora__plane--e {
    inset: 45% 15% -15% 15%;
    filter: blur(var(--home-aurora-blur-e));
    background: radial-gradient(
      ellipse at 50% 80%,
      color-mix(in srgb, var(--home-aurora-teal) 75%, transparent) 0%,
      transparent 62%
    );
    animation: auroraDriftE 22s ease-in-out infinite alternate;
  }

  @keyframes auroraDriftA {
    0% {
      transform: translate(-4%, -3%) scale(1.02);
      opacity: 0.12;
    }
    50% {
      opacity: 0.22;
    }
    100% {
      transform: translate(5%, 4%) scale(1.06);
      opacity: 0.16;
    }
  }
  @keyframes auroraDriftB {
    0% {
      transform: translate(3%, -5%) scale(1.04);
      opacity: 0.14;
    }
    50% {
      opacity: 0.24;
    }
    100% {
      transform: translate(-6%, 3%) scale(0.98);
      opacity: 0.18;
    }
  }
  @keyframes auroraDriftC {
    0% {
      transform: translate(-2%, 6%) scale(1.05);
      opacity: 0.1;
    }
    50% {
      opacity: 0.2;
    }
    100% {
      transform: translate(4%, -4%) scale(1.01);
      opacity: 0.14;
    }
  }
  @keyframes auroraDriftD {
    0% {
      transform: translate(5%, -2%) scale(0.97);
      opacity: 0.1;
    }
    50% {
      opacity: 0.18;
    }
    100% {
      transform: translate(-3%, 5%) scale(1.03);
      opacity: 0.15;
    }
  }
  @keyframes auroraDriftE {
    0% {
      transform: translate(-3%, 3%) scale(1.01);
      opacity: 0.08;
    }
    50% {
      opacity: 0.16;
    }
    100% {
      transform: translate(2%, -5%) scale(1.05);
      opacity: 0.12;
    }
  }

  /* Stars (from Section 3) */
  .home-stars {
    --home-star-delay: 0s;
    --home-star-duration: 5.4s;
    --home-star-glow: 12px;
    --home-stars-shift-x: 0px;
    --home-stars-shift-y: 0px;

    position: absolute;
    inset: 0;
    z-index: 2;
    transform: translate3d(var(--home-stars-shift-x), var(--home-stars-shift-y), 0);
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
  }

  .home-star {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: var(--clr-white);
    opacity: var(--home-star-opacity);
    box-shadow: 0 0 var(--home-star-glow) color-mix(in srgb, var(--clr-white) 66%, transparent);
  }

  @media (prefers-reduced-motion: no-preference) {
    .home-star {
      animation: s3StarTwinkle var(--home-star-duration) ease-in-out infinite;
      animation-delay: var(--home-star-delay);
    }
  }

  .home-star--1 {
    top: 8%;
    left: 12%;
    --home-star-delay: -0.2s;
    --home-star-duration: 5.8s;
  }
  .home-star--2 {
    top: 15%;
    right: 22%;
    --home-star-delay: -1.7s;
    --home-star-duration: 6.4s;
    --home-star-opacity: 0.2;
  }
  .home-star--3 {
    top: 35%;
    left: 8%;
    --home-star-delay: -3.1s;
    --home-star-duration: 4.9s;
  }
  .home-star--4 {
    top: 55%;
    right: 10%;
    --home-star-delay: -4.2s;
    --home-star-duration: 7.2s;
    --home-star-opacity: 0.18;
  }
  .home-star--5 {
    top: 72%;
    left: 18%;
    --home-star-delay: -2.6s;
    --home-star-duration: 5.2s;
  }
  .home-star--6 {
    top: 25%;
    left: 45%;
    --home-star-delay: -5.5s;
    --home-star-duration: 6.8s;
    width: 1px;
    height: 1px;
  }
  .home-star--7 {
    top: 65%;
    right: 35%;
    --home-star-delay: -0.9s;
    --home-star-duration: 4.6s;
    --home-star-glow: 18px;
    width: 3px;
    height: 3px;
  }
  .home-star--8 {
    top: 88%;
    left: 60%;
    --home-star-delay: -3.8s;
    --home-star-duration: 6s;
  }

  @keyframes s3StarTwinkle {
    0%,
    100% {
      opacity: calc(var(--home-star-opacity) * 0.75);
      transform: scale(0.88);
    }
    18% {
      opacity: 0.68;
      transform: scale(1.4);
    }
    43% {
      opacity: calc(var(--home-star-opacity) * 1.1);
      transform: scale(1);
    }
    69% {
      opacity: 0.82;
      transform: scale(1.55);
    }
    86% {
      opacity: 0.24;
      transform: scale(0.95);
    }
  }

  /* Scanline */
  .home-scanline {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      color-mix(in srgb, var(--home-accent-cyan) 15%, transparent) 20%,
      color-mix(in srgb, var(--home-accent-cyan) 30%, transparent) 50%,
      color-mix(in srgb, var(--home-accent-cyan) 15%, transparent) 80%,
      transparent 100%
    );
    opacity: 0;
    pointer-events: none;
    z-index: 4;
  }

  @media (prefers-reduced-motion: no-preference) {
    .home-scanline {
      opacity: 1;
      animation: s3ScanLine 12s cubic-bezier(0.4, 0, 0.2, 1) infinite;
      animation-delay: 2s;
    }
  }

  @keyframes s3ScanLine {
    0% {
      transform: translateY(-2vh);
      opacity: 0;
    }
    5% {
      opacity: 0.5;
    }
    50% {
      opacity: 0.2;
    }
    95% {
      opacity: 0.5;
    }
    100% {
      transform: translateY(102vh);
      opacity: 0;
    }
  }

  /* ── Hero Section ── */
  .hero {
    --home-hero-vignette-opacity: 1;
    --home-hero-content-inline: max(clamp(1.5rem, 6vw, 4rem), var(--safe-left))
      max(clamp(1.5rem, 6vw, 4rem), var(--safe-right));
    --home-hero-content-block: clamp(6rem, 15vh, 10rem)
      max(clamp(5rem, 12vh, 8rem), calc(var(--content-bottom-offset) + 2rem));
    --home-hero-title-size: var(--home-type-hero);
    --home-hero-title-line: 1.02;

    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--viewport-height);
    padding: 0;
    overflow: hidden;
    font-family: var(--font-sans);
    text-align: center;
    isolation: isolate;
  }

  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
      ellipse 105% 92% at 45% 46%,
      transparent 0%,
      transparent 58%,
      color-mix(in srgb, var(--home-vignette) 58%, transparent) 100%
    );
    pointer-events: none;
    z-index: 2;
    -webkit-mask-image: linear-gradient(to bottom, black 82%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 82%, transparent 100%);
    opacity: var(--home-hero-vignette-opacity);
    will-change: opacity;
    transition: opacity 0.1s ease-out;
  }

  /* The WebGL scene already supplies its own atmospheric falloff. Do not
     place another vignette over the daylight Earth, otherwise its texture
     loses contrast and looks faded. */
  body.three-earth-active .hero::after {
    opacity: 0;
  }

  body.three-earth-active .home-aurora {
    display: none;
  }

  body.three-earth-active .home-cosmos-bg {
    /* Sky-haze gradient – Section 1 shows Berlin from above, not from space */
    background:
      /* Subtle atmospheric haze at top (sky) */
      radial-gradient(ellipse 140% 60% at 50% 0%, rgb(135 175 230 / 28%) 0%, transparent 62%),
      /* Warm ground haze toward bottom where city fills the frame */
        radial-gradient(ellipse 120% 50% at 50% 100%, rgb(180 160 120 / 12%) 0%, transparent 58%),
      /* Deep atmospheric vignette at sides */
        radial-gradient(circle at 0% 50%, rgb(20 42 80 / 22%), transparent 40%),
      radial-gradient(circle at 100% 50%, rgb(20 42 80 / 18%), transparent 40%),
      /* Base sky: midnight blue */
        linear-gradient(170deg, #0a1628 0%, #0d2040 28%, #08182e 65%, #040c1c 100%);
    background-size: auto;
    background-position: center;
  }

  body.three-earth-active .home-cosmos-bg::before {
    /* Slightly richer nebula shimmer to complement the brighter earth */
    opacity: 0.14;
  }

  body.three-earth-active .home-stars,
  body.three-earth-active .home-scanline,
  body.three-earth-active .hero__signal {
    display: none;
  }

  .hero__earth-credit {
    position: absolute;
    right: clamp(1rem, 2vw, 2rem);
    bottom: clamp(4.6rem, 10vh, 5.4rem);
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--clr-dark-blue, #050b18) 72%, transparent);
    border: 1px solid color-mix(in srgb, var(--clr-white) 14%, transparent);
    color: color-mix(in srgb, var(--clr-white) 78%, transparent);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-decoration: none;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 16px rgb(0 0 0 / 42%);
    transition:
      color 180ms ease,
      border-color 180ms ease,
      background 180ms ease,
      transform 180ms ease;
  }

  .hero__earth-credit-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00f0b5;
    box-shadow: 0 0 8px #00f0b5;
    animation: creditDotPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  @keyframes creditDotPulse {
    0%,
    100% {
      opacity: 1;
      transform: scale(1);
    }
    50% {
      opacity: 0.4;
      transform: scale(0.85);
    }
  }

  .hero__earth-credit:hover,
  .hero__earth-credit:focus-visible {
    color: #ffffff;
    border-color: color-mix(in srgb, var(--home-accent-cyan) 60%, white);
    background: color-mix(in srgb, var(--clr-dark-blue, #08142a) 88%, transparent);
    transform: translateY(-1px);
  }

  .hero__fx {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
  }

  .hero__signal {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: var(--home-accent);
    opacity: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    .hero__signal {
      opacity: 1;
      animation: signalPulse 5s ease-out infinite;
    }
  }

  .hero__signal--one {
    top: 22%;
    left: 15%;
    animation-delay: 0s;
  }
  .hero__signal--two {
    top: 68%;
    right: 18%;
    left: auto;
    animation-delay: -1.8s;
  }
  .hero__signal--three {
    top: 45%;
    left: 72%;
    animation-delay: -3.5s;
  }

  @keyframes signalPulse {
    0% {
      box-shadow:
        0 0 0 0 color-mix(in srgb, var(--home-accent) 40%, transparent),
        0 0 0 0 color-mix(in srgb, var(--home-accent) 20%, transparent);
      opacity: 0.8;
    }
    50% {
      box-shadow:
        0 0 0 18px color-mix(in srgb, var(--home-accent) 12%, transparent),
        0 0 0 36px color-mix(in srgb, var(--home-accent) 4%, transparent);
      opacity: 0.5;
    }
    100% {
      box-shadow:
        0 0 0 40px transparent,
        0 0 0 70px transparent;
      opacity: 0;
    }
  }

  .hero__content {
    position: relative;
    z-index: 3;
    width: min(100%, var(--size-1200));
    margin-inline: auto;
    padding-block: var(--home-hero-content-block);
    padding-inline: var(--home-hero-content-inline);
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero__poster {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    max-width: min(100%, 58rem);
    translate: 0 -1.75rem;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  body.three-earth-active .hero__poster::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -3rem -6rem -4rem;
    background: radial-gradient(
      ellipse 78% 72% at 50% 46%,
      /* soft core vignette – guarantees crisp text readability directly over Berlin 3D map */
        rgb(1 5 14 / 68%) 0%,
      rgb(1 5 14 / 36%) 45%,
      rgb(1 5 14 / 10%) 72%,
      transparent 92%
    );
    filter: blur(24px);
    pointer-events: none;
  }

  .hero__header-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.25rem, 0.35vw, 0.35rem);
    margin: 0;
    pointer-events: auto;
    user-select: none;
    position: relative;
    overflow: visible;
  }

  .hero__welcome {
    display: inline-block;
    font-family: var(--font-display);
    font-size: var(--home-type-kicker);
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--clr-white) 90%, var(--home-accent-warm));
    text-shadow: 0 0 18px color-mix(in srgb, var(--home-accent-warm) 28%, transparent);
  }

  .hero__eyebrow {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: var(--home-type-context);
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.4;
    color: color-mix(in srgb, var(--clr-white) 78%, var(--home-accent-cyan));
    text-shadow: 0 0 18px color-mix(in srgb, var(--home-accent-cyan) 22%, transparent);
  }

  .hero__header-group::after {
    content: "";
    inline-size: clamp(2.75rem, 7vw, 4.5rem);
    block-size: 1px;
    margin-block-start: clamp(0.45rem, 0.8vw, 0.7rem);
    background: linear-gradient(
      90deg,
      transparent,
      color-mix(in srgb, var(--home-accent-warm) 82%, white),
      transparent
    );
    opacity: 0.72;
    box-shadow: 0 0 18px color-mix(in srgb, var(--home-accent-warm) 34%, transparent);
  }

  .hero__title {
    margin: clamp(0.9rem, 1.7vw, 1.35rem) 0 0;
    width: min(100%, 17ch);
    max-width: 17ch;
    white-space: normal;
    color: color-mix(in srgb, var(--clr-white) 92%, var(--home-accent-warm));
    font-family: var(--font-display);
    font-size: var(--home-hero-title-size);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: var(--home-hero-title-line);
    text-wrap: balance;
    text-shadow:
      /* deeper shadows so title stays crisp over the brighter realistic earth */
      0 2px 8px rgb(0 0 0 / 72%),
      0 16px 64px rgb(0 0 0 / 62%),
      0 0 48px color-mix(in srgb, var(--home-accent-warm) 16%, transparent);
  }

  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .hero__title {
      background: linear-gradient(
        125deg,
        #ffffff 0%,
        #ffffff 38%,
        var(--home-accent-warm) 68%,
        #eef6ff 100%
      );
      background-size: 260% 260%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
    }
  }

  .hero__lede {
    margin: clamp(1rem, 1.5vw, 1.35rem) 0 0;
    max-width: 35rem;
    color: color-mix(in srgb, var(--clr-white) 78%, var(--home-accent) 10%);
    font-size: var(--home-type-lead);
    font-weight: 400;
    line-height: 1.62;
    text-wrap: pretty;
    text-shadow:
      0 2px 16px rgb(0 0 0 / 82%),
      0 10px 38px rgb(0 0 0 / 62%);
  }

  /* Shared Buttons */
  .home-btn-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(0.75rem, 1.2vw, 1rem);
  }

  .home-btn-group--hero {
    margin-top: clamp(1.5rem, 2.4vw, 2rem);
  }

  .home-btn {
    justify-content: center;
    min-inline-size: clamp(10.5rem, 20vw, 12.5rem);
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0.9rem 1.5rem;
    font-size: var(--home-type-action);
    font-family: var(--font-sans);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.25;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition:
      color 0.3s ease,
      transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 0.3s ease,
      background 0.3s ease,
      border-color 0.3s ease;
  }

  .home-btn-text,
  .home-btn-arrow {
    position: relative;
    z-index: 2;
  }

  .home-btn--primary {
    border-color: color-mix(in srgb, var(--home-accent-warm) 45%, transparent);
    background:
      radial-gradient(circle at 28% 12%, rgb(255 255 255 / 42%) 0 18%, transparent 38%),
      linear-gradient(135deg, #ffe8b8 0%, var(--home-accent-warm) 42%, #c68b38 100%);
    color: #09111f;
    box-shadow:
      0 16px 40px color-mix(in srgb, var(--home-accent-warm) 24%, transparent),
      0 0 34px color-mix(in srgb, var(--home-accent-warm) 14%, transparent),
      inset 0 1px 0 rgb(255 255 255 / 42%),
      inset 0 -10px 24px rgb(92 47 8 / 16%);
  }

  .home-btn--primary::after {
    content: "";
    position: absolute;
    inset: -48%;
    z-index: 0;
    background: radial-gradient(
      circle,
      color-mix(in srgb, var(--home-accent-warm) 35%, transparent) 0%,
      transparent 62%
    );
    opacity: 0.48;
    filter: blur(16px);
    pointer-events: none;
  }

  .home-btn--primary:hover {
    color: #09111f;
    box-shadow:
      0 20px 54px color-mix(in srgb, var(--home-accent-warm) 34%, transparent),
      0 0 44px color-mix(in srgb, var(--home-accent-warm) 24%, transparent),
      inset 0 1px 0 rgb(255 255 255 / 52%),
      inset 0 -10px 24px rgb(92 47 8 / 14%);
    transform: translateY(-2px) scale(1.02);
  }

  .home-btn--secondary {
    border-color: color-mix(in srgb, var(--clr-white) 24%, transparent);
    background:
      linear-gradient(135deg, rgb(255 255 255 / 12%), rgb(255 255 255 / 3%)),
      color-mix(in srgb, var(--home-surface) 52%, transparent);
    color: color-mix(in srgb, var(--clr-white) 82%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(1.35);
    backdrop-filter: blur(20px) saturate(1.35);
    box-shadow:
      0 12px 34px rgb(0 0 0 / 24%),
      inset 0 1px 0 rgb(255 255 255 / 18%),
      inset 0 -1px 0 rgb(255 255 255 / 6%);
  }

  .home-btn--secondary:hover {
    color: var(--clr-white);
    background:
      linear-gradient(135deg, rgb(255 255 255 / 17%), rgb(255 255 255 / 5%)),
      color-mix(in srgb, var(--home-surface) 66%, transparent);
    border-color: color-mix(in srgb, var(--home-accent) 46%, transparent);
    transform: translateY(-2px);
    box-shadow:
      0 14px 40px color-mix(in srgb, var(--home-accent) 18%, transparent),
      inset 0 1px 0 rgb(255 255 255 / 24%),
      inset 0 -1px 0 rgb(255 255 255 / 8%);
  }

  .home-btn:focus-visible {
    outline: 2px solid var(--home-accent);
    outline-offset: 4px;
    transform: translateY(-2px) scale(1.02);
  }

  .home-btn--primary:focus-visible {
    outline-color: var(--home-accent-warm);
    box-shadow:
      0 20px 54px color-mix(in srgb, var(--home-accent-warm) 34%, transparent),
      0 0 44px color-mix(in srgb, var(--home-accent-warm) 24%, transparent);
  }

  .home-btn--secondary:focus-visible {
    box-shadow:
      0 14px 40px color-mix(in srgb, var(--home-accent) 18%, transparent),
      inset 0 1px 0 rgb(255 255 255 / 24%),
      inset 0 -1px 0 rgb(255 255 255 / 8%);
  }

  /* ── Section 3 ── */
  .section.section3 {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    min-block-size: var(--section-viewport-height);
    block-size: auto;
    scroll-margin-top: calc(var(--content-top-offset) * 0.2);
    overflow: clip;
    container-type: inline-size;
    container-name: section3;
    content-visibility: auto;
    contain-intrinsic-size: 0 900px;
    isolation: isolate;
  }

  .section3__container {
    position: relative;
    z-index: var(--z-elevated);
    inline-size: min(100%, var(--size-1200));
    margin-inline: auto;
    display: grid;
    gap: clamp(2rem, 3.5vw, 3.25rem);
    box-sizing: border-box;
    padding-block: clamp(2rem, 4vh, 3rem)
      max(clamp(4.5rem, 10vh, 6rem), calc(var(--content-bottom-offset) + 1rem));
    padding-inline: max(clamp(1.2rem, 4vw, 3rem), var(--safe-left))
      max(clamp(1.2rem, 4vw, 3rem), var(--safe-right));
  }

  .section3__header {
    display: grid;
    gap: clamp(0.75rem, 1.2vw, 1rem);
    text-align: center;
    max-inline-size: 52rem;
    margin-inline: auto;
    transform-style: preserve-3d;
  }

  .section3__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    margin: 0;
    color: var(--home-accent-cyan);
    font-family: var(--font-sans);
    font-size: var(--home-type-kicker);
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    line-height: var(--leading-snug);
    text-transform: uppercase;
    text-shadow: 0 0 20px color-mix(in srgb, var(--home-accent-cyan) 35%, transparent);
  }

  .section3__eyebrow::before,
  .section3__eyebrow::after {
    content: "";
    flex: 0 0 auto;
    inline-size: 2.5rem;
    block-size: 1px;
    border-radius: 999px;
    opacity: 0.7;
  }

  .section3__eyebrow::before {
    background: linear-gradient(90deg, transparent, var(--home-accent-cyan));
  }
  .section3__eyebrow::after {
    background: linear-gradient(90deg, var(--home-accent-cyan), transparent);
  }

  .section3__title {
    margin: 0;
    color: var(--clr-white);
    font-family: var(--font-display);
    max-inline-size: 16ch;
    margin-inline: auto;
    font-size: var(--home-type-section);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.06;
    text-wrap: balance;
    text-shadow: 0 18px 60px rgb(0 0 0 / 40%);
  }

  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .section3__title {
      background: linear-gradient(
        135deg,
        #ffffff 0%,
        #ffffff 30%,
        var(--home-accent-warm) 65%,
        var(--home-accent-violet) 100%
      );
      background-size: 300% 300%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
    }
  }

  .section3__subtitle {
    margin: 0;
    max-inline-size: 42rem;
    margin-inline: auto;
    color: var(--home-text-soft);
    font-family: var(--font-sans);
    font-size: var(--home-type-copy);
    line-height: 1.62;
    text-wrap: pretty;
  }

  .section3__closing {
    text-align: center;
    max-inline-size: 40rem;
    margin-inline: auto;
  }

  .section3__closing-text {
    margin: 0;
    color: var(--home-text-soft);
    font-family: var(--font-sans);
    font-size: var(--home-type-copy);
    line-height: 1.62;
    text-wrap: pretty;
  }

  .section3__cta {
    padding-block-start: clamp(0.8rem, 1.5vw, 1.2rem);
  }

  .home-btn-glow {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      90deg,
      transparent,
      color-mix(in srgb, var(--home-accent-warm) 44%, transparent),
      transparent
    );
    mix-blend-mode: screen;
    transform: translateX(-100%);
    pointer-events: none;
  }

  @media (prefers-reduced-motion: no-preference) {
    .home-btn--primary:hover .home-btn-glow {
      animation: s3CtaGlow 0.6s ease-out forwards;
    }
  }

  @keyframes s3CtaGlow {
    to {
      transform: translateX(100%);
    }
  }

  .home-btn-arrow {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .home-btn--primary:hover .home-btn-arrow {
    transform: translateX(4px);
  }

  /* ── Repeating Section 3 Scroll Reveal ── */
  @media (prefers-reduced-motion: no-preference) {
    .section3__eyebrow {
      --section3-enter-delay: 0.04s;
      --section3-exit-delay: 0.12s;
    }

    .section3__title {
      --section3-enter-delay: 0.1s;
      --section3-exit-delay: 0.09s;
    }

    .section3__subtitle {
      --section3-enter-delay: 0.17s;
      --section3-exit-delay: 0.06s;
    }

    .section3__closing-text {
      --section3-enter-delay: 0.24s;
      --section3-exit-delay: 0.03s;
    }

    .section3__cta {
      --section3-enter-delay: 0.31s;
      --section3-exit-delay: 0s;
    }

    .section3__reveal {
      opacity: 0;
      transform: translate3d(0, 1rem, 0) scale(0.99);
      backface-visibility: hidden;
      transition:
        opacity var(--home-motion-fade) ease-out,
        transform var(--home-motion-enter) var(--home-motion-ease-enter);
      transition-delay: var(--section3-exit-delay);
    }

    .section3__cta {
      pointer-events: none;
    }

    .section.section3.is-visible .section3__reveal {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
      transition-delay: var(--section3-enter-delay);
    }

    .section.section3.is-visible .section3__cta {
      pointer-events: auto;
    }
  }

  @keyframes homeTextExitBeforeScroll {
    from {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
    }

    to {
      opacity: 0;
      transform: translate3d(0, -1.5rem, 0) scale(0.985);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .section.section3.is-leaving-before-scroll .section3__reveal {
      animation: homeTextExitBeforeScroll var(--home-motion-exit) var(--home-motion-ease-exit) both;
      animation-delay: var(--section3-exit-delay);
      transition: none;
    }
  }

  /* ── Repeating Hero Scroll Reveal ── */
  @media (prefers-reduced-motion: no-preference) {
    .hero__header-group {
      --home-exit-delay: 0.12s;
    }

    .hero__title {
      --home-exit-delay: 0.08s;
    }

    .hero__lede {
      --home-exit-delay: 0.04s;
    }

    .home-btn-group--hero {
      --home-exit-delay: 0s;
    }

    html.hero-motion-ready .hero__reveal {
      opacity: 0;
      transform: translate3d(0, 0.8rem, 0);
      backface-visibility: hidden;
      transition:
        opacity var(--home-motion-fade) ease-out,
        transform var(--home-motion-enter) var(--home-motion-ease-enter);
      transition-delay: 0s;
    }
    html.hero-motion-ready .hero.is-visible .hero__reveal {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
    .hero.is-visible .hero__header-group {
      transition-delay: 0.02s;
    }
    .hero.is-visible .hero__title {
      transition-delay: 0.1s;
    }
    .hero.is-visible .hero__lede {
      transition-delay: 0.18s;
    }
    .hero.is-visible .home-btn-group--hero {
      transition-delay: 0.26s;
    }

    .section.hero.is-leaving-before-scroll .hero__reveal {
      animation: homeTextExitBeforeScroll var(--home-motion-exit) var(--home-motion-ease-exit) both;
      animation-delay: var(--home-exit-delay);
      transition: none;
    }

    body.is-home-section-transitioning :is(.hero__reveal, .section3__reveal, .features__fallback) {
      will-change: opacity, transform;
    }
  }

  /* ── Responsive ── */
  @media (width <= 960px) {
    .hero {
      --home-hero-content-block: clamp(5rem, 12vh, 6.5rem)
        max(clamp(4.2rem, 8vh, 5.5rem), calc(var(--content-bottom-offset) + 0.75rem));
    }
    .hero__lede {
      max-width: 31rem;
    }
    .section3__header {
      max-inline-size: 100%;
    }
  }

  @media (height <= 760px) and (width >= 721px) {
    .hero {
      --home-hero-content-block: clamp(4.35rem, 10vh, 5.75rem)
        max(clamp(5.5rem, 14vh, 7rem), calc(var(--content-bottom-offset) + 3rem));
    }
    .hero__lede {
      max-width: 38rem;
      line-height: var(--leading-body);
    }
    .home-btn-group--hero {
      margin-top: 0.7rem;
    }
  }

  @media (width <= 720px) {
    .home-aurora {
      --home-aurora-blur-a: 42px;
      --home-aurora-blur-b: 40px;
      --home-aurora-blur-c: 44px;
      --home-aurora-blur-d: 46px;
      --home-aurora-blur-e: 44px;
    }
    .hero__poster {
      max-width: none;
      translate: none;
    }
    body.three-earth-active .hero__poster::before {
      inset: -1.5rem -1rem -2rem;
      background: radial-gradient(
        ellipse 80% 72% at 50% 50%,
        /* stronger on mobile – brighter earth needs more contrast for text */ rgb(1 5 14 / 82%) 0%,
        rgb(1 5 14 / 52%) 42%,
        rgb(1 5 14 / 20%) 66%,
        transparent 84%
      );
      filter: blur(14px);
    }
  }

  @media (width <= 640px) {
    .section.section3 {
      scroll-margin-top: var(--content-top-offset);
    }
    .section3__container {
      gap: clamp(1.8rem, 5vw, 2.8rem);
      padding-block: clamp(2rem, 7vw, 3rem)
        max(clamp(4.75rem, 11vh, 5.75rem), calc(var(--content-bottom-offset) + 0.75rem));
      padding-inline: max(1rem, var(--safe-left)) max(1rem, var(--safe-right));
    }
    .section3__subtitle,
    .section3__closing-text {
      line-height: 1.58;
    }
    .section3__cta {
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: stretch;
      inline-size: min(100%, 22rem);
      margin-inline: auto;
    }
    .home-btn {
      min-inline-size: 0;
      justify-content: center;
    }
    .section3__cta .home-btn {
      flex: 0 0 auto;
      inline-size: 100%;
      min-block-size: 3.35rem;
      padding: 0.9rem 1.25rem;
    }
  }

  @media (width <= 520px) {
    .hero {
      --home-hero-content-inline: max(1rem, var(--safe-left)) max(1rem, var(--safe-right));
      --home-hero-content-block: clamp(4.75rem, 13vh, 5.75rem)
        max(clamp(3.5rem, 8vh, 4.25rem), calc(var(--content-bottom-offset) + 0.5rem));
      --home-hero-title-line: 1.06;
    }
    .home-btn-group--hero {
      gap: 0.7rem;
    }
    .home-aurora__plane {
      inset: -20%;
    }

    .section3__header,
    .section3__closing {
      animation: none;
      transform: none;
    }
  }

  @media (height <= 640px) {
    .section3__container {
      padding-block-start: calc(var(--content-top-offset) + 2rem);
      padding-block-end: calc(var(--content-bottom-offset) + 3rem);
    }
  }

  /* ── Reduced Motion ── */
  @media (prefers-reduced-motion: reduce) {
    .home-stars {
      transform: none;
      transition: none;
    }
    .section3__eyebrow,
    .section3__title,
    .section3__subtitle,
    .section3__closing-text,
    .section3__cta {
      opacity: 1;
      clip-path: none;
      translate: 0 0;
      animation: none;
      filter: none;
      transform: none;
      transition: none;
    }
    .section3__header,
    .section3__closing {
      animation: none;
      transform: none;
    }
    .hero__header-group,
    .hero__title,
    .hero__lede,
    .home-btn-group--hero {
      opacity: 1;
      clip-path: none;
      filter: none;
      transform: none;
      transition: none;
    }
    .home-btn {
      transition: none;
    }
    .home-btn:focus-visible {
      transform: none;
    }
    .home-aurora__plane {
      opacity: 0.08;
      filter: none;
      animation: none;
    }
    .hero__signal,
    .home-scanline,
    .home-star {
      display: none;
    }
    .section3__title {
      animation: none;
    }
  }
  .section.features {
    position: relative;
    display: block;
    min-block-size: var(--full-section-viewport-height);
    block-size: var(--full-section-viewport-height);
    padding-block: clamp(3.7rem, 6.5vw, 5.8rem);
    padding-inline: max(clamp(0.95rem, 3vw, 2.2rem), var(--safe-left))
      max(clamp(0.95rem, 3vw, 2.2rem), var(--safe-right));
    overflow: clip;
    isolation: isolate;
  }

  .features__fallback {
    position: relative;
    z-index: var(--z-elevated);
    inline-size: min(100%, 28rem);
    margin-inline: auto;
    margin-block-start: clamp(5rem, 12vh, 7rem);
    padding: clamp(1rem, 3vw, 1.35rem);
    border: 1px solid rgb(255 255 255 / 14%);
    border-radius: var(--radius-sm);
    background: rgb(6 10 20 / 70%);
    color: var(--clr-white);
    font-family: var(--font-sans);
    backdrop-filter: blur(18px);
  }

  @media (prefers-reduced-motion: no-preference) {
    .section.features.is-leaving-before-scroll .features__fallback {
      animation: homeTextExitBeforeScroll var(--home-motion-exit) var(--home-motion-ease-exit) both;
    }
  }

  .features__fallback-title {
    margin: 0 0 0.85rem;
    font-family: var(--font-display);
    font-size: var(--type-2xl);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
  }

  .features__fallback-list {
    display: grid;
    gap: 0.55rem;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .features__fallback a {
    display: block;
    color: color-mix(in srgb, var(--clr-white) 86%, transparent);
    font-size: var(--type-body);
    font-weight: 600;
    line-height: var(--leading-snug);
    text-decoration: none;
    outline-offset: 0.25rem;
  }

  .features__fallback a:hover {
    color: var(--clr-white);
  }

  .features__fallback a:focus-visible {
    color: var(--clr-white);
    outline: 2px solid var(--home-accent);
    outline-offset: 4px;
    border-radius: 4px;
  }

  body.three-earth-active .features__fallback:not(:focus-within) {
    position: absolute !important;
    width: var(--size-1) !important;
    height: var(--size-1) !important;
    padding: 0 !important;
    margin: calc(var(--size-1) * -1) !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  body.three-earth-active .features__fallback:focus-within {
    position: fixed;
    inset-block-start: calc(var(--safe-top) + 5rem);
    inset-inline-start: max(1rem, var(--safe-left));
    margin: 0;
    box-shadow: 0 24px 80px rgb(0 0 0 / 42%);
  }

  @media (width <= 560px) {
    .section.features {
      padding-inline: max(1rem, var(--safe-left)) max(1rem, var(--safe-right));
      padding-block: clamp(3.4rem, 9vw, 4.8rem);
    }

    body.three-earth-active .features__fallback:focus-within {
      inset-inline-end: max(1rem, var(--safe-right));
      inline-size: auto;
    }
  }
}

/* source: /content/components/particles/three-earth.css */
@layer components {
  /* ===== Three.js Earth System Styles v4.0 ===== */

  /* Three.js Container */
  .three-earth-container {
    position: fixed;
    inset: 0;
    z-index: var(--z-none);
    pointer-events: auto;
    overflow: hidden;
    contain: strict;
    isolation: isolate;
    cursor: grab;
    visibility: visible;
    will-change: opacity;
    transition:
      opacity 560ms cubic-bezier(0.16, 1, 0.3, 1),
      visibility 0s linear 0s;
  }

  .three-earth-container canvas {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translateZ(0); /* Hardware acceleration */
    will-change: transform;
    image-rendering: auto;
  }

  .three-earth-container.error {
    background:
      radial-gradient(circle at 72% 78%, rgb(21 62 110 / 26%), transparent 34%),
      linear-gradient(145deg, #02040a, #070b18 58%, #02030a);
  }

  .three-earth-container.error::before {
    content: "";
    position: absolute;
    right: clamp(-8rem, -8vw, -2rem);
    bottom: clamp(-15rem, -18vw, -7rem);
    width: min(72vw, 46rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background-image: url("/r2-proxy/earth/textures/earth_day.webp");
    background-size: cover;
    box-shadow:
      inset -7rem -2rem 8rem rgb(0 3 12 / 88%),
      inset 1rem 0 2.5rem rgb(95 170 255 / 12%),
      0 0 1.2rem rgb(80 157 255 / 28%),
      0 0 5rem rgb(42 109 196 / 18%);
    transform: rotate(-11deg);
  }

  .three-earth-container.error::after {
    content: "";
    position: absolute;
    top: 14%;
    left: 9%;
    width: clamp(2.5rem, 6vw, 5rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
      url("/r2-proxy/earth/textures/moon_texture.webp") center / cover,
      #aaa;
    box-shadow:
      inset -1.1rem -0.25rem 1.6rem rgb(0 0 0 / 72%),
      0 0 1.8rem rgb(210 223 255 / 14%);
    opacity: 0.86;
  }

  /* Loading & Error States */
  .three-earth-error {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: var(--three-earth-error-width);
    text-align: center;
    color: color-mix(in srgb, var(--clr-white) 90%, transparent);
    font-family: var(--font-sans);
    -webkit-backdrop-filter: var(--blur-md);
    backdrop-filter: var(--blur-md);
    padding: var(--space-6);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--three-earth-error-bg) 90%, transparent);
    border: var(--size-1) solid var(--border-color);
    box-shadow: var(--component-shadow-depth-2);
    opacity: 1;
    transition: opacity var(--transition-base);
  }

  .three-earth-error.hidden {
    opacity: 0;
    pointer-events: none;
  }

  /* merged duplicate background definition removed to avoid duplicate selector */

  .three-earth-error p {
    margin: 0 0 var(--size-r-0-5);
  }

  .three-earth-error .retry-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--component-fill-primary);
    color: var(--clr-white);
    border: var(--size-1) solid var(--card-border);
    cursor: pointer;
  }

  .three-earth-error .retry-btn:hover {
    background: var(--component-fill-secondary);
  }

  /* Section-based Opacity Transitions */
  .three-earth-container[data-section="hero"] {
    opacity: 1;
  }

  .three-earth-container[data-section="features"] {
    opacity: 1;
  }

  .three-earth-container[data-section="section3"] {
    opacity: 1;
    pointer-events: none;
  }

  .three-earth-container[data-section="site-footer"] {
    opacity: 0.35;
    visibility: visible;
    pointer-events: none;
  }

  body[data-active-overlay="footer"] .three-earth-container {
    opacity: 0.72;
    visibility: visible;
    pointer-events: none;
    transition-delay: 0s;
  }

  /* Reduced Motion */
  @media (prefers-reduced-motion: reduce) {
    .three-earth-container {
      transition: none;
    }
  }
}

/* source: /content/components/typewriter/typewriter.css */
/* ===== TypeWriter CSS Styles ===== */

/* TypeWriter Title Container & Positioning */
.typewriter-title {
  --tw-left: clamp(var(--size-12), 2vw, var(--size-20));
  --tw-bottom: clamp(var(--size-12), 2vw, var(--size-24));
  --tw-fixed-bottom: clamp(var(--size-16), 2.5vw, var(--size-32));
  --tw-size: clamp(var(--size-r-0-9), 1.8vw, var(--size-r-1-1));
  --tw-line-height: var(--leading-tight);
  --tw-typed-line-height: var(--leading-tight);
  --tw-min-height: calc(var(--size-r-1-6) * 2);
  --tw-gap: var(--size-r-0-5);
  --lh-px: 0px;
  --gap-px: 0px;
  --box-h: calc(var(--tw-typed-line-height) * 2em);
  --tw-fallback-duration: 3s;
  --tw-fallback-steps: 30;
  --tw-caret-duration: 0.75s;

  position: absolute;
  left: var(--tw-left);

  /* Einfache Bottom-Position - wird dynamisch vom lineMeasurer angepasst */
  bottom: var(--tw-bottom);
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  text-rendering: optimizelegibility;
  font-size: var(--tw-size);
  line-height: var(--tw-line-height);
  opacity: 0;
  pointer-events: none;
  max-width: clamp(var(--size-480), 48vw, var(--size-720));
  /* Use CSS variable set by JS; provide a safe fallback to reserve space before JS runs to avoid CLS */
  height: var(--box-h);
  gap: var(--tw-gap);
  transform: translateY(var(--size-6));
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;

  /* Ensure the typewriter is displayed above the footer component (footer z-index is high)
     Use a higher explicit z-index to keep the text visible above the footer overlay */
  z-index: var(--z-typewriter);
  /* Reserve vertical space to prevent layout shifts while JS computes sizes */
  min-height: var(--tw-min-height);
}

.typewriter-title--fixed {
  position: fixed;
  left: var(--tw-left);

  /* Einfache Bottom-Position - wird dynamisch vom lineMeasurer angepasst */
  bottom: var(--tw-fixed-bottom);
  z-index: var(--z-typewriter-fixed);
  opacity: 0.92;
  transform: translateY(0);
  pointer-events: auto;
  /* Fixed variant also reserves space to avoid CLS when toggling modes */
  min-height: var(--tw-min-height);
}

body[data-active-overlay="footer"] .typewriter-title--fixed {
  z-index: calc(var(--z-fixed) - 2);
  opacity: 0.92;
  transform: translateY(0);
  pointer-events: none;
}

/* TypeWriter Text Elements */
.typewriter-title .typed-author {
  font-size: max(var(--type-xs), 0.75em);
  color: color-mix(in srgb, var(--clr-white) 72%, transparent);
  font-weight: 400;
  margin: 0;
  display: block;
  text-align: left;
}

.typed-text {
  font-weight: 400;
  font-size: max(var(--type-sm), 0.82em);
  line-height: var(--tw-typed-line-height);
  display: flex;
  flex-direction: column;
  gap: var(--tw-gap);
  color: var(--text-secondary);
  text-shadow: none;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
  /* Reserve at least two lines to avoid layout shift when text is typed */
  min-height: calc(var(--tw-typed-line-height) * 2em);
}

@supports (text-wrap: balance) {
  .typewriter-title .typed-text {
    text-wrap: balance;
  }
}

/* TypeWriter Cursor Animation */
.typewriter-title .typed-text .typed-line:last-child::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0.9em;
  margin-left: 0.06ch;
  border-left: var(--size-2) solid var(--text-primary);
  animation: caret-blink 0.9s steps(1, end) infinite;
  vertical-align: -0.1em;
  opacity: 1;
}

.typewriter-title .cursor {
  display: none;
}

.typewriter-measure-probe {
  display: inline-block;
}

.typewriter-line-measurer {
  position: absolute;
  left: -9999px;
  top: 0;
  visibility: hidden;
  white-space: normal;
  pointer-events: none;
}

@keyframes caret-blink {
  50% {
    opacity: 0;
  }
}

/* CSS-Only Fallback (wenn TypeWriter JS nicht lädt) */
body:not(.has-typingjs) .typewriter-title .typed-text {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  border-right: var(--size-2) solid var(--text-primary);
  inline-size: max-content;
  max-inline-size: 100%;
}

/* Locked state for TypeWriter */
.is-locked {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ── Robot Collision Impact Effects ─────────────────────────── */

/* Text shake on impact */
.typewriter-title.collision-shake {
  animation: textImpactShake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes textImpactShake {
  0%,
  100% {
    transform: translate(0, 0) rotate(0);
  }
  10% {
    transform: translate(-6px, 2px) rotate(-1.5deg);
  }
  20% {
    transform: translate(5px, -3px) rotate(1deg);
  }
  30% {
    transform: translate(-4px, 1px) rotate(-0.8deg);
  }
  40% {
    transform: translate(3px, -2px) rotate(0.6deg);
  }
  50% {
    transform: translate(-2px, 1px) rotate(-0.4deg);
  }
  60% {
    transform: translate(1px, -1px) rotate(0.2deg);
  }
}

/* RGB glitch on text */
.typewriter-title.collision-glitch {
  animation: textImpactGlitch 0.4s steps(4) both;
}

@keyframes textImpactGlitch {
  0% {
    text-shadow: none;
    filter: none;
  }
  20% {
    text-shadow:
      3px 0 var(--clr-red-400),
      -3px 0 var(--clr-blue-400);
    filter: brightness(1.3);
  }
  40% {
    text-shadow:
      -2px 1px var(--clr-cyan-400),
      2px -1px var(--clr-red-400);
    filter: brightness(0.9) contrast(1.5);
  }
  60% {
    text-shadow:
      1px -2px var(--clr-green-400),
      -1px 2px var(--clr-blue-400);
    filter: brightness(1.4);
  }
  80% {
    text-shadow:
      -1px 0 var(--clr-red-400),
      1px 0 var(--clr-cyan-400);
    filter: brightness(1.1);
  }
  100% {
    text-shadow: none;
    filter: none;
  }
}

/* Individual letter scatter */
.typewriter-title.collision-scatter .typed-line {
  display: inline-block;
  animation: letterJolt 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.typewriter-title.collision-scatter .typed-line:nth-child(odd) {
  animation-name: letterJoltAlt;
}

@keyframes letterJolt {
  0%,
  100% {
    transform: translate(0, 0) rotate(0);
  }
  25% {
    transform: translate(3px, -5px) rotate(2deg);
  }
  50% {
    transform: translate(-2px, 3px) rotate(-1.5deg);
  }
  75% {
    transform: translate(1px, -2px) rotate(0.5deg);
  }
}

@keyframes letterJoltAlt {
  0%,
  100% {
    transform: translate(0, 0) rotate(0);
  }
  25% {
    transform: translate(-4px, -3px) rotate(-2deg);
  }
  50% {
    transform: translate(3px, 4px) rotate(1.5deg);
  }
  75% {
    transform: translate(-1px, -1px) rotate(-0.5deg);
  }
}

/* Flash/brightness pulse */
.typewriter-title.collision-flash {
  animation: textImpactFlash 0.3s ease-out both;
}

@keyframes textImpactFlash {
  0% {
    filter: brightness(3) saturate(0.5);
    color: var(--clr-white);
  }
  100% {
    filter: none;
    color: inherit;
  }
}

/* Shockwave ring (spawned at impact point via JS) */
.collision-shockwave {
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--robot-cyan) 70%, transparent);
  box-shadow:
    0 0 12px 2px color-mix(in srgb, var(--robot-cyan) 40%, transparent),
    inset 0 0 8px color-mix(in srgb, var(--robot-cyan) 20%, transparent);
  animation: shockwaveExpand 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  z-index: 9999;
  will-change: transform, opacity;
}

@keyframes shockwaveExpand {
  0% {
    width: 10px;
    height: 10px;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    width: 10px;
    height: 10px;
    opacity: 0;
    transform: translate(-50%, -50%) scale(18);
  }
}

/* Impact sparks (small directional lines) */
.collision-spark {
  --spark-angle: 0deg;

  position: fixed;
  pointer-events: none;
  width: 3px;
  height: 12px;
  background: linear-gradient(to bottom, var(--robot-cyan), transparent);
  border-radius: 2px;
  z-index: 9999;
  animation: sparkShoot 0.4s ease-out forwards;
  will-change: transform, opacity;
}

@keyframes sparkShoot {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--spark-angle)) scaleY(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--spark-angle)) translateY(-40px) scaleY(0.3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .typewriter-title {
    transition: none;
    transform: none;
  }

  body:not(.has-typingjs) .typewriter-title .typed-text {
    max-inline-size: 100%;
    border-right: 0;
    animation: none;
  }

  .typewriter-title .typed-text .typed-line:last-child::after,
  .typewriter-title.collision-shake,
  .typewriter-title.collision-glitch,
  .typewriter-title.collision-scatter .typed-line,
  .typewriter-title.collision-flash,
  .collision-shockwave,
  .collision-spark {
    animation: none;
  }

  .collision-shockwave,
  .collision-spark {
    display: none;
  }
}