/*
 * Copyright (c) 2026 Omega Point Solutions LLC. All rights reserved.
 * Proprietary and confidential.
 *
 * op-emblem.css — the animated Omega Point Solutions brand emblem.
 * A baked scene (WebP/JPEG) overlaid with a live SVG motion layer:
 * rotating turbines, patrol-vehicle response, helicopter searchlight,
 * gold dome energy, pulsing signal core, and the five pillar medallions.
 * Layout + motion only; colors/typography inherit omega.css tokens.
 * Zero JS required (window-lights are pre-baked); IntersectionObserver
 * pausing is a progressive enhancement, see op-emblem.js.
 */

/* ---- responsive stage ---------------------------------------------------- */
.op-emblem{
  position:relative;
  width:100%;
  max-width:1180px;
  margin-inline:auto;
  aspect-ratio:1536 / 905;
  border-radius:14px;
  overflow:hidden;
  background:#05080f;                 /* matches the scene's deep navy */
  box-shadow:0 26px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(34,211,238,.10);
  isolation:isolate;                  /* contains the screen blend modes */
  contain:paint;                      /* the overlay never paints outside */
}
/* a faint duotone rim that reads as part of the brand, not the photo */
.op-emblem::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),
             inset 0 -60px 80px -40px rgba(5,8,15,.9);
}
.op-emblem__img{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%;
  object-fit:cover; display:block;
}
.op-emblem .op-fx{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%;
  pointer-events:none;
}
.op-label{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-weight:700; letter-spacing:1.4px; fill:#e9eff7;
}

/* ---- motion keyframes (the living scene) --------------------------------- */
@keyframes opBluePulse     {0%,100%{transform:scale(1);opacity:.82} 50%{transform:scale(1.16);opacity:1}}
@keyframes opBluePulseFast {0%,100%{transform:scale(.9);opacity:.78} 50%{transform:scale(1.14);opacity:1}}
@keyframes opRunner        {to{stroke-dashoffset:-100}}
@keyframes opDomeShimmer   {0%,100%{opacity:.16} 50%{opacity:.5}}
@keyframes opFlareSpin     {to{transform:rotate(360deg)}}
@keyframes opFlarePulse    {0%,100%{opacity:.45} 50%{opacity:.9}}
@keyframes opTwinkle       {0%,100%{opacity:.55;transform:scale(.9)} 50%{opacity:1;transform:scale(1.12)}}
@keyframes opSpinTurb      {to{transform:rotate(360deg)}}
@keyframes opWinFlicker    {0%{opacity:.45} 25%{opacity:.96} 50%{opacity:.6} 75%{opacity:.9} 100%{opacity:.5}}
@keyframes opBeacon        {0%,86%{opacity:.12} 92%{opacity:1} 100%{opacity:.12}}
@keyframes opPlantPulse    {0%,100%{opacity:.32} 50%{opacity:.68}}
@keyframes opEmblemGlow    {0%,100%{opacity:.22} 50%{opacity:.6}}
@keyframes opChevPulse     {0%,100%{opacity:.55} 50%{opacity:1}}
@keyframes opChaseMove     {0%{transform:translateX(0);opacity:0} 5%{opacity:1} 88%{opacity:1} 100%{transform:translateX(-150px);opacity:0}}
@keyframes opRedFlash      {0%,49%{opacity:1} 50%,100%{opacity:0}}
@keyframes opBlueFlash     {0%,49%{opacity:0} 50%,100%{opacity:1}}
@keyframes opHeliBob       {0%,100%{transform:translate(0,0)} 50%{transform:translate(-7px,-3px)}}
@keyframes opSweep         {0%,100%{transform:rotate(-10deg)} 50%{transform:rotate(10deg)}}

/* ---- intensity / core / variant tuning (data-attributes on .op-fx) ------- */
.op-fx{--pulse-dur:5s; --blue-dur:3s;}
.op-fx[data-intensity="Calm"]    {--pulse-dur:8s; --blue-dur:4.6s;}
.op-fx[data-intensity="Intense"] {--pulse-dur:9s; --blue-dur:1.8s;} /* dome glow slowed (owner) — --pulse-dur drives only the gold globe arc */
.op-fx[data-dome="false"] .op-dome-anim   {display:none;}
.op-fx[data-core="Cyan"] .op-core         {filter:hue-rotate(-18deg) saturate(1.25);}
.op-fx[data-core="Ice"]  .op-core         {filter:hue-rotate(14deg) saturate(.7) brightness(1.12);}
.op-fx[data-variant="Clean"] .op-pillars  {display:none;}

/* ---- pause when scrolled offscreen (battery / CPU); set by op-emblem.js -- */
.op-emblem.is-paused .op-fx *{animation-play-state:paused !important;}

/* Brand motion runs regardless of OS reduced-motion (owner directive 2026-06-18). */

/* ---- hero placement: emblem as the primary brand element ----------------- */
/* The emblem leads the hero full-width; the value-prop copy sits beneath it,
   centered. Used on the .com home hero and the .us procurement hero. */
.hero--emblem{padding-top:46px;}
.hero--emblem .wrap{display:flex; flex-direction:column; align-items:center; text-align:center;}
.hero--emblem .op-emblem{
  margin-bottom:42px;
  animation:opEmblemIn 1s cubic-bezier(.16,.84,.3,1) both;
}
.hero--emblem .hero-lead{max-width:760px;}
.hero--emblem .hero-lead .sub{margin-inline:auto;}
.hero--emblem .hero-cta,
.hero--emblem .trust{justify-content:center;}
.hero--emblem .type{justify-content:center; text-align:center;}
@keyframes opEmblemIn{from{opacity:0; transform:translateY(18px) scale(.985)} to{opacity:1; transform:none}}
@media (max-width:640px){ .hero--emblem{padding-top:26px;} .hero--emblem .op-emblem{margin-bottom:30px;} }