/*
Theme Name: Only Feet Blue Premiere
Theme URI: https://www.onlyfeetmovie.com/
Author: QDOMU / ChatGPT
Author URI: https://qdomu.com/
Description: A one-page cinematic WordPress theme for Only Feet with a blue-black-white IMAX-inspired interface, video hero, five screen slides, poster/story block, and photography flash motion effects.
Version: 1.0.4
Requires at least: 5.8
Tested up to: 6.6
Requires PHP: 7.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: only-feet-blue-premiere
Tags: custom-logo, one-page, entertainment, photography, responsive-layout, block-styles
*/

:root {
  --of-blue-950: #020814;
  --of-blue-900: #061126;
  --of-blue-800: #071d41;
  --of-blue-700: #073481;
  --of-blue-600: #005eff;
  --of-blue-500: #0a7cff;
  --of-blue-400: #41a5ff;
  --of-blue-300: #8dcfff;
  --of-black: #030407;
  --of-white: #ffffff;
  --of-ice: #eaf6ff;
  --of-muted: rgba(234, 246, 255, .72);
  --of-line: rgba(130, 199, 255, .28);
  --of-glass: rgba(7, 22, 52, .74);
  --of-max: 1180px;
  --of-radius-lg: 34px;
  --of-radius-md: 20px;
  --of-radius-sm: 999px;
  --of-serif: 'Bodoni 72', Didot, Georgia, 'Times New Roman', Times, serif;
  --of-display: 'Aptos Display', 'SF Pro Display', 'Avenir Next', 'Helvetica Neue', Inter, ui-sans-serif, system-ui, sans-serif;
  --of-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --of-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --of-shadow-blue: 0 0 30px rgba(0, 94, 255, .46), 0 25px 90px rgba(0, 22, 88, .72);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 12% 0%, rgba(14, 114, 255, .38), transparent 30rem),
    radial-gradient(circle at 80% 12%, rgba(94, 178, 255, .22), transparent 35rem),
    linear-gradient(180deg, var(--of-blue-950), var(--of-black) 42%, #01040b 100%);
  color: var(--of-ice);
  font-family: var(--of-sans);
  overflow-x: hidden;
}
body.admin-bar .ofbp-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .ofbp-header { top: 46px; } }

a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }

.ofbp-page {
  min-height: 100vh;
  isolation: isolate;
  position: relative;
  background:
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 92px 92px;
}
.ofbp-page::before,
.ofbp-page::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}
.ofbp-page::before {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px),
    radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(0, 112, 255, .22), transparent 20rem);
  mix-blend-mode: screen;
  opacity: .42;
}
.ofbp-page::after {
  opacity: .16;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 260 260' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  animation: ofbpGrain 1.2s steps(3) infinite;
}
@keyframes ofbpGrain { 0%, 100% { transform: translate(0,0); } 33% { transform: translate(-1.5%, 1%); } 66% { transform: translate(1%, -1.5%); } }

.ofbp-flash {
  position: fixed;
  inset: 0;
  z-index: 45;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 45%), rgba(255,255,255,.96), rgba(164,214,255,.52) 15%, rgba(0,94,255,.15) 36%, transparent 68%);
  mix-blend-mode: screen;
}
.ofbp-flash.is-flashing { animation: ofbpFlash .74s cubic-bezier(.17,.84,.44,1); }
@keyframes ofbpFlash {
  0% { opacity: 0; filter: blur(20px); }
  7% { opacity: 1; filter: blur(0); }
  14% { opacity: .18; }
  28% { opacity: .52; }
  100% { opacity: 0; filter: blur(26px); }
}

.ofbp-loader {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--of-blue-950);
  z-index: 1000;
  transition: opacity .7s ease, visibility .7s ease;
}
.ofbp-loader.is-gone { opacity: 0; visibility: hidden; }
.ofbp-loader__card {
  width: min(86vw, 420px);
  text-align: center;
  padding: 34px;
  border: 1px solid rgba(141,207,255,.36);
  border-radius: 34px;
  background: linear-gradient(180deg, rgba(10, 124, 255, .16), rgba(0, 0, 0, .5));
  box-shadow: var(--of-shadow-blue);
  position: relative;
  overflow: hidden;
}
.ofbp-loader__card::before {
  content: '';
  position: absolute;
  inset: -60% -20%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
  transform: rotate(20deg) translateX(-90%);
  animation: ofbpSweep 1.4s ease-in-out infinite;
}
.ofbp-loader__logo { width: 210px; margin: 0 auto 24px; position: relative; z-index: 1; }
.ofbp-loader__text { font-family: var(--of-mono); letter-spacing: .35em; text-transform: uppercase; color: var(--of-blue-300); font-size: 11px; position: relative; z-index: 1; }
@keyframes ofbpSweep { 0% { transform: rotate(20deg) translateX(-90%); } 100% { transform: rotate(20deg) translateX(95%); } }

.ofbp-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;
  padding: 18px clamp(18px, 4vw, 58px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: var(--of-white);
  transition: background .35s ease, border-color .35s ease, transform .35s ease, padding .35s ease;
  border-bottom: 1px solid rgba(141,207,255,.08);
}
.ofbp-header.is-scrolled {
  background: rgba(1, 6, 18, .78);
  backdrop-filter: blur(18px);
  border-bottom-color: rgba(141,207,255,.22);
  padding-top: 10px;
  padding-bottom: 10px;
}
.ofbp-logo-link { display: inline-flex; align-items: center; gap: 14px; min-width: 144px; }
.ofbp-logo-img { height: clamp(54px, 7vw, 92px); width: auto; max-width: clamp(88px, 12vw, 170px); object-fit: contain; filter: drop-shadow(0 0 22px rgba(0, 94, 255, .45)); transition: transform .35s ease, height .35s ease, max-width .35s ease; }
.ofbp-header.is-scrolled .ofbp-logo-img { height: clamp(44px, 5vw, 66px); max-width: clamp(76px, 9vw, 125px); }
.ofbp-nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 42px);
  margin-left: auto;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.ofbp-nav a,
.ofbp-menu-toggle {
  position: relative;
  color: rgba(234,246,255,.82);
}
.ofbp-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  height: 1px;
  transform: scaleX(0);
  transform-origin: right;
  background: linear-gradient(90deg, transparent, var(--of-blue-400), transparent);
  transition: transform .28s ease;
}
.ofbp-nav a:hover { color: var(--of-white); text-shadow: 0 0 20px rgba(65,165,255,.75); }
.ofbp-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.ofbp-menu-toggle {
  border: 1px solid rgba(141,207,255,.25);
  border-radius: 999px;
  background: rgba(0, 94, 255, .12);
  color: var(--of-white);
  padding: 12px 14px 12px 18px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 11px;
}
.ofbp-menu-lines { width: 28px; display: grid; gap: 5px; }
.ofbp-menu-lines span { display: block; height: 2px; background: var(--of-blue-400); box-shadow: 0 0 12px rgba(65,165,255,.9); transform-origin: right; }
.ofbp-menu-toggle:hover .ofbp-menu-lines span:nth-child(2) { transform: scaleX(.62); }

.ofbp-menu-panel {
  position: fixed;
  inset: 0;
  z-index: 95;
  background:
    radial-gradient(circle at 15% 10%, rgba(0,94,255,.42), transparent 34rem),
    radial-gradient(circle at 84% 75%, rgba(65,165,255,.2), transparent 35rem),
    rgba(1, 5, 14, .96);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s ease, visibility .35s ease;
  padding: clamp(20px, 5vw, 70px);
  overflow: hidden;
}
.ofbp-menu-panel.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.ofbp-menu-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .42;
  background:
    linear-gradient(120deg, transparent 0 38%, rgba(255,255,255,.12) 48%, transparent 58%),
    repeating-linear-gradient(90deg, rgba(141,207,255,.07) 0 1px, transparent 1px 72px);
  transform: translateY(18px);
  transition: transform .65s ease, opacity .65s ease;
}
.ofbp-menu-panel.is-open::before { transform: translateY(0); opacity: .68; }
.ofbp-money-field {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
}
.ofbp-menu-panel.is-open .ofbp-money-field { opacity: 1; }
.ofbp-money-field span {
  position: absolute;
  bottom: -12vh;
  color: rgba(141,207,255,.18);
  font-family: var(--of-display);
  font-size: clamp(32px, 7vw, 120px);
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 0 18px rgba(0,94,255,.45), 0 0 54px rgba(65,165,255,.26);
  animation: ofbpDollarFloat 12s linear infinite;
  will-change: transform, opacity;
}
.ofbp-money-field span:nth-child(1) { left: 7%; animation-duration: 13s; animation-delay: -.6s; }
.ofbp-money-field span:nth-child(2) { left: 17%; animation-duration: 17s; animation-delay: -5.5s; font-size: clamp(24px, 4vw, 82px); }
.ofbp-money-field span:nth-child(3) { left: 28%; animation-duration: 12s; animation-delay: -2.4s; color: rgba(255,255,255,.14); }
.ofbp-money-field span:nth-child(4) { left: 38%; animation-duration: 18s; animation-delay: -8s; font-size: clamp(28px, 5vw, 96px); }
.ofbp-money-field span:nth-child(5) { left: 50%; animation-duration: 14s; animation-delay: -4.2s; color: rgba(0,94,255,.28); }
.ofbp-money-field span:nth-child(6) { left: 62%; animation-duration: 16s; animation-delay: -1.4s; }
.ofbp-money-field span:nth-child(7) { left: 74%; animation-duration: 19s; animation-delay: -7.5s; font-size: clamp(22px, 4vw, 76px); }
.ofbp-money-field span:nth-child(8) { left: 86%; animation-duration: 13s; animation-delay: -3.2s; color: rgba(255,255,255,.18); }
.ofbp-money-field span:nth-child(9) { left: 93%; animation-duration: 21s; animation-delay: -12s; font-size: clamp(34px, 6vw, 104px); }
.ofbp-money-field span:nth-child(10) { left: 12%; animation-duration: 20s; animation-delay: -11s; font-size: clamp(20px, 3vw, 70px); }
.ofbp-money-field span:nth-child(11) { left: 44%; animation-duration: 23s; animation-delay: -15s; font-size: clamp(18px, 3vw, 62px); }
.ofbp-money-field span:nth-child(12) { left: 69%; animation-duration: 22s; animation-delay: -10s; font-size: clamp(30px, 5vw, 88px); }
@keyframes ofbpDollarFloat {
  0% { transform: translate3d(-20px, 0, 0) rotate(-18deg) scale(.72); opacity: 0; }
  12% { opacity: .72; }
  50% { transform: translate3d(24px, -55vh, 0) rotate(12deg) scale(1); opacity: .52; }
  88% { opacity: .12; }
  100% { transform: translate3d(-14px, -118vh, 0) rotate(34deg) scale(1.18); opacity: 0; }
}
.ofbp-menu-panel__inner { position: relative; z-index: 2; height: 100%; display: grid; grid-template-columns: minmax(0, .8fr) minmax(320px, 1fr); gap: 8vw; align-items: center; max-width: 1240px; margin: 0 auto; }
.ofbp-menu-panel__logo { width: min(380px, 70vw); filter: drop-shadow(0 0 42px rgba(0,94,255,.52)); }
.ofbp-close {
  position: absolute;
  z-index: 3;
  top: 24px;
  right: 24px;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(141,207,255,.3);
  border-radius: 50%;
  color: var(--of-white);
  background: rgba(0,94,255,.08);
}
.ofbp-close::before,
.ofbp-close::after {
  content: '';
  position: absolute;
  left: 15px;
  right: 15px;
  top: 25px;
  height: 2px;
  background: var(--of-blue-300);
}
.ofbp-close::before { transform: rotate(45deg); }
.ofbp-close::after { transform: rotate(-45deg); }
.ofbp-menu-panel__links { display: grid; gap: 16px; }
.ofbp-menu-panel__links a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(18px, 3vw, 30px) clamp(20px, 3.4vw, 38px);
  border: 1px solid rgba(141,207,255,.24);
  border-radius: 24px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(0,94,255,.34), rgba(65,165,255,.10) 48%, rgba(255,255,255,.035)),
    rgba(3, 11, 28, .76);
  color: var(--of-white);
  font-family: var(--of-display);
  font-size: clamp(28px, 4.4vw, 64px);
  font-weight: 900;
  line-height: .88;
  letter-spacing: .055em;
  text-transform: uppercase;
  text-shadow: 0 0 22px rgba(65,165,255,.58);
  transform: translateY(26px) scale(.985);
  opacity: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 20px 80px rgba(0,20,70,.22);
  transition: transform .46s cubic-bezier(.2,.8,.2,1), opacity .46s ease, border-color .26s ease, background .26s ease, box-shadow .26s ease, letter-spacing .26s ease;
}
.ofbp-menu-panel__links a::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 0 36%, rgba(255,255,255,.32) 48%, transparent 60%);
  transform: translateX(-115%);
  transition: transform .58s ease;
  pointer-events: none;
}
.ofbp-menu-panel__links a::after {
  content: '';
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 11px;
  height: 1px;
  background: linear-gradient(90deg, rgba(65,165,255,.96), transparent 72%);
  transform: scaleX(.25);
  transform-origin: left;
  opacity: .72;
  transition: transform .3s ease, opacity .3s ease;
}
.ofbp-menu-panel.is-open .ofbp-menu-panel__links a { transform: translateY(0) scale(1); opacity: 1; }
.ofbp-menu-panel.is-open .ofbp-menu-panel__links a:nth-child(2) { transition-delay: .05s; }
.ofbp-menu-panel.is-open .ofbp-menu-panel__links a:nth-child(3) { transition-delay: .1s; }
.ofbp-menu-panel.is-open .ofbp-menu-panel__links a:nth-child(4) { transition-delay: .15s; }
.ofbp-menu-panel__links a:hover { border-color: rgba(255,255,255,.72); background: linear-gradient(90deg, rgba(0,94,255,.62), rgba(141,207,255,.17), rgba(255,255,255,.07)); box-shadow: 0 0 58px rgba(0,94,255,.30), inset 0 0 34px rgba(141,207,255,.14); color: var(--of-white); letter-spacing: .085em; }
.ofbp-menu-panel__links a:hover::before { transform: translateX(115%); }
.ofbp-menu-panel__links a:hover::after { transform: scaleX(1); opacity: 1; }
.ofbp-menu-panel__links small { position: relative; z-index: 1; font-family: var(--of-mono); font-size: 11px; letter-spacing: .28em; color: var(--of-blue-300); text-shadow: 0 0 18px rgba(65,165,255,.72); }

.ofbp-hero {
  min-height: 100svh;
  position: relative;
  overflow: hidden;
  display: grid;
  align-items: center;
  padding: 130px clamp(20px, 5vw, 70px) 54px;
}
.ofbp-hero__video-wrap,
.ofbp-hero__fallback,
.ofbp-hero__poster {
  position: absolute;
  inset: 0;
  z-index: -3;
}
.ofbp-hero__video,
.ofbp-hero__poster { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.2) contrast(1.05) brightness(.68); transform: scale(1.04); }
.ofbp-hero__fallback {
  background:
    radial-gradient(circle at 20% 45%, rgba(0, 94, 255, .55), transparent 30rem),
    radial-gradient(circle at 70% 25%, rgba(255,255,255,.14), transparent 24rem),
    linear-gradient(130deg, #020817, #063d99 36%, #010205 78%);
}
.ofbp-hero__fallback::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.02), rgba(255,255,255,.12), rgba(255,255,255,.02)),
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(255,255,255,.05) 22px 23px, transparent 23px 46px);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  animation: ofbpProjector 8s ease-in-out infinite alternate;
}
@keyframes ofbpProjector { 0% { transform: translateX(-2%) skewX(-5deg); opacity: .35; } 100% { transform: translateX(3%) skewX(5deg); opacity: .75; } }
.ofbp-hero::before,
.ofbp-section::before,
.ofbp-screen-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,9,30,.2) 46%, rgba(0,0,0,.76)),
    linear-gradient(0deg, rgba(0,0,0,.82), transparent 34%, rgba(0,0,0,.48));
  z-index: -1;
}
.ofbp-hero__content {
  max-width: var(--of-max);
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, .98fr) minmax(280px, .44fr);
  align-items: end;
  gap: clamp(36px, 6vw, 90px);
}
.ofbp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--of-blue-300);
  text-transform: uppercase;
  letter-spacing: .32em;
  font-family: var(--of-mono);
  font-size: 11px;
  margin-bottom: 24px;
}
.ofbp-kicker::before { content: ''; width: 42px; height: 1px; background: var(--of-blue-400); box-shadow: 0 0 18px rgba(65,165,255,.8); }
.ofbp-title {
  margin: 0;
  color: var(--of-white);
  font-family: var(--of-serif);
  font-size: clamp(66px, 12vw, 176px);
  line-height: .72;
  letter-spacing: -.075em;
  text-shadow: 0 0 28px rgba(0,94,255,.3), 0 14px 70px rgba(0,0,0,.72);
}
.ofbp-title span { color: var(--of-blue-500); display: block; text-shadow: 0 0 36px rgba(0,94,255,.7); }
.ofbp-subtitle {
  margin: 28px 0 0;
  max-width: 760px;
  color: rgba(234,246,255,.88);
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1.34;
}
.ofbp-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.ofbp-button {
  border: 1px solid rgba(141,207,255,.36);
  border-radius: 999px;
  padding: 15px 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  color: var(--of-white);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 12px;
  font-weight: 850;
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,.035);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.ofbp-button::before {
  content: '';
  position: absolute;
  inset: -2px;
  transform: translateX(-120%) skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  opacity: .55;
}
.ofbp-button:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.7); box-shadow: 0 0 38px rgba(0,94,255,.34); }
.ofbp-button:hover::before { animation: ofbpButtonSweep .7s ease; }
@keyframes ofbpButtonSweep { to { transform: translateX(120%) skewX(-20deg); } }
.ofbp-button--primary { background: linear-gradient(135deg, var(--of-blue-600), var(--of-blue-400)); border-color: rgba(255,255,255,.5); color: white; box-shadow: 0 0 42px rgba(0,94,255,.45); }
.ofbp-button--ghost { background: rgba(3, 10, 28, .64); }
.ofbp-play-dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.18); }
.ofbp-play-dot::before { content: ''; width: 0; height: 0; border-left: 8px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; margin-left: 2px; }

.ofbp-hero__side {
  align-self: stretch;
  display: grid;
  align-content: end;
  gap: 16px;
}
.ofbp-camera-card {
  border: 1px solid rgba(141,207,255,.25);
  border-radius: 28px;
  padding: 22px;
  background: linear-gradient(180deg, rgba(0,94,255,.16), rgba(2,8,20,.82));
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 90px rgba(0,0,0,.34);
  position: relative;
  overflow: hidden;
}
.ofbp-camera-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent, rgba(255,255,255,.08), transparent); transform: translateX(-120%); animation: ofbpSweep 5.6s ease-in-out infinite; }
.ofbp-camera-card b {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin-top: 2px;
  padding: 10px 14px 9px;
  border: 1px solid rgba(141,207,255,.3);
  border-radius: 999px;
  font-family: var(--of-display);
  font-size: clamp(13px, 1.15vw, 18px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: transparent;
  background:
    linear-gradient(90deg, rgba(255,255,255,.98), var(--of-blue-300), rgba(255,255,255,.9)) padding-box,
    linear-gradient(90deg, rgba(255,255,255,.18), rgba(65,165,255,.68), rgba(255,255,255,.12)) border-box;
  -webkit-background-clip: text, border-box;
  background-clip: text, border-box;
  box-shadow: 0 0 28px rgba(0,94,255,.22), inset 0 0 24px rgba(65,165,255,.08);
  text-shadow: 0 0 18px rgba(65,165,255,.34);
}
.ofbp-camera-card p { color: var(--of-muted); line-height: 1.65; margin: 16px 0 0; }
.ofbp-meter { margin-top: 24px; height: 7px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.ofbp-meter span { display: block; width: 67%; height: 100%; background: linear-gradient(90deg, var(--of-blue-600), var(--of-white)); box-shadow: 0 0 18px rgba(65,165,255,.8); animation: ofbpMeter 2.6s ease-in-out infinite alternate; }
@keyframes ofbpMeter { from { width: 32%; } to { width: 93%; } }
.ofbp-hero__scroll {
  position: absolute;
  left: clamp(18px, 4vw, 56px);
  bottom: 30px;
  display: inline-flex;
  gap: 12px;
  align-items: center;
  color: rgba(234,246,255,.62);
  font-family: var(--of-mono);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}
.ofbp-hero__scroll::after { content: ''; width: 1px; height: 72px; background: linear-gradient(var(--of-blue-400), transparent); }

.ofbp-section {
  position: relative;
  padding: clamp(78px, 10vw, 140px) clamp(20px, 5vw, 70px);
  overflow: hidden;
}
.ofbp-container { max-width: var(--of-max); margin: 0 auto; position: relative; z-index: 1; }
.ofbp-eyebrow {
  color: var(--of-blue-300);
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  font-family: var(--of-mono);
  margin-bottom: 16px;
}
.ofbp-section-title {
  margin: 0;
  font-family: var(--of-serif);
  color: var(--of-white);
  font-size: clamp(42px, 7vw, 100px);
  line-height: .88;
  letter-spacing: -.065em;
  text-shadow: 0 0 24px rgba(0,94,255,.34);
}
.ofbp-section-title span { color: var(--of-blue-400); }
.ofbp-story-grid { display: grid; grid-template-columns: minmax(240px, .45fr) minmax(0, .55fr); gap: clamp(28px, 6vw, 82px); align-items: center; }
.ofbp-poster-card {
  position: relative;
  min-height: clamp(440px, 62vw, 680px);
  border-radius: 34px;
  overflow: hidden;
  border: 1px solid rgba(141,207,255,.34);
  background:
    radial-gradient(circle at 50% 26%, rgba(0,94,255,.74), transparent 16rem),
    linear-gradient(160deg, #00194e, #00040d 48%, #0b58ff);
  box-shadow: var(--of-shadow-blue);
  transform-style: preserve-3d;
}
.ofbp-poster-card img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.ofbp-poster-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 38px;
  text-align: center;
}
.ofbp-poster-fallback img { position: relative; width: min(78%, 360px); height: auto; object-fit: contain; filter: drop-shadow(0 0 40px rgba(65,165,255,.44)); }
.ofbp-poster-fallback::before,
.ofbp-poster-fallback::after { content: ''; position: absolute; inset: 30px; border: 1px solid rgba(255,255,255,.22); border-radius: 24px; }
.ofbp-poster-fallback::after { inset: 54px; opacity: .45; }
.ofbp-poster-label {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 20px;
  background: rgba(2,8,20,.78);
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
  font-family: var(--of-mono);
  font-size: 11px;
  color: var(--of-blue-300);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.ofbp-story-copy { color: rgba(234,246,255,.82); }
.ofbp-story-copy p { font-size: clamp(18px, 2.1vw, 24px); line-height: 1.58; margin: 26px 0 0; }
.ofbp-meta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.ofbp-pill {
  border: 1px solid rgba(141,207,255,.28);
  border-radius: 999px;
  padding: 10px 14px;
  color: rgba(234,246,255,.84);
  background: rgba(0,94,255,.11);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.ofbp-screen-section {
  position: relative;
  min-height: 100svh;
  padding: clamp(70px, 9vw, 118px) clamp(16px, 4vw, 58px);
  display: grid;
  align-items: center;
  overflow: hidden;
}
.ofbp-theater {
  max-width: 1320px;
  margin: 0 auto;
  position: relative;
}
.ofbp-theater::before {
  content: '';
  position: absolute;
  left: -12vw;
  right: -12vw;
  top: -18vh;
  height: 50vh;
  background: radial-gradient(ellipse at center, rgba(39, 143, 255, .38), transparent 62%);
  filter: blur(30px);
  animation: ofbpScreenGlow 4.8s ease-in-out infinite alternate;
}
@keyframes ofbpScreenGlow { from { opacity: .35; transform: scaleX(.9); } to { opacity: .9; transform: scaleX(1.04); } }
.ofbp-screen-shell {
  position: relative;
  border-radius: 36px;
  padding: clamp(10px, 1.4vw, 18px);
  background:
    linear-gradient(135deg, rgba(255,255,255,.35), rgba(65,165,255,.08), rgba(0,0,0,.7)),
    linear-gradient(180deg, #ffffff, #001b5c 42%, #000307);
  box-shadow: 0 40px 110px rgba(0,0,0,.68), 0 0 120px rgba(0,94,255,.35);
  overflow: visible;
}
.ofbp-screen {
  position: relative;
  min-height: min(72vh, 720px);
  border-radius: 26px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 0 80px rgba(255,255,255,.06);
}
.ofbp-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.045);
  transition: opacity .9s ease, transform 1.6s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.ofbp-slide.is-active { opacity: 1; transform: scale(1); pointer-events: auto; }
.ofbp-slide video,
.ofbp-slide img,
.ofbp-slide__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.1) brightness(.75);
}
.ofbp-slide__fallback { background: var(--bg, linear-gradient(135deg, #052261, #000 68%)); }
.ofbp-slide__fallback::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.22), transparent 12rem),
    radial-gradient(circle at 74% 58%, rgba(0,94,255,.4), transparent 19rem),
    linear-gradient(80deg, transparent 35%, rgba(255,255,255,.08), transparent 70%);
}
.ofbp-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.84), transparent 42%, rgba(0,0,0,.6)),
    linear-gradient(0deg, rgba(0,0,0,.84), transparent 45%, rgba(0,0,0,.18));
}
.ofbp-slide__copy {
  position: absolute;
  left: clamp(20px, 5vw, 70px);
  bottom: clamp(24px, 6vw, 78px);
  z-index: 2;
  max-width: 570px;
}
.ofbp-slide__number {
  font-family: var(--of-mono);
  font-size: clamp(56px, 10vw, 120px);
  line-height: .8;
  letter-spacing: -.09em;
  color: rgba(255,255,255,.14);
  margin-bottom: 10px;
}
.ofbp-slide__title {
  margin: 0;
  font-family: var(--of-serif);
  font-size: clamp(38px, 7vw, 92px);
  letter-spacing: -.065em;
  line-height: .88;
  color: var(--of-white);
  text-shadow: 0 0 32px rgba(0,94,255,.45);
}
.ofbp-slide__title span { color: var(--of-blue-400); }
.ofbp-slide__text { max-width: 490px; margin: 18px 0 0; color: rgba(234,246,255,.84); line-height: 1.68; font-size: clamp(15px, 1.5vw, 18px); }
.ofbp-slide__hud {
  position: absolute;
  right: clamp(18px, 3vw, 46px);
  top: clamp(18px, 3vw, 44px);
  z-index: 4;
  display: grid;
  justify-items: end;
  gap: 11px;
  color: var(--of-blue-300);
  font-family: var(--of-mono);
  letter-spacing: .18em;
  font-size: 11px;
  text-transform: uppercase;
}
.ofbp-rec { display: inline-flex; align-items: center; gap: 9px; color: var(--of-white); }
.ofbp-rec::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 24px rgba(255,255,255,.8); animation: ofbpRecPulse .9s infinite; }
@keyframes ofbpRecPulse { 50% { opacity: .32; transform: scale(.72); } }
.ofbp-screen-controls {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 18px 6px 2px;
}
.ofbp-arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(141,207,255,.32);
  background: rgba(0,94,255,.16);
  color: var(--of-white);
  display: grid;
  place-items: center;
  font-size: 24px;
  box-shadow: 0 0 32px rgba(0,94,255,.18);
}
.ofbp-dots { display: flex; gap: 10px; align-items: center; justify-content: center; }
.ofbp-dot {
  width: min(130px, 14vw);
  height: 5px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,.16);
  overflow: hidden;
  padding: 0;
}
.ofbp-dot span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--of-blue-600), var(--of-white)); }
.ofbp-dot.is-active span { animation: ofbpDotFill 6s linear forwards; }
@keyframes ofbpDotFill { to { width: 100%; } }
.ofbp-seat-glow {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -70px;
  height: 90px;
  background:
    radial-gradient(ellipse at center, rgba(0,94,255,.35), transparent 58%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.82) 0 46px, rgba(255,255,255,.06) 46px 48px, rgba(0,0,0,.82) 48px 82px);
  border-radius: 50% 50% 0 0;
  filter: blur(.4px);
}

.ofbp-watch-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(280px, .54fr); gap: clamp(28px, 5vw, 70px); align-items: stretch; }
.ofbp-watch-card {
  min-height: 430px;
  border-radius: 34px;
  border: 1px solid rgba(141,207,255,.28);
  padding: clamp(24px, 4vw, 48px);
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.12), transparent 15rem),
    radial-gradient(circle at 75% 80%, rgba(0,94,255,.44), transparent 18rem),
    linear-gradient(135deg, rgba(0,94,255,.26), rgba(0,0,0,.72));
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 110px rgba(0,0,0,.48);
}
.ofbp-watch-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: conic-gradient(from 180deg at 50% 50%, transparent, rgba(255,255,255,.18), transparent, rgba(0,94,255,.3), transparent);
  animation: ofbpSpin 18s linear infinite;
  opacity: .46;
}
@keyframes ofbpSpin { to { transform: rotate(1turn); } }
.ofbp-watch-card > * { position: relative; z-index: 1; }
.ofbp-watch-card p { color: var(--of-muted); line-height: 1.7; max-width: 660px; }
.ofbp-link-stack { display: grid; gap: 14px; }
.ofbp-link-card {
  border: 1px solid rgba(141,207,255,.25);
  border-radius: 22px;
  padding: 20px;
  background: rgba(2,8,20,.66);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}
.ofbp-link-card:hover { transform: translateX(8px); border-color: rgba(255,255,255,.58); background: rgba(0,94,255,.22); }
.ofbp-link-card strong { display: block; font-family: var(--of-sans); font-size: 22px; font-weight: 900; letter-spacing: .18em; line-height: 1.05; text-transform: uppercase; color: var(--of-white); }
.ofbp-link-card span { display: block; color: var(--of-muted); font-size: 13px; margin-top: 7px; }
.ofbp-link-card em { font-style: normal; color: var(--of-blue-300); font-size: 26px; }

.ofbp-footer {
  position: relative;
  padding: 44px clamp(20px, 5vw, 70px);
  border-top: 1px solid rgba(141,207,255,.18);
  background: #01040a;
  color: rgba(234,246,255,.72);
}
.ofbp-footer__inner { max-width: var(--of-max); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 26px; flex-wrap: wrap; }
.ofbp-footer__inner > a > img { width: 112px; filter: drop-shadow(0 0 18px rgba(0,94,255,.42)); }
.ofbp-footer nav { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--of-blue-300); }
.ofbp-sbg-link { display: inline-flex; align-items: center; gap: 10px; }
.ofbp-sbg-link img { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 0 14px rgba(255,255,255,.18)); }
.ofbp-footer p { margin: 0; font-size: 13px; }

.ofbp-photo-edge {
  position: absolute;
  inset: auto auto 0 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), var(--of-blue-400), transparent);
  opacity: .78;
  transform: translateX(-100%);
  animation: ofbpPhotoEdge 6.5s ease-in-out infinite;
}
@keyframes ofbpPhotoEdge { 0%, 55%, 100% { transform: translateX(-100%); } 63%, 68% { transform: translateX(0); } 76% { transform: translateX(100%); } }
.ofbp-frame-corners { position: absolute; inset: 16px; pointer-events: none; z-index: 7; }
.ofbp-frame-corners::before,
.ofbp-frame-corners::after { content: ''; position: absolute; width: 52px; height: 52px; border-color: rgba(234,246,255,.58); }
.ofbp-frame-corners::before { left: 0; top: 0; border-left: 1px solid; border-top: 1px solid; }
.ofbp-frame-corners::after { right: 0; bottom: 0; border-right: 1px solid; border-bottom: 1px solid; }

@media (max-width: 980px) {
  .ofbp-nav { display: none; }
  .ofbp-hero__content, .ofbp-story-grid, .ofbp-watch-grid { grid-template-columns: 1fr; }
  .ofbp-hero__side { align-content: start; }
  .ofbp-screen { min-height: 74svh; }
  .ofbp-slide__copy { left: 24px; right: 24px; bottom: 34px; }
  .ofbp-menu-panel__inner { grid-template-columns: 1fr; gap: 34px; align-content: center; }
}
@media (max-width: 620px) {
  .ofbp-header { padding: 12px 16px; }
  .ofbp-logo-img { height: 58px; max-width: 112px; }
  .ofbp-menu-toggle { padding: 10px 12px; }
  .ofbp-menu-toggle span:first-child { display: none; }
  .ofbp-hero { padding: 112px 18px 46px; }
  .ofbp-title { font-size: clamp(72px, 22vw, 112px); }
  .ofbp-actions { display: grid; grid-template-columns: 1fr; }
  .ofbp-button { width: 100%; }
  .ofbp-hero__scroll { display: none; }
  .ofbp-section, .ofbp-screen-section { padding-left: 18px; padding-right: 18px; }
  .ofbp-poster-card { min-height: 470px; }
  .ofbp-screen-shell { border-radius: 24px; }
  .ofbp-screen { border-radius: 17px; min-height: 74svh; }
  .ofbp-slide__hud { display: none; }
  .ofbp-slide__copy { bottom: 24px; }
  .ofbp-slide__number { font-size: 48px; }
  .ofbp-dots { gap: 6px; }
  .ofbp-dot { width: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}