/* ============================================================
   RFF ATMOSPHERE — shared premium background
   Two tiers:  .rff-bg.full  (hero pages, e.g. tools hub)
               .rff-bg.calm  (tool/form pages — quieter)
   Night-only. Sits on a fixed z-index:-1 layer behind all content.
   Pair with /rff-bg.js for the canvas star/ember layers.
   ============================================================ */

:root{
  --rff-bg0:#010810;
  --rff-bg1:#02101e;
  --rff-bg2:#03162a;
  --rff-bg3:#0a2447;
  --rff-grid-minor:rgba(78,126,198,0.040);
  --rff-grid-major:rgba(78,126,198,0.07);
  --rff-orange:rgba(240,112,32,1);
}

/* never flash white */
html{background:#010810;}

/* the fixed backdrop container */
.rff-bg{
  position:fixed;inset:0;z-index:-1;
  overflow:hidden;pointer-events:none;
  background:linear-gradient(180deg,#010810 0%,#02101e 30%,#03162a 58%,#020c18 80%,#010608 100%);
}
.rff-bg > *{position:absolute;inset:0;}

/* ── BASE MESH / GLOW ── */
.rff-mesh{
  background:
    radial-gradient(circle at 12% 26%, rgba(24,92,204,0.16), transparent 22%),
    radial-gradient(circle at 30% 60%, rgba(240,112,32,0.05), transparent 18%),
    radial-gradient(circle at 50% 30%, rgba(24,92,204,0.14), transparent 24%),
    radial-gradient(circle at 72% 64%, rgba(240,112,32,0.045),transparent 18%),
    radial-gradient(circle at 88% 30%, rgba(24,92,204,0.15), transparent 22%);
  filter:blur(46px) saturate(112%);
  opacity:0.95;
}

/* ── PARALLAX GRID ── */
.rff-grid-minor{
  background-image:
    linear-gradient(to right, var(--rff-grid-minor) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rff-grid-minor) 1px, transparent 1px);
  background-size:62px 62px;
  opacity:0.5;
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%, #000 30%, transparent 85%);
  mask-image:radial-gradient(ellipse at 50% 40%, #000 30%, transparent 85%);
}
.rff-grid-major{
  background-image:
    linear-gradient(to right, var(--rff-grid-major) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rff-grid-major) 1px, transparent 1px);
  background-size:300px 300px;
  opacity:0.3;
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%, #000 25%, transparent 80%);
  mask-image:radial-gradient(ellipse at 50% 40%, #000 25%, transparent 80%);
}

/* ── NEBULA CLOUDS ── */
.rff-nebula{overflow:hidden;}
.rff-nebula .nc{position:absolute;border-radius:50%;filter:blur(60px);mix-blend-mode:screen;}
.rff-nebula .nc1{width:55vw;height:40vh;left:-8vw;top:3vh;
  background:radial-gradient(ellipse at 40% 50%,rgba(18,60,160,0.26),rgba(10,35,100,0.12) 40%,transparent 75%);
  animation:rffDrift1 22s ease-in-out infinite;}
.rff-nebula .nc2{width:50vw;height:35vh;left:25vw;top:18vh;
  background:radial-gradient(ellipse at 50% 60%,rgba(200,70,10,0.13),rgba(160,50,8,0.06) 40%,transparent 75%);
  animation:rffDrift2 28s ease-in-out infinite;}
.rff-nebula .nc3{width:40vw;height:30vh;right:-5vw;top:8vh;
  background:radial-gradient(ellipse at 60% 40%,rgba(10,80,130,0.16),rgba(5,50,90,0.08) 40%,transparent 75%);
  animation:rffDrift3 18s ease-in-out infinite;}
.rff-nebula .nc4{width:80vw;height:28vh;left:10vw;bottom:8vh;
  background:radial-gradient(ellipse at 50% 80%,rgba(180,60,0,0.09),rgba(120,40,0,0.045) 50%,transparent 75%);
  animation:rffDrift4 25s ease-in-out infinite;filter:blur(54px);}

/* ── LIGHT SHAFTS (full only) ── */
.rff-shafts{overflow:hidden;}
.rff-shafts .sf{position:absolute;bottom:0;transform-origin:bottom center;mix-blend-mode:screen;opacity:0;
  animation:rffShaft var(--dur) ease-in-out infinite var(--delay);}
.rff-shafts .sf::before{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:var(--w);height:var(--h);
  background:linear-gradient(0deg,rgba(240,130,30,0.16) 0%,rgba(240,130,30,0.06) 35%,rgba(200,100,20,0.02) 65%,transparent 100%);
  clip-path:polygon(50% 100%, 0% 0%, 100% 0%);}
.rff-shafts .s1{left:16%;--w:150px;--h:62vh;--dur:14s;--delay:0s;transform:rotate(-6deg);}
.rff-shafts .s2{left:38%;--w:110px;--h:48vh;--dur:18s;--delay:-5s;transform:rotate(2deg);}
.rff-shafts .s3{left:56%;--w:170px;--h:66vh;--dur:12s;--delay:-8s;transform:rotate(-3deg);}
.rff-shafts .s4{left:73%;--w:120px;--h:52vh;--dur:20s;--delay:-12s;transform:rotate(5deg);}
.rff-shafts .s5{left:87%;--w:95px;--h:42vh;--dur:16s;--delay:-3s;transform:rotate(-8deg);}

/* ── HORIZON GLOW (full only) ── */
.rff-horizon{top:auto;bottom:16vh;height:40px;}
.rff-horizon .hz-line{position:absolute;left:0;right:0;top:18px;height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(240,120,30,0.40) 20%,rgba(255,180,70,0.78) 50%,rgba(240,120,30,0.40) 80%,transparent 100%);
  animation:rffHoriz 6s ease-in-out infinite;}
.rff-horizon .hz-glow{position:absolute;left:0;right:0;top:0;height:36px;
  background:radial-gradient(ellipse at 50% 50%,rgba(240,110,20,0.14),rgba(200,80,10,0.04) 50%,transparent 75%);
  filter:blur(8px);animation:rffHoriz 6s ease-in-out infinite 0.5s;}

/* ── CANVAS LAYERS ── */
.rff-cv{position:absolute;inset:0;width:100%;height:100%;will-change:transform;}
#rffStars{z-index:1;}
#rffEmbers{z-index:2;}

/* ── VIGNETTE + GRAIN ── */
.rff-vignette{
  background:radial-gradient(ellipse at 50% 46%,transparent 40%,rgba(1,8,16,0.45) 80%,rgba(1,8,16,0.78) 100%);
}
.rff-grain{
  opacity:0.028;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:256px 256px;
  animation:rffGrain 0.14s steps(1) infinite;
}

/* ── TIER: CALM (tool/form pages) ── */
.rff-bg.calm .rff-shafts,
.rff-bg.calm .rff-horizon,
.rff-bg.calm .rff-grid-major,
.rff-bg.calm #rffEmbers{display:none;}
.rff-bg.calm .rff-mesh{opacity:0.6;}
.rff-bg.calm .rff-nebula .nc{opacity:0.7;}
.rff-bg.calm .rff-grid-minor{opacity:0.32;}
.rff-bg.calm .rff-vignette{
  background:radial-gradient(ellipse at 50% 44%,transparent 34%,rgba(1,8,16,0.55) 78%,rgba(1,8,16,0.84) 100%);
}

/* ── KEYFRAMES ── */
@keyframes rffDrift1{0%,100%{transform:translate(0,0) scale(1);opacity:1}33%{transform:translate(24px,-14px) scale(1.05);opacity:0.85}66%{transform:translate(-16px,10px) scale(0.96);opacity:0.95}}
@keyframes rffDrift2{0%,100%{transform:translate(0,0) scale(1);opacity:1}40%{transform:translate(-20px,16px) scale(1.04);opacity:0.80}70%{transform:translate(12px,-8px) scale(0.97);opacity:0.90}}
@keyframes rffDrift3{0%,100%{transform:translate(0,0) scale(1);opacity:1}50%{transform:translate(-18px,12px) scale(1.06);opacity:0.75}}
@keyframes rffDrift4{0%,100%{opacity:0.8;transform:scaleX(1)}50%{opacity:1;transform:scaleX(1.08)}}
@keyframes rffShaft{0%,100%{opacity:0}20%{opacity:1}80%{opacity:0.7}}
@keyframes rffHoriz{0%,100%{opacity:0.7}50%{opacity:1}}
@keyframes rffGrain{0%{background-position:0 0}25%{background-position:-48px 22px}50%{background-position:32px -16px}75%{background-position:-24px 40px}100%{background-position:16px -32px}}

/* ── REDUCED MOTION: freeze everything ── */
@media (prefers-reduced-motion: reduce){
  .rff-bg .nc,
  .rff-bg .sf,
  .rff-bg .hz-line,
  .rff-bg .hz-glow,
  .rff-bg .rff-grain{animation:none !important;}
  .rff-bg .rff-shafts{opacity:0.5;}
}