/* Anti-flash: hide reveal targets until main.js marks html.anim-ready.
   Without JS (html.js never set) all content stays visible for SEO/crawlers. */

html.js:not(.anim-ready) .header--entrance > .container,
html.js:not(.anim-ready) .hero-text h1,
html.js:not(.anim-ready) .hero-text .btn,
html.js:not(.anim-ready) .mobile-nav__link,
html.js:not(.anim-ready) .mobile-menu__actions .btn,
html.js:not(.anim-ready) .features-section__title,
html.js:not(.anim-ready) .features-section .card,
html.js:not(.anim-ready) .notice-bar,
html.js:not(.anim-ready) .vpn-intro__title,
html.js:not(.anim-ready) .vpn-intro__subtitle,
html.js:not(.anim-ready) .vpn-card,
html.js:not(.anim-ready) .vpn-note,
html.js:not(.anim-ready) .guide-question,
html.js:not(.anim-ready) .tab,
html.js:not(.anim-ready) .guide-row,
html.js:not(.anim-ready) .video-card,
html.js:not(.anim-ready) .faq-title,
html.js:not(.anim-ready) .accordion:not(.accordion--open) .ac-head,
html.js:not(.anim-ready) .faq-item,
html.js:not(.anim-ready) .ctable-col .ci,
html.js:not(.anim-ready) .flags-bar,
html.js:not(.anim-ready) .foot-nav a,
html.js:not(.anim-ready) .soc-btn,
html.js:not(.anim-ready) .foot-copy p,
html.js:not(.anim-ready) .cta-row .btn:not(.guide-media .cta-row .btn),
html.js:not(.anim-ready) #faq-ask-chat {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  html.js:not(.anim-ready) .header--entrance > .container,
  html.js:not(.anim-ready) .hero-text h1,
  html.js:not(.anim-ready) .hero-text .btn,
  html.js:not(.anim-ready) .mobile-nav__link,
  html.js:not(.anim-ready) .mobile-menu__actions .btn,
  html.js:not(.anim-ready) .features-section__title,
  html.js:not(.anim-ready) .features-section .card,
  html.js:not(.anim-ready) .notice-bar,
  html.js:not(.anim-ready) .vpn-intro__title,
  html.js:not(.anim-ready) .vpn-intro__subtitle,
  html.js:not(.anim-ready) .vpn-card,
  html.js:not(.anim-ready) .vpn-note,
  html.js:not(.anim-ready) .guide-question,
  html.js:not(.anim-ready) .tab,
  html.js:not(.anim-ready) .guide-row,
  html.js:not(.anim-ready) .video-card,
  html.js:not(.anim-ready) .faq-title,
  html.js:not(.anim-ready) .accordion:not(.accordion--open) .ac-head,
  html.js:not(.anim-ready) .faq-item,
  html.js:not(.anim-ready) .ctable-col .ci,
  html.js:not(.anim-ready) .flags-bar,
  html.js:not(.anim-ready) .foot-nav a,
  html.js:not(.anim-ready) .soc-btn,
  html.js:not(.anim-ready) .foot-copy p,
  html.js:not(.anim-ready) .cta-row .btn:not(.guide-media .cta-row .btn),
  html.js:not(.anim-ready) #faq-ask-chat {
    opacity: 1 !important;
  }
}