@layer reset, base, theme, layout, components, utilities;

@layer reset {
  html {
    box-sizing: border-box;
    scroll-behavior: smooth;
    scroll-padding-block-start: var(--header-height, 4rem);
    -webkit-text-size-adjust: 100%;
  }

  body, header, nav, main, section, footer, article, div, ul, ol, li, figure, dialog, a, button {
    box-sizing: border-box;
  }

  body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd, dialog {
    margin: 0;
  }

  ul, ol {
    padding: 0;
    list-style: none;
  }

  img, picture, video, svg {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

  button, input, select, textarea {
    font: inherit;
    color: inherit;
  }
}

@layer theme {
  :root {
    color-scheme: dark;

    /* Game-accurate flat vector & space poster palette */
    --color-space-950: #141626;
    --color-space-900: #1b1d30;
    --color-space-banner: #24263d;
    --color-space-feature: #22243b;
    --color-space-800: #2b2e4a;

    --color-mutt-red: #d8330a;
    --color-mutt-red-hover: #e53b10;
    --color-mutt-red-lip: #8a1d03;

    --color-cream: #f5f2eb;
    --color-cream-hover: #ffffff;
    --color-cream-lip: #9e9a90;

    --color-oxygen-cyan: #6ec6f5;
    --color-star-gold: #ffc400;

    --color-text-primary: #f5f2eb;
    --color-text-secondary: #d6d1c7;
    --color-text-muted: #a8a298;
    --color-text-dark: #181a2c;

    --font-sans: "Exo 2", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --radius-sm: 0.5rem;
    --radius-md: 0.875rem;
    --radius-lg: 1.25rem;
    --radius-pill: 999rem;

    --container-max: 70rem;
    --header-height: 4rem;
    --section-space: clamp(4rem, 7vw, 6.5rem);
  }
}

@layer base {
  body {
    background-color: var(--color-space-950);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-size: clamp(1rem, 0.96rem + 0.25vw, 1.125rem);
    line-height: 1.6;
    text-align: start;
    overflow-x: clip;
    accent-color: var(--color-mutt-red);
  }

  ::selection {
    background-color: var(--color-mutt-red);
    color: var(--color-text-primary);
  }

  h1, h2, h3, h4 {
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-wrap: balance;
  }

  p, li, blockquote {
    text-wrap: pretty;
    max-inline-size: 65ch;
  }

  a {
    color: var(--color-oxygen-cyan);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.2em;
    transition: color 0.15s ease;

    &:hover {
      color: var(--color-star-gold);
    }
  }

  :where(a:any-link, button, [tabindex="0"]):focus-visible {
    outline: 3px solid var(--color-star-gold);
    outline-offset: 3px;
  }
}

@layer layout {
  .container {
    inline-size: min(100% - 2.5rem, var(--container-max));
    margin-inline: auto;
    container-type: inline-size;
  }

  .section {
    padding-block: var(--section-space);
    position: relative;
  }

  .section-header {
    text-align: center;
    max-inline-size: 44rem;
    margin-inline: auto;
    margin-block-end: clamp(2.5rem, 4vw, 3.5rem);

    & p {
      margin-inline: auto;
      color: var(--color-text-secondary);
      margin-block-start: 0.75rem;
      font-size: 1.1rem;
    }
  }

  .section-title {
    font-size: clamp(1.85rem, 1.3rem + 2.5vw, 2.75rem);
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }

  @supports (font-size: 1cqi) {
    .section-title {
      font-size: clamp(1.85rem, 1.2rem + 3cqi, 2.75rem);
    }
  }
}

@layer components {
  /* Skip Link */
  .skip-link {
    position: fixed;
    inset-block-start: 1rem;
    inset-inline-start: 1rem;
    z-index: 1000;
    background: var(--color-mutt-red);
    color: #fff;
    font-weight: 700;
    padding: 0.65rem 1.25rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
  }

  /* Solid Top Navigation Bar */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    block-size: var(--header-height);
    background-color: var(--color-space-950);
    border-block-end: 2px solid var(--color-space-800);
  }

  .nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    block-size: 100%;
    inline-size: min(100% - 2.5rem, var(--container-max));
    margin-inline: auto;
  }

  .brand-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;

    & img {
      block-size: 1.6rem;
      inline-size: auto;
    }
  }

  .nav-links {
    display: flex;
    align-items: center;
    gap: clamp(0.25rem, 1.5vw, 1rem);
    flex-wrap: wrap;

    & a {
      color: var(--color-text-secondary);
      text-decoration: none;
      font-weight: 700;
      font-size: 0.9375rem;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      padding: 0.5rem 0.65rem;
      min-block-size: 3rem;
      min-inline-size: 3rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;

      &:hover {
        color: var(--color-star-gold);
      }
    }
  }

  /* Hero Section — Cover Image Stage */
  .hero {
    position: relative;
    min-block-size: calc(100vh - var(--header-height));
    min-block-size: calc(100dvh - var(--header-height));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-block-start: clamp(2.5rem, 6vh, 4.5rem);
    padding-block-end: clamp(1rem, 2.5vh, 2rem);
    overflow: hidden;
    background-color: var(--color-space-banner);
    background-image:
      linear-gradient(
        to bottom,
        rgba(36, 38, 61, 0) 0%,
        rgba(36, 38, 61, 0.2) 30%,
        rgba(20, 22, 38, 0.82) 64%,
        rgba(20, 22, 38, 0.96) 88%,
        var(--color-space-950) 100%
      ),
      url("../images/banner.png");
    background-image:
      linear-gradient(
        to bottom,
        rgba(36, 38, 61, 0) 0%,
        rgba(36, 38, 61, 0.2) 30%,
        rgba(20, 22, 38, 0.82) 64%,
        rgba(20, 22, 38, 0.96) 88%,
        var(--color-space-950) 100%
      ),
      image-set(
        url("../images/banner.webp") type("image/webp"),
        url("../images/banner.png") type("image/png")
      );
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
  }

  @media (max-width: 768px) {
    .hero {
      background-size: 100% auto;
      background-position: center top;
      background-repeat: no-repeat;
      padding-block-start: clamp(12rem, 50vw, 17rem);
      min-block-size: calc(100dvh - var(--header-height));
    }
  }

  /* Floating Muttnik Silhouette (drifting in #about background) */
  .parentFloat {
    position: absolute;
    inset-inline-start: -40%;
    inset-block-start: 0%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.55;
    transform: scale(0.45) rotate(5deg);
    animation: bounce 60s infinite;
    --animation-reduced: none;
  }

  .float {
    inline-size: 300px;
    block-size: 300px;
    background: url("../images/float.png") no-repeat 0 0;
    filter: brightness(0);
    animation: sprite 2s steps(50) infinite;
    --animation-reduced: none;
  }

  @keyframes sprite {
    from { background-position: 0 0; }
    to { background-position: 0 -15000px; }
  }

  @keyframes bounce {
    0% { inset-inline-start: -40%; inset-block-start: 0%; transform: rotate(-1deg) scale(0.45); }
    12% { inset-inline-start: 20%; inset-block-start: 70%; transform: rotate(-9deg) scale(0.6); }
    24% { inset-inline-start: 50%; inset-block-start: 15%; transform: rotate(10deg) scale(0.45); }
    36% { inset-inline-start: 75%; inset-block-start: 70%; transform: rotate(12deg) scale(0.38); }
    48% { inset-inline-start: 105%; inset-block-start: 10%; transform: rotate(13deg) scale(0.3); }
    60% { inset-inline-start: 78%; inset-block-start: 68%; transform: rotate(-17deg) scale(0.45); }
    72% { inset-inline-start: 50%; inset-block-start: 8%; transform: rotate(30deg) scale(0.38); }
    84% { inset-inline-start: 22%; inset-block-start: 72%; transform: rotate(16deg) scale(0.45); }
    100% { inset-inline-start: -40%; inset-block-start: 30%; transform: rotate(-1deg) scale(0.45); }
  }

  .hero-stage {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-block-start: auto;
    margin-block-end: 0;
    gap: clamp(0.75rem, 1.8vh, 1.35rem);
  }

  .hero-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-inline-size: 46rem;
  }

  .hero-title {
    font-size: clamp(1.65rem, 1.2rem + 2.2vw, 2.5rem);
    margin-block-end: 0.5rem;
    color: var(--color-text-primary);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
  }

  @supports (font-size: 1cqi) {
    .hero-title {
      font-size: clamp(1.65rem, 1.1rem + 2.5cqi, 2.5rem);
    }
  }

  .hero-pitch {
    font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
    color: var(--color-text-secondary);
    margin-block-end: 1.5rem;
    font-weight: 500;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  }

  /* Tactile 3D Arcade Buttons (matching in-game PLAY / Depot UI) */
  .cta-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-block-end: 1.25rem;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-block-size: 3.1rem;
    padding: 0.7rem 1.65rem;
    border-radius: var(--radius-pill);
    font-weight: 800;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.15s ease;

    & .btn-icon {
      inline-size: 1.35rem;
      block-size: 1.2rem;
      flex-shrink: 0;
    }
  }

  .btn-primary {
    background-color: var(--color-mutt-red);
    color: #ffffff;
    box-shadow: 0 5px 0 var(--color-mutt-red-lip);

    &:hover:not(:disabled, [aria-disabled="true"]) {
      background-color: var(--color-mutt-red-hover);
      color: #ffffff;
      transform: translateY(2px);
      box-shadow: 0 3px 0 var(--color-mutt-red-lip);
    }

    &:active:not(:disabled, [aria-disabled="true"]) {
      transform: translateY(5px);
      box-shadow: 0 0 0 var(--color-mutt-red-lip);
    }
  }

  .btn-secondary {
    background-color: var(--color-cream);
    color: var(--color-text-dark);
    box-shadow: 0 5px 0 var(--color-cream-lip);

    &:hover:not(:disabled, [aria-disabled="true"]) {
      background-color: var(--color-cream-hover);
      color: var(--color-text-dark);
      transform: translateY(2px);
      box-shadow: 0 3px 0 var(--color-cream-lip);
    }

    &:active:not(:disabled, [aria-disabled="true"]) {
      transform: translateY(5px);
      box-shadow: 0 0 0 var(--color-cream-lip);
    }
  }

  .store-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
  }

  .store-badge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;

    & .badge-label {
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--color-text-muted);
    }

    & img {
      block-size: 2.85rem;
      inline-size: auto;
    }

    &.is-coming-soon img {
      opacity: 0.35;
    }
  }

  .scroll-cue {
    padding-block-start: 0.5rem;
    text-align: center;
    position: relative;
    z-index: 2;

    & a {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      gap: 0.25rem;
      color: var(--color-text-secondary);
      text-decoration: none;
      font-size: 0.875rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    & svg {
      inline-size: 1.4rem;
      block-size: 1.4rem;
      animation: pulsate-fwd 1.4s ease-in-out infinite both;
      --animation-reduced: none;
    }
  }

  @keyframes pulsate-fwd {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
  }

  /* About + Video Section */
  .section-about {
    position: relative;
    overflow: hidden;
    background-color: var(--color-space-950);
    background-image: radial-gradient(ellipse at 50% 25%, rgba(42, 45, 75, 0.45) 0%, rgba(20, 22, 38, 0) 72%);
    border-block-start: 2px solid var(--color-space-800);
  }

  .section-about .container {
    position: relative;
    z-index: 2;
  }

  .about-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: center;
  }

  @media (min-width: 52rem) {
    .about-grid {
      grid-template-columns: 1.2fr 0.8fr;
    }
  }

  .about-prose {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;

    & .section-title {
      margin-block-end: 0.25rem;
    }

    & p {
      font-size: clamp(1.05rem, 0.98rem + 0.25vw, 1.175rem);
      color: var(--color-text-secondary);
    }

    & strong {
      color: var(--color-text-primary);
    }
  }

  .video-showcase {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;

    & video {
      inline-size: 100%;
      max-inline-size: 17.5rem;
      block-size: auto;
      aspect-ratio: 370 / 664;
      border-radius: var(--radius-md);
      background: #000;
      box-shadow: 0 12px 0 rgba(0, 0, 0, 0.4);
    }
  }

  .video-control-btn {
    background-color: var(--color-space-800);
    border: 2px solid var(--color-text-muted);
    color: var(--color-text-primary);
    border-radius: var(--radius-pill);
    padding: 0.55rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 3rem;
    min-inline-size: 3rem;

    &:hover {
      border-color: var(--color-star-gold);
      color: var(--color-star-gold);
    }
  }

  /* Key Features Section — Open Starfield Layout (No SaaS Glass Cards) */
  .section-features {
    background: var(--color-space-feature) url("../images/space-bg.png") repeat 0 0;
    border-block-start: 2px solid var(--color-space-800);
    animation: features-bg-scroll 30s linear infinite;
    --animation-reduced: none;
  }

  @keyframes features-bg-scroll {
    from { background-position: 0 0; }
    to { background-position: 1024px 0; }
  }

  .features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
    gap: clamp(2rem, 4vw, 3rem);
  }

  .feature-card {
    background-color: rgba(20, 22, 38, 0.82);
    border: 2px solid var(--color-space-800);
    border-radius: var(--radius-md);
    padding: 1.75rem;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.25rem;
    align-items: start;

    & h3 {
      font-size: 1.3rem;
      text-transform: uppercase;
      letter-spacing: 0.02em;
      color: var(--color-text-primary);
      margin-block-end: 0.45rem;
    }

    & p {
      color: var(--color-text-secondary);
      font-size: 1rem;
    }
  }

  .feature-icon {
    inline-size: 4.5rem;
    block-size: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    & img {
      inline-size: 4.25rem;
      block-size: 4.25rem;
      object-fit: contain;
    }
  }

  .biome-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-block-start: 0.75rem;

    & span {
      font-size: 0.75rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      padding: 0.2rem 0.65rem;
      border-radius: var(--radius-sm);
    }

    & .biome-rock { background: #3b3a3c; color: #f5f2eb; }
    & .biome-ice { background: #1e3a5f; color: #bae6fd; }
    & .biome-sand { background: #5c4328; color: #fde68a; }
    & .biome-magma { background: #5a1818; color: #fecaca; }
  }

  /* Screenshots Section with Curved SVG Dividers & Laika BG */
  .section-screenshots {
    padding-block: calc(var(--section-space) + 2.5rem);
    background:
      linear-gradient(rgba(16, 18, 30, 0.86), rgba(16, 18, 30, 0.72)),
      url("../images/laika_bg01.jpg") center / cover no-repeat fixed;
  }

  @media (max-width: 48rem) {
    .section-screenshots {
      background:
        linear-gradient(rgba(16, 18, 30, 0.88), rgba(16, 18, 30, 0.75)),
        url("../images/laika_bg01_mob.jpg") center / cover no-repeat;
    }
  }

  .curve-divider-top,
  .curve-divider-bottom {
    position: absolute;
    inset-inline: 0;
    block-size: 3.25rem;
    pointer-events: none;
    z-index: 2;

    & svg {
      inline-size: 100%;
      block-size: 100%;
      display: block;
    }
  }

  .curve-divider-top {
    inset-block-start: -1px;
    & path { fill: var(--color-space-feature); }
  }

  .curve-divider-bottom {
    inset-block-end: -1px;
    & path { fill: var(--color-space-950); }
  }

  /* Clean Unboxed Screenshot Carousel */
  .carousel-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.85rem;
    margin-block-end: 1.25rem;
  }

  .carousel-btn {
    inline-size: 3rem;
    block-size: 3rem;
    border-radius: 50%;
    border: 0;
    background: var(--color-cream);
    color: var(--color-text-dark);
    box-shadow: 0 4px 0 var(--color-cream-lip);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.15s ease;

    &:hover:not(:disabled) {
      background: var(--color-mutt-red);
      color: #ffffff;
      box-shadow: 0 4px 0 var(--color-mutt-red-lip);
    }

    &:active:not(:disabled) {
      transform: translateY(3px);
      box-shadow: 0 1px 0 var(--color-mutt-red-lip);
    }
  }

  .scroller {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(14rem, 22vw, 17.5rem);
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-block: 1rem 1.75rem;
    padding-inline: max(1.25rem, calc((100% - var(--container-max)) / 2));
    scrollbar-color: var(--color-cream) var(--color-space-900);
    scrollbar-width: thin;
    touch-action: pan-x pan-y;
  }

  .screenshot-card {
    scroll-snap-align: center;
  }

  @keyframes carousel-focus {
    0% {
      scale: 0.92;
      opacity: 0.7;
    }
    50% {
      scale: 1;
      opacity: 1;
    }
    100% {
      scale: 0.92;
      opacity: 0.7;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    @supports ((animation-timeline: view()) and (animation-range: entry)) {
      .scroller > .screenshot-card {
        animation: carousel-focus auto linear both;
        animation-timeline: view(inline);
      }
    }
  }

  .screenshot-trigger {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: zoom-in;
    display: block;
    inline-size: 100%;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 10px 0 rgba(0, 0, 0, 0.45);
    transition: transform 0.2s ease;

    & img {
      inline-size: 100%;
      block-size: auto;
      aspect-ratio: 747 / 1280;
      object-fit: cover;
    }

    &:hover {
      transform: translateY(-4px);
    }
  }

  /* Lightbox Modal (<dialog>) */
  .lightbox-dialog {
    border: 2px solid var(--color-space-800);
    border-radius: var(--radius-lg);
    background: var(--color-space-900);
    color: var(--color-text-primary);
    padding: 1rem;
    max-inline-size: min(92vw, 28rem);
    max-block-size: 92dvh;
    margin: auto;
    box-shadow: 0 20px 0 rgba(0, 0, 0, 0.6);

    &::backdrop {
      background: rgba(10, 12, 20, 0.88);
    }
  }

  .lightbox-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;

    & img {
      max-block-size: 76dvh;
      inline-size: auto;
      border-radius: var(--radius-sm);
    }
  }

  .lightbox-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    inline-size: 100%;
    gap: 1rem;

    & p {
      font-weight: 700;
      font-size: 0.95rem;
      color: var(--color-text-secondary);
    }
  }

  /* Play / Tester CTA Section */
  .section-play {
    background-color: var(--color-space-950);
  }

  .cta-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  @media (min-width: 50rem) {
    .cta-cards {
      grid-template-columns: 1fr 1fr;
    }
  }

  .cta-card {
    background-color: var(--color-space-900);
    border: 2px solid var(--color-space-800);
    border-radius: var(--radius-lg);
    padding: clamp(1.75rem, 3.5vw, 2.5rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    box-shadow: 0 8px 0 rgba(0, 0, 0, 0.35);

    & h3 {
      font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem);
      text-transform: uppercase;
      letter-spacing: 0.02em;
      margin-block-end: 0.5rem;
    }

    & p {
      color: var(--color-text-secondary);
    }
  }

  /* Footer */
  .site-footer {
    background-color: #0e101c;
    border-block-start: 2px solid var(--color-space-800);
    padding-block: 2.5rem;
  }

  .footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    text-align: center;

    @media (min-width: 44rem) {
      flex-direction: row;
      text-align: start;
    }
  }

  .social-links {
    display: flex;
    align-items: center;
    gap: 0.85rem;

    & a {
      inline-size: 3rem;
      block-size: 3rem;
      border-radius: 50%;
      background: var(--color-space-900);
      border: 2px solid var(--color-space-800);
      color: var(--color-star-gold);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.15s ease, background-color 0.15s ease;

      &:hover {
        transform: translateY(-2px);
        background: var(--color-mutt-red);
        border-color: var(--color-mutt-red);
        color: #fff;
      }

      & svg {
        inline-size: 1.25rem;
        block-size: 1.25rem;
        fill: currentColor;
      }
    }
  }
}

@property --animation-reduced {
  syntax: "*";
  inherits: false;
  initial-value: none;
}

@layer utilities {
  .visually-hidden:where(:not(:focus-within, :active)) {
    position: absolute !important;
    clip-path: inset(50%) !important;
    overflow: hidden !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    white-space: nowrap !important;
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
    .section-features,
    .parentFloat,
    .float,
    .scroll-cue svg {
      animation: var(--animation-reduced) !important;
    }
  }
}