/* ============================================================
   MECANISMO · "A jornada da luz" — infográfico animado e didático
   Tema emerald (sec--dark). Cenas desenhadas e animadas em CSS.
   ============================================================ */
.journey{ margin:clamp(36px,4.5vw,56px) 0 clamp(44px,5vw,64px); }
.journey__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
  counter-reset:step;
}
.jstep{
  position:relative; counter-increment:step;
  background:linear-gradient(180deg, rgba(127,217,196,0.08), rgba(127,217,196,0.03));
  border:1px solid rgba(127,217,196,0.22); border-radius:20px;
  padding:24px 22px 26px; overflow:hidden;
  transition:transform .5s var(--ease), border-color .5s, background .5s;
}
.jstep:hover{ transform:translateY(-5px); border-color:rgba(127,217,196,0.5); background:linear-gradient(180deg, rgba(127,217,196,0.13), rgba(127,217,196,0.04)); }
.jstep__n{
  position:absolute; top:14px; left:16px; z-index:4;
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:700; font-size:16px; line-height:1;
  color:#06231f; background:linear-gradient(135deg,#7fd9c4,#2aaf94);
  box-shadow:0 6px 16px -6px rgba(42,175,148,0.8);
}
.jstep__n::before{ content:"0" counter(step); }
.jstep h4{ font-family:var(--font-display); font-weight:600; font-size:22px; color:#eef7f4; margin:0 0 9px; line-height:1.1; min-height:2.2em; display:flex; align-items:flex-end; }
.jstep p{ font-size:14.5px; font-weight:300; line-height:1.58; color:rgba(233,243,240,0.72); margin:0; }
.jstep p b{ color:var(--emerald-soft); font-weight:600; }

/* cena animada (parte superior de cada passo) */
.scene{ position:relative; height:128px; margin-bottom:20px; border-radius:14px; overflow:hidden;
  background:radial-gradient(120% 130% at 50% 0%, rgba(10,46,42,0.5), rgba(6,31,28,0.7));
  box-shadow:inset 0 0 0 1px rgba(127,217,196,0.12); }

/* —— Cena 1: a luz entra (camadas + fótons descendo) —— */
.scene--enter .layer-line{ position:absolute; left:0; right:0; height:1px; background:rgba(127,217,196,0.18); }
.scene--enter .layer-line:nth-child(1){ top:30%; }
.scene--enter .layer-line:nth-child(2){ top:55%; }
.scene--enter .layer-line:nth-child(3){ top:80%; }
.scene--enter .tag{ position:absolute; right:8px; font-size:9px; letter-spacing:.08em; color:rgba(233,243,240,0.45); transform:translateY(-50%); }
.scene--enter .tag.t1{ top:30%; } .scene--enter .tag.t2{ top:55%; } .scene--enter .tag.t3{ top:82%; left:8px; right:auto; }
.photon{ position:absolute; top:-10px; width:5px; height:5px; border-radius:50%;
  background:#ffe6a8; box-shadow:0 0 10px 3px rgba(255,210,120,0.8);
  animation:photonFall 2.2s linear infinite; }
.photon:nth-child(4){ left:24%; animation-delay:0s; }
.photon:nth-child(5){ left:42%; animation-delay:.5s; }
.photon:nth-child(6){ left:58%; animation-delay:1s; }
.photon:nth-child(7){ left:74%; animation-delay:1.5s; }
@keyframes photonFall{ 0%{ top:-10px; opacity:0; } 12%{ opacity:1; } 88%{ opacity:1; } 100%{ top:118px; opacity:0; } }
.neuron-dot{ position:absolute; left:50%; bottom:-12px; width:34px; height:34px; margin-left:-17px;
  border-radius:50%; background:radial-gradient(circle at 35% 30%, #7fd9c4, #2aaf94 60%, #157a60);
  box-shadow:0 0 16px rgba(42,175,148,0.7); animation:neuronPulse 2.2s ease-in-out infinite; }
@keyframes neuronPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.12); } }

/* —— Cena 2: mitocôndria capta a luz (CCO brilha) —— */
.mito{ position:absolute; left:50%; top:50%; width:96px; height:54px; transform:translate(-50%,-50%);
  border-radius:50%/60%; background:linear-gradient(160deg, #16584d, #0d3a33);
  box-shadow:inset 0 0 0 2px rgba(127,217,196,0.4), 0 0 24px rgba(42,175,148,0.25); }
.mito::before{ content:""; position:absolute; inset:9px 12px; border-radius:50%/60%;
  border:1.5px dashed rgba(127,217,196,0.35); }
.cco{ position:absolute; left:50%; top:50%; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%;
  background:#ffd27a; box-shadow:0 0 0 0 rgba(255,210,122,0.7); animation:ccoGlow 2s ease-in-out infinite; }
@keyframes ccoGlow{ 0%,100%{ box-shadow:0 0 8px 2px rgba(255,210,122,0.5); transform:scale(1);} 50%{ box-shadow:0 0 18px 8px rgba(255,210,122,0.85); transform:scale(1.25);} }
.ray{ position:absolute; top:-6px; left:50%; width:2px; height:30px; background:linear-gradient(#ffe6a8, transparent);
  transform-origin:bottom center; opacity:.8; animation:rayIn 2s ease-in-out infinite; }
@keyframes rayIn{ 0%,100%{ transform:translateX(-50%) scaleY(.5); opacity:.3; } 50%{ transform:translateX(-50%) scaleY(1); opacity:.9; } }

/* —— Cena 3: solta o "freio" (NO se desprende) —— */
.brake-enzyme{ position:absolute; left:50%; bottom:14px; width:60px; height:30px; margin-left:-30px;
  border-radius:14px 14px 6px 6px; background:linear-gradient(160deg,#16584d,#0d3a33);
  box-shadow:inset 0 0 0 1.5px rgba(127,217,196,0.4); }
.no-mol{ position:absolute; left:50%; bottom:34px; display:flex; align-items:center; gap:2px;
  margin-left:-12px; animation:noRelease 2.6s ease-in infinite; }
.no-mol span{ width:11px; height:11px; border-radius:50%; font-size:7px; font-weight:700; color:#06231f;
  display:grid; place-items:center; }
.no-mol .n{ background:#9fb4ff; box-shadow:0 0 8px rgba(159,180,255,0.7); }
.no-mol .o{ background:#ff9f9f; box-shadow:0 0 8px rgba(255,159,159,0.7); }
@keyframes noRelease{ 0%{ transform:translate(0,0) scale(.9); opacity:0; } 20%{ opacity:1; } 100%{ transform:translate(26px,-40px) scale(1.05); opacity:0; } }
.spark{ position:absolute; left:50%; bottom:30px; width:4px; height:4px; margin-left:-2px; border-radius:50%;
  background:var(--emerald-soft); box-shadow:0 0 10px 3px rgba(127,217,196,0.8); animation:sparkPulse 2.6s ease-out infinite; }
@keyframes sparkPulse{ 0%,30%{ transform:scale(0); opacity:0; } 50%{ transform:scale(1.4); opacity:1; } 100%{ transform:scale(.6); opacity:0; } }

/* —— Cena 4: energia (ATP brota) —— */
.cell-floor{ position:absolute; left:0; right:0; bottom:0; height:34px; background:linear-gradient(0deg, rgba(42,175,148,0.18), transparent); }
.atp{ position:absolute; bottom:10px; display:flex; align-items:center; gap:3px;
  padding:4px 9px; border-radius:999px; background:linear-gradient(135deg,#7fd9c4,#2aaf94);
  color:#06231f; font-size:11px; font-weight:700; box-shadow:0 4px 14px -4px rgba(42,175,148,0.8);
  animation:atpRise 2.8s ease-in infinite; }
.atp:nth-child(1){ left:18%; animation-delay:0s; } .atp:nth-child(2){ left:46%; animation-delay:.9s; }
.atp:nth-child(3){ left:70%; animation-delay:1.8s; }
@keyframes atpRise{ 0%{ transform:translateY(20px) scale(.6); opacity:0; } 25%{ opacity:1; } 80%{ opacity:1; } 100%{ transform:translateY(-58px) scale(1); opacity:0; } }
.bolt{ position:absolute; top:14px; left:50%; margin-left:-13px; width:26px; height:26px;
  color:#ffe6a8; opacity:.9; animation:boltFlash 2.8s ease-in-out infinite; }
@keyframes boltFlash{ 0%,100%{ opacity:.3; transform:scale(.9);} 50%{ opacity:1; transform:scale(1.1);} }

/* conector entre passos */
.journey__flow{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
  margin-top:8px; font-size:14px; color:rgba(233,243,240,0.7); }
.journey__flow b{ color:var(--emerald-soft); font-weight:600; }
.journey__flow .arr{ color:var(--emerald); }

/* pausa as animações quando o usuário prefere menos movimento */
@media (prefers-reduced-motion:reduce){
  .photon,.neuron-dot,.cco,.ray,.no-mol,.spark,.atp,.bolt{ animation:none !important; }
  .photon{ opacity:.8; } .no-mol{ opacity:1; }
}

@media (max-width:860px){
  .journey__grid{ grid-template-columns:1fr 1fr; gap:14px; }
}
@media (max-width:520px){
  .journey__grid{ grid-template-columns:1fr; }
}

/* ============================================================
   EFEITOS · "O que a luz desperta no cérebro"
   cards com ícone, agrupados em aumenta (↑) / reduz (↓)
   ============================================================ */
.fx-band{ margin-top:clamp(40px,5vw,64px); }
.fx-group + .fx-group{ margin-top:clamp(28px,3.5vw,44px); }
.fx-group__head{ display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.fx-group__tag{ display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:9px 16px; border-radius:999px; }
.fx-group__tag .ar{ font-size:15px; }
.fx-group--up .fx-group__tag{ color:#06231f; background:linear-gradient(135deg,#7fd9c4,#2aaf94); }
.fx-group--down .fx-group__tag{ color:#cfeae2; background:rgba(127,217,196,0.1); border:1px solid rgba(127,217,196,0.3); }
.fx-group__line{ flex:1; height:1px; background:linear-gradient(90deg, rgba(127,217,196,0.35), transparent); }
.fx-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.fx{ position:relative; display:flex; gap:15px; align-items:flex-start;
  background:linear-gradient(180deg, rgba(127,217,196,0.06), rgba(127,217,196,0.02));
  border:1px solid rgba(127,217,196,0.18); border-radius:16px; padding:22px 22px;
  transition:transform .5s var(--ease), border-color .45s, background .45s; }
.fx:hover{ transform:translateY(-4px); border-color:rgba(127,217,196,0.5); background:linear-gradient(180deg, rgba(127,217,196,0.12), rgba(127,217,196,0.03)); }
.fx__ic{ flex:none; width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:rgba(127,217,196,0.1); box-shadow:inset 0 0 0 1px rgba(127,217,196,0.28);
  transition:background .45s, transform .45s var(--ease); }
.fx:hover .fx__ic{ background:rgba(127,217,196,0.2); transform:scale(1.06); }
.fx__ic svg{ width:23px; height:23px; stroke:var(--emerald-soft); fill:none; stroke-width:1.7; }
.fx--down .fx__ic svg{ stroke:#a9d8cb; }
.fx h4{ font-family:var(--font-body); font-weight:600; font-size:16px; color:#eef7f4; margin:2px 0 5px; line-height:1.15; }
.fx p{ font-size:13.5px; font-weight:300; line-height:1.5; color:rgba(233,243,240,0.66); margin:0; }
/* leve entrada escalonada de cada card (transform apenas — opacity fica na faixa) */
.fx-band.in .fx{ animation:fxRise .6s var(--ease) both; }
.fx-grid .fx:nth-child(1){ animation-delay:.04s; } .fx-grid .fx:nth-child(2){ animation-delay:.12s; }
.fx-grid .fx:nth-child(3){ animation-delay:.20s; } .fx-grid .fx:nth-child(4){ animation-delay:.28s; }
.fx-grid .fx:nth-child(5){ animation-delay:.36s; } .fx-grid .fx:nth-child(6){ animation-delay:.44s; }
.fx-grid .fx:nth-child(7){ animation-delay:.52s; } .fx-grid .fx:nth-child(8){ animation-delay:.60s; }
.fx-grid .fx:nth-child(9){ animation-delay:.68s; }
@keyframes fxRise{ from{ transform:translateY(20px); } to{ transform:none; } }
@media (max-width:860px){ .fx-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .fx-grid{ grid-template-columns:1fr; } .fx-group__tag{ font-size:12px; } }