/* 08-instrutor · moldura em arco com duas camadas (fundo com paralaxe + André recortado parado na frente) */
.instructor{display:grid;grid-template-columns:.75fr 1fr;gap:100px;align-items:center;max-width:990px;padding:110px 0}
.instructor h2{font-size:45px;margin-bottom:10px}
.instructor .role{color:var(--v1);font-weight:600;font-size:14px;margin-top:-4px;margin-bottom:22px}
.instructor p{color:var(--mut);font-size:14px;line-height:1.8;margin-bottom:14px;max-width:520px}
.instructor .role,.instructor .eyebrow{color:var(--v1)}

/* moldura: altura fixa, arco de 120 no topo, rotate(-3deg), segunda folha fina atrás (duas sombras sem blur) */
.ins-photo{position:relative;height:390px;overflow:hidden;border-radius:120px 120px 25px 25px;border:1px solid rgba(255,176,136,.28);background:#1a0e0b;
  transform:rotate(-3deg);
  box-shadow:12px 12px 0 -2px var(--bg),12px 12px 0 -1px rgba(255,106,43,.3)}
.ins-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 12%}
/* camada de trás = a foto inteira (o core.js injeta o <img> do config como primeiro filho), ampliada pra poder andar 6px
   e desfocada de forma estática (filter fixo, rasterizado uma vez): vira profundidade de campo e a silhueta duplicada some num halo macio */
.ins-photo>img:not(.ins-cut){transform:scale(1.12);filter:blur(7px) brightness(.85);transform-origin:50% 50%}
/* camada composta só enquanto a moldura está na tela (o JS liga .is-live) */
.ins-photo.is-live>img:not(.ins-cut){will-change:transform}
/* camada da frente = o mesmo enquadramento recortado, parado */
.ins-photo .ins-cut{z-index:2}
.ins-photo.empty .ins-cut,.ins-photo.empty .ins-glow{display:none}
/* véu laranja atrás do recorte, dá profundidade entre as camadas */
.ins-glow{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(60% 45% at 50% 62%,rgba(255,106,43,.18),transparent 70%)}
.ins-ph{display:none}
.ins-photo.empty .ins-ph{display:grid;place-items:center;position:absolute;inset:0;font-size:13px;color:var(--mut);letter-spacing:.1em;text-transform:uppercase}

/* entrada (além da referência): a moldura chega de -6deg e 96 %, sem blur */
.js .ins-photo.ins-wait{opacity:0;transform:rotate(-6deg) scale(.96)}
.js .ins-photo.ins-in{opacity:1;transform:rotate(-3deg) scale(1);transition:opacity .7s var(--e-reveal),transform .9s var(--e-reveal)}
/* depois da entrada (transitionend) a transição vira a do hover da spec: .6s --e-out */
.js .ins-photo.ins-in.ins-set{transition:transform .6s var(--e-out)}
@media (hover:hover) and (pointer:fine){
  .js .ins-photo.ins-in:hover{transform:rotate(-1.5deg) scale(1)}
}

/* ---------- responsivo ---------- */
@media (max-width:1050px){
  .instructor{gap:65px}
}
@media (max-width:760px){
  .instructor{grid-template-columns:1fr;gap:48px;padding:64px 0}
  .instructor h2{font-size:40px}
  .ins-photo{width:90%;max-width:320px;height:365px;margin:auto;border-radius:110px 110px 24px 24px}
}
@media (prefers-reduced-motion:reduce){
  .ins-photo,.js .ins-photo.ins-wait,.js .ins-photo.ins-in,.js .ins-photo.ins-in:hover{opacity:1;transform:none;transition:none}
  .ins-photo>img:not(.ins-cut),.ins-photo.is-live>img:not(.ins-cut){transform:scale(1.12);will-change:auto}
}