/* =================================================================
   BURRI STUDIO — COME LAVORO (Workflow / Method)
   Structure-first. Inherits the site's tokens, header pattern,
   spacing and blue accent. No advanced effects yet.
   ================================================================= */

section.cl-section {
  position: relative; overflow: hidden; background: var(--bg);
  padding: clamp(48px, 6vh, 80px) 0 var(--section-py);
}

/* Ambient particle field across the whole section */
.cl-ambient { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

/* Large architectural arcs — still; only a soft light travels along them */
.cl-arcs {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
}
.cl-arc {
  fill: none; stroke: rgba(100,181,255,0.06); stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
.cl-arc-light {
  fill: none; stroke: rgba(120,190,255,0.5); stroke-width: 2.2;
  vector-effect: non-scaling-stroke; stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(100,181,255,0.7));
  /* a short bright dash chasing along a very long gap */
  stroke-dasharray: 150 2600; stroke-dashoffset: 2750;
}
.cl-arc-light-1 { animation: clArcTravel 26s linear infinite; }
.cl-arc-light-2 { animation: clArcTravel 32s linear infinite 6s; }
.cl-arc-light-3 { animation: clArcTravel 38s linear infinite 12s; }
.cl-arc-light-4 { animation: clArcTravel 30s linear infinite 3s; }
@keyframes clArcTravel {
  0%   { stroke-dashoffset: 2750; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { stroke-dashoffset: 200; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cl-arc-light { animation: none !important; opacity: 0; }
}

/* Soft atmospheric light blooms — extremely slow, almost imperceptible */
.cl-glow {
  position: absolute; border-radius: 50%; pointer-events: none;
  filter: blur(70px);
}
.cl-glow-1 {
  width: 760px; height: 620px; left: -8%; top: 4%;
  background: radial-gradient(circle, rgba(56,109,255,0.10), transparent 66%);
  animation: clGlowDrift1 34s ease-in-out infinite alternate;
}
.cl-glow-2 {
  width: 680px; height: 560px; right: -10%; top: 32%;
  background: radial-gradient(circle, rgba(100,181,255,0.07), transparent 66%);
  animation: clGlowDrift2 44s ease-in-out infinite alternate;
}
.cl-glow-3 {
  width: 820px; height: 640px; left: 22%; bottom: -12%;
  background: radial-gradient(circle, rgba(56,109,255,0.06), transparent 68%);
  animation: clGlowDrift3 52s ease-in-out infinite alternate;
}
@keyframes clGlowDrift1 {
  0%   { transform: translate(0, 0) scale(1);    opacity: 0.7; }
  100% { transform: translate(60px, 40px) scale(1.12); opacity: 1; }
}
@keyframes clGlowDrift2 {
  0%   { transform: translate(0, 0) scale(1.08); opacity: 0.6; }
  100% { transform: translate(-50px, -30px) scale(1); opacity: 0.95; }
}
@keyframes clGlowDrift3 {
  0%   { transform: translate(0, 0) scale(1);    opacity: 0.55; }
  100% { transform: translate(-40px, -50px) scale(1.1); opacity: 0.85; }
}
.cl-particle {
  position: absolute; left: var(--x); top: var(--y);
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--ice-soft);
  box-shadow: 0 0 8px 1px rgba(100,181,255,0.6);
  opacity: 0.25;
  animation: clFloat var(--d, 16s) ease-in-out var(--del, 0s) infinite;
}
@keyframes clFloat {
  0%, 100% { transform: translate(0, 0); opacity: 0.12; }
  50%      { transform: translate(14px, -20px); opacity: 0.4; }
}

/* ---------- Two-column editorial layout ---------- */
.cl-layout {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 380px 1fr; gap: 80px;
  align-items: center; margin-bottom: 48px;
}

/* ---------- Header (left column, left-aligned) ---------- */
.cl-header {
  text-align: left; max-width: none;
  margin: 0; position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: flex-start;
}
.cl-eyebrow {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--ice-soft);
  margin-bottom: 26px;
}
.cl-title {
  font-family: var(--font-display); font-size: clamp(38px, 4vw, 60px);
  font-weight: 700; line-height: 1.0; letter-spacing: -0.04em;
  color: var(--text); margin: 0; text-transform: uppercase;
}
.cl-accent { color: var(--ice); }
.cl-bar {
  width: 48px; height: 3px; background: var(--ice);
  margin: 20px 0 22px; box-shadow: 0 0 8px var(--ice-glow);
}
.cl-desc {
  font-family: var(--font-body); font-size: 16px; font-weight: 300;
  line-height: 1.65; color: var(--text-3); margin: 0; max-width: 360px;
}

/* ---------- Workflow ecosystem (right column) ---------- */
.cl-flow {
  position: relative; max-width: none; margin: 0;
}

/* Layered stage with ambient depth */
.cl-flow-stage {
  position: relative; padding: 8px 0 0;
  border-radius: 24px;
}
.cl-flow-aura {
  position: absolute; inset: -40px -30px -60px;
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 70% at 50% 30%, rgba(56,109,255,0.10), transparent 62%),
    radial-gradient(ellipse 36% 50% at 16% 60%, rgba(100,181,255,0.05), transparent 60%),
    radial-gradient(ellipse 36% 50% at 84% 60%, rgba(56,109,255,0.05), transparent 60%);
  filter: blur(8px);
  animation: clAura 9s ease-in-out infinite alternate;
}
@keyframes clAura {
  0%   { opacity: 0.7; }
  100% { opacity: 1; }
}

/* continuous luminous line behind the nodes */
.cl-flow-line {
  position: absolute; top: 46px; left: 0; width: 100%; height: 80px;
  z-index: 1; pointer-events: none; overflow: visible;
}
.cl-flow-track {
  fill: none; stroke: var(--hairline); stroke-width: 2; vector-effect: non-scaling-stroke;
}
.cl-flow-draw {
  fill: none; stroke: var(--ice); stroke-width: 2;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 7px var(--ice-glow));
  stroke-dasharray: 1200; stroke-dashoffset: 0;
  transition: stroke-dashoffset 2.2s var(--ease-out);
}
.cl-flow.armed:not(.in) .cl-flow-draw { stroke-dashoffset: 1200; }

.cl-flow-steps {
  position: relative; z-index: 2;
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
}
.cl-node {
  display: flex; flex-direction: column; align-items: center;
  opacity: 1; transform: translateY(0);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: calc(var(--i) * 0.16s + 0.5s);
}
.cl-flow.armed:not(.in) .cl-node { opacity: 0; transform: translateY(22px); transition-delay: 0s; }

/* Each phase as an elevated glass card */
.cl-node-card {
  position: relative; width: 100%;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0 14px 26px;
  border-radius: 18px;
  transition: transform 0.5s var(--ease-out);
}
.cl-node:hover .cl-node-card { transform: translateY(-6px); }

.cl-node-dot {
  width: 84px; height: 84px; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 36%, rgba(56,109,255,0.2), rgba(56,109,255,0.04)),
    var(--bg);
  border: 1px solid rgba(56,109,255,0.34);
  display: flex; align-items: center; justify-content: center;
  color: var(--ice-soft); margin-bottom: 24px; position: relative;
  box-shadow: 0 0 0 7px rgba(11,15,23,1), 0 0 0 8px rgba(56,109,255,0.06), 0 16px 40px -16px rgba(0,0,0,0.8);
  transition: box-shadow 0.6s var(--ease-out), border-color 0.6s;
}
.cl-node-dot::after {
  content: ''; position: absolute; inset: -1px; border-radius: 50%;
  background: radial-gradient(circle, var(--ice-glow), transparent 70%);
  opacity: 0.4; filter: blur(7px); z-index: -1;
  transition: opacity 0.6s var(--ease-out);
}
.cl-node:hover .cl-node-dot {
  border-color: var(--ice);
  box-shadow: 0 0 0 7px rgba(11,15,23,1), 0 0 0 8px rgba(56,109,255,0.12), 0 0 30px -2px var(--ice-glow), 0 20px 44px -16px rgba(0,0,0,0.85);
}
.cl-node:hover .cl-node-dot::after { opacity: 0.9; }
.cl-node-ico { position: relative; z-index: 1; }
.cl-node-ico svg { width: 32px; height: 32px; display: block; }
.cl-node-num {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.18em; color: var(--ice-soft); margin-bottom: 10px;
}
.cl-node-title {
  font-family: var(--font-display); font-size: 20px; font-weight: 600;
  line-height: 1.15; letter-spacing: -0.01em; color: var(--text); margin: 0 0 10px;
}
.cl-node-desc {
  font-family: var(--font-body); font-size: 13.5px; font-weight: 300;
  line-height: 1.55; color: var(--text-3); margin: 0; max-width: 190px;
}
/* Operational checklist under each phase */
.cl-node-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 7px; max-width: 200px;
}
.cl-node-list li {
  position: relative; padding-left: 20px;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 300;
  line-height: 1.4; color: var(--text-3); text-align: left;
}
.cl-node-list li::before {
  content: ''; position: absolute; left: 2px; top: 6px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ice-soft);
  box-shadow: 0 0 7px 1px rgba(100,181,255,0.7);
  border: none; transform: none;
}

/* ---------- Transformation ecosystem (IDEA → CREATION → RESULT) ---------- */
.cl-trans {
  position: relative; max-width: 1100px; margin: 0 auto;
  padding-top: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
  align-items: center; min-height: 360px;
}
.cl-trans-aura {
  position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%);
  width: 760px; height: 300px; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 50% 60% at 50% 50%, rgba(56,109,255,0.12), transparent 66%),
    radial-gradient(ellipse 24% 40% at 18% 50%, rgba(100,181,255,0.06), transparent 60%),
    radial-gradient(ellipse 24% 40% at 82% 50%, rgba(56,109,255,0.06), transparent 60%);
  filter: blur(12px);
  animation: clTransBreathe 6.5s ease-in-out infinite alternate;
}
@keyframes clTransBreathe {
  0%   { opacity: 0.6; transform: translate(-50%, -50%) scale(0.97); }
  100% { opacity: 1;   transform: translate(-50%, -50%) scale(1.04); }
}
.cl-trans-net {
  position: absolute; left: 0; top: 64px; width: 100%; height: calc(100% - 64px);
  z-index: 0; pointer-events: none;
}
.cl-trans-link {
  fill: none; stroke: rgba(56,109,255,0.24); stroke-width: 1.4;
  stroke-dasharray: 3 8; stroke-linecap: round;
  animation: clTransDash 20s linear infinite;
}
@keyframes clTransDash { to { stroke-dashoffset: -220; } }
.cl-trans-spark { fill: var(--ice-soft); filter: drop-shadow(0 0 6px rgba(100,181,255,0.95)); }
.cl-trans-spark--dim { fill: rgba(100,181,255,0.45); }

/* Each transformation stage */
.cl-stage {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  opacity: 1; transform: translateY(0);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: calc(var(--si) * 0.22s + 0.3s);
}
.cl-trans.armed:not(.in) .cl-stage { opacity: 0; transform: translateY(24px); transition-delay: 0s; }
.cl-stage-visual {
  position: relative; width: 220px; height: 168px; border-radius: 16px; overflow: hidden;
  background-color: var(--bg);
  background-image: linear-gradient(165deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01));
  border: 1px solid var(--hairline-2);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.05);
  padding: 18px;
  animation: clStageFloat 8s ease-in-out infinite;
}
.cl-stage--idea .cl-stage-visual { animation-delay: 0s; }
.cl-stage--result .cl-stage-visual { animation-delay: -4s; }
@keyframes clStageFloat {
  0%, 100% { transform: translateY(-6px); }
  50%      { transform: translateY(6px); }
}
.cl-stage-meta { text-align: center; display: flex; flex-direction: column; gap: 5px; }
.cl-stage-tag {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ice-soft);
}
.cl-stage-name {
  font-family: var(--font-display); font-size: 18px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--text);
}

/* LEFT — blueprint / wireframe */
.cl-blueprint {
  display: flex; flex-direction: column; gap: 11px;
  background-image:
    linear-gradient(rgba(56,109,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,109,255,0.08) 1px, transparent 1px);
  background-size: 22px 22px;
}
.cl-bp-line {
  height: 9px; width: var(--w, 60%); border-radius: 3px;
  border: 1px dashed rgba(120,150,210,0.5);
}
.cl-bp-line--btn { height: 26px; border-style: solid; border-color: rgba(56,109,255,0.4); margin-top: auto; }
.cl-bp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex: 1; }
.cl-bp-grid span { border: 1px dashed rgba(120,150,210,0.4); border-radius: 5px; }
.cl-bp-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 34%;
  background: linear-gradient(180deg, rgba(56,109,255,0.18), transparent);
  animation: clBpScan 4.5s ease-in-out infinite;
}
@keyframes clBpScan {
  0%, 100% { transform: translateY(-20%); opacity: 0; }
  50%      { transform: translateY(230%); opacity: 1; }
}

/* CENTER — layered assembly */
.cl-stage--make { gap: 22px; }
.cl-make-stack {
  position: relative; width: 230px; height: 184px;
  background-color: var(--bg); border-radius: 14px;
  animation: clStageFloat 7s ease-in-out infinite; animation-delay: -2s;
}
.cl-make-layer {
  position: absolute; border-radius: 14px;
  border: 1px solid var(--hairline-2);
  background: linear-gradient(165deg, rgba(255,255,255,0.05), rgba(255,255,255,0.012));
  box-shadow: 0 24px 50px -28px rgba(0,0,0,0.85);
}
.cl-make-layer--3 { inset: 0 36px 30px 0; transform: translate(-10px,-10px); opacity: 0.5; animation: clLayer3 6s ease-in-out infinite; }
.cl-make-layer--2 { inset: 14px 18px 16px 18px; opacity: 0.72; animation: clLayer2 6s ease-in-out infinite; }
.cl-make-layer--1 {
  inset: 30px 0 0 36px; z-index: 2; padding: 16px;
  display: flex; flex-direction: column; gap: 9px;
  border-color: rgba(56,109,255,0.34);
  box-shadow: 0 24px 50px -24px rgba(0,0,0,0.9), 0 0 30px -8px var(--ice-glow);
  animation: clLayer1 6s ease-in-out infinite;
}
@keyframes clLayer3 { 0%,100%{ transform: translate(-10px,-10px);} 50%{ transform: translate(-14px,-14px);} }
@keyframes clLayer2 { 0%,100%{ transform: translate(0,0);} 50%{ transform: translate(3px,2px);} }
@keyframes clLayer1 { 0%,100%{ transform: translate(0,0);} 50%{ transform: translate(5px,4px);} }
.cl-make-bar { height: 8px; width: 46%; border-radius: 4px; background: rgba(56,109,255,0.5); }
.cl-make-row { height: 7px; width: var(--w,70%); border-radius: 4px; background: rgba(255,255,255,0.12); }
.cl-make-chips { display: flex; gap: 7px; margin-top: auto; }
.cl-make-chips i { width: 26px; height: 16px; border-radius: 5px; background: rgba(56,109,255,0.22); border: 1px solid rgba(56,109,255,0.3); }


/* RIGHT — polished product */
.cl-result { padding: 0; display: flex; flex-direction: column; }
.cl-result-bar {
  height: 26px; flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 0 12px;
  background: rgba(255,255,255,0.04); border-bottom: 1px solid var(--hairline-2);
}
.cl-result-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.18); }
.cl-result-body { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.cl-result-hero { height: 44px; border-radius: 8px; background: linear-gradient(120deg, rgba(56,109,255,0.5), rgba(100,181,255,0.3)); box-shadow: 0 0 24px -8px var(--ice-glow); }
.cl-result-line { height: 7px; width: var(--w,60%); border-radius: 4px; background: rgba(255,255,255,0.16); }
.cl-result-cta { height: 22px; width: 70px; border-radius: 6px; background: var(--ice); box-shadow: 0 0 18px -4px var(--ice-glow); margin-top: 4px; }
.cl-result-sheen {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.07) 50%, transparent 60%);
  background-size: 250% 100%; background-position: 130% 0;
  animation: clResultSheen 6s ease-in-out infinite;
}
@keyframes clResultSheen {
  0%, 60% { background-position: 130% 0; }
  100%    { background-position: -40% 0; }
}

/* ---------- Responsive ---------- */

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .cl-layout { grid-template-columns: 1fr; gap: 48px; align-items: start; }
  .cl-header { max-width: 560px; }
  .cl-desc { max-width: 460px; }
}
@media (max-width: 1024px) {
  .cl-flow-steps { grid-template-columns: repeat(5, 1fr); gap: 10px; }
  .cl-node-list { font-size: 11px; max-width: 150px; }
  .cl-node-card { padding: 0 6px 22px; }
}
@media (max-width: 720px) {
  .cl-flow-line { display: none; }
  .cl-flow-steps {
    grid-template-columns: 1fr; gap: 0;
    max-width: 460px; margin: 0 auto;
  }
  .cl-node-card {
    flex-direction: row; text-align: left; gap: 20px; align-items: flex-start;
    padding: 22px 0; border-top: 1px solid var(--hairline); border-radius: 0;
  }
  .cl-node:last-child .cl-node-card { border-bottom: 1px solid var(--hairline); }
  .cl-node:hover .cl-node-card { transform: none; }
  .cl-node-dot { width: 62px; height: 62px; margin-bottom: 0; flex-shrink: 0; box-shadow: 0 0 0 6px rgba(11,15,23,1), 0 16px 40px -16px rgba(0,0,0,0.8); }
  .cl-node-ico svg { width: 26px; height: 26px; }
  .cl-node-list { max-width: none; }
  .cl-node-num { margin-bottom: 6px; }

  /* Transformation stacks into a column on mobile */
  .cl-trans { grid-template-columns: 1fr; gap: 40px; min-height: 0; }
  .cl-trans-net, .cl-trans-aura { display: none; }
  .cl-stage-visual, .cl-make-stack { animation: none; transform: none; }
}
@media (max-width: 480px) {
  .cl-node-card { padding: 20px 0; }
}