/* ==========================================================================
   LEQUE — painéis verticais que expandem
   Prefixo: fan-
   Tokens usados: --accent --dark --dark-rgb --display --radius-media --ease

   O painel vive sobre foto escura, então o texto de dentro é sempre claro,
   independente do escopo de tom da seção. Por isso usa --light (branco puro) e não
   --fg: o leque é uma ilha escura dentro de uma seção que pode ser clara.
   ========================================================================== */

.fan{
  display:flex;gap:8px;
  height:min(62vh,520px);
  margin-top:clamp(38px,6vh,60px);
}

.fan-panel{
  position:relative;flex:1;min-width:0;
  border-radius:var(--radius-media);
  overflow:hidden;cursor:pointer;
  /* 1.1s é o que faz a expansão ler como "leque" e não como "clique".
     Abaixo de 0.8s vira estalo; acima de 1.4s parece travado. */
  transition:flex 1.1s cubic-bezier(.19,.85,.24,1);
}
.fan-panel.is-open{flex:3.4}
.fan-panel:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}

.fan-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) brightness(.45);
  transition:filter 1.1s;
}
.fan-panel.is-open .fan-img{filter:grayscale(.12) brightness(.6)}

/* Véu de vidro só no painel aberto, para o texto longo ter contraste.
   A máscara em gradiente é obrigatória: sem ela o backdrop-filter corta
   reto no meio da foto e lê "chapado". */
.fan-veil{
  position:absolute;left:0;right:0;bottom:0;height:56%;z-index:1;pointer-events:none;
  backdrop-filter:blur(8px) saturate(1.15);
  -webkit-backdrop-filter:blur(8px) saturate(1.15);
  -webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.9) 44%,transparent 100%);
  mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.9) 44%,transparent 100%);
  opacity:0;transition:opacity .5s;
}
.fan-panel.is-open .fan-veil{opacity:1}

/* Escurecimento permanente da base — vale para painel aberto e fechado. */
.fan-panel::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,
    rgba(var(--dark-rgb),.94) 0%,
    rgba(var(--dark-rgb),.78) 22%,
    rgba(var(--dark-rgb),.3) 52%,
    transparent 74%);
}

.fan-num{
  position:absolute;top:20px;left:22px;z-index:2;
  font-size:11px;letter-spacing:.18em;color:var(--accent);
}

/* Título vertical do painel fechado. */
.fan-vert{
  position:absolute;left:0;bottom:0;z-index:2;padding:22px;
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--display);font-weight:700;
  font-size:14px;line-height:1.35;letter-spacing:-.01em;
  color:var(--light);transition:opacity .4s;
}
.fan-panel.is-open .fan-vert{opacity:0}

/* Conteúdo do painel aberto.
   Largura FIXA, não porcentagem: sem isso o texto reflui enquanto o painel
   encolhe e a saída fica sanfonada. */
.fan-full{
  position:absolute;left:0;bottom:0;z-index:2;
  padding:clamp(22px,2.6vw,34px);
  width:min(440px,84vw);
  opacity:0;pointer-events:none;
  transition:opacity .18s ease;                 /* some rápido */
}
.fan-panel.is-open .fan-full{
  opacity:1;
  transition:opacity .5s .22s;                  /* entra devagar e atrasado */
}
.fan-title{
  font-family:var(--display);font-weight:700;
  font-size:clamp(20px,2.4vw,27px);line-height:1.2;letter-spacing:-.025em;
  color:var(--light);margin:0 0 12px;
}
.fan-text{font-size:15px;line-height:1.7;
  color:color-mix(in srgb,var(--light) 86%,transparent);max-width:40ch}

/* ---- mobile ----
   Vira acordeão horizontal: a barra de 96px abre para 290px. O título
   deixa de ser vertical porque em 96px de altura não há eixo para girar. */
@media(max-width:900px){
  .fan{flex-direction:column;height:auto}
  .fan-panel{flex:0 0 96px;height:96px}
  .fan-panel.is-open{flex:0 0 290px;height:290px}
  .fan-vert{writing-mode:horizontal-tb;transform:none}
  .fan-full{width:100%}
}