/* c139h: Soft Bokeh — CSS-only out-of-focus light circles.
   Navy #0b3a5e / teal #0e8f86 / sky #38a0d2 over a navy base.
   No canvas, no rAF. Low opacity, behind content, pointer-events:none.
   prefers-reduced-motion: static. Light + dark schemes. */
.fr-bokeh-page,
.fr-bokeh-hero,
.fr-bokeh-base,
.fr-bokeh-dot,
.fr-glow-ground::before{
  pointer-events:none;
}

/* Fixed page wash */
.fr-bokeh-page{
  position:fixed;inset:0;overflow:hidden;z-index:0;
  contain:strict;
  background:#0b3a5e;
  opacity:.22;
}
.fr-bokeh-page .fr-bokeh-base{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 90% 70% at 50% -10%,rgba(11,58,94,.55),transparent 70%),
    linear-gradient(180deg,#0b3a5e 0%,#0a2f4c 55%,#08263d 100%);
  opacity:.9;
}

/* Hero-local layer */
.fr-bokeh-hero{
  position:absolute;inset:-18% -12% -10% -12%;overflow:hidden;z-index:0;
}

/* Soft out-of-focus circles */
.fr-bokeh-dot{
  position:absolute;border-radius:50%;
  filter:blur(48px);
  will-change:transform;
  opacity:.55;
}
.fr-bokeh-navy{background:radial-gradient(circle at 50% 50%,rgba(11,58,94,.55) 0%,rgba(11,58,94,.18) 42%,transparent 70%)}
.fr-bokeh-teal{background:radial-gradient(circle at 50% 50%,rgba(14,143,134,.50) 0%,rgba(14,143,134,.16) 42%,transparent 70%)}
.fr-bokeh-sky{background:radial-gradient(circle at 50% 50%,rgba(56,160,210,.48) 0%,rgba(56,160,210,.14) 42%,transparent 70%)}

/* Sizes + anchors (page) */
.fr-bokeh-page .fr-bokeh-a{width:46vmax;height:46vmax;left:-12%;top:-16%;animation:fr-bokeh-drift-a 22s ease-in-out infinite alternate}
.fr-bokeh-page .fr-bokeh-b{width:38vmax;height:38vmax;right:-10%;top:12%;animation:fr-bokeh-drift-b 26s ease-in-out infinite alternate}
.fr-bokeh-page .fr-bokeh-c{width:52vmax;height:52vmax;left:22%;bottom:-28%;animation:fr-bokeh-drift-c 24s ease-in-out infinite alternate}
.fr-bokeh-page .fr-bokeh-d{width:22vmax;height:22vmax;left:58%;top:38%;opacity:.4;filter:blur(36px);animation:fr-bokeh-drift-d 19s ease-in-out infinite alternate}
.fr-bokeh-page .fr-bokeh-e{width:18vmax;height:18vmax;left:8%;top:55%;opacity:.38;filter:blur(32px);animation:fr-bokeh-drift-a 28s ease-in-out infinite alternate-reverse}
.fr-bokeh-page .fr-bokeh-f{width:26vmax;height:26vmax;right:18%;bottom:8%;opacity:.42;filter:blur(40px);animation:fr-bokeh-drift-b 21s ease-in-out infinite alternate-reverse}

/* Hero dots — slightly stronger so the stage reads depth without crushing text */
.fr-bokeh-hero .fr-bokeh-a{width:48vmax;height:48vmax;left:-14%;top:-20%;opacity:.5;animation:fr-bokeh-drift-a 20s ease-in-out infinite alternate}
.fr-bokeh-hero .fr-bokeh-b{width:40vmax;height:40vmax;right:-12%;top:4%;opacity:.48;animation:fr-bokeh-drift-b 23s ease-in-out infinite alternate}
.fr-bokeh-hero .fr-bokeh-c{width:56vmax;height:56vmax;left:16%;bottom:-30%;opacity:.46;animation:fr-bokeh-drift-c 25s ease-in-out infinite alternate}
.fr-bokeh-hero .fr-bokeh-d{width:20vmax;height:20vmax;left:52%;top:42%;opacity:.36;filter:blur(34px);animation:fr-bokeh-drift-d 18s ease-in-out infinite alternate}
.fr-bokeh-hero .fr-bokeh-e{width:16vmax;height:16vmax;left:10%;top:48%;opacity:.34;filter:blur(30px);animation:fr-bokeh-drift-a 27s ease-in-out infinite alternate-reverse}
.fr-bokeh-hero .fr-bokeh-f{width:24vmax;height:24vmax;right:14%;bottom:6%;opacity:.38;filter:blur(38px);animation:fr-bokeh-drift-b 22s ease-in-out infinite alternate-reverse}

/* Section matching grounds — soft local bokeh wash */
.fr-glow-ground{position:relative;isolation:isolate}
.fr-glow-ground > *{position:relative;z-index:1}
.fr-glow-ground::before{
  content:"";position:absolute;inset:-4% -2%;z-index:0;border-radius:28px;
  background:
    radial-gradient(circle 28vmax at 12% 22%,rgba(14,143,134,.10),transparent 60%),
    radial-gradient(circle 24vmax at 86% 28%,rgba(56,160,210,.10),transparent 58%),
    radial-gradient(circle 32vmax at 48% 100%,rgba(11,58,94,.08),transparent 62%);
  filter:blur(36px);
  opacity:.7;
  animation:fr-bokeh-drift-c 28s ease-in-out infinite alternate;
}

.fr-hero{z-index:1;position:relative}
.fr-hero .fr-hero-in,.fr-hero .fr-copy,.fr-hero .fr-stage{position:relative;z-index:1}
.fr-hero .fr-copy{position:relative;z-index:1}
/* Soft veil so hero navy text keeps WCAG AA over bokeh */
.fr-hero .fr-copy::before{
  content:"";position:absolute;inset:-12px -18px -8px -18px;z-index:-1;pointer-events:none;border-radius:24px;
  background:radial-gradient(ellipse 80% 70% at 30% 30%,rgba(255,255,255,.78),rgba(232,242,250,.50) 55%,transparent 75%);
}

@keyframes fr-bokeh-drift-a{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(5%,3.5%,0) scale(1.08)}
}
@keyframes fr-bokeh-drift-b{
  0%{transform:translate3d(0,0,0) scale(1.02)}
  100%{transform:translate3d(-6%,2.5%,0) scale(1.1)}
}
@keyframes fr-bokeh-drift-c{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(3.5%,-5%,0) scale(1.07)}
}
@keyframes fr-bokeh-drift-d{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-4%,4%,0) scale(1.12)}
}

@media (prefers-reduced-motion:reduce){
  .fr-bokeh-dot,.fr-glow-ground::before{
    animation:none!important;
  }
  .fr-bokeh-page .fr-bokeh-a,.fr-bokeh-hero .fr-bokeh-a{transform:translate3d(1%,1%,0) scale(1.02)}
  .fr-bokeh-page .fr-bokeh-b,.fr-bokeh-hero .fr-bokeh-b{transform:translate3d(-1%,.5%,0) scale(1.03)}
  .fr-bokeh-page .fr-bokeh-c,.fr-bokeh-hero .fr-bokeh-c{transform:translate3d(.5%,-1%,0) scale(1.01)}
  .fr-glow-ground::before{opacity:.75;transform:none}
}

/* Dark scheme: richer circles; marketing chrome stays light for AA navy text */
@media (prefers-color-scheme:dark){
  .fr-bokeh-page{opacity:.34}
  .fr-bokeh-navy{background:radial-gradient(circle at 50% 50%,rgba(11,58,94,.70) 0%,rgba(11,58,94,.22) 42%,transparent 70%)}
  .fr-bokeh-teal{background:radial-gradient(circle at 50% 50%,rgba(14,143,134,.62) 0%,rgba(14,143,134,.20) 42%,transparent 70%)}
  .fr-bokeh-sky{background:radial-gradient(circle at 50% 50%,rgba(56,160,210,.58) 0%,rgba(56,160,210,.18) 42%,transparent 70%)}
  .fr-glow-ground::before{opacity:.9}
  .fr-hero .fr-copy::before{
    background:radial-gradient(ellipse 80% 70% at 30% 30%,rgba(255,255,255,.82),rgba(232,242,250,.55) 55%,transparent 75%);
  }
}