/* ════════════════════════════════════════════════════════════════════
   CINEMATIC.CSS · bahri.studio v2 visual shell
   Overlays on top of styles.css. Does not replace it.
   Loads after styles.css so it wins selector specificity ties.
   All copy, numbers, schemas in the HTML stay untouched.
   ════════════════════════════════════════════════════════════════════ */

:root{
  --cn-bg:        #040406;
  --cn-bg-soft:   #0a0a10;
  --cn-lime:      #c8ff5e;
  --cn-lime-dim:  rgba(200,255,94,.5);
  --cn-warm:      #ff8a52;
  --cn-warm-dim:  rgba(255,138,82,.5);
  --cn-glass:     rgba(15,15,22,.42);
  --cn-glass-bd:  rgba(255,255,255,.08);
  --cn-letterbox: 36px;
}

/* ─────────  body + base  ───────── */
body{ background: var(--cn-bg); overflow-x: hidden; }

/* Skip rendering work on offscreen sections · huge perf win on long pages */
section.case, section.service, section.contact, section.trust, section#about,
section.faq-item, article.case{
  content-visibility: auto;
  contain-intrinsic-size: 600px;
}

/* ─────────  WebGL canvas backdrop  ───────── */
#cn-canvas{
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* Page content sits above the canvas */
header.nav, main, footer.foot{ position: relative; z-index: 4; }

/* ─────────  Letterbox bars  ───────── */
.cn-letterbox{
  position: fixed; left: 0; right: 0;
  height: var(--cn-letterbox);
  background: #000;
  z-index: 50;
  pointer-events: none;
  border-color: rgba(255,255,255,.02);
}
.cn-letterbox-top{ top: 0; border-bottom: 1px solid rgba(255,255,255,.02); }
.cn-letterbox-bottom{ bottom: 0; border-top: 1px solid rgba(255,255,255,.02); }
.cn-aspect-label{
  position: fixed; top: 10px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 8px; letter-spacing: .42em; text-transform: uppercase;
  color: #3a3a3f; z-index: 51; pointer-events: none;
}

/* ─────────  Film grain  ───────── */
.cn-grain{
  position: fixed; inset: var(--cn-letterbox) 0;
  pointer-events: none;
  opacity: .055;
  mix-blend-mode: overlay;
  z-index: 49;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2"/></filter><rect width="120" height="120" filter="url(%23n)"/></svg>');
}

/* ─────────  Vignette  ───────── */
.cn-vignette{
  position: fixed; inset: var(--cn-letterbox) 0;
  pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse 110% 90% at 50% 50%, transparent 30%, rgba(0,0,0,.6) 100%);
}

/* ─────────  NAV adjustments  ───────── */
header.nav{
  top: var(--cn-letterbox) !important;
  background: rgba(6,6,10,.45);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  border-bottom: 1px solid rgba(200,255,94,.08);
}

/* ─────────  Push main content below the top letterbox  ───────── */
main{ padding-top: var(--cn-letterbox); }

/* ═════════════════════════════════════════════════
   HERO · cinema-trailer title sequence
   ═════════════════════════════════════════════════ */

.hero{
  position: relative;
  min-height: calc(100vh - (var(--cn-letterbox) * 2));
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  text-align: center;
  /* extra top padding so the meta pill sits well below the chapter marker */
  padding: 6.5rem 1.5rem 4rem;
}

/* Chapter marker above hero meta */
.hero::before{
  content: "01 · the operator";
  position: absolute; top: 2rem; left: 50%; transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 9px; letter-spacing: .42em; text-transform: uppercase;
  color: var(--cn-lime);
  white-space: nowrap;
  opacity: 0; animation: cn-fadein 1s ease-out .3s forwards;
}

.hero .hero-meta{
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .28em; text-transform: uppercase;
  color: #9aa0a6;
  display: inline-flex; align-items: center; gap: 10px;
  /* push the H1 title noticeably lower */
  margin-bottom: 3.25rem;
  opacity: 0; animation: cn-fadein 1s ease-out .6s forwards;
}
.hero .hero-meta .dot-live{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cn-lime);
  box-shadow: 0 0 8px var(--cn-lime);
  animation: cn-pulse 1.8s ease-in-out infinite;
}

/* The big italic title */
.hero .hero-title{
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  font-size: clamp(44px, 7.4vw, 84px) !important;
  font-weight: 200 !important;
  line-height: 1.24 !important;
  letter-spacing: -.035em !important;
  margin: 0 0 1.5rem !important;
  padding: 0 .05em .35em;
  color: #fafafa;
  text-shadow: 0 0 60px rgba(0,0,0,.5);
  overflow: visible !important;
}
.hero .hero-title .line{
  display: block;
  padding-bottom: .12em;
  overflow: visible;
}
.hero .hero-title .italic-line{
  padding-bottom: .35em;
  margin-bottom: -.05em;
}
.hero .hero-title .word{
  display: inline-block;
  line-height: 1.24;
  padding: 0 .04em .12em;
  opacity: 0;
  animation: cn-rise 1.1s cubic-bezier(.22,.61,.36,1) .9s forwards;
  overflow: visible;
}
.hero .hero-title .italic-line .word{
  font-weight: 400 !important;
  font-style: italic !important;
  background: linear-gradient(180deg, #e8ffb0 0%, var(--cn-lime) 50%, #8fbf2e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  animation-delay: 1.3s;
  padding: 0 .12em .28em .04em;
  line-height: 1.32;
  /* Note: no text-shadow on gradient-clipped italic text — it interferes with the clip box and crops descenders */
}

.hero .hero-role{
  font-family: var(--mono);
  font-size: 10px !important; letter-spacing: .28em; text-transform: uppercase;
  color: #6b6b75;
  margin: .5rem 0 1.5rem;
  opacity: 0; animation: cn-fadein 1s ease-out 1.8s forwards;
}

.hero .hero-sub{
  font-size: 14px !important;
  font-weight: 300;
  color: #a8aab0;
  max-width: 560px;
  line-height: 1.6;
  margin: 0 auto 2rem;
  opacity: 0; animation: cn-fadein 1s ease-out 2.1s forwards;
}
.hero .hero-sub .hl{ color: var(--cn-lime); font-weight: 400; }

/* Stats row cinematic treatment */
.hero .hero-stats{
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 !important;
  margin: 0 0 2rem !important;
  border-top: 1px solid rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.05);
  padding: 1.25rem 0 !important;
  opacity: 0; animation: cn-fadein 1s ease-out 2.4s forwards;
}
.hero .hero-stats .stat{
  position: relative;
  padding: 0 1.8rem !important;
  text-align: center;
}
.hero .hero-stats .stat + .stat::before{
  content: "";
  position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(200,255,94,.3), transparent);
}
.hero .hero-stats .stat-value{
  display: block !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 24px !important;
  font-weight: 200 !important;
  color: #fafafa !important;
  letter-spacing: -.02em;
}
.hero .hero-stats .stat-prefix,
.hero .hero-stats .stat-suffix-mini{
  color: var(--cn-lime) !important;
  font-weight: 300 !important;
}
.hero .hero-stats .stat-label{
  display: block !important;
  font-family: var(--mono);
  font-size: 8px !important;
  letter-spacing: .26em; text-transform: uppercase;
  color: #6b6b75 !important;
  margin-top: 4px !important;
}

/* CTAs */
.hero .hero-cta{
  display: flex; justify-content: center; gap: 12px;
  opacity: 0; animation: cn-fadein 1s ease-out 2.7s forwards;
}
.hero .hero-cta .btn{
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase;
  padding: 14px 26px !important;
  border-radius: 999px !important;
}
.hero .hero-cta .btn-primary{
  background: rgba(200,255,94,.08) !important;
  color: var(--cn-lime) !important;
  border: 1px solid var(--cn-lime-dim) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0 32px rgba(200,255,94,.18), inset 0 0 12px rgba(200,255,94,.04);
}
.hero .hero-cta .btn-primary:hover{
  background: rgba(200,255,94,.16) !important;
  box-shadow: 0 0 48px rgba(200,255,94,.3), inset 0 0 12px rgba(200,255,94,.08);
}
.hero .hero-cta .btn-ghost{
  background: rgba(255,255,255,.03) !important;
  color: #d8d8df !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hero .hero-scroll{
  margin-top: 2.5rem;
  font-family: var(--mono);
  font-size: 8px; letter-spacing: .4em; text-transform: uppercase;
  color: #6b6b75;
  opacity: 0; animation: cn-fadein 1s ease-out 3.0s forwards;
}
.hero .hero-scroll-line{
  display: inline-block; width: 24px; height: 1px;
  background: var(--cn-lime); margin-left: 8px;
  box-shadow: 0 0 6px var(--cn-lime);
  vertical-align: middle;
}

/* ═════════════════════════════════════════════════
   CHAPTER MARKERS between sections
   ═════════════════════════════════════════════════ */
.cn-chapter{
  display: flex; align-items: center; justify-content: center;
  gap: 16px;
  margin: 4rem auto 2rem;
  max-width: 800px;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .4em; text-transform: uppercase;
  color: var(--cn-lime);
}
.cn-chapter::before, .cn-chapter::after{
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cn-lime-dim), transparent);
  max-width: 200px;
}
.cn-chapter[data-warm]{ color: var(--cn-warm); }
.cn-chapter[data-warm]::before, .cn-chapter[data-warm]::after{
  background: linear-gradient(90deg, transparent, var(--cn-warm-dim), transparent);
}

/* ═════════════════════════════════════════════════
   TRUST BAR · drifting marquee
   ═════════════════════════════════════════════════ */
.trust{
  position: relative;
  padding: 1.5rem 0 !important;
  border-top: 1px solid rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.04);
  background: rgba(6,6,10,.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.trust .trust-label{
  font-family: var(--mono);
  font-size: 9px; letter-spacing: .42em; text-transform: uppercase;
  color: #6b6b75;
}

/* ═════════════════════════════════════════════════
   CASE STUDIES · glass cards with chapter framing
   ═════════════════════════════════════════════════ */
.case{
  position: relative;
  background: var(--cn-glass) !important;
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  border: 1px solid var(--cn-glass-bd) !important;
  border-radius: 18px !important;
  padding: 2rem !important;
  margin: 1.5rem 0 !important;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06);
}
/* Corner brackets on case cards · lime by default */
.case::before, .case::after,
.case .case-body::before, .case .case-body::after{
  content: ""; position: absolute;
  width: 22px; height: 22px;
  border-color: var(--cn-lime);
  border-style: solid;
  border-width: 0;
  pointer-events: none;
}
.case::before{ top: -1px; left: -1px; border-top-width: 1.5px; border-left-width: 1.5px; border-top-left-radius: 18px; }
.case::after{ top: -1px; right: -1px; border-top-width: 1.5px; border-right-width: 1.5px; border-top-right-radius: 18px; }
.case .case-body::before{ bottom: -1px; left: -1px; border-bottom-width: 1.5px; border-left-width: 1.5px; border-bottom-left-radius: 18px; }
.case .case-body::after{ bottom: -1px; right: -1px; border-bottom-width: 1.5px; border-right-width: 1.5px; border-bottom-right-radius: 18px; }

/* Aiah · warm-orange variant */
.case-aiah::before, .case-aiah::after,
.case-aiah .case-body::before, .case-aiah .case-body::after{
  border-color: var(--cn-warm);
}
.case-aiah{
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.7),
              inset 0 1px 0 rgba(255,255,255,.06),
              0 0 80px -10px rgba(255,138,82,.18);
}

/* Case rail with cinematic chapter feel */
.case .case-rail .case-num{
  font-family: var(--mono);
  font-size: 28px !important; font-weight: 200 !important;
  color: rgba(255,255,255,.15) !important;
  letter-spacing: -.02em;
}
.case-aiah .case-rail .case-num{ color: rgba(255,138,82,.25) !important; }

/* ═════════════════════════════════════════════════
   SERVICES · glass cards
   ═════════════════════════════════════════════════ */
.service{
  background: var(--cn-glass) !important;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid var(--cn-glass-bd) !important;
  border-radius: 16px !important;
  position: relative;
}

/* ═════════════════════════════════════════════════
   ABOUT block · cinematic editorial
   ═════════════════════════════════════════════════ */
section#about{
  background: rgba(8,8,12,.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.04);
}

/* ═════════════════════════════════════════════════
   CONTACT · title card with anamorphic flare
   ═════════════════════════════════════════════════ */
section.contact{
  position: relative;
  padding: 6rem 2rem !important;
  text-align: center;
}
section.contact::after{
  content: "";
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  height: 1px;
  background: linear-gradient(90deg, transparent 25%, rgba(200,255,94,.4) 50%, transparent 75%);
  filter: blur(2px);
  pointer-events: none;
}
section.contact h2{
  position: relative; z-index: 1;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: clamp(36px, 5vw, 60px) !important;
  font-weight: 200 !important;
  letter-spacing: -.025em !important;
  line-height: 1.05 !important;
}

/* ═════════════════════════════════════════════════
   FOOTER cinematic strip
   ═════════════════════════════════════════════════ */
footer.foot{
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(200,255,94,.08);
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: #6b6b75;
}

/* ═════════════════════════════════════════════════
   ANIMATIONS
   ═════════════════════════════════════════════════ */
@keyframes cn-fadein{ from{ opacity:0 } to{ opacity:1 } }
@keyframes cn-rise{
  from{ opacity:0; transform: translateY(20px); }
  to{ opacity:1; transform: translateY(0); }
}
/* Note: removed `filter: blur()` from cn-rise — when applied to gradient-clipped italic text,
   the filter compositing context computes the clip box from the layout rect, which underestimates
   italic descender extent and crops the y/g/p/j tails. */
@keyframes cn-pulse{
  0%, 100%{ opacity:1; transform: scale(1); }
  50%{ opacity:.45; transform: scale(1.5); }
}

/* ═════════════════════════════════════════════════
   REDUCED MOTION · honor user preferences
   ═════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
  }
  #cn-canvas{ display: none; }
  .cn-grain{ opacity: .02; }
}

/* ═════════════════════════════════════════════════
   LOW POWER · simpler treatment
   ═════════════════════════════════════════════════ */
.low-power #cn-canvas{ display: none; }
.low-power .cn-grain{ opacity: .025; }
.low-power .case,
.low-power .service,
.low-power header.nav,
.low-power footer.foot,
.low-power .trust,
.low-power section#about{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(10,10,15,.85) !important;
}

/* ═════════════════════════════════════════════════
   MOBILE adjustments
   ═════════════════════════════════════════════════ */
@media (max-width: 720px){
  :root{ --cn-letterbox: 24px; }
  .cn-aspect-label{ display: none; }
  .hero .hero-title{ font-size: clamp(38px, 12vw, 56px) !important; }
  .hero .hero-stats{ padding: 1rem 0 !important; }
  .hero .hero-stats .stat{ padding: .5rem 1rem !important; }
  .cn-chapter{ font-size: 9px; letter-spacing: .32em; }
  .case{ padding: 1.25rem !important; }
}