/* The landing hero's trailer (_LandingTrailerHero, landing-trailer.js). It sits in the hero's poster box: the silent
   loop fills it, the round play button (landing-preview.css) opens the trailer with sound, and a small button pauses
   the loop. The box is 16:9 for BreakMyScore, 16:10 for LetsGoExam, and 4:5 on phones. */
.lt-hero { cursor: pointer; background: #211d1a; }
.lt-hero[data-brand="lge"] { aspect-ratio: 16 / 10; }
.lt-hero .lt-loop { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.lt-hero .lt-pause { position: absolute; z-index: 3; right: 12px; bottom: 12px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(255, 255, 255, .6); border-radius: 50%; background: rgba(33, 29, 26, .7); color: #fff; font-size: 18px; cursor: pointer; }
.lt-hero .lt-pause[hidden] { display: none; }
.lt-hero .lt-pause i + i, .lt-hero.is-paused .lt-pause i:first-child { display: none; }
.lt-hero.is-paused .lt-pause i + i { display: block; }
.lt-hero .lt-pause:hover { background: rgba(33, 29, 26, .9); }
.lt-hero .lt-pause:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* LetsGoExam's hero carousel slide: the trailer replaces the screenshot above the caption. */
.lge-hero-product .lv2-carousel-slide .lt-hero { flex: none; }
/* #trailer links: when the browser blocks sound before a click, the trailer waits on this large Play button and starts
   with sound from it. The dialog's own button rules (landing-v2.css, landing-preview.css) are for its close button,
   hence the #trailerDialog. */
#trailerDialog .lt-sound { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); flex: none; display: flex; flex-direction: column; align-items: center; gap: 12px; width: auto; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: #fff; font: 750 15px/1 Inter, system-ui, sans-serif; white-space: nowrap; box-shadow: none; cursor: pointer; }
#trailerDialog .lt-sound[hidden] { display: none; }
#trailerDialog .lt-sound i { position: relative; display: grid; place-items: center; width: 84px; height: 84px; border: 3px solid #fff; border-radius: 50%; background: linear-gradient(135deg, #f8c35d 0%, #d9992e 48%, #a96716 100%); font-size: 46px; box-shadow: 0 8px 24px rgba(0, 0, 0, .4), inset 0 1px 1px rgba(255, 255, 255, .45); }
#trailerDialog .lt-sound i::after { content: ""; position: absolute; inset: -9px; border: 3px solid rgba(248, 195, 93, .7); border-radius: 50%; animation: lt-start-pulse 1.5s ease-out infinite; }
#trailerDialog .lt-sound span { padding: 8px 16px; border-radius: 999px; background: rgba(33, 29, 26, .82); box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
#trailerDialog .lt-sound:hover i { filter: brightness(1.08); }
#trailerDialog .lt-sound:focus-visible { outline: 3px solid #fff; outline-offset: 6px; border-radius: 12px; }
@keyframes lt-start-pulse { 0% { opacity: .9; transform: scale(.9); } 75%, 100% { opacity: 0; transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { #trailerDialog .lt-sound i::after { animation: none; } }
@media (max-width: 560px) {
   .lt-hero, .lt-hero[data-brand="lge"] { aspect-ratio: 4 / 5; }
   .lt-hero .lt-pause { right: 8px; bottom: 8px; width: 32px; height: 32px; font-size: 16px; }
}