/* Phones and touch screens. Loaded after home.min.css, so it only adds: it never changes the desktop page. */

/* animations that are off screen do not run: less work for the phone while it scrolls */
.anim-off, .anim-off *, .anim-off *::before, .anim-off *::after { animation-play-state: paused !important; }

/* a finger has no hover: nothing stays lifted or recoloured after a tap, and every tap gives feedback instead */
html { -webkit-tap-highlight-color: transparent; }
a, button, summary, .tab, .item { touch-action: manipulation; }

@media (hover: none) {
  .tool:hover { transform: none; }
  .tab:hover svg { transform: none; }
  .faces:hover li:nth-child(odd), .faces:hover li:nth-child(2n) { transform: none; }
  .soc a.x:hover, .soc a.ig:hover { transform: none; background: #fff; }
  .plan .cta:hover { transform: none; background: var(--ink); }
  .life .cta:hover, .cta-card .btn-chrome:hover { background: var(--yellow); }
  .replay:hover { background: var(--ink); }
  .foot ul a:hover { background-size: 0 2px; }
  .nav a:hover { background: transparent; }

  .btn-chrome, .plan .cta, .replay, .menu-btn, .soc a, .tool, .tab, .faq-list summary {
    transition-property: transform, background-color, box-shadow, opacity;
  }
  .btn-chrome:active, .plan .cta:active, .replay:active { transform: scale(.96); }
  .menu-btn:active, .soc a:active { transform: scale(.92); }
  .tool:active { transform: scale(.985); }
  .tab:active { transform: scale(.95); }
  .faq-list summary:active { background: #1412180a; }
  .item:active { background: #14121808; }
}

@media (max-width: 760px) {
  /* ---- the menu: it slides down and fades in, the links follow one by one, the page dims behind it ---- */
  .hdr .nav {
    display: flex; flex-direction: column;
    position: absolute; top: 76px; left: 0; right: 0;
    background: var(--bg);
    border-radius: 0 0 26px 26px;
    box-shadow: 0 28px 40px -24px #14121866;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-10px);
    transition: opacity .22s ease, transform .38s var(--ease), visibility 0s linear .38s;
  }
  .hdr.menu-open .nav {
    opacity: 1; visibility: visible; pointer-events: auto; transform: none;
    transition-delay: 0s;
  }
  .hdr .nav a {
    opacity: 0; transform: translateY(8px);
    transition: opacity .25s ease, transform .4s var(--ease), background-color .2s ease;
  }
  .hdr.menu-open .nav a { opacity: 1; transform: none; }
  .hdr.menu-open .nav a:nth-child(1) { transition-delay: .05s; }
  .hdr.menu-open .nav a:nth-child(2) { transition-delay: .09s; }
  .hdr.menu-open .nav a:nth-child(3) { transition-delay: .13s; }
  .hdr.menu-open .nav a:nth-child(4) { transition-delay: .17s; }
  .hdr.menu-open .nav a:nth-child(5) { transition-delay: .21s; }
  .hdr.menu-open .nav a:nth-child(6) { transition-delay: .25s; }
  .hdr .nav .nav-cta {
    display: inline-flex; justify-content: center; margin-top: 18px; height: 54px; border-bottom: 0;
    border-radius: 999px; background: var(--ink); color: #fff; font-weight: 600;
  }
  .hdr .nav .nav-cta:active { transform: scale(.97); }

  .menu-scrim {
    position: fixed; inset: 0; z-index: 55; background: #14121859;
    opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility 0s linear .3s;
  }
  .menu-scrim.on { opacity: 1; visibility: visible; transition-delay: 0s; }

  .menu-btn .ic-menu, .menu-btn .ic-close { transition: transform .35s var(--ease), opacity .2s ease; }
  .hdr.menu-open .menu-btn .ic-close { animation: menu-spin .38s var(--ease); }
  @keyframes menu-spin { from { transform: rotate(-90deg) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

  /* ---- the feature tabs scroll sideways: the edges fade so it is clear there is more, and the open tab is brought into view ---- */
  .tabs {
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scroll-padding: 0 28px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%);
  }
  .tab { min-height: 44px; }

  /* a live blur behind the top bar is redrawn on every scroll frame; a near-solid bar looks the same and scrolls smoothly */
  .hdr.is-scrolled { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(250, 248, 245, .97); }

  /* big, even touch targets */
  .faq-list summary { min-height: 60px; -webkit-user-select: none; user-select: none; }
  .foot ul a { display: inline-block; padding: 5px 0; }
  .soc a { width: 46px; height: 46px; }
}