/* ============================================================
   Cesar Galones — animação de abertura

   Três elementos em dourado, uma cor só em três tons, desfilam no centro,
   cada um com um gesto: o VIOLÃO vibra (o cantor), o MICROFONE solta ondas
   de som (o locutor de rádio), a CÂMERA DE TV gira no tripé e a lente
   brilha (o apresentador da TV). Sem tom marrom: detalhes são vazados.
   Sem legenda nos ícones (pedido do Rodrigo). Depois, clarão e a marca.

   Os elementos são SVG leves (img/intro/*.svg, ~92 KB no total), vetorizados
   a partir de fotos reais (proporções de verdade, sem cara de desenho).
   Fotos-base: Unsplash (licença livre); fundo removido e vetorizado aqui.

   Roda 1x por sessão, só com JS, e nunca em prefers-reduced-motion.
   O HTML liga a classe .intro no <html> ANTES do primeiro paint; o roteiro
   só começa com os SVG prontos (classe .play). Os tempos vivem aqui.
   ============================================================ */

#intro { display: none; }

html.intro #intro, #intro.shown {
  display: block;
  position: fixed; inset: 0; z-index: 2147483000;
  background: radial-gradient(120% 90% at 50% 46%, #1b120b 0%, #0c0907 58%, #060403 100%);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
html.intro, html.intro body { overflow: hidden; }

/* grão leve, pra casar com a textura do site */
#intro::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------- palco e peças ---------------- */
#intro .palco { position: absolute; inset: 0; }
#intro .peca {
  position: absolute; left: 50%; top: 50%; margin: 0;
  transform: translate(-50%, -50%);
  opacity: 0;
}
#intro .arte {
  position: relative; display: flex; justify-content: center; align-items: flex-end;
  filter: drop-shadow(0 0 22px rgba(224,169,85,.28));
}
#intro .arte img { display: block; width: auto; height: min(60vh, 480px); }
#intro .p2 .arte img, #intro .p3 .arte img {   /* pedestal/tripé some no escuro */
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
}

/* ondas de som do microfone */
#intro .onda {
  position: absolute; top: 19%; left: 50%;
  width: 150%; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid rgba(224,169,85,.7);
  -webkit-mask-image: linear-gradient(90deg, #000 0 30%, transparent 30% 70%, #000 70%);
          mask-image: linear-gradient(90deg, #000 0 30%, transparent 30% 70%, #000 70%);
  transform: translate(-50%, -50%) scale(.6); opacity: 0; pointer-events: none;
}

/* ---------------- roteiro (s) ----------------
   violão .15–1.5 · microfone 1.35–2.7 · câmera 2.55–3.85
   clarão 3.7 · marca 3.85 · assinatura 4.35 · fim 5.3              */
#intro.play .p1 { animation: cg-peca 1.35s linear .15s both; }
#intro.play .p2 { animation: cg-peca 1.35s linear 1.35s both; }
#intro.play .p3 { animation: cg-peca 1.3s linear 2.55s both; }
@keyframes cg-peca {
  0%   { opacity: 0; transform: translate(-50%, -46%) scale(.93); filter: blur(10px) brightness(1.8);
         animation-timing-function: cubic-bezier(.2,.7,.3,1); }
  30%  { opacity: 1; transform: translate(-50%, -50%) scale(1);   filter: blur(0) brightness(1); }
  78%  { opacity: 1; transform: translate(-50%, -50%) scale(1.02); filter: blur(0);
         animation-timing-function: cubic-bezier(.5,0,.8,.4); }
  100% { opacity: 0; transform: translate(-50%, -52%) scale(1.1);  filter: blur(8px); }
}
/* a arte sobe "enchendo" de ouro, de baixo pra cima */
#intro.play .arte img { animation: cg-enche .6s cubic-bezier(.3,.1,.2,1) both; }
#intro.play .p1 .arte img { animation-delay: .15s; }
#intro.play .p2 .arte img { animation-delay: 1.35s; }
#intro.play .p3 .arte img { animation-delay: 2.55s; }
@keyframes cg-enche {
  from { clip-path: inset(100% -20% -20% -20%); }
  to   { clip-path: inset(-20% -20% -20% -20%); }
}

/* gestos: violão vibra · microfone emite · câmera gira e a lente brilha */
#intro.play .p1 .arte { animation: cg-vibra .7s linear .7s both; transform-origin: 50% 80%; }
@keyframes cg-vibra {
  0%, 100% { rotate: 0deg; }
  12% { rotate: -1.6deg; } 26% { rotate: 1.3deg; } 40% { rotate: -.9deg; }
  55% { rotate: .6deg; }   70% { rotate: -.3deg; }
}
#intro.play .onda { animation: cg-onda 1s cubic-bezier(.2,.6,.3,1) both; }
#intro.play .o1 { animation-delay: 1.75s; }
#intro.play .o2 { animation-delay: 1.93s; }
#intro.play .o3 { animation-delay: 2.11s; }
@keyframes cg-onda {
  0%   { opacity: 0;  transform: translate(-50%, -50%) scale(.55); }
  25%  { opacity: .9; }
  100% { opacity: 0;  transform: translate(-50%, -50%) scale(1.35); }
}
/* câmera: gira de leve no tripé e um reflexo passa pela lente */
#intro .reflexo {
  position: absolute; left: 28.5%; top: 48.6%; width: 46%; aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(.2); opacity: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(255,246,225,.95) 0%, rgba(243,212,154,.45) 22%, rgba(243,212,154,0) 60%);
  mix-blend-mode: screen;
}
#intro.play .p3 .arte { animation: cg-panoramica 1s cubic-bezier(.45,0,.25,1) 2.75s both; transform-origin: 50% 100%; }
@keyframes cg-panoramica {
  0%   { rotate: 3deg; }
  60%  { rotate: -1deg; }
  100% { rotate: 0deg; }
}
#intro.play .reflexo { animation: cg-reflexo .7s cubic-bezier(.2,.7,.3,1) 3.1s both; }
@keyframes cg-reflexo {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
  35%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.3); }
}


/* ---------------- clarão do refletor ---------------- */
#intro .flash {
  position: absolute; left: 50%; top: 50%; width: 140vmax; height: 140vmax;
  transform: translate(-50%, -50%) scale(.3); pointer-events: none; opacity: 0;
  background: radial-gradient(circle,
    rgba(255,248,235,.85) 0%, rgba(224,169,85,.42) 26%, rgba(224,169,85,0) 62%);
}
#intro.play .flash { animation: cg-flash 1.1s cubic-bezier(.2,.8,.2,1) 3.7s both; }
@keyframes cg-flash {
  0%   { opacity: 0;  transform: translate(-50%,-50%) scale(.28); }
  22%  { opacity: 1;  transform: translate(-50%,-50%) scale(.52); }
  100% { opacity: 0;  transform: translate(-50%,-50%) scale(1); }
}

/* ---------------- a marca ---------------- */
#intro .intro-stage {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(16px, 3.4vw, 24px);
}

/* cartão creme, igual ao "pill" do nav (o azul do logo não lê no escuro) */
#intro .intro-logo {
  position: relative; overflow: hidden;
  width: min(360px, 68vw);
  padding: clamp(14px, 3.4vw, 26px) clamp(18px, 4vw, 30px);
  background: linear-gradient(180deg, #fffaf2 0%, #f3e7d4 100%);
  border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(224,169,85,.5), 0 30px 80px -30px rgba(0,0,0,.9),
              0 0 70px rgba(224,169,85,.28);
  opacity: 0;
}
#intro.play .intro-logo { animation: cg-marca-entra 1.5s cubic-bezier(.22,.61,.36,1) 3.85s both; }
#intro .intro-logo img { width: 100%; height: auto; }
@keyframes cg-marca-entra {
  from { opacity: 0; transform: scale(.9); filter: blur(6px); }
  35%  { opacity: 1; }
  to   { opacity: 1; transform: scale(1); filter: blur(0); }
}
/* brilho que atravessa o cartão */
#intro .intro-logo::after {
  content: ""; position: absolute; inset: 0; border-radius: 20px; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.75) 50%, transparent 62%);
  opacity: 0;
}
#intro.play .intro-logo::after { animation: cg-shine 1.1s cubic-bezier(.22,.61,.36,1) 4.15s both; }
@keyframes cg-shine {
  from { opacity: 0;  transform: translateX(-60%); }
  35%  { opacity: .9; }
  to   { opacity: 0;  transform: translateX(60%); }
}

#intro .intro-sub {
  font-family: 'Oswald', system-ui, sans-serif;
  font-size: clamp(.64rem, 2.4vw, .78rem);
  letter-spacing: .42em; text-transform: uppercase;
  color: #e0a955; text-indent: .42em;   /* compensa o espaço da última letra */
  opacity: 0;
}
#intro.play .intro-sub { animation: cg-sub-entra .9s cubic-bezier(.22,.61,.36,1) 4.35s both; }
@keyframes cg-sub-entra {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: .95; transform: translateY(0); }
}

/* ---------------- botão pular ---------------- */
#intro .intro-skip {
  position: absolute; right: clamp(14px, 4vw, 30px); top: clamp(14px, 4vw, 30px);
  background: none; border: 0; cursor: pointer;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(247,240,230,.42); padding: 10px 6px;
  transition: color .25s ease, opacity .5s ease;
}
#intro .intro-skip:hover { color: #e0a955; }

/* ---------------- saída ---------------- */
#intro.out { opacity: 0; pointer-events: none; transition: opacity .8s cubic-bezier(.22,.61,.36,1); }
#intro.out .intro-skip { opacity: 0; }