/* Mouse trail - optimized with element pooling and hardware acceleration */
.mouse-trail {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 0, 255, 0.5);
  pointer-events: none;
  /* Use separate properties to avoid transitioning the position when reusing elements from the pool */
  transition: scale 0.2s, opacity 0.5s;
  translate: var(--x, 0) var(--y, 0);
  scale: var(--scale, 1);
  transform: translate(-50%, -50%);
  z-index: 10000;
  mix-blend-mode: screen;
  will-change: translate, scale, opacity;
}

  /* Show and hide content with proper transitions */
  .page-content {
    width: auto;
    margin: 0 auto;
    text-align: center;
    opacity: 1;
    transition: opacity 0.5s ease;
  }

  .page-content.hidden {
    opacity: 0;
    pointer-events: none;
  }

  /* Konami code Easter egg */
  @keyframes barrelRoll {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .barrel-roll {
    animation: barrelRoll 2s ease-in-out;
    transform-origin: center center;
  }

  /* Accessibility Improvements */
  /* Fallback focus outline for browsers that do not support :focus-visible */
  :focus {
    outline: 3px solid #ff6f00;
    outline-offset: 3px;
  }

  /* In browsers that support :focus-visible, remove the generic :focus outline
     when :focus-visible does NOT apply (e.g., mouse users) */
  :focus:not(:focus-visible) {
    outline: none;
    outline-offset: 0;
    box-shadow: none;
  }

  :focus-visible {
    outline: 3px solid #ff6f00;
    outline-offset: 3px;
  }

  /* High contrast focus for elements with dark backgrounds */
  .sparkle-button:focus,
  .enter-button:focus,
  .floppysquare-container:focus,
  .sparkle-button:focus-visible,
  .enter-button:focus-visible,
  .floppysquare-container:focus-visible {
    outline-color: #ffffff;
    box-shadow: 0 0 0 6px #ff6f00;
  }

  /* Two-tier reduced-motion policy. Tier 1: vestibular triggers
     (rotation, scaling loops, parallax-ish drift) are removed outright
     rather than left firing 0.01ms ghost frames. Tier 2: sub-200ms
     opacity-only fades are kept so modal state changes still read -
     WCAG 2.3.3 is about motion that stimulates the inner ear, not
     about communicative fades. The wildcard stays as a catch-all
     safety net for anything not listed in either tier. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }

    /* Tier 1: gone, not just fast */
    .header h1, .header h1:hover, .word-art, .enter-button, .container,
    .word-art-small, .container .floppysquare, .marquee-content, .star,
    .nav-mode-egg.is-popping, .welcome-screen.active .content-container {
      animation: none !important;
    }

    .floppysquare-container:hover {
      transform: scale(1.05);
    }

    /* Tier 2: short opacity fades survive (the class selectors outrank
       the wildcard's 0.01ms). The overlays drop their scale/translate
       and keep a 120ms fade; the mode toast keeps its fade so the
       confirmation is still perceivable. */
    .search-overlay {
      transition: opacity 120ms ease !important;
      transition: opacity 120ms ease, display 120ms allow-discrete !important;
    }

    .homepage-search,
    .search-overlay[hidden] .homepage-search {
      transform: none !important;
      transition: opacity 120ms ease !important;
    }

    .nav-mode-toast,
    .nav-mode-toast.is-visible {
      transform: translateX(-50%) !important;
    }

    .nav-mode-toast.is-visible {
      animation: toastFade 1.2s ease forwards !important;
    }
  }

  /* Fix search overlay close button reachability on short viewports.
     Two triggers share one set of rules:
       - @media (max-height: 480px): a JS-free fallback for short layout
         viewports (e.g. landscape mobile).
       - :root.search-viewport-constrained: toggled by JS from
         window.visualViewport.height so iOS Safari's software keyboard,
         which shrinks the *visual* viewport without changing the layout
         viewport (so the media query never fires), still gets the fix. */
  @media (max-height: 480px) {
    .search-overlay {
      padding: 0.5rem;
      overflow-y: auto; /* Enable vertical scrolling for modal overflow */
      -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }

    /* Opacity-only card transition in the constrained state: a non-none
       transform would make .homepage-search a containing block for the
       position:fixed close button, re-anchoring it to the card instead
       of the viewport during open/close. */
    .search-overlay .homepage-search,
    .search-overlay[hidden] .homepage-search {
      transform: none;
      transition: opacity 200ms ease;
    }

    .search-overlay-close {
      position: fixed; /* Keep it fixed in the visual viewport */
      /* Sit below the top safe-area inset (notch / status bar) since
         viewport-fit=cover lets this fixed control slide under the chrome. */
      top: calc(0.5rem + env(safe-area-inset-top, 0px));
      /* Keep the button aligned with the right edge of the centered .homepage-search card.
         The card has max-width: 36rem and is centered inside .search-overlay (with 0.5rem padding).
         Formula: 50% (screen center) - min(18rem [half of max-width], 50% - 0.5rem [half of card width when full width]) + 0.6rem (button padding), plus the right safe-area inset under viewport-fit=cover */
      right: calc(50% - min(18rem, 50% - 0.5rem) + 0.6rem + env(safe-area-inset-right, 0px));
      z-index: 10002;
    }
  }

  :root.search-viewport-constrained .search-overlay {
    padding: 0.5rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  :root.search-viewport-constrained .search-overlay .homepage-search,
  :root.search-viewport-constrained .search-overlay[hidden] .homepage-search {
    transform: none;
    transition: opacity 200ms ease;
  }

  :root.search-viewport-constrained .search-overlay-close {
    position: fixed;
    top: calc(0.5rem + env(safe-area-inset-top, 0px));
    right: calc(50% - min(18rem, 50% - 0.5rem) + 0.6rem + env(safe-area-inset-right, 0px));
    z-index: 10002;
  }