/* Shared cinematic page entrance. Every selector stays inside this component. */
.bt-cinematic { --bt-cinematic-blue: #0565e8; position: relative; isolation: isolate; width: min(1680px, calc(100% - 64px)); margin: 24px auto 0; min-height: 590px; overflow: hidden; border-radius: 24px; background: #072548; color: #fff; font-family: 'Inter', sans-serif; line-height: 1.5; }
.bt-cinematic *, .bt-cinematic *::before, .bt-cinematic *::after { box-sizing: border-box; }
.bt-cinematic [hidden] { display: none !important; }
.bt-cinematic-scenes, .bt-cinematic-scene, .bt-cinematic-shade { position: absolute; inset: 0; }
.bt-cinematic-scenes { z-index: -3; }
.bt-cinematic-scene { overflow: hidden; }
.bt-cinematic-poster, .bt-cinematic-video { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.bt-cinematic-video { opacity: 0; transition: opacity .45s ease; }
.bt-cinematic-scene.is-playing .bt-cinematic-video { opacity: 1; }
.bt-cinematic-shade { z-index: -2; background: linear-gradient(90deg, #03162bef 0%, #031a31de 29%, #031a3199 51%, #031a3126 80%), linear-gradient(0deg, #021426b3 0%, #041b2c00 44%); }
.bt-cinematic-body { display: flex; flex-direction: column; justify-content: space-between; min-height: 590px; gap: 44px; padding: 64px 64px 30px; }
.bt-cinematic-copy { width: min(720px, 62%); }
.bt-cinematic-kicker { color: #c3dafb; font-size: 13px; font-weight: 700; letter-spacing: .16em; line-height: 1.6; text-transform: uppercase; margin: 0 0 16px; }
.bt-cinematic .bt-cinematic-title { margin: 0; color: #fff; font-family: inherit; font-size: clamp(42px, 4.8vw, 76px); font-weight: 750; line-height: 1.075; letter-spacing: -.045em; overflow-wrap: anywhere; }
.bt-cinematic-description { max-width: 640px; margin: 22px 0 0; color: #e2ebf7; font-size: 17px; line-height: 1.8; }
.bt-cinematic-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 30px; }
.bt-cinematic .bt-cinematic-action { display: inline-flex; align-items: center; justify-content: center; gap: 24px; min-height: 54px; padding: 14px 22px; border: 1px solid transparent; border-radius: 9px; font-size: 15px; font-weight: 700; line-height: 1.5; text-decoration: none; }
.bt-cinematic-action > span { font-size: 23px; line-height: 1; }
.bt-cinematic .bt-cinematic-primary { background: var(--bt-cinematic-blue); color: #fff; box-shadow: 0 6px 22px #005de547; }
.bt-cinematic .bt-cinematic-primary:hover { background: #034fc0; color: #fff; }
.bt-cinematic .bt-cinematic-secondary { border-color: #ffffff80; background: #ffffff0c; color: #fff; }
.bt-cinematic .bt-cinematic-secondary:hover { background: #ffffff20; border-color: #fff; color: #fff; }
.bt-cinematic-bottom { display: flex; align-items: center; justify-content: space-between; gap: 28px; width: 100%; }
.bt-cinematic-scene-note { display: flex; align-items: center; gap: 18px; min-width: 0; color: #e4ecf7; font-size: 13px; font-weight: 500; line-height: 1.5; }
.bt-cinematic-index { flex-shrink: 0; font-size: 12px; font-weight: 700; letter-spacing: .1em; padding-right: 18px; border-right: 1px solid #ffffff42; }
.bt-cinematic-controls { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.bt-cinematic button { margin: 0; appearance: none; font: inherit; cursor: pointer; }
.bt-cinematic-arrow { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: #fff; border: 1px solid #ffffff70; background: #041a3199; border-radius: 50%; }
.bt-cinematic-arrow:hover { color: #fff; background: #ffffff24; border-color: #fff; }
.bt-cinematic-arrow svg, .bt-cinematic-motion svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.bt-cinematic-dots { display: flex; align-items: center; }
.bt-cinematic-dot { display: grid; place-items: center; padding: 0; width: 36px; height: 44px; border: 0; background: transparent; }
.bt-cinematic-dot span { display: block; width: 7px; height: 7px; border-radius: 10px; background: #ffffff70; transition: width .2s, background .2s; }
.bt-cinematic-dot[aria-pressed="true"] span { width: 23px; background: #fff; }
.bt-cinematic-motion { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 14px; margin-left: 10px !important; color: #fff; border: 1px solid #ffffff70; border-radius: 24px; background: #041a3199; font-size: 12px !important; font-weight: 600 !important; white-space: nowrap; }
.bt-cinematic-motion:hover { background: #ffffff24; border-color: #fff; }
.bt-cinematic .bt-cinematic-pause-icon { display: none; }
.bt-cinematic-motion[aria-pressed="true"] .bt-cinematic-pause-icon { display: block; }
.bt-cinematic-motion[aria-pressed="true"] .bt-cinematic-play-icon { display: none; }
.bt-cinematic a:focus-visible, .bt-cinematic button:focus-visible, .bt-cinematic:focus-visible { outline: 3px solid #f7b84b; outline-offset: 4px; }
.bt-cinematic-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.bt-cinematic-compact { min-height: 420px; }
.bt-cinematic-compact .bt-cinematic-body { min-height: 420px; padding-top: 44px; gap: 34px; }
.bt-cinematic-compact .bt-cinematic-title { font-size: clamp(36px, 3.3vw, 52px); max-width: 690px; line-height: 1.14; }
.bt-cinematic-compact .bt-cinematic-description { margin-top: 16px; font-size: 16px; }
.bt-cinematic-compact .bt-cinematic-actions { margin-top: 24px; }
@media (max-width: 1279px) {
    .bt-cinematic { width: calc(100% - 48px); }
    .bt-cinematic-body { padding: 50px 40px 28px; }
    .bt-cinematic-copy { width: min(640px, 70%); }
    .bt-cinematic-bottom { gap: 20px; }
    .bt-cinematic-scene-note { gap: 12px; }
    .bt-cinematic-index { padding-right: 12px; }
}
@media (max-width: 900px) {
    .bt-cinematic-bottom { align-items: flex-start; flex-direction: column; gap: 20px; }
    .bt-cinematic-body { min-height: 570px; }
    .bt-cinematic-compact .bt-cinematic-body { min-height: 450px; }
    .bt-cinematic-copy { width: min(620px, 86%); }
    .bt-cinematic-shade { background: linear-gradient(90deg, #03162be6 0%, #031a31cf 48%, #031a3170 90%), linear-gradient(0deg, #02142699 0%, #041b2c00 70%); }
}
@media (max-width: 760px) {
    .bt-cinematic { width: calc(100% - 32px); margin-top: 16px; min-height: 0; border-radius: 16px; }
    .bt-cinematic-body { min-height: 580px; padding: 36px 24px 22px; gap: 40px; }
    .bt-cinematic-copy { width: 100%; }
    .bt-cinematic-kicker { font-size: 11px; margin-bottom: 14px; letter-spacing: .13em; }
    .bt-cinematic .bt-cinematic-title { font-size: clamp(36px, 8vw, 52px); line-height: 1.12; }
    .bt-cinematic-description { margin-top: 18px; font-size: 15px; line-height: 1.75; }
    .bt-cinematic-actions { gap: 10px; margin-top: 24px; }
    .bt-cinematic .bt-cinematic-action { gap: 16px; min-height: 50px; padding: 12px 16px; font-size: 14px; }
    .bt-cinematic-poster, .bt-cinematic-video { object-position: 65% center; }
    .bt-cinematic-shade { background: linear-gradient(90deg, #03162bec 0%, #031a31d4 55%, #031a319c 100%), linear-gradient(0deg, #021426c4 0%, #041b2c00 72%); }
    .bt-cinematic-scene-note { font-size: 12px; }
    .bt-cinematic-controls { gap: 6px; width: 100%; }
    .bt-cinematic-arrow { width: 42px; height: 44px; }
    .bt-cinematic-dot { width: 28px; }
    .bt-cinematic-motion { margin-left: auto !important; padding-inline: 12px; }
    .bt-cinematic-compact .bt-cinematic-body { min-height: 510px; padding-top: 32px; gap: 32px; }
    .bt-cinematic-compact .bt-cinematic-title { font-size: clamp(31px, 7.3vw, 42px); }
    .bt-cinematic-compact .bt-cinematic-description { font-size: 15px; }
}
@media (max-width: 380px) {
    .bt-cinematic-body { padding-inline: 20px; }
    .bt-cinematic .bt-cinematic-action { width: 100%; justify-content: space-between; }
    .bt-cinematic-motion [data-bt-cinematic-motion-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
    .bt-cinematic-motion { width: 44px; padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .bt-cinematic *, .bt-cinematic *::before, .bt-cinematic *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
