/* B2 V5 · native mobile/tablet controls, enhanced only when motion is allowed. */
@media (max-width: 1024px) {
  /* Tablet uses the same accessible chapter menu as the mobile profile. */
  .nav-cta {
    display: none;
  }
  .menu-toggle {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    width: 44px;
    height: 44px;
    padding: 9px;
    background: none;
  }
  .menu-toggle > span {
    display: block;
    height: 1px;
    width: 25px;
    background: white;
    transition: transform var(--motion-toggle);
  }
  .menu-toggle[aria-expanded="true"] > span:first-child {
    transform: translateY(4px) rotate(45deg);
  }
  .menu-toggle[aria-expanded="true"] > span:last-child {
    transform: translateY(-4px) rotate(-45deg);
  }
  #navigation {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    height: calc(100dvh - var(--header-height));
    margin: 0;
    padding: 36px var(--gutter) max(45px, env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background:
      radial-gradient(ellipse at 90% 35%, #21489750, transparent 65%), #080b13;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-14px);
    transition:
      opacity var(--motion-toggle),
      transform var(--motion-panel) var(--ease-out),
      visibility 0s var(--motion-panel);
  }
  #navigation.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition-delay: 0s;
  }
  .mobile-nav-note {
    display: block;
    color: #c7d3ea;
    font-size: 10px;
    margin-bottom: 30px;
  }
  #navigation a {
    font-size: clamp(28px, 6vw, 47px);
    font-weight: 400;
    letter-spacing: -0.04em;
    line-height: 1.25;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    color: #d4ddec;
    transform: translateY(15px);
    opacity: 0;
    transition:
      transform var(--motion-link) var(--ease-out),
      opacity var(--motion-link);
  }
  #navigation.open a {
    transform: none;
    opacity: 1;
    transition-delay: calc(var(--nav-order, 0) * 35ms);
  }
  #navigation a:after {
    display: none;
  }
  #navigation a:before {
    content: attr(data-index);
    display: inline-block;
    font-size: 9px;
    width: 38px;
    letter-spacing: 0.06em;
    color: #9ab6e6;
    vertical-align: middle;
  }
  .mobile-nav-contact {
    display: inline-flex;
    margin-top: 30px;
    flex-shrink: 0;
  }
}

@media (max-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .touch-interactions-ready #navigation {
    isolation: isolate;
    background: #080b13;
  }
  .touch-interactions-ready #navigation:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse at 90% 35%, #21489760, transparent 65%);
    opacity: 0;
    transform: scale(1.06) translateY(-12px);
    transition:
      opacity var(--motion-hover) var(--ease-out),
      transform var(--motion-hover) var(--ease-out);
  }
  .touch-interactions-ready #navigation.open:before {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  .touch-interactions-ready #navigation .mobile-nav-note {
    opacity: 0;
    transform: translateY(-7px);
    transition:
      opacity var(--motion-short),
      transform var(--motion-short) var(--ease-out);
  }
  .touch-interactions-ready #navigation.open .mobile-nav-note {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 45ms;
  }
  .touch-interactions-ready #navigation .mobile-nav-contact {
    opacity: 0;
    transform: translateY(14px);
    transition:
      opacity var(--motion-panel),
      transform var(--motion-panel) var(--ease-out);
  }
  .touch-interactions-ready #navigation.open .mobile-nav-contact {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 170ms;
  }
  .touch-interactions-ready #header .brand img {
    transition: transform var(--motion-hover) var(--ease-out);
  }
  .touch-interactions-ready.touch-menu-open #header .brand img {
    transform: translate(-50%, calc(-50% - 2px)) scale(1.012);
  }
  .touch-interactions-ready #navigation:not(.open).is-menu-closing {
    opacity: 0;
    visibility: visible;
    pointer-events: none;
    transform: translateY(-7px);
    transition:
      opacity var(--motion-micro) calc(var(--motion-instant) - 20ms),
      transform var(--motion-hover) var(--ease-out),
      visibility 0s;
  }
  .touch-interactions-ready #navigation:not(.open).is-menu-settled {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-14px);
    transition: none;
  }
  .touch-interactions-ready #navigation.is-menu-closing a {
    opacity: 0;
    transform: translateY(12px);
    transition-duration: var(--motion-micro);
    transition-delay: calc(var(--nav-exit-order, 0) * 18ms);
  }
  .touch-interactions-ready #navigation.is-menu-closing .mobile-nav-contact {
    transition-duration: var(--motion-micro);
    transition-delay: 0s;
  }
  .touch-interactions-ready .faq details[data-faq-animating] {
    overflow: hidden;
  }
  .touch-interactions-ready .faq details[open] p {
    animation: none;
  }
  .touch-interactions-ready .faq summary:after {
    content: "+";
    transform: rotate(0deg);
    transition: transform var(--motion-medium) var(--ease-out);
  }
  .touch-interactions-ready
    .faq
    details[data-faq-expanded="true"]
    summary:after {
    content: "+";
    transform: rotate(45deg);
  }
  .touch-interactions-ready
    :is(
      .btn,
      .text-link,
      .concepts-index button,
      .menu-toggle,
      .floating-whatsapp
    ) {
    scale: 1;
    transition-property: scale, border-color, color, background;
    transition-duration: var(--motion-instant);
    transition-timing-function: var(--ease-out);
  }
  .touch-interactions-ready
    :is(
      .btn,
      .text-link,
      .concepts-index button,
      .menu-toggle,
      .floating-whatsapp
    ).is-pressed {
    scale: 0.975;
  }
  .touch-interactions-ready .btn.is-pressed {
    border-color: var(--blue);
  }
  .touch-interactions-ready .btn.is-pressed:before {
    transform: scaleX(1);
  }
  .touch-interactions-ready .btn.is-pressed > span[aria-hidden],
  .touch-interactions-ready .text-link.is-pressed > span[aria-hidden] {
    transform: translate(2px, -2px);
  }
}