/* Streamora TV: motion and engagement layer. Every effect is disabled under prefers-reduced-motion. */

/* ── Announcement bar ───────────────────────────────────────────── */
.announce { background: linear-gradient(90deg, #a40716, var(--red) 40%, #a40716); color: var(--white);
  font: 600 14px/1.4 var(--body); text-align: center; padding: 9px 14px; position: relative; overflow: hidden; }
.announce a { color: var(--white); text-decoration: underline; font-weight: 700; margin-left: 8px; white-space: nowrap; }
.announce a:hover { color: #ffd6da; }
.announce::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .22) 50%, transparent 60%);
  transform: translateX(-100%); animation: announce-shine 5s ease-in-out infinite; pointer-events: none; }
@keyframes announce-shine { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* ── Header: solidifies and tightens on scroll ──────────────────── */
.site-header { transition: background .3s ease, box-shadow .3s ease; }
.site-header.scrolled { background: rgba(0, 0, 0, .97); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .9), 0 1px 0 rgba(247, 26, 44, .25); }
.site-header .header-row { transition: min-height .3s ease; }
.site-header.scrolled .header-row { min-height: 62px; }
.site-nav a:not(.nav-cta) { position: relative; padding-bottom: 4px; }
.site-nav a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--red);
  transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.site-nav a:not(.nav-cta):hover::after, .site-nav a.on:not(.nav-cta)::after { transform: scaleX(1); }
.nav-cta { position: relative; overflow: hidden; }
.nav-cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .35) 50%, transparent 60%);
  transform: translateX(-120%); animation: cta-shine 4.5s ease-in-out infinite; }
@keyframes cta-shine { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* ── Hero entrance ──────────────────────────────────────────────── */
.hero-video .hero-eyebrow { animation: rise .7s ease .1s both; }
.hero-video h1 { animation: rise .7s ease .25s both; }
.hero-video .sub { animation: rise .7s ease .4s both; }
.hero-video .btn-row { animation: rise .7s ease .55s both; }
.watch-now { animation: pop .6s cubic-bezier(.34, 1.56, .64, 1) .7s both; }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }

/* ── Scroll reveals (site.js tags elements with .reveal and sets --d for stagger) ── */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s ease; transition-delay: calc(var(--d, 0) * 90ms); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
.rule-reveal { transform: scaleX(0); transition: transform .9s ease .25s; }
.rule-reveal.in { transform: scaleX(1); }

/* ── Cards and buttons: extra life ──────────────────────────────── */
.plan-pop { animation: popglow 2.8s ease-in-out infinite; }
@keyframes popglow { 0%, 100% { box-shadow: 0 34px 64px -30px rgba(247, 26, 44, .65); } 50% { box-shadow: 0 34px 72px -26px rgba(247, 26, 44, .95); } }
.btn-buy { position: relative; overflow: hidden; }
.btn-buy::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .3) 50%, transparent 60%);
  transform: translateX(-120%); animation: cta-shine 3.8s ease-in-out infinite; }
.feat-card .ico { transition: transform .25s ease; }
.feat-card:hover .ico { transform: scale(1.1) rotate(-4deg); }
.poster-grid img:hover, .testi-grid img:hover { transform: translateY(-6px) scale(1.02); }

/* ── FAQ: smooth open ───────────────────────────────────────────── */
.faq-item .faq-body { display: block; max-height: 0; overflow: hidden; padding: 0 24px; transition: max-height .4s ease, padding .3s ease; }
.faq-item.open .faq-body { display: block; max-height: 340px; padding: 2px 24px 20px; }

/* ── Reduced motion: switch it all off ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .announce::after, .nav-cta::after, .btn-buy::after { animation: none; }
  .hero-video .hero-eyebrow, .hero-video h1, .hero-video .sub, .hero-video .btn-row, .watch-now { animation: none; }
  .plan-pop { animation: none; }
  .reveal, .rule-reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation: none; }
}