/* BFIA cinematic presentation — 2026-09-13. Existing stage and sequence retained. */
.bfs-intro-overlay.bfs-cinematic {
  --bfs-energy: 0;
  background:
    radial-gradient(ellipse at 50% 49%, #102b40 0%, transparent 58%),
    radial-gradient(ellipse at 8% 18%, #072840 0%, transparent 46%),
    linear-gradient(130deg, #020a14, #061522 56%, #030b14);
}

.bfs-cinematic .bfs-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  contain: strict;
}

.bfs-cinematic::after {
  background: linear-gradient(90deg, rgba(0,4,12,.12), transparent 24% 76%, rgba(0,4,12,.12));
  box-shadow: inset 0 0 130px rgba(0,0,0,.30);
}

.bfs-cinematic .bfs-tech-layer::before { opacity: .19; }
.bfs-cinematic .bfs-particles { opacity: .45; }

/* Glow stays behind the reading surface; foreground lettering remains solid. */
.bfs-cinematic .bfs-laptop-shadow {
  background: radial-gradient(ellipse, rgba(47,177,244,.27), rgba(10,43,72,.08) 53%, transparent 72%);
}
.bfs-cinematic .bfs-laptop-screen {
  border-color: #c8ecff;
  box-shadow:
    0 0 0 1px rgba(70,177,255,.55),
    0 0 22px rgba(50,171,255,.12),
    inset 0 0 25px rgba(53,149,226,.09);
}
.bfs-cinematic .bfs-laptop-base {
  border-bottom-color: rgba(227,190,105,.8);
}
.bfs-cinematic .bfs-menu-card {
  border-color: #84c7ff;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(0,8,20,.3);
}
.bfs-cinematic .bfs-menu-card b {
  min-width: 0;
  white-space: normal;
  overflow-wrap: normal;
  line-height: 1.16;
}
.bfs-cinematic .bfs-menu-card[data-bfs-presenting="true"] {
  border-color: #369dff;
}
.bfs-cinematic .bfs-intro-progress {
  border-color: rgba(116,203,255,.4);
  background: rgba(3,21,36,.96);
}
.bfs-cinematic .bfs-intro-progress > [data-bfs-phase-label] {
  background: rgba(12,58,88,.85);
}
.bfs-cinematic .bfs-intro-progress-track {
  background: #0b263b;
  border-color: rgba(111,196,247,.28);
}
.bfs-cinematic .bfs-intro-progress-track span {
  background: linear-gradient(90deg, #1478e8, #4cd4f2 66%, #edc879);
  box-shadow: 0 0 12px rgba(67,190,247,.35);
}
.bfs-cinematic[data-phase="closing"] .bfs-laptop-screen {
  border-color: #e2fbff;
  box-shadow: 0 0 0 1px #55b7ff, 0 0 38px rgba(81,205,247,.26), inset 0 0 30px rgba(96,185,255,.12);
}
.bfs-cinematic[data-phase="reveal"] .bfs-reveal .bfs-reveal-title {
  filter: none;
  text-shadow: 0 2px 22px rgba(2,12,24,.35);
}
@media (min-width: 641px) and (max-width: 1100px) {
  .bfs-cinematic .bfs-menu-card b { font-size: .79rem; }
  .bfs-cinematic .bfs-menu-card[data-bfs-presenting="true"] b,
  .bfs-cinematic .bfs-menu-card[data-bfs-gathered="true"] b,
  .bfs-cinematic .bfs-menu-card[data-bfs-dropping="true"] b { font-size: .97rem; }
}
@media (max-width: 640px) {
  .bfs-cinematic .bfs-atmosphere { opacity: .75; }
  .bfs-cinematic::after { box-shadow: inset 0 0 65px rgba(0,0,0,.25); }
  .bfs-cinematic .bfs-menu-card[data-card-side] b { line-height: 1.18; }
}
@media (prefers-reduced-motion: reduce) {
  .bfs-cinematic .bfs-atmosphere { display: none; }
}

/* Portrait tablets retain the same four previews and two module columns.
   Fit the resting modules between preview rows, within the viewport. */
@media (min-width: 641px) and (max-width: 900px) {
  .bfs-cinematic .bfs-tech-code, .bfs-cinematic .bfs-tech-ai { top: 3%; }
  .bfs-cinematic .bfs-tech-data, .bfs-cinematic .bfs-tech-rack { bottom: 3%; }
  .bfs-cinematic .bfs-menu-card[data-card-side="left"] { left: 0 !important; right: auto; }
  .bfs-cinematic .bfs-menu-card[data-card-side="right"] { left: auto !important; right: 0; }
  .bfs-cinematic .bfs-menu-card[data-card-row="1"] { top: 27%; }
  .bfs-cinematic .bfs-menu-card[data-card-row="2"] { top: 37%; }
  .bfs-cinematic .bfs-menu-card[data-card-row="3"] { top: 47%; }
  .bfs-cinematic .bfs-menu-card[data-card-row="4"] { top: 57%; }
  .bfs-cinematic .bfs-menu-card[data-card-row="5"] { top: 67%; }
  .bfs-cinematic .bfs-menu-card[data-card-side] {
    width: clamp(120px, 17.5vw, 148px); min-height: 52px; padding: 7px; gap: 6px;
  }
  .bfs-cinematic .bfs-menu-card[data-card-side] i { width: 30px; height: 30px; flex-shrink: 0; }
  .bfs-cinematic .bfs-menu-card[data-bfs-presenting="true"],
  .bfs-cinematic .bfs-menu-card[data-bfs-gathered="true"],
  .bfs-cinematic .bfs-menu-card[data-bfs-dropping="true"] { width: 226px; min-height: 66px; }
}

/* James JDev — stronger physical light and reading contrast. Same scene geometry. */
.bfs-intro-overlay.bfs-cinematic {
  background: radial-gradient(ellipse at 50% 58%, #09375a 0%, #031528 44%, #010710 85%);
}
.bfs-cinematic .bfs-atmosphere { opacity: 1; }
.bfs-cinematic::after {
  background: linear-gradient(90deg, rgba(0,3,9,.08), transparent 20% 80%, rgba(0,3,9,.08));
  box-shadow: inset 0 0 120px rgba(0,0,0,.24);
}
.bfs-cinematic .bfs-tech-layer::before { opacity: .14; }
.bfs-cinematic .bfs-scene-glow { opacity: .3; }

.bfs-cinematic .bfs-menu-card,
.bfs-cinematic .bfs-menu-card[data-bfs-presenting="true"],
.bfs-cinematic .bfs-menu-card[data-bfs-gathered="true"],
.bfs-cinematic .bfs-menu-card[data-bfs-dropping="true"] {
  color: #f5fbff;
  border-color: #4596c6;
  background: linear-gradient(130deg, #183a54 0%, #0a233b 65%, #06182c 100%);
  box-shadow: inset 0 1px 0 #6894ad, inset 0 -1px 0 #04101c, 0 12px 30px #0008, 0 0 18px #25b2f518;
}
.bfs-cinematic .bfs-menu-card b,
.bfs-cinematic .bfs-menu-card[data-bfs-presenting="true"] b,
.bfs-cinematic .bfs-menu-card[data-bfs-gathered="true"] b,
.bfs-cinematic .bfs-menu-card[data-bfs-dropping="true"] b {
  color: #f4faff;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 750;
}
.bfs-cinematic .bfs-menu-card i { background: #fff; border-color: #9addff; }
.bfs-cinematic .bfs-menu-card[data-bfs-presenting="true"],
.bfs-cinematic .bfs-menu-card[data-bfs-dropping="true"] {
  background: linear-gradient(120deg, #215c7e, #103655 70%, #10273f);
  border-color: #95efff;
  box-shadow: inset 0 1px #d1faff, 0 0 0 1px #1d6f91, 0 0 28px #2fcbff77, 0 18px 30px #0008;
}
.bfs-cinematic .bfs-menu-card[data-bfs-gathered="true"] { border-color: #75cde8; }
.bfs-cinematic .bfs-laptop-screen,
.bfs-cinematic[data-phase="closing"] .bfs-laptop-screen,
.bfs-cinematic[data-phase="reveal"] .bfs-laptop-screen {
  border: 2px solid #a4def1;
  border-bottom-width: 5px;
  background: radial-gradient(ellipse at 50% 50%, #0f4a70, #06243e 56%, #031323);
  box-shadow: inset 0 0 0 6px #061624, inset 0 0 36px #36b9ff25, 0 0 3px #d9faff, 0 0 38px #25b6ff55, 0 18px 30px #0008;
}
.bfs-cinematic .bfs-laptop-screen-grid {
  opacity: .9;
  background-image: linear-gradient(#42caff16 1px,transparent 1px),linear-gradient(90deg,#42caff16 1px,transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse,#000 12%,transparent 85%);
}
.bfs-cinematic .bfs-laptop-screen-grid::before,
.bfs-cinematic .bfs-laptop-screen-grid::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 110px; height: 110px;
  border-radius: 50%; border: 1px solid #5de0ff88; border-top-color: #bdfaff;
  border-bottom-color: #f4cd8c; box-shadow: 0 0 20px #27c8ff44, inset 0 0 16px #28caff22;
  transform: translate(-50%, -50%); animation: bfs-impact-core 12s linear infinite;
}
.bfs-cinematic .bfs-laptop-screen-grid::after {
  width: 145px; height: 145px; opacity: .45; animation-direction: reverse; animation-duration: 19s;
}
@keyframes bfs-impact-core { to { transform: translate(-50%, -50%) rotate(360deg); } }
.bfs-cinematic .bfs-laptop-screen-status {
  color: #ecfaff;
  padding: 9px 12px;
  border: 1px solid #52bde44d;
  border-radius: 5px;
  background: #041728dc;
}
.bfs-cinematic .bfs-laptop-base {
  border-color: #86cde9;
  background: linear-gradient(110deg, #264761, #49748d 48%, #102b41 76%, #061522);
  box-shadow: inset 0 2px #c3f2ff, inset 0 -4px #020b16;
}
.bfs-cinematic .bfs-laptop-keyboard { box-shadow: 0 0 0 1px #40c2ef77, inset 0 0 15px #000c, 0 0 20px #2c9ac72e; }
.bfs-cinematic .bfs-laptop-hinge { border-color: #7edbff; background: linear-gradient(#8eafbe,#172e41); }
.bfs-cinematic .bfs-laptop-trackpad { border-color: #70b8da; background: #133149; }
.bfs-cinematic .bfs-laptop-shadow { background: #1ab4ff55; filter: blur(26px); }
.bfs-cinematic .bfs-screen-brand-core b { color: #f1fbff; }
.bfs-cinematic .bfs-screen-brand-core small { color: #85d5ff; }
.bfs-cinematic .bfs-screen-side em { color: #c3edff; border-color: #3d8dbd; background: #08304b; }
.bfs-cinematic[data-phase="closing"] .bfs-laptop-screen-grid,
.bfs-cinematic[data-phase="reveal"] .bfs-laptop-screen-grid { opacity: .20; }
.bfs-cinematic[data-phase="closing"] .bfs-laptop-screen {
  border-color: #fff0c4;
  box-shadow: inset 0 0 0 6px #051728, 0 0 5px #fff1cc, 0 0 65px #35bdfb88, 0 0 100px #eabe6544;
}
.bfs-cinematic .bfs-intro-progress {
  border-color: #3b86b2;
  background: linear-gradient(110deg,#102f47ef,#051728f5);
  box-shadow: 0 0 32px #22b7ff20, inset 0 1px #8cc5df30;
}
.bfs-cinematic .bfs-intro-progress-track { height: 5px; }
.bfs-cinematic .bfs-intro-progress-track span { box-shadow: 0 0 16px #36d9ff; }
.bfs-cinematic[data-phase="reveal"] .bfs-reveal .bfs-reveal-title { text-shadow: 0 0 35px #4cc5ff55,0 4px 25px #0009; }

@media(max-width:640px) {
  .bfs-cinematic .bfs-atmosphere { opacity: 1; }
  .bfs-cinematic .bfs-laptop-screen-grid::before { width: 60px; height: 60px; }
  .bfs-cinematic .bfs-laptop-screen-grid::after { width: 80px; height: 80px; }
  .bfs-cinematic .bfs-laptop-screen-status { padding: 6px 5px; letter-spacing: .07em; }
  .bfs-cinematic .bfs-menu-card { box-shadow: inset 0 1px #538bad, 0 7px 18px #0009; }
  .bfs-cinematic .bfs-menu-card[data-bfs-presenting="true"] { box-shadow: 0 0 18px #33c4ff88, inset 0 1px #c0f5ff; }
}
@media(prefers-reduced-motion:reduce) {
  .bfs-cinematic .bfs-laptop-screen-grid::before,
  .bfs-cinematic .bfs-laptop-screen-grid::after { animation: none; }
}

/* Final reading and layer fixes from real desktop/mobile captures. */
.bfs-cinematic[data-phase="closing"] .bfs-laptop-screen-status { color: #edfcff; border-color: #7addff77; text-shadow: 0 0 12px #37bfff55; }
.bfs-cinematic .bfs-laptop { filter: none !important; transform-style: flat; }
.bfs-cinematic .bfs-card-field { transform-style: flat; }

/* Proven Chrome layer fix: screen/base keep their own transforms. */
.bfs-cinematic .bfs-scene, .bfs-cinematic .bfs-laptop-wrap { transform-style: flat; perspective: none; }