/* Cartão de vidro "o destino" e o ciclo guiado pela luz.
   data-stage no .hero = quantos degraus a luz já acendeu (0–4). <2: encaminhado. >=2: atendido pelo professor.
   Sem script ou com movimento reduzido o hero fica em data-stage="4" (estado final). */

.card--feedback.glass{overflow:hidden;border-radius:calc(14 * var(--u));border:1px solid rgba(255,255,255,.78);
  /* Fosco pré-calculado da própria cena (assets/textures/glass-frost.webp): o mesmo visual de um backdrop-filter, sem refazer o blur a cada quadro do vídeo */
  background:linear-gradient(140deg,rgba(255,255,255,.8) 0%,rgba(255,255,255,.66) 55%,rgba(250,245,232,.66) 100%),url("assets/textures/glass-frost.webp") center/100% 100% no-repeat;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.3),0 calc(20 * var(--u)) calc(40 * var(--u)) calc(-18 * var(--u)) rgba(13,38,66,.42);
  transition:box-shadow .9s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);will-change:transform}
.glass__sheen{position:absolute;inset:-40% -60%;z-index:0;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,rgba(255,255,255,0) 40%,rgba(255,252,240,.85) 50%,rgba(255,255,255,0) 60%);transform:translateX(-60%)}
.card--feedback.glass > :not(.glass__sheen){position:relative;z-index:1}
.chip--glass{background:linear-gradient(140deg,#FBEBC8,#EBC985);color:#7A561B;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.chip__check{stroke-dasharray:12;stroke-dashoffset:0;transition:stroke-dashoffset .6s cubic-bezier(.16,1,.3,1) .25s}
.card__titles{display:block;min-width:0}
.glass .card__title,.glass .card__status{display:grid}
.glass .card__title > span,.glass .card__status > span{grid-area:1/1;transition:opacity .45s ease,transform .45s cubic-bezier(.16,1,.3,1)}
.glass .card__status{margin-top:calc(4 * var(--u));font:600 max(11px,calc(11 * var(--u)))/1.1 var(--sans)}
.glass .card__status::before{display:none}
.glass .card__status .held{color:#5E4210}
.glass .card__status .released{display:flex;align-items:center;gap:calc(6 * var(--u));color:#1C5B39}
.glass .card__status .released::before{content:"";flex-shrink:0;width:calc(7 * var(--u));height:calc(7 * var(--u));border-radius:50%;background:#3BA36A}
.glass .card__rows{border-color:rgba(255,255,255,.8);background:rgba(255,255,255,.62)}
.glass .card__rows li + li{border-top-color:rgba(255,255,255,.75)}
.glass .card__rows li{transition:filter .5s ease,opacity .5s ease,transform .5s cubic-bezier(.16,1,.3,1)}
.glass .card__rows li:nth-child(2){transition-delay:.12s}
.glass .card__rows li{position:relative;white-space:nowrap}
.glass .row__text{display:grid}
.glass .row__text > span{grid-area:1/1;transition:opacity .45s ease,transform .45s cubic-bezier(.16,1,.3,1)}
.glass .card__demo{color:#3D4A60}

/* Liberado (padrão) */
.hero .held{opacity:0;transform:translateY(-4px)}
.hero .released{opacity:1;transform:none}
/* Encaminhado */
.hero:is([data-stage="0"],[data-stage="1"]) .held{opacity:1;transform:none}
.hero:is([data-stage="0"],[data-stage="1"]) .released{opacity:0;transform:translateY(4px)}
.hero:is([data-stage="0"],[data-stage="1"]) .chip__check{stroke-dashoffset:12;transition-delay:0s}

/* O momento do atendimento: o reflexo atravessa o vidro, a borda acende em dourado, o ponto verde pulsa uma vez */
.hero.is-releasing .glass__sheen{animation:sheen 1.1s cubic-bezier(.3,.1,.2,1) both}
.hero.is-releasing .card--feedback.glass{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 0 0 1px rgba(233,199,127,.85),0 0 calc(28 * var(--u)) rgba(233,199,127,.45),0 calc(20 * var(--u)) calc(40 * var(--u)) calc(-18 * var(--u)) rgba(13,38,66,.42)}
.hero.is-releasing .glass .card__status .released::before{animation:ping 1.2s ease-out .35s both}
@keyframes sheen{0%{opacity:0;transform:translateX(-60%)}15%{opacity:1}100%{opacity:0;transform:translateX(60%)}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(59,163,106,.55)}100%{box-shadow:0 0 0 calc(9 * var(--u)) rgba(59,163,106,0)}}

/* Degraus: os ainda não alcançados pela luz ficam mais discretos; o aceso ganha halo quente */
.step__n{transition:opacity .6s ease,text-shadow .6s ease}
.motion .hero .step:not(.is-lit) .step__n{opacity:.5}
.motion .hero .step.is-lit .step__n{text-shadow:0 1px 0 rgba(255,255,255,.7),0 0 .22em rgba(246,196,104,.7),0 0 .55em rgba(240,186,90,.3)}



@media (prefers-reduced-motion:reduce){
  .glass__sheen{animation:none!important}
  .glass .card__title > span,.glass .card__status > span,.glass .row__text > span,.chip__check{transition:none}
}