/* =========================================================
   ForGrowth Academy — curtain-bg.css
   ISOLATED. Every selector is scoped inside .curtain, so this affects only
   the opening logo screen.

   A deep charcoal stage carrying a live campaign network — the same energy as
   the reference imagery, but rendered in ForGrowth rust on the brand's own
   charcoal rather than neon blue, so it reads as ForGrowth and not stock art.
   The screen then clears to the ivory site as the visitor scrolls.
   ========================================================= */

/* Dark stage. Overrides only the curtain's own background. */
.curtain {
  background: #141416;
}

.curtain .cbg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Vignette: keeps the centre calm so the logo always reads first. */
.curtain .cbg-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(ellipse 46% 42% at 50% 48%, rgba(20,20,22,0.92) 0%, rgba(20,20,22,0.55) 45%, rgba(20,20,22,0) 72%),
    linear-gradient(180deg, rgba(20,20,22,0.85) 0%, rgba(20,20,22,0) 26%, rgba(20,20,22,0) 74%, rgba(20,20,22,0.9) 100%);
}

/* Soft depth glows behind the network. */
.curtain .cbg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
}
.curtain .cbg-glow-a {
  width: 46vw; height: 46vw;
  left: -10vw; top: -12vw;
  background: radial-gradient(circle, rgba(217,64,11,0.55), transparent 68%);
  animation: cbgFloatA 18s ease-in-out infinite;
}
.curtain .cbg-glow-b {
  width: 42vw; height: 42vw;
  right: -12vw; bottom: -14vw;
  background: radial-gradient(circle, rgba(240,86,31,0.42), transparent 68%);
  animation: cbgFloatB 22s ease-in-out infinite;
}
@keyframes cbgFloatA {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(4vw, 3vw); }
}
@keyframes cbgFloatB {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-4vw, -3vw); }
}

.curtain .cbg-svg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.85;
}

/* ---------- concentric field, centred on the mark ---------- */
.curtain .cbg-ring-o {
  transform-box: fill-box;
  transform-origin: center;
  animation: cbgBreathe 9s ease-in-out infinite;
}
.curtain .cbg-ring-o:nth-child(2) { animation-delay: 1.2s; }
.curtain .cbg-ring-o:nth-child(3) { animation-delay: 2.4s; }
@keyframes cbgBreathe {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.05); opacity: 0.55; }
}

/* ---------- network nodes ---------- */
.curtain .cbg-node {
  fill: #F0561F;
  transform-box: fill-box;
  transform-origin: center;
  animation: cbgPulse 3.6s ease-in-out infinite;
}
.curtain .cbg-node:nth-child(2) { animation-delay: 0.3s; }
.curtain .cbg-node:nth-child(3) { animation-delay: 0.6s; }
.curtain .cbg-node:nth-child(4) { animation-delay: 0.9s; }
.curtain .cbg-node:nth-child(5) { animation-delay: 1.2s; }
.curtain .cbg-node:nth-child(6) { animation-delay: 1.5s; }
.curtain .cbg-node:nth-child(7) { animation-delay: 1.8s; }
.curtain .cbg-node:nth-child(8) { animation-delay: 2.1s; }
.curtain .cbg-node:nth-child(9) { animation-delay: 2.4s; }
@keyframes cbgPulse {
  0%, 100% { transform: scale(1);    opacity: 0.75; }
  50%      { transform: scale(1.45); opacity: 1; }
}

/* ---------- growth trend ---------- */
.curtain .cbg-trend {
  stroke-dasharray: 1600;
  animation: cbgDraw 2.6s cubic-bezier(0.16, 1, 0.3, 1) 0.8s backwards;
}
@keyframes cbgDraw {
  from { stroke-dashoffset: 1600; }
  to   { stroke-dashoffset: 0; }
}

/* ---------- travelling signal ---------- */
.curtain .cbg-spark { opacity: 0.9; }
.curtain .cbg-spark-b { opacity: 0.6; }

/* ---------- conversion rings ---------- */
.curtain .cbg-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: cbgRing 3.4s ease-out 2s infinite;
}
.curtain .cbg-ring-b { animation-delay: 3.7s; }
@keyframes cbgRing {
  0%   { transform: scale(0.5); opacity: 0; }
  15%  { opacity: 0.9; }
  70%  { transform: scale(4.6); opacity: 0; }
  100% { transform: scale(4.6); opacity: 0; }
}

/* =========================================================
   The logo must read light on the dark stage, and the small type with it.
   ========================================================= */
.curtain .curtain-inner { position: relative; z-index: 3; }
.curtain .curtain-hint  { position: absolute; z-index: 3; }

/* The markup uses assets/logo-reversed.png on this screen, so no filter is
   applied — the artwork is already correct for a dark background. */

.curtain .curtain-tag { color: rgba(248,246,241,0.62); }
.curtain .curtain-rule { background: #F0561F; }
.curtain .curtain-hint { color: rgba(248,246,241,0.5); }
.curtain .curtain-hint i {
  background: linear-gradient(to bottom, #F0561F, transparent);
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .curtain .cbg-svg { opacity: 0.6; }
  .curtain .cbg-glow { opacity: 0.42; filter: blur(70px); }
}
@media (max-width: 600px) {
  .curtain .cbg-svg { opacity: 0.45; }
}

/* ---------- reduced motion: show the scene, move nothing ---------- */
@media (prefers-reduced-motion: reduce) {
  .curtain .cbg-glow,
  .curtain .cbg-ring-o,
  .curtain .cbg-node,
  .curtain .cbg-trend,
  .curtain .cbg-ring { animation: none; }
  .curtain .cbg-trend { stroke-dashoffset: 0; }
  .curtain .cbg-spark { display: none; }
}


/* =========================================================
   CENTRING
   The base sheet centres the scroll hint with translateX(-50%). Any other
   rule that sets `transform` on that element wipes the centring out, which is
   what pushed it to the right edge. Margin-auto centring has no such
   dependency, so it holds regardless.
   ========================================================= */
.curtain {
  display: grid;
  place-items: center;
}

.curtain .curtain-inner {
  position: relative;
  z-index: 3;
  margin: 0 auto;
  text-align: center;
}

.curtain .curtain-hint {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: clamp(28px, 5vh, 56px);
  transform: none;
  width: max-content;
  margin-inline: auto;
}