@property --es-cor {
  syntax: '<color>';
  inherits: true;
  initial-value: #e6e3ea;
}

/* es · #estacoes — "Suas estações" (noite): o anel inteiro preso na tela, girando com a rolagem;
   cada trecho da fala dela leva a sua estação até o alto do anel, onde ela acende */

.es-cabeca { position: relative; z-index: 3; max-width: 46%; }
.es-cabeca .wf-titulo { font-size: clamp(2.5rem, 1.2rem + 3.6vw, 4.8rem); }

.es-corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  column-gap: clamp(2rem, 5vw, 5rem);
  margin-top: -11rem;   /* o anel sobe para o lado do título */
}
.es-lado { grid-column: 2; grid-row: 1; }
.es-passos { grid-column: 1; grid-row: 1; padding: 11rem 0 12svh; }

/* ---------- o anel preso na tela ---------- */
.es-palco {
  position: sticky; top: 0;
  height: 100svh;
  display: grid; place-items: center;
}
.es-roda {
  --D: min(40rem, 82svh, 46vw);
  transition: --es-cor 2.4s var(--ease);
  position: relative; width: var(--D); height: var(--D);
}
.es-faixa, .es-luz, .es-halo { position: absolute; inset: 0; border-radius: 50%; }
/* clarão da estação acesa, atrás do retrato */
.es-roda::before {
  content: ''; position: absolute; inset: -18%; border-radius: 50%;
  background: radial-gradient(closest-side in oklab, color-mix(in oklab, var(--es-cor) 60%, transparent), color-mix(in oklab, var(--es-cor) 20%, transparent) 55%, transparent);
}
.es-cores {
  position: absolute; inset: 0; border-radius: 50%;
  /* inverno no alto; a rolagem gira no sentido horário e traz primavera, verão e outono */
  background: conic-gradient(from 0deg in oklab,
    var(--inverno) 0deg,
    color-mix(in oklab, var(--outono) 62%, var(--verao)) 90deg,
    var(--verao) 180deg,
    var(--primavera) 270deg,
    var(--inverno) 360deg);
  transform: rotate(var(--es-r, 0deg));
  will-change: transform;
}
.es-faixa {
  -webkit-mask: radial-gradient(closest-side, transparent 88.6%, #000 90.6%, #000 93.4%, transparent 95.4%);
          mask: radial-gradient(closest-side, transparent 88.6%, #000 90.6%, #000 93.4%, transparent 95.4%);
  opacity: .8;
}
.es-halo { filter: blur(22px); opacity: .55; }
.es-halo .es-faixa { opacity: 1; }
/* a janela acesa, fixa no alto do anel */
.es-luz {
  filter: brightness(1.12) saturate(1.25);
  -webkit-mask:
    radial-gradient(closest-side, transparent 86.5%, #000 89%, #000 95%, transparent 97.5%),
    conic-gradient(from -26deg, transparent, #000 12deg, #000 40deg, transparent 52deg, transparent);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(closest-side, transparent 86.5%, #000 89%, #000 95%, transparent 97.5%),
    conic-gradient(from -26deg, transparent, #000 12deg, #000 40deg, transparent 52deg, transparent);
  mask-composite: intersect;
}

/* o retrato dentro do anel */
.es-foto {
  position: absolute; left: 15%; top: 15%; width: 70%; height: 70%;
  border-radius: 50%; object-fit: cover; object-position: 50% 22%;
  box-shadow: 0 0 0 1px color-mix(in oklab, white 10%, transparent), 0 0 0 5px color-mix(in oklab, var(--es-cor) 32%, transparent), 0 40px 90px -30px #12060c;
}

/* as quatro estações em pílulas de vidro, sobre o anel (posição pelo JS) */
.es-pilula {
  position: absolute; left: 0; top: 0;
  display: inline-flex; align-items: center; gap: .5em;
  padding: .42em .95em .46em .75em;
  font-size: .75rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
  color: var(--apoio-noite);
  border-radius: 99px;
  background: color-mix(in oklab, var(--noite-2) 72%, transparent);
  border: 1px solid color-mix(in oklab, white 14%, transparent);
  backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2);
  transition: color .6s var(--ease), background-color .6s var(--ease), border-color .6s var(--ease);
  will-change: transform;
}
.es-pilula b { font-weight: 500; display: inline-block; overflow: hidden; max-width: 0; opacity: 0; margin-left: -.5em; transition: max-width .8s var(--ease), opacity .6s var(--ease), margin .8s var(--ease); }
.es-pilula.on b { max-width: 9em; opacity: 1; margin-left: 0; }
.es-pilula:not(.on) { width: 1.9em; height: 1.9em; padding: 0; justify-content: center; gap: 0; }
.es-pilula:not(.on) b { position: absolute; }
.es-pilula i { width: .55em; height: .55em; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in oklab, var(--c) 30%, transparent); }
.es-pilula.on { color: var(--noite); background: color-mix(in oklab, var(--c) 88%, white); border-color: color-mix(in oklab, white 50%, transparent); }
.es-pilula[data-k="3"].on { color: var(--papel-noite); }
/* sem JS: as pílulas nos quatro pontos cardeais, todas com nome */
.es-pilula { transform: translate(-50%, -50%); }
html:not(.js) .es-pilula b { max-width: 9em; opacity: 1; margin-left: 0; }
.es-pilula[data-k="0"] { left: 50%; top: 4%; }
.es-pilula[data-k="1"] { left: 4%; top: 50%; }
.es-pilula[data-k="2"] { left: 50%; top: 96%; }
.es-pilula[data-k="3"] { left: 96%; top: 50%; }
.es-roda.pronta .es-pilula { left: 0; top: 0; }

/* ---------- os trechos ---------- */
.es-lista { list-style: none; margin: 0; padding: 0; }
.es-passo {
  min-height: 66svh;
  display: flex; flex-direction: column; justify-content: center;
  transition: opacity .9s var(--ease);
}
.js .es-passo { opacity: .3; }
.js .es-passo.on { opacity: 1; }
.es-estacao {
  display: inline-flex; align-items: center; gap: .6em; margin: 0 0 1.4rem;
  font-size: .78rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--apoio-noite);
}
.es-estacao i { width: .6em; height: .6em; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in oklab, var(--c) 30%, transparent); transition: box-shadow .8s var(--ease); }
.es-passo.on .es-estacao i { box-shadow: 0 0 0 3px var(--noite), 0 0 0 4.5px var(--c), 0 0 14px 4px color-mix(in oklab, var(--c) 45%, transparent); }
.es-estacao small { font-size: inherit; letter-spacing: .12em; opacity: .6; margin-left: .4em; }
.es-fala { margin: 0; font-style: normal; font-size: clamp(1.6rem, 1.05rem + 1.35vw, 2.45rem); line-height: 1.18; letter-spacing: -.005em; color: var(--papel-noite); max-width: 34rem; }
.es-fala p { margin: 0; text-wrap: pretty; }
.es-fala em { font-style: italic; color: var(--primavera); }

.es-fim { margin-top: 2.6rem; }
.es-pergunta { margin: 0 0 1.4rem; font-family: var(--f-titulo); font-style: italic; font-size: clamp(1.6rem, 1.2rem + .8vw, 2rem); color: var(--primavera); }
.es-cta {
  display: inline-flex; align-items: center; gap: 1rem; min-height: 52px;
  padding: .35rem .4rem .35rem 1.4rem; border-radius: 99px;
  font-size: 1rem; color: var(--papel-noite); text-decoration: none;
  border: 1px solid color-mix(in oklab, var(--papel-noite) 32%, transparent);
  background: color-mix(in oklab, var(--noite-2) 60%, transparent);
  transition: border-color .45s var(--ease), background-color .45s var(--ease);
}
.es-cta svg { width: 2.5rem; height: 2.5rem; padding: .6rem; border-radius: 50%; background: var(--magenta); fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--ease); }
.es-cta:hover { border-color: var(--papel-noite); }
.es-cta:hover svg { transform: translateX(3px); }
.es .wf-fonte { color: var(--apoio-noite); margin-top: 1.2rem; }

/* ---------- celular: o anel preso numa faixa no alto, os trechos passam por baixo ---------- */
@media (max-width: 899px) {
  .es-cabeca { max-width: none; }
  .es-corpo { display: block; margin-top: 0; }
  .es-lado { display: contents; }
  .es-palco {
    position: sticky; top: 0; z-index: 2; height: auto;
    margin-inline: calc(var(--margem) * -1);
    padding: 1.2rem 0 4rem;
    background: linear-gradient(var(--noite) 80%, color-mix(in oklab, var(--noite) 75%, transparent) 90%, color-mix(in oklab, var(--noite) 0%, transparent));
  }
  .es-roda { --D: min(76vw, 40svh); }
  .es-roda::before { inset: -8%; }
  .es-pilula { font-size: .875rem; letter-spacing: .12em; padding: .36em .8em .4em .62em; }
  .es-passos { position: relative; z-index: 1; padding: 0 0 6svh; }
  .es-passo { min-height: 48svh; }
  .es-estacao { font-size: .875rem; letter-spacing: .16em; }
}

@media (prefers-reduced-motion: reduce) {
  .js .es-passo { opacity: 1; }
}