/* =========================================================
   ForGrowth Academy — ambient.css
   ISOLATED. Adds slow background motion to two sections without touching any
   content or layout. Everything is drawn on pseudo-elements behind the text,
   so no markup changes are needed and nothing can shift position.

   Restraint is the point: long durations, low opacity, brand colours only.
   Motion you notice is motion that distracts.
   ========================================================= */

/* =========================================================
   1. "WHY FORGROWTH ACADEMY EXISTS" — drifting light
   ========================================================= */
#about {
  position: relative;
  isolation: isolate;
  /* NOT overflow:hidden. The step panels inside use position:sticky, and
     `hidden` would turn #about into a scroll container — the panels would
     then stick to that box instead of the viewport and stop stacking.
     `clip` contains the drifting lights without creating a scroll container. */
  overflow-x: clip;
}
@supports not (overflow-x: clip) {
  /* Older engines: leave overflow alone rather than break the stacking.
     The light fields are inset far enough not to cause a scrollbar. */
  #about { overflow: visible; }
}

/* Two soft rust fields drifting on long, offset cycles. Because they move at
   different speeds they never repeat the same arrangement, so the background
   feels alive rather than looped. */
#about::before,
#about::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  filter: blur(72px);
}

#about::before {
  width: 46vw;
  height: 46vw;
  top: -14vw;
  left: -10vw;
  background: radial-gradient(circle, rgba(217, 64, 11, 0.30), transparent 66%);
  animation: fgDriftA 22s ease-in-out infinite;
}

#about::after {
  width: 40vw;
  height: 40vw;
  right: -12vw;
  bottom: -16vw;
  background: radial-gradient(circle, rgba(240, 86, 31, 0.26), transparent 66%);
  animation: fgDriftB 24s ease-in-out infinite;
}

@keyframes fgDriftA {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(6vw, 4vw) scale(1.1); }
  66%      { transform: translate(2vw, 8vw) scale(0.95); }
}
@keyframes fgDriftB {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%      { transform: translate(-7vw, -3vw) scale(1.08); }
  75%      { transform: translate(-3vw, -8vw) scale(0.96); }
}

/* A hairline grid that creeps very slowly, giving the flat ivory some depth. */
#about .container { position: relative; z-index: 1; }


/* =========================================================
   REDUCED MOTION — keep the colour, drop the movement
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  #about::before,
  #about::after,
  .toolkit::before,
  .tk-node { animation: none; }
  .toolkit::before { display: none; }
  .tk-cell:hover { transform: none; }
}

/* Large blurred fields are expensive to composite on phones, and the sheen
   adds little at that width. */
@media (max-width: 620px) {
  #about::before, #about::after { filter: blur(60px); opacity: 0.7; }
  .toolkit::before { display: none; }
}

/* =========================================================
   MORE VISIBLE MOTION
   The first pass was too quiet to register. These add movement the eye
   actually catches, still using brand colours only.
   ========================================================= */

/* --- a third, smaller light moving on a shorter cycle, so the field
       never settles into a predictable rhythm --- */
#about .container::before {
  content: none;
  position: absolute;
  width: 26vw;
  height: 26vw;
  top: 18%;
  left: 42%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 193, 77, 0.26), transparent 66%);
  filter: blur(64px);
  pointer-events: none;
  z-index: -1;
  animation: fgDriftC 15s ease-in-out infinite;
}
@keyframes fgDriftC {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-9vw, 5vw) scale(1.18); }
}

/* --- a fine grid that creeps across the section, giving the flat ivory
       a sense of depth and slow travel --- */
#about::before { z-index: -2; }
#about .container { position: relative; }

.fg-mesh {
  position: absolute;
  inset: -40px;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(217, 64, 11, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217, 64, 11, 0.09) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(70% 60% at 50% 50%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 50%, #000 20%, transparent 78%);
  animation: fgMesh 24s linear infinite;
}
@keyframes fgMesh {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 58px 58px, 58px 58px; }
}

@media (prefers-reduced-motion: reduce) {
  #about .container::before,
  .fg-mesh,
  .tk-cell::before { animation: none; }
  .fg-mesh { display: none; }
}

@media (max-width: 620px) {
  #about .container::before { display: none; }
  .fg-mesh { background-size: 44px 44px; opacity: 0.7; }
}

/* =========================================================
   "WHY FORGROWTH ACADEMY EXISTS" — premium dark panel
   The heading block sat on plain ivory, which made the animated lights hard
   to see and left the section feeling flat. A deep charcoal ground lets the
   rust glow actually read, and sets up the contrast for the ivory "Learn"
   panel that slides over it next.

   Only the heading area is affected: the step panels carry their own
   backgrounds and cover this as they stack.
   ========================================================= */

#about {
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(217, 64, 11, 0.22), transparent 58%),
    radial-gradient(90% 80% at 92% 96%, rgba(240, 86, 31, 0.16), transparent 60%),
    linear-gradient(165deg, #1E1D1C 0%, #17161A 52%, #121116 100%);
  color: #F8F6F1;
}

/* Eyebrow reads brighter on the dark ground. */
#about .mono-tag { color: #F0561F; }
#about .mono-tag::before { background: #F0561F; }

/* The statement is the focal line of the section. */
#about .why-statement {
  color: rgba(248, 246, 241, 0.94);
}
#about .why-statement em {
  color: #F0561F;
  font-style: normal;
}

/* The lights need less blur and a touch more strength against charcoal. */
#about::before { background: radial-gradient(circle, rgba(240, 86, 31, 0.34), transparent 66%); }
#about::after  { background: radial-gradient(circle, rgba(255, 138, 61, 0.26), transparent 66%); }
#about .container::before {
  background: radial-gradient(circle, rgba(255, 193, 77, 0.22), transparent 66%);
}

/* Grid mesh in warm light rather than rust, so it reads as texture on dark. */
.fg-mesh {
  background-image:
    linear-gradient(rgba(255, 193, 77, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 193, 77, 0.10) 1px, transparent 1px);
}

/* A soft edge at the bottom so the charcoal meets the first step panel
   cleanly rather than as a hard band. */
#about::marker { content: none; }

/* =========================================================
   CONSTELLATION FIELD — the moving pattern for this slide only
   Connected nodes drifting behind the statement: a network, which is what a
   digital marketing academy actually teaches. Each cluster moves on its own
   long, offset cycle, so the arrangement never repeats.

   All motion is CSS on grouped SVG, so the lines stay attached to their nodes
   without any JavaScript recalculating positions on every frame.
   ========================================================= */

.fg-field {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  /* Fades at the edges so nothing collides with the heading. */
  mask-image: radial-gradient(120% 95% at 50% 45%, #000 42%, transparent 88%);
  -webkit-mask-image: radial-gradient(120% 95% at 50% 45%, #000 42%, transparent 88%);
}
.fg-field svg { width: 100%; height: 100%; display: block; }

/* --- clusters drift --- */
.fg-cl {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0.85;
}
.fg-cl-1 { animation: fgCl1 26s ease-in-out infinite; }
.fg-cl-2 { animation: fgCl2 32s ease-in-out infinite; }
.fg-cl-3 { animation: fgCl3 29s ease-in-out infinite; }
.fg-cl-4 { animation: fgCl4 36s ease-in-out infinite; }

@keyframes fgCl1 {
  0%,100% { transform: translate(0,0) rotate(0deg); }
  50%     { transform: translate(38px,-26px) rotate(4deg); }
}
@keyframes fgCl2 {
  0%,100% { transform: translate(0,0) rotate(0deg); }
  50%     { transform: translate(-44px,22px) rotate(-5deg); }
}
@keyframes fgCl3 {
  0%,100% { transform: translate(0,0) rotate(0deg); }
  50%     { transform: translate(30px,30px) rotate(3deg); }
}
@keyframes fgCl4 {
  0%,100% { transform: translate(0,0) rotate(0deg); }
  50%     { transform: translate(-32px,-28px) rotate(-4deg); }
}

/* --- nodes breathe, offset so they never blink together --- */
.fg-nd {
  transform-box: fill-box;
  transform-origin: center;
  animation: fgNd 4.2s ease-in-out infinite;
}
.fg-nd:nth-child(2) { animation-delay: .5s; }
.fg-nd:nth-child(3) { animation-delay: 1s; }
.fg-nd:nth-child(4) { animation-delay: 1.5s; }
.fg-nd:nth-child(5) { animation-delay: 2s; }
@keyframes fgNd {
  0%,100% { transform: scale(1);   opacity: .9; }
  50%     { transform: scale(1.5); opacity: 1; }
}

/* --- outline shapes rotating slowly, for depth behind the clusters --- */
.fg-orb { transform-box: fill-box; transform-origin: center; }
.fg-orb-1 { animation: fgOrbA 44s linear infinite; }
.fg-orb-2 { animation: fgOrbB 38s linear infinite; }
.fg-orb-3 { animation: fgOrbC 52s linear infinite; }
@keyframes fgOrbA {
  0%   { transform: rotate(0deg)   scale(1); }
  50%  { transform: rotate(180deg) scale(1.12); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes fgOrbB {
  0%   { transform: rotate(0deg)    translateY(0); }
  50%  { transform: rotate(-180deg) translateY(-22px); }
  100% { transform: rotate(-360deg) translateY(0); }
}
@keyframes fgOrbC {
  0%   { transform: rotate(0deg)   scale(1); }
  50%  { transform: rotate(200deg) scale(0.88); }
  100% { transform: rotate(360deg) scale(1); }
}

/* --- loose sparks rising slowly through the field --- */
.fg-sp {
  transform-box: fill-box;
  transform-origin: center;
  animation: fgSp 9s ease-in-out infinite;
}
.fg-sp:nth-child(2) { animation-delay: 1.4s; }
.fg-sp:nth-child(3) { animation-delay: 2.8s; }
.fg-sp:nth-child(4) { animation-delay: 4.2s; }
.fg-sp:nth-child(5) { animation-delay: 5.6s; }
.fg-sp:nth-child(6) { animation-delay: 7s; }
@keyframes fgSp {
  0%   { transform: translateY(14px); opacity: 0; }
  20%  { opacity: .85; }
  80%  { opacity: .5; }
  100% { transform: translateY(-40px); opacity: 0; }
}

/* --- responsive --- */
@media (max-width: 900px) {
  .fg-field { opacity: .8; }
}
@media (max-width: 620px) {
  /* Fewer moving parts on a phone, and the grid mesh is enough texture. */
  .fg-orb, .fg-sp { display: none; }
  .fg-field { opacity: .65; }
}

@media (prefers-reduced-motion: reduce) {
  .fg-cl, .fg-nd, .fg-orb, .fg-sp { animation: none; }
}

/* =========================================================
   THE TOOLKIT GRID — spotlight walk
   Nine flat white cells read as a plain table. A light now travels through
   them in reading order, lifting one cell at a time: its plate warms, the
   border catches rust, the node fills and the number brightens. One cell is
   ever active, so the eye is led across the grid instead of scanning it.

   Full cycle is 9 cells x 1.25s = 11.25s, matching the delay steps below.
   ========================================================= */

.toolkit { position: relative; overflow: hidden; }

.tk-cell {
  background:
    linear-gradient(168deg, #FFFFFF 0%, #FDFBF7 100%);
  transition:
    background-color .5s var(--ease),
    transform .45s var(--ease),
    box-shadow .5s var(--ease);
}

/* The spotlight itself: a warm plate that fades up and away. */
.tk-cell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 100% at 20% 0%, rgba(217, 64, 11, 0.12), transparent 62%),
    linear-gradient(168deg, rgba(255, 193, 77, 0.10), transparent 70%);
  opacity: 0;
  animation: fgSpot 11.25s ease-in-out infinite;
}
.tk-cell > * { position: relative; z-index: 1; }

@keyframes fgSpot {
  0%, 100% { opacity: 0; }
  3%       { opacity: 1; }
  9%       { opacity: 1; }
  15%      { opacity: 0; }
}

/* Border catches the light as it passes. */
.tk-cell::after { animation: fgSpotEdge 11.25s ease-in-out infinite; }
@keyframes fgSpotEdge {
  0%, 100% { border-color: transparent; }
  3%, 9%   { border-color: rgba(217, 64, 11, 0.5); }
  15%      { border-color: transparent; }
}

/* Node fills, number warms — both on the same beat. */
.tk-node { animation: fgSpotNode 11.25s ease-in-out infinite; }
@keyframes fgSpotNode {
  0%, 100% { background: transparent; transform: scale(1); }
  3%, 9%   { background: var(--accent, #D9400B); transform: scale(1.35); }
  15%      { background: transparent; transform: scale(1); }
}

.tk-idx { animation: fgSpotIdx 11.25s ease-in-out infinite; }
@keyframes fgSpotIdx {
  0%, 100% { color: var(--grey-light, #9A9A9D); }
  3%, 9%   { color: var(--accent, #D9400B); }
  15%      { color: var(--grey-light, #9A9A9D); }
}

/* Reading order: each cell starts 1.25s after the one before. */
.tk-cell:nth-child(1) ::before, .tk-cell:nth-child(1)::before,
.tk-cell:nth-child(1)::after, .tk-cell:nth-child(1) .tk-node, .tk-cell:nth-child(1) .tk-idx { animation-delay: 0s; }
.tk-cell:nth-child(2)::before, .tk-cell:nth-child(2)::after,
.tk-cell:nth-child(2) .tk-node, .tk-cell:nth-child(2) .tk-idx { animation-delay: 1.25s; }
.tk-cell:nth-child(3)::before, .tk-cell:nth-child(3)::after,
.tk-cell:nth-child(3) .tk-node, .tk-cell:nth-child(3) .tk-idx { animation-delay: 2.5s; }
.tk-cell:nth-child(4)::before, .tk-cell:nth-child(4)::after,
.tk-cell:nth-child(4) .tk-node, .tk-cell:nth-child(4) .tk-idx { animation-delay: 3.75s; }
.tk-cell:nth-child(5)::before, .tk-cell:nth-child(5)::after,
.tk-cell:nth-child(5) .tk-node, .tk-cell:nth-child(5) .tk-idx { animation-delay: 5s; }
.tk-cell:nth-child(6)::before, .tk-cell:nth-child(6)::after,
.tk-cell:nth-child(6) .tk-node, .tk-cell:nth-child(6) .tk-idx { animation-delay: 6.25s; }
.tk-cell:nth-child(7)::before, .tk-cell:nth-child(7)::after,
.tk-cell:nth-child(7) .tk-node, .tk-cell:nth-child(7) .tk-idx { animation-delay: 7.5s; }
.tk-cell:nth-child(8)::before, .tk-cell:nth-child(8)::after,
.tk-cell:nth-child(8) .tk-node, .tk-cell:nth-child(8) .tk-idx { animation-delay: 8.75s; }
.tk-cell:nth-child(9)::before, .tk-cell:nth-child(9)::after,
.tk-cell:nth-child(9) .tk-node, .tk-cell:nth-child(9) .tk-idx { animation-delay: 10s; }

/* Hover always wins over the walk, so the grid still answers the pointer. */
.tk-cell:hover {
  background: #FFFFFF;
  transform: translateY(-3px);
  box-shadow: 0 18px 34px -22px rgba(28, 24, 22, 0.5);
  z-index: 2;
}
.tk-cell:hover::before { opacity: 1; animation: none; }
.tk-cell:hover::after  { border-color: var(--accent, #D9400B); animation: none; }
.tk-cell:hover .tk-node { background: var(--accent, #D9400B); transform: scale(1.35); animation: none; }
.tk-cell:hover .tk-idx  { color: var(--accent, #D9400B); animation: none; }

@media (max-width: 620px) {
  /* One cell per row on a phone, so a walking spotlight has nothing to lead
     the eye across — the hover state is enough. */
  .tk-cell::before, .tk-cell::after,
  .tk-cell .tk-node, .tk-cell .tk-idx { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tk-cell::before, .tk-cell::after,
  .tk-cell .tk-node, .tk-cell .tk-idx { animation: none; }
  .tk-cell:hover { transform: none; }
}