.tips-hero > * {
  animation: tips-enter .7s cubic-bezier(.2, .7, .2, 1) both;
}

.tips-hero .eyebrow { animation-delay: .06s; }
.tips-hero h1 { animation-delay: .12s; }
.tips-hero .tips-intro { animation-delay: .2s; }

.tips-page .scroll-progress {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

.tips-page .check-row {
  transition: transform .22s ease, background .22s ease, border-color .22s ease;
}

.tips-page .check-row:has(input:checked) {
  animation: check-pop .28s ease;
}

.tips-page progress::-webkit-progress-value {
  transition: width .35s ease;
}

.tips-page .tips-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .65s ease var(--tips-delay, 0ms), transform .65s cubic-bezier(.2, .7, .2, 1) var(--tips-delay, 0ms);
}

.tips-page .tips-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@keyframes tips-enter {
  from { opacity: .001; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@keyframes check-pop {
  50% { transform: translateX(4px); }
}

@media (max-width: 640px) {
  html { scroll-padding-top: 76px; }

  .tips-page .header {
    position: fixed;
    top: 0;
    height: 76px;
    margin-bottom: 0;
    padding: 0 5.5%;
    align-content: center;
    background: rgba(10, 10, 12, .95);
    backdrop-filter: blur(12px);
    transition: height .3s ease, box-shadow .3s ease;
  }

  .tips-page .header.is-compact {
    height: 64px;
    box-shadow: 0 10px 30px #0005;
  }

  .tips-page .header .brand-top { font-size: 25px; }
  .tips-page .header .brand-bottom { font-size: 13px; letter-spacing: 5px; }
  .tips-page .header .button.small { min-height: 44px; padding: 10px 15px; font-size: 15px; }

  .tips-page .header nav {
    top: 76px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    padding: 8px 5.5% 10px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    background: rgba(10, 10, 12, .92);
    border-bottom: 1px solid #ffffff1f;
    scrollbar-width: none;
    transition: opacity .25s ease, transform .25s ease;
  }

  .tips-page .header nav::-webkit-scrollbar { display: none; }

  .tips-page .header nav a {
    flex: 0 0 auto;
    min-height: 38px;
    display: flex;
    align-items: center;
    padding: 7px 12px;
    border: 1px solid #ffffff1f;
    font-size: 14px;
    scroll-snap-align: start;
  }

  .tips-page .header.is-compact nav {
    opacity: 0;
    transform: translateY(-14px);
    pointer-events: none;
  }

  .tips-hero { padding-top: 168px; }
  .tips-hero h1 { font-size: clamp(3rem, 12vw, 4rem); }
  .tips-layout { padding-top: 42px; }
  .tips-sidebar nav a { min-height: 55px; align-items: flex-start; }
  .progress-panel { margin-top: 8px; }
  .check-row { min-height: 74px; }
  .tips-page .tips-reveal { transform: translateY(18px); }
}

@media (prefers-reduced-motion: reduce) {
  .tips-hero > *,
  .tips-page .check-row:has(input:checked) {
    animation: none !important;
  }

  .tips-page .tips-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}