/* =====================================================================
   O STUDIO · Dom Calais
   O cenário da Mentoria (o mesmo arquivo, espelhado e com luz de fim de tarde: outro canto da
   mesma ilha), o vídeo do estúdio em cima, dentro da moldura dourada, e embaixo a caixa de
   diálogo no desenho da Mentoria, com o texto inteiro (como o produto da Mentoria). Classes
   .st-*; o vídeo usa css/video-youtube.css. Com o texto inteiro embaixo de um vídeo grande, a
   seção passa um pouco de uma tela no notebook (~1000px em 1440×810): escolha do cliente.
   ===================================================================== */
@font-face{ font-family:'Bangers'; src:url("../assets/fonts/bangers-latin-400-normal.woff2?v=2bc90bd8") format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Nunito'; src:url("../assets/fonts/nunito-latin-700-normal.woff2?v=fd0ec8a3") format('woff2'); font-weight:600 700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Nunito'; src:url("../assets/fonts/nunito-latin-800-normal.woff2?v=bce64e85") format('woff2'); font-weight:800; font-style:normal; font-display:swap; }

.st{
  --tinta:#0c0a12;
  --papel-tinta:#2b1a08;
  /* "px de design" da caixa de diálogo, como o --p da Mentoria (lá 0,75px numa tela de 1440) */
  --p:clamp(.42px, .052vw, 1px);

  position:relative; isolation:isolate; overflow:hidden;
  min-height:100vh; min-height:100svh;
  display:grid; place-items:center;
  padding:clamp(96px, 16vh, 170px) clamp(16px, 2.6vw, 56px) clamp(28px, 5vh, 56px);
  background:#0d4fb0; color:#fff;
  font-family:'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-tap-highlight-color:transparent;
}
.st *, .st *::before, .st *::after{ box-sizing:border-box }

/* ---------- cenário ---------- */
.st-bg{ position:absolute; inset:0; z-index:-1; overflow:hidden }
.st-bg picture{ display:contents }   /* no celular em pé, o recorte bg-ilhas-retrato (index.html) */
.st-bg img{
  position:absolute; inset:-3%; width:106%; height:106%; max-width:none;
  object-fit:cover; object-position:60% 45%;
  transform:scaleX(-1); animation:stDeriva 46s ease-in-out infinite alternate;
}
@keyframes stDeriva{ from{ transform:scaleX(-1) scale(1) } to{ transform:scaleX(-1) scale(1.05) translate(1.2%, -1%) } }
.st-bg::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(85% 65% at 28% 100%, rgba(255,150,40,.34), transparent 62%),
    radial-gradient(120% 95% at 50% 45%, transparent 55%, rgba(3,14,44,.5) 100%),
    linear-gradient(180deg, rgba(3,18,58,.25), transparent 25%, transparent 70%, rgba(40,14,4,.35));
}
.st-faiscas{ position:absolute; inset:0 }
.st-faisca{
  position:absolute; bottom:-4%; left:var(--x); width:var(--s); height:var(--s); border-radius:50%;
  background:radial-gradient(circle, #fff8c8 0%, #ffc94a 45%, rgba(255,150,0,0) 72%);
  opacity:0; animation:stSubir var(--d) linear var(--dl) infinite;
}
@keyframes stSubir{
  0%{ transform:translateY(0) scale(.6); opacity:0 } 12%{ opacity:.9 } 80%{ opacity:.55 }
  100%{ transform:translateY(-105vh) scale(1.1); opacity:0 }
}

/* ---------- título (canto de cima, como no Portfólio e na Parcerias) ---------- */
.st-titulo{
  position:absolute; z-index:6; margin:0; line-height:0;
  top:clamp(8px, 2vh, 28px); left:clamp(8px, 1.6vw, 36px); width:min(32vw, 58vh);
  filter:drop-shadow(0 8px 14px rgba(0,10,40,.4));
  animation:stFlutua 4.6s ease-in-out infinite;
}
.st-titulo img{ display:block; width:100%; height:auto }
.st-titulo:focus{ outline:none }
@keyframes stFlutua{ 50%{ transform:translateY(-6px) rotate(-.4deg) } }

/* ---------- palco: o vídeo em cima, a caixa de diálogo embaixo (como a Mentoria) ---------- */
.st-palco{
  position:relative; z-index:2; width:100%;
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(22px, 3.2vh, 40px);
}

.st-tela{ position:relative; width:min(100%, 58vw, 1000px); aspect-ratio:1672 / 941 }
/* aura de ki atrás da moldura */
.st-aura{
  position:absolute; inset:10% 6%; z-index:-1; border-radius:40%;
  background:radial-gradient(closest-side, rgba(255,214,80,.5), rgba(255,160,20,.16) 60%, transparent);
  filter:blur(18px); animation:stAura 3.6s ease-in-out infinite;
}
@keyframes stAura{ 50%{ opacity:.6; transform:scale(1.04) } }

/* O vídeo ocupa o vão da moldura. Medido na arte (1672×941): o vão transparente vai de x 94 a
   1581 e de y 141 a 850 (é mais largo que 16:9 por causa dos enfeites). A caixa do vídeo passa
   4px de cada lado e a moldura, por cima, esconde as bordas dela. Tocando, o YouTube completa
   as laterais com faixa escura, como uma TV dentro da moldura; a arte não é esticada */
.st-tela .video-yt{ position:absolute; left:5.38%; top:14.56%; width:89.41%; height:76.2%; aspect-ratio:auto; border-radius:0 }
/* tocando: o player sobe para a frente da moldura, no vão exato (sem os 4px de sobra). Atrás
   dela, a esfera de cima e as nuvens de baixo cobriam o título e os controles do YouTube
   (visto no iPhone, 12/10). Os enfeites que entram no vão ficam atrás do vídeo enquanto toca */
.st-tela .video-yt.tocando{ z-index:3; left:5.62%; top:14.98%; width:88.94%; height:75.35% }
/* título do vídeo no centro, acima da linha de baixo e entre as nuvens dos cantos */
.st-tela .video-yt__titulo{ text-align:center; padding-bottom:6% }
.st-moldura{
  position:absolute; inset:0; z-index:2; width:100%; height:100%;
  pointer-events:none; user-select:none;
  filter:drop-shadow(0 10px 16px rgba(0,12,45,.45));
}

/* ---------- caixa de diálogo ----------
   O mesmo desenho da Mentoria: contorno preto, faixa dourada, filete preto, pergaminho, cantos
   cortados e o degrau no topo direito. Variáveis em "px de design" (--p):
   --C chanfro · --SX início do degrau (da direita) · --SD altura do degrau
   --b0 contorno · --b1 dourado · --b2 filete */
.st-dialogo{
  position:relative; z-index:3; width:min(100%, 1240px);
  --C:22; --SX:260; --SD:16; --b0:3.5; --b1:11; --b2:4;
  padding:calc(62*var(--p) + 6px) calc(56*var(--p)) calc(34*var(--p));
}
.st-dialogo__moldura, .st-dialogo__camada{
  --c:calc((var(--C) - .828 * var(--t)) * var(--p));
  --sx:calc((var(--SX) - .586 * var(--t)) * var(--p));
  --sd:calc(var(--SD) * var(--p));
  position:absolute; display:block;
  clip-path:polygon(
    var(--c) 0, calc(100% - var(--sx)) 0, calc(100% - var(--sx) + var(--sd)) var(--sd),
    calc(100% - var(--c)) var(--sd), 100% calc(var(--sd) + var(--c)),
    100% calc(100% - var(--c)), calc(100% - var(--c)) 100%,
    var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}
.st-dialogo__moldura{
  --t:0; inset:0; background:var(--tinta);
  filter:drop-shadow(0 calc(8*var(--p)) calc(12*var(--p)) rgba(0,12,45,.35));
}
.st-dialogo__camada{ inset:calc(var(--t) * var(--p)) }
.st-dialogo__ouro{
  --t:var(--b0);
  background:
    linear-gradient(100deg, transparent 35%, rgba(255,255,255,.55) 47%, transparent 59%) -60% 0 / 60% 100% no-repeat,
    linear-gradient(180deg, #fff2a8 0%, #ffd23a 22%, #ffb000 55%, #f08a00 82%, #c96400 100%);
  animation:stOuroBrilho 6s ease-in-out infinite;
}
@keyframes stOuroBrilho{ 0%,62%{ background-position:-60% 0, 0 0 } 100%{ background-position:160% 0, 0 0 } }
.st-dialogo__filete{ --t:calc(var(--b0) + var(--b1)); background:var(--tinta) }
.st-dialogo__papel{
  --t:calc(var(--b0) + var(--b1) + var(--b2));
  background:
    linear-gradient(180deg, rgba(255,250,225,.9) 0, rgba(255,250,225,0) calc(3*var(--p))),
    linear-gradient(180deg, rgba(120,80,20,.10), transparent 18%, transparent 82%, rgba(120,80,20,.16)),
    radial-gradient(120% 160% at 50% 40%, rgba(255,255,255,.18), transparent 60%),
    url("../assets/img/mentoria/dialog-paper.webp?v=85a1555f") 50% 50% / cover no-repeat,
    #efdfba;
}

/* placa com o nome de quem fala, por cima da borda, com a esfera de quatro estrelas da
   moldura do vídeo */
.st-dialogo__nome{
  position:absolute; z-index:3; left:calc(40*var(--p)); top:0; translate:0 -56%; margin:0;
  display:flex; align-items:center; gap:.45em;
  padding:.3em 1em .24em .35em;
  font:400 clamp(16px, calc(30*var(--p) + .3vw), 26px)/1 'Bangers', Impact, sans-serif;
  letter-spacing:.08em; color:#ffe45c; text-shadow:0 2px 0 var(--tinta);
  background:linear-gradient(180deg, #164aa3, #0b2a63);
  border:2px solid #e2b84f; border-radius:999px;
  box-shadow:0 0 0 2px var(--tinta), 0 6px 14px rgba(0,10,40,.4);
}
.st-dialogo__nome::before{
  content:""; flex:none; width:1.3em; aspect-ratio:1; border-radius:50%;
  border:1.5px solid #4a2205;
  background:
    radial-gradient(circle at 34% 30%, #fff8d6 0 9%, transparent 10%),
    radial-gradient(circle at 50% 50%, #ffbf45 0, #f37e12 62%, #b44706 100%);
}

/* o texto inteiro, como o produto da Mentoria: a primeira frase em destaque, e a última, que
   fecha o convite */
.st-texto{
  position:relative; z-index:2;
  font-weight:700; font-size:clamp(15px, .9vw + .35vh, 20px); line-height:1.5; letter-spacing:.005em;
  color:var(--papel-tinta); text-wrap:pretty;
}
.st-texto p{ margin:0 }
.st-texto p + p{ margin-top:.5em }
.st-texto p:first-child, .st-texto p:last-child{ font-weight:800; color:#1e1104 }

/* ---------- entrada (só com JS: sem ele, tudo já aparece) ---------- */
.st--js:not(.st--dentro) .st-tela{ opacity:0; transform:scale(.88) rotate(-1.5deg) }
.st--js:not(.st--dentro) .st-dialogo{ opacity:0; transform:translateY(40px) }
.st--js:not(.st--dentro) .st-titulo{ opacity:0 }
.st--dentro .st-tela{ animation:stZoom .75s .1s cubic-bezier(.2,1.3,.4,1) both }
.st--dentro .st-dialogo{ animation:stSobe .7s .35s cubic-bezier(.2,1.2,.4,1) both }
.st--dentro .st-titulo{ animation:stEntraEsq .7s cubic-bezier(.2,1.3,.4,1) both, stFlutua 4.6s .7s ease-in-out infinite }
@keyframes stZoom{ from{ opacity:0; transform:scale(.88) rotate(-1.5deg) } to{ opacity:1; transform:none } }
@keyframes stSobe{ from{ opacity:0; transform:translateY(40px) } to{ opacity:1; transform:none } }
@keyframes stEntraEsq{ from{ opacity:0; transform:translateX(-60px) scale(.96) } to{ opacity:1; transform:none } }

/* =====================================================================
   CELULAR E RETRATO: título em cima, vídeo e caixa de diálogo na largura da tela
   ===================================================================== */
@media (max-width:767px), (max-aspect-ratio:1/1){
  .st{ display:block; padding:calc(64vw * .27 + 34px) 4vw 32px }
  .st-titulo{ width:64vw; top:10px; left:8px }
  .st-palco{ gap:30px; max-width:640px; margin:0 auto }
  /* a moldura na largura inteira da tela (passa o recuo de 4vw da seção dos dois lados): o
     vão do vídeo fica ~8% maior; a borda transparente da arte segura a margem */
  .st-tela{ width:calc(100% + 8vw); margin-inline:-4vw }
  /* vídeo com ~200px de altura: botão e título menores, para não encostarem */
  .st-tela .video-yt__play{ width:clamp(46px, 13%, 116px) }
  .st-tela .video-yt__titulo{ padding-bottom:4%; font-size:13px }
  .st-dialogo{ --SX:150; padding:calc(64*var(--p) + 16px) 18px 20px }
  .st-texto{ font-size:clamp(15px, 3.9vw, 18px) }
}

@media (prefers-reduced-motion: reduce){
  .st-bg img, .st-titulo, .st-aura, .st-dialogo__ouro{ animation:none !important }
  .st-faiscas{ display:none }
  .st--js .st-tela, .st--js .st-dialogo, .st--js .st-titulo{ opacity:1 !important; transform:none !important; animation:none !important }
}