/* ==================================================================
   404 — Not Found — kwizzbit/error-404 (whole-file segment)
   Faithful slice of /HTML/404.html. Globals (reset/body/font-face/:root)
   dropped; tokens canonical (theme.json). Full-bleed via the .kwb-segment wrapper.
   ================================================================== */

    .error-404 {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      /* subtract approximate header height so the visual centre
         sits in the viewport, not below it */
      min-height: calc(100dvh - 88px);
      padding: 4rem var(--wp--custom--layout--gutter) calc(5rem + 60px);
      text-align: center;
    }

    /* Character image ------------------------------------------ */
    /*
      Safari fix: filter + CSS transform/animation on the same element causes
      the drop-shadow to lag or detach during the animation. Solution: put the
      filter on a static wrapper div and animate only the <img> child.
      The wrapper gets its own GPU compositing layer via translateZ(0).
    */
    .error-404__character-wrap {
      display: inline-block; /* shrink-wraps to img so shadow follows silhouette */
      margin-bottom: 1rem;
      margin-top: 20px; /* optical alignment — character sits better with breathing room above */
      /* Drop shadow from Sketch: X20 Y4 blur0 #000 9% — hard offset, no diffusion */
      filter: drop-shadow(20px 0px 0px rgba(0, 0, 0, 0.09));
      /* Own compositing layer — prevents Safari from re-rasterising the shadow each frame */
      transform: translateZ(0);
      -webkit-transform: translateZ(0);
    }

    .error-404__character {
      width: 78px;
      height: auto;
      display: block;
      /* Pixel-art — crisp rendering */
      image-rendering: pixelated;
      image-rendering: crisp-edges;
      /* Single animation that handles both float and occasional disbelief shake.
         Combining into one keyframe avoids the CSS transform override conflict
         where two separate animations both writing 'transform' cancel each other out. */
      animation: char-idle 7s ease-in-out 1s infinite;
    }

    @keyframes char-idle {
      /* Gentle rise */
      0%   { transform: translateY(0)    translateX(0); }
      25%  { transform: translateY(-8px) translateX(0); }
      /* Descending — wiggle begins mid-fall so it feels like a natural wobble */
      38%  { transform: translateY(-4px) translateX(-2px); }
      44%  { transform: translateY(-2px) translateX(2px); }
      50%  { transform: translateY(0)    translateX(-1px); }
      56%  { transform: translateY(0)    translateX(1px); }
      /* Settle back to neutral and hold */
      65%, 100% { transform: translateY(0) translateX(0); }
    }

    @media (prefers-reduced-motion: reduce) {
      .error-404__character {
        animation: none;
        opacity: 1; /* ensure visible if animation skipped */
      }
      .error-404__character-wrap {
        /* shadow still renders fine with no animation */
      }
    }

    /* Headline -------------------------------------------------- */
    /*
      WP note: headline is an H1 — mark up as Heading block (H1)
      with font-family Roobert Semimono Regular.
      letter-spacing value flags to WP as a custom CSS class.
    */
    .error-404__headline {
      font-family: var(--wp--preset--font-family--display);
      font-weight: 400; /* Regular — Roobert Semimono Medium (the Regular cut of Semimono) */
      font-size: 2.375rem; /* 38px */
      line-height: 0.875;
      letter-spacing: -0.091em; /* matches H3 token from STYLEGUIDE */
      color: var(--wp--preset--color--ink);
      max-width: 14ch;
      margin-bottom: 1rem;
    }

    /* Answer sub-label ------------------------------------------ */
    /*
      WP note: Paragraph block. Eyebrow / Pixelar font.
      Coral colour via --wp--preset--color--coral.
    */
    .error-404__answer {
      font-family: var(--wp--preset--font-family--body); /* Roobert */
      font-weight: 600; /* SemiBold */
      font-size: 0.9375rem; /* 15px — matches --wp--preset--font-size--nav token */
      line-height: 1.2;
      letter-spacing: 0;
      color: var(--wp--preset--color--coral);
    }

    /* CTA button ------------------------------------------------ */
    /*
      WP note: Button block, variant secondary (dark gradient).
      Appears only on 404 — not a global footer CTA.
      Shown only on mobile/tablet. Desktop has nav always present.
      On this page it helps all screen sizes find their way home.
    */
    .error-404__cta {
      margin-top: 2.5rem;
    }

    /* Home icon on the "Back to home" button. The global button standard forces
       any bare .btn > svg to 10x10 (the tiny brand-arrow size) — too small for a
       leading house glyph. Override at higher specificity (.btn > .class beats
       .btn > svg) so it reads balanced against the 15px label. */
    .error-404__cta .btn > .error-404__home-icon {
      width: 18px;
      height: 18px;
    }

    /* Focus states — WCAG AA */
    .error-404 a:focus-visible,
    .error-404 button:focus-visible {
      outline: 2px solid var(--wp--preset--color--coral);
      outline-offset: 3px;
    }

    /* ============================================================
       RESPONSIVE ADJUSTMENTS
       Desktop is already handled by clamp() on font-size.
       Tablet and mobile fine-tune spacing and character size.
    ============================================================ */

    /* Tablet ≤1023px */
    @media (max-width: 1023px) {
      .error-404__character-wrap {
        /* margin inherits from desktop, nothing to override */
      }
      .error-404__character {
        width: 78px;
      }
    }

    /* Mobile ≤640px */
    @media (max-width: 640px) {
      .error-404 {
        min-height: calc(100dvh - 72px);
        padding-top: 1rem;
        padding-bottom: 2rem;
      }
      .error-404__character-wrap {
        margin-bottom: 1.5rem;
      }
      .error-404__character {
        width: 78px;
      }
      .error-404__headline {
        /* 20% smaller on mobile (×0.8 across the clamp) */
        font-size: clamp(1.4rem, 8vw, 1.9rem);
        max-width: 12ch;
      }
      .error-404__cta {
        margin-top: 2rem;
      }
    }

    /* Narrow (375px): handled by clamp in ≤640px breakpoint above */

    /* =============================================================
       ENTRY REVEAL
       The whole 404 block lifts + fades in once the page-loader clears
       (mirrors the hero reveal). Gated behind .has-scroll-reveal — added
       by error-404.js — so no-JS users and the block editor always see
       the content fully visible. The character keeps its own translateZ
       compositing layer, so this ancestor lift transform doesn't disturb
       its drop-shadow filter.
       ============================================================= */
    .error-404.has-scroll-reveal {
      opacity: 0;
      transform: translateY(var(--wp--custom--motion--scroll-reveal-distance));
      transition:
        opacity var(--wp--custom--motion--scroll-reveal-duration) var(--wp--custom--motion--scroll-reveal-easing),
        transform var(--wp--custom--motion--scroll-reveal-duration) var(--wp--custom--motion--scroll-reveal-easing);
    }
    .error-404.has-scroll-reveal.is-visible {
      opacity: 1;
      transform: none;
    }