/* ============================================
   THE SWEEZ ECOSYSTEM — v2 (orbit of three glass orbs)
   Live on index.html since 2026-09-24 (v1: css/ecosystem.css, backup in backups/ecosystem-v1-2026-09-24/).

   .eco2-field is a design canvas with a fixed ratio. Every orb, line and anchored
   copy block is placed in canvas units via --W/--H and per-element --x/--y, so the
   composition scales as one piece:
     wide     (>=1100px) 1530 x 760, intro sits inside the canvas top-left
     portrait (<1100px)  390 x 450, intro above, two bottom copies hang below
   The SVG line layers share the same viewBoxes as the canvas.
============================================ */
.eco2{
  --lime: #c6ff3e;
  --violet: #8d63ff;
  --cyan: #3fb2ff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(64px, 7vw, 110px) 0 clamp(56px, 6vw, 96px);
  background: var(--bg);
}
.eco2-atmos{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 34% 40% at 51% 34%, rgba(198,255,62,.07), transparent 70%),
    radial-gradient(ellipse 26% 30% at 36% 70%, rgba(63,178,255,.06), transparent 70%),
    radial-gradient(ellipse 26% 30% at 67% 72%, rgba(141,99,255,.08), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,.4) 0%, transparent 16%);
}
.eco2-inner{ container-type: inline-size; }

/* ---- Intro ---- */
.eco2-kicker{
  display:flex; align-items:center; gap: 22px;
  font-family: var(--font-display); font-size: .78rem; font-weight: 500;
  letter-spacing: .34em; text-transform: uppercase;
  color: rgba(244,244,239,.82);
}
.eco2-kicker span{ width: 52px; height: 1px; background: var(--lime); box-shadow: 0 0 8px rgba(198,255,62,.6); }
.eco2-title{
  font-family: var(--font-body); font-weight: 500;
  font-size: clamp(2.5rem, 3.7cqw, 4.2rem);
  line-height: 1.06; letter-spacing: -.025em;
  white-space: nowrap;
  color: #fff;
  margin: .5em 0 0;
}
.eco2-title em{
  font-style: normal; color: var(--lime);
  text-shadow: 0 0 34px rgba(198,255,62,.28);
}
.eco2-lede{
  margin-top: 1.6em;
  max-width: 30em;
  font-size: clamp(.98rem, 1.3cqw, 1.2rem); line-height: 1.5;
  color: rgba(222,224,232,.78);
}
.eco2-pills{
  display:flex; align-items:center; gap: 12px;
  margin-top: 2.6em;
  font-family: var(--font-display); font-size: .7rem; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase;
  color: rgba(244,244,239,.72);
}
.eco2-pills i{
  width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--lime); box-shadow: 0 0 10px rgba(198,255,62,.55);
}
.eco2-pills-rule{ width: 58px; height: 1px; background: var(--lime); opacity: .8; margin-right: 6px; }
.eco2-pills b{ font-weight: 400; opacity: .5; margin: 0 .5em; }

/* ---- Canvas ---- */
.eco2-field{
  --W: 390; --H: 450;
  position: relative;
  aspect-ratio: var(--W) / var(--H);
}
.eco2-field > *{ position: absolute; }
.eco2-lines{ inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.eco2-lines--wide{ display: none; }

.eco2-lines path{ fill: none; }
/* strokes are in viewBox units (no non-scaling-stroke: it breaks pathLength dashes in Chrome) */
.eco2-lines--tall{ --sw: .8; }
.eco2-lines--wide{ --sw: 1.25; }
.eco2-orbit path{ stroke: rgba(236,238,245,.42); stroke-width: var(--sw); }
.eco2-pulse path{
  stroke: var(--lime); stroke-width: calc(var(--sw) * 1.7); stroke-linecap: round;
  stroke-dasharray: .09 .91; stroke-dashoffset: 1;
  filter: drop-shadow(0 0 4px rgba(198,255,62,.9));
  animation: eco2Pulse 5.5s linear infinite;
}
.eco2-pulse path:nth-child(2){ animation-delay: -1.8s; }
.eco2-pulse path:nth-child(3){ animation-delay: -3.6s; animation-duration: 4.2s; }
.eco2-leads path{ stroke: var(--lime); stroke-width: var(--sw); opacity: .85; }
.eco2-dots circle{ fill: var(--lime); filter: drop-shadow(0 0 5px rgba(198,255,62,.95)); }
@keyframes eco2Pulse{ to{ stroke-dashoffset: 0; } }

/* ---- Nodes ---- */
.eco2-node{ position: static; }
/* --glow-a: halo / pool tint · --glow-hot: the bright contact light under the sphere
   --fd / --fdel: float timing, shared by the orb and its floor light so they breathe together */
.eco2-node--story     { --x: 165; --y: 100; --r: 78; --glow-a: rgba(198,255,62,.34); --glow-hot: rgba(214,255,110,.9); --fd: 7s;   --fdel: 0s; }
.eco2-node--technology{ --x: 92;  --y: 345; --r: 80; --glow-a: rgba(63,178,255,.32); --glow-hot: rgba(120,205,255,.9); --fd: 8s;   --fdel: -2.3s; }
.eco2-node--experience{ --x: 298; --y: 345; --r: 80; --glow-a: rgba(141,99,255,.4);  --glow-hot: rgba(176,140,255,.9); --fd: 7.5s; --fdel: -4.6s; }

.eco2-orb{
  position: absolute; z-index: 2;
  /* the orb art fills 272/288 of its image, so the image box is 1.0588 × the sphere */
  width: calc(var(--r) * 2.1176 / var(--W) * 100%);
  aspect-ratio: 1;
  left: calc(var(--x) / var(--W) * 100%);
  top: calc(var(--y) / var(--H) * 100%);
  transform: translate(-50%, -50%);
}
/* Both pseudos sit behind the sphere (the orb's transform makes it a stacking context):
   ::before is the soft halo, ::after is the light the sphere throws on an unseen floor —
   a wide tinted pool plus a hot core right at the contact point, so it reads as resting on it. */
.eco2-orb::before, .eco2-orb::after{ content:""; position:absolute; pointer-events:none; z-index: -1; }
.eco2-orb::before{
  inset: -22%; border-radius: 50%;
  background: radial-gradient(circle, var(--glow-a) 0%, transparent 62%);
  opacity: .8; transition: opacity .6s var(--ease-soft), transform .8s var(--ease);
}
.eco2-orb::after{
  left: -34%; right: -34%; top: 82%; height: 36%;
  background:
    radial-gradient(ellipse 16% 10% at 50% 46%, rgba(255,255,255,.7), transparent 100%),
    radial-gradient(ellipse 28% 17% at 50% 46%, var(--glow-hot), transparent 100%),
    radial-gradient(ellipse 44% 30% at 50% 46%, var(--glow-a), transparent 100%),
    radial-gradient(ellipse 50% 50% at 50% 46%, var(--glow-a), transparent 90%);
  filter: blur(5px);
  transform-origin: 50% 46%;
  animation: eco2Floor var(--fd) ease-in-out var(--fdel) infinite;
  transition: filter .6s var(--ease-soft);
}
.eco2-float{ position: relative; display:block; width:100%; height:100%; animation: eco2Float var(--fd) ease-in-out var(--fdel) infinite; }
/* floor light bouncing back up onto the underside of the glass (moves with the orb) */
.eco2-float::after{
  content:""; position:absolute; inset: 3%; border-radius: 50%; pointer-events:none;
  background: radial-gradient(ellipse 46% 22% at 50% 100%, var(--glow-hot), transparent 100%);
  mix-blend-mode: screen; opacity: .55;
}
/* the orb dips toward the floor at 50% → its light pool tightens and brightens */
@keyframes eco2Floor{
  0%, 100%{ transform: scale(1.08, 1);    opacity: .72; }
  50%     { transform: scale(.94, .92);   opacity: 1; }
}
.eco2-orb img{
  display:block; width:100%; height:100%;
  transition: transform 1s var(--ease), filter .6s var(--ease-soft);
}
@keyframes eco2Float{
  0%, 100%{ transform: translate3d(0, -1.6%, 0); }
  50%     { transform: translate3d(0, 1.6%, 0); }
}

/* ---- Copy ---- */
.eco2-copy{ position: absolute; z-index: 3; transition: opacity .5s var(--ease-soft); }
.eco2-index{ display:flex; align-items:center; gap: 12px; margin-bottom: .45em; }
.eco2-num{
  font-family: var(--font-body); font-weight: 400;
  font-size: clamp(1.1rem, 1.75cqw, 1.7rem); line-height: 1;
  color: var(--lime);
}
.eco2-dash{ width: 30px; height: 1px; background: var(--lime); opacity: .85; }
.eco2-cat{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1rem, 1.95cqw, 1.9rem); line-height: 1.1;
  letter-spacing: .06em; text-transform: uppercase; color: #fff;
}
.eco2-line{
  margin-top: .5em;
  font-size: clamp(.92rem, 1.42cqw, 1.38rem); font-weight: 500; line-height: 1.3;
  color: #f2f2f2;
}
.eco2-tags{
  margin-top: 1.05em;
  font-size: clamp(.8rem, 1.02cqw, 1rem); line-height: 1.55;
  color: rgba(190,196,214,.8);
}

/* Portrait placement: story copy beside its orb, the other two hang below the canvas */
.eco2-field{ margin: 34px 0 180px; }
.eco2-tags br{ display: none; }
.eco2-node--story .eco2-copy{ left: calc(252 / 390 * 100%); right: -4px; top: calc(6 / 450 * 100%); }
.eco2-node--technology .eco2-copy{ left: 0; width: 48%; top: calc(100% + 10px); }
.eco2-node--experience .eco2-copy{ left: calc(222 / 390 * 100%); right: 0; top: calc(100% + 10px); }

/* ---- Hover: lift the hovered orb, quieten the other two ---- */
@media (hover: hover) and (pointer: fine){
  .eco2-node:hover .eco2-orb img{ transform: scale(1.045); filter: brightness(1.12) saturate(1.1); }
  .eco2-node:hover .eco2-orb::before{ opacity: 1; transform: scale(1.12); }
  .eco2-node:hover .eco2-orb::after{ filter: blur(4px) brightness(1.35); }
  .eco2-field:has(.eco2-node:hover) .eco2-node:not(:hover) .eco2-orb::after{ filter: blur(4px) brightness(.6); }
  .eco2-field:has(.eco2-node:hover) .eco2-node:not(:hover) .eco2-orb img{ filter: brightness(.6) saturate(.75); }
  .eco2-field:has(.eco2-node:hover) .eco2-node:not(:hover) .eco2-copy{ opacity: .45; }
  .eco2-node:hover .eco2-num{ text-shadow: 0 0 16px rgba(198,255,62,.6); }
}

/* ---- Reveal (js/ecosystem-v2.js adds .is-in; without JS everything is visible) ---- */
.eco2.js-reveal .eco2-intro > *,
.eco2.js-reveal .eco2-copy{ opacity: 0; transform: translateY(18px); }
.eco2.js-reveal .eco2-orb{ opacity: 0; transform: translate(-50%, -50%) scale(.82); }
.eco2.js-reveal .eco2-orbit path,
.eco2.js-reveal .eco2-leads path{ stroke-dasharray: 1; stroke-dashoffset: 1; }
.eco2.js-reveal .eco2-dots circle,
.eco2.js-reveal .eco2-pulse{ opacity: 0; }

.eco2.is-in .eco2-intro > *,
.eco2.is-in .eco2-copy,
.eco2.is-in .eco2-orb,
.eco2.is-in .eco2-dots circle,
.eco2.is-in .eco2-pulse{
  opacity: 1;
  transition: opacity 1s var(--ease-soft) var(--d, 0s), transform 1.2s var(--ease) var(--d, 0s);
}
.eco2.is-in .eco2-intro > *, .eco2.is-in .eco2-copy{ transform: none; }
.eco2.is-in .eco2-orb{ transform: translate(-50%, -50%); }
.eco2.is-in .eco2-orbit path,
.eco2.is-in .eco2-leads path{ stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease) var(--d, 0s); }

.eco2-intro > :nth-child(2){ --d: .1s; }
.eco2-intro > :nth-child(3){ --d: .2s; }
.eco2-intro > :nth-child(4){ --d: .3s; }
.eco2-node--story .eco2-orb{ --d: .25s; }
.eco2-node--technology .eco2-orb{ --d: .45s; }
.eco2-node--experience .eco2-orb{ --d: .6s; }
.eco2-orbit path{ --d: .5s; }
.eco2-leads path, .eco2-dots circle{ --d: 1.1s; }
.eco2-copy{ --d: 1.2s; }
.eco2-pulse{ --d: 1.8s; }

/* JS adds .is-offscreen so the loops cost nothing while the section is out of view */
.eco2.is-offscreen .eco2-float,
.eco2.is-offscreen .eco2-orb::after,
.eco2.is-offscreen .eco2-pulse path{ animation-play-state: paused; }

/* ============================================
   WIDE LAYOUT
============================================ */
@media (min-width: 1100px){
  .eco2-stage{ position: relative; }
  .eco2-intro{
    position: absolute; z-index: 3; left: 0; top: 0;
    width: max(31cqw, 330px);
  }
  .eco2-field{ --W: 1530; --H: 760; margin: 0; }
  .eco2-lines--tall{ display: none; }
  .eco2-lines--wide{ display: block; }
  .eco2-tags br{ display: inline; }

  .eco2-node--story     { --x: 782;  --y: 152; --r: 125; }
  .eco2-node--technology{ --x: 536;  --y: 540; --r: 125; }
  .eco2-node--experience{ --x: 1018; --y: 545; --r: 125; }

  .eco2-node--story .eco2-copy     { left: calc(1030 / 1530 * 100%); right: auto; top: calc(12 / 760 * 100%); }
  .eco2-node--technology .eco2-copy{ left: 0;                         width: auto; top: calc(488 / 760 * 100%); }
  .eco2-node--experience .eco2-copy{ left: calc(1270 / 1530 * 100%); right: auto; top: calc(488 / 760 * 100%); }
  .eco2-node--technology .eco2-index{ margin-right: -14px; }
}
/* narrow desktops: drop the pill row so the intro clears the Technology copy */
@media (min-width: 1100px) and (max-width: 1279px){
  .eco2-pills{ display: none; }
}

/* ============================================
   PORTRAIT: tablet keeps the phone composition, centred
============================================ */
@media (min-width: 640px) and (max-width: 1099px){
  .eco2-intro{ max-width: 620px; }
  .eco2-field{ max-width: 600px; margin-left: auto; margin-right: auto; margin-bottom: 200px; }
}
@media (max-width: 639px){
  .eco2-kicker{ font-size: .68rem; gap: 16px; }
  .eco2-kicker span{ width: 38px; }
  .eco2-title{ font-size: clamp(2.1rem, 10vw, 2.6rem); }
  .eco2-pills{ display: none; }
  .eco2-field{ margin-left: -6px; margin-right: -6px; }
  .eco2-cat{ font-size: .98rem; }
  .eco2-line{ font-size: .88rem; }
  .eco2-tags{ font-size: .76rem; margin-top: .7em; }
  .eco2-num{ font-size: 1.05rem; }
  .eco2-dash{ width: 22px; }
}

@media (prefers-reduced-motion: reduce){
  .eco2-float, .eco2-pulse path, .eco2-orb::after{ animation: none !important; }
  .eco2-pulse{ display: none; }
}