/* Abertura: fio de ouro escreve o monograma, depois dissolve no nome completo. */
html.studio-intro-open { overflow: hidden; }
.studioIntro { position: fixed; inset: 0; margin: 0; padding: 0; border: 0; width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none; overflow: hidden; color: #422c23; background: #f8f1e9; font-family: 'DM Sans', sans-serif; }
.studioIntro::backdrop { background: #f8f1e9; }
.studioIntro[open] { display: grid; place-items: center; }
.studioIntro.is-playing, .studioIntro.is-playing::backdrop { animation: introExit .65s cubic-bezier(.4, 0, .2, 1) 4.25s both; }
.introAmbient { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 25% 22%, #e7c7a63b, transparent 55%), radial-gradient(ellipse at 80% 83%, #cfac8b30, transparent 55%), linear-gradient(125deg, #fffaf3, #f2e6da); }
.introAmbient::after { content: ''; position: absolute; inset: 24px; border: 1px solid #ac7f4b26; border-radius: 3px; }
.introTop { position: absolute; z-index: 3; top: max(32px, env(safe-area-inset-top)); left: clamp(24px, 5vw, 88px); right: clamp(24px, 5vw, 88px); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.introTop > span { font-size: 10px; font-weight: 600; letter-spacing: .3em; }
.introTop i { font-style: normal; margin: 0 8px; color: #aa7d49; }
#introSkip { min-height: 44px; min-width: 82px; padding: 10px 16px; border: 1px solid #ae8d6b50; border-radius: 30px; background: #fffaf380; color: #634631; font: 500 12px 'DM Sans', sans-serif; cursor: pointer; }
#introSkip span { margin-left: 12px; }
#introSkip:focus-visible, .introReplay:focus-visible { outline: 2px solid #925d29; outline-offset: 5px; }
.introReveal { position: relative; z-index: 2; display: grid; }
.introMonogram, .introWordmark { grid-area: 1 / 1; }
.introMonogram { width: min(190px, 44vw); height: auto; overflow: visible; justify-self: center; align-self: center; stroke: url(#introGold); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.introMonogram path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.introWordmark { text-align: center; padding: 0 24px; max-width: min(90vw, 720px); opacity: 0; justify-self: center; align-self: center; }
.introName { margin: 0; color: #3a2519; font: 500 clamp(42px, 8vw, 88px)/1.04 'Cormorant Garamond', Georgia, serif; letter-spacing: .01em; }
.introThread { display: block; width: min(220px, 60vw); height: 1.5px; margin: 16px auto; background: linear-gradient(90deg, transparent, #a97940, #e7c68f, #a97940, transparent); box-shadow: 0 0 10px rgba(212, 183, 131, .55); }
.introTagline { margin: 0; color: #a27642; font: 400 clamp(22px, 4vw, 34px) 'Parisienne', cursive; }
.introDetail { display: block; margin-top: 16px; font-size: 9px; letter-spacing: .35em; color: #8a6a4a; }
.introBottom { position: absolute; bottom: max(42px, calc(env(safe-area-inset-bottom) + 25px)); left: 24px; right: 24px; display: grid; justify-items: center; gap: 20px; font-size: 9px; letter-spacing: .28em; color: #856344; }
.introProgress { width: 100px; height: 1px; background: #ad835035; overflow: hidden; }
.introProgress span { display: block; height: 100%; background: #a97940; transform: scaleX(0); transform-origin: left; }
.is-playing .introMonogram path#introStrokeS { animation: introTraceLetter .65s cubic-bezier(.65, 0, .35, 1) .15s forwards; }
.is-playing .introMonogram path#introLetterT { animation: introTraceLetter .55s cubic-bezier(.65, 0, .35, 1) .55s forwards; }
.is-playing .introMonogram { animation: introMonoOut .55s ease 1.25s forwards; }
.is-playing .introWordmark { animation: introWordIn .8s cubic-bezier(.16, .8, .24, 1) 1.35s forwards; }
.is-playing .introName { position: relative; background: linear-gradient(100deg, #3a2519 40%, #f2dcb8 50%, #3a2519 60%); background-size: 280% 100%; background-position: 140% 0; -webkit-background-clip: text; background-clip: text; color: transparent; animation: introShine 1.3s 2.05s ease-out 1 forwards; }
.is-playing .introThread { width: 0; animation: introThreadDraw .9s 1.75s cubic-bezier(.4, 0, .2, 1) forwards; }
.is-playing .introTagline { opacity: 0; animation: introFadeUp .75s 2.15s cubic-bezier(.2, .7, .3, 1) both; }
.is-playing .introDetail { opacity: 0; animation: introFadeUp .7s 2.4s cubic-bezier(.2, .7, .3, 1) both; }
.is-playing .introReveal { animation: introRevealOut .65s cubic-bezier(.4, 0, .2, 1) 4.25s forwards; }
.is-playing .introProgress span { animation: introProgress 4.25s linear both; }
.introReplay { display: block; margin: 20px auto 0; padding: 10px 18px; min-height: 44px; border: 1px solid #a6794530; border-radius: 24px; background: transparent; color: #775639; font: 500 11px 'DM Sans', sans-serif; cursor: pointer; }
@keyframes introTraceLetter { to { stroke-dashoffset: 0; } }
@keyframes introMonoOut { to { opacity: 0; transform: scale(.92); } }
@keyframes introWordIn { from { opacity: 0; transform: translateY(16px) scale(.97); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes introShine { to { background-position: -40% 0; } }
@keyframes introThreadDraw { to { width: min(220px, 60vw); } }
@keyframes introFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes introProgress { to { transform: scaleX(1); } }
@keyframes introExit { to { opacity: 0; } }
@keyframes introRevealOut { to { opacity: 0; transform: scale(1.035); filter: blur(4px); } }
@media (max-width: 600px) {
  .introAmbient::after { inset: 12px; }
  .introTop { top: max(22px, env(safe-area-inset-top)); left: 24px; right: 24px; }
  .introTop > span { font-size: 8px; letter-spacing: .17em; }
  .introTop i { margin: 0 3px; }
}
@media (max-height: 500px) {
  .introTop { top: 15px; }
  .introMonogram { width: min(140px, 38vw); }
  .introName { font-size: clamp(34px, 9vw, 52px); }
  .introTagline { font-size: clamp(18px, 5vw, 26px); }
  .introThread { margin: 10px auto; }
  .introBottom { bottom: 15px; gap: 9px; font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .studioIntro *, .studioIntro.is-playing, .studioIntro.is-playing::backdrop { animation: none !important; }
  .introMonogram { display: none; }
  .introWordmark { opacity: 1; }
  .introName { color: #3a2519; }
  .introThread { width: min(220px, 60vw); }
  .introTagline, .introDetail { opacity: 1; }
}