/* ==========================================================================
   Boxti — Animação de intro (overlay)
   Roda uma vez por sessão. Fases:
     1) Frases sequenciais (0–5s)
     2) Formação da logo via circuitos ciano (5.2–7s)
     3) Logo voa pro header + headline voa pro hero + cascade (7–9s) [JS]
     4) Limpeza (9s)
   Baseado em boxti_animation-final.html (timings, keyframes, paths, cores).
   ========================================================================== */

@property --write {
    syntax: '<percentage>';
    inherits: false;
    initial-value: -10%;
}

/* --------------------------------------------------------------------------
   Overlay
   -------------------------------------------------------------------------- */
#intro-overlay {
    --bg: #0a0e1a;
    --bg-2: #050810;
    --blue: #2c86c8;
    --blue-glow: #4fc3f7;
    --green: #85bc25;
    --green-glow: #aed581;
    --cyan: #00e5ff;
    --white: #ffffff;

    display: none; /* exibido só quando body.intro-playing */
    position: fixed;
    inset: 0;
    z-index: 9999;
    overflow: hidden;
    background: radial-gradient(ellipse at center, var(--bg) 0%, var(--bg-2) 100%);
    transition: background 0.8s ease, opacity 0.5s ease;
}

body.intro-playing #intro-overlay {
    display: block;
}

/* Fundo da animação some, revelando a landing por trás */
#intro-overlay.is-bg-clearing {
    background: transparent;
}

/* Fade-out final do overlay inteiro (logo + clone que ficaram no palco) */
#intro-overlay.is-hiding {
    opacity: 0;
    pointer-events: none;
}

/* Trava o scroll enquanto a intro roda */
body.intro-playing {
    overflow: hidden;
}

.intro-stage {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --------------------------------------------------------------------------
   Fase 1 — Frases
   -------------------------------------------------------------------------- */
.intro-phrases {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.intro-phrase {
    position: absolute;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(2rem, 6vw, 5rem);
    font-weight: 200;
    letter-spacing: 0.02em;
    line-height: 1.1;
    text-align: center;
    color: var(--white);
    opacity: 0;
}

.intro-phrase .accent {
    font-weight: 600;
    /* Mesmo verde da headline do hero */
    color: var(--color-lime);
    /* Glow verde nas letras */
    text-shadow:
        0 0 12px rgba(139, 197, 63, 0.55),
        0 0 28px rgba(139, 197, 63, 0.35);
}

.intro-phrase .underline {
    display: inline-block;
    position: relative;
}

.intro-phrase .underline::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-lime), transparent);
    box-shadow: 0 0 10px rgba(139, 197, 63, 0.6);
    transform: scaleX(0);
    transform-origin: left;
    animation: introLineGrow 1.4s ease-out forwards;
    animation-delay: inherit;
}

@keyframes introPhraseIn {
    0%   { opacity: 0; transform: translateY(20px) scale(0.96); filter: blur(8px); }
    25%  { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    75%  { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    100% { opacity: 0; transform: translateY(-20px) scale(1.02); filter: blur(8px); }
}

@keyframes introLineGrow {
    0%   { transform: scaleX(0); }
    40%  { transform: scaleX(1); }
    100% { transform: scaleX(0); transform-origin: right; }
}

.intro-phrase:nth-child(1) { animation: introPhraseIn 1.2s ease-in-out 0.2s forwards; }
.intro-phrase:nth-child(2) { animation: introPhraseIn 1.2s ease-in-out 1.4s forwards; }
.intro-phrase:nth-child(3) { animation: introPhraseIn 1.2s ease-in-out 2.6s forwards; }
.intro-phrase:nth-child(4) { animation: introPhraseIn 1.2s ease-in-out 3.8s forwards; }

/* --------------------------------------------------------------------------
   Fase 2 — Formação da logo
   -------------------------------------------------------------------------- */
.intro-logo {
    position: relative;
    z-index: 2;
    opacity: 0;
    transform-origin: top left;
    animation: introLogoAppear 0.01s linear 5.2s forwards;
}

@keyframes introLogoAppear { to { opacity: 1; } }

.intro-logo-svg {
    width: clamp(280px, 32vw, 500px);
    height: auto;
    display: block;
    overflow: visible;
}

/* Símbolo: contorno ciano (desenhado) + preenchimento azul */
.intro-logo .blue-outline {
    fill: none;
    stroke: var(--cyan);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 8px var(--cyan)) drop-shadow(0 0 16px var(--cyan));
    stroke-dashoffset: 700;
    animation: introDrawBlue 1s cubic-bezier(0.6, 0.05, 0.3, 0.95) 5.3s forwards,
               introFadeOut 0.5s ease-out 6.4s forwards;
}
@keyframes introDrawBlue { to { stroke-dashoffset: 0; } }

.intro-logo .blue-fill {
    fill: var(--blue);
    opacity: 0;
    animation: introFadeInFill 0.6s ease-out 6.2s forwards;
}

.intro-logo .green-outline {
    fill: none;
    stroke: var(--cyan);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 8px var(--cyan)) drop-shadow(0 0 16px var(--cyan));
    stroke-dashoffset: 280;
    animation: introDrawGreen 0.7s cubic-bezier(0.6, 0.05, 0.3, 0.95) 6s forwards,
               introFadeOut 0.5s ease-out 6.9s forwards;
}
@keyframes introDrawGreen { to { stroke-dashoffset: 0; } }

.intro-logo .green-stroke {
    fill: none;
    stroke: var(--green);
    stroke-width: 16.39px;
    stroke-linejoin: miter;
    stroke-linecap: butt;
    opacity: 0;
    animation: introFadeInFill 0.6s ease-out 6.5s forwards;
}

@keyframes introFadeOut { to { opacity: 0; } }
@keyframes introFadeInFill { to { opacity: 1; } }

/* Texto "Box TI" e "SOFTWARE": escrita via máscara varrendo da esquerda */
.intro-logo .box-ti-group,
.intro-logo .software-group {
    fill: var(--white);
    opacity: 0;
    --write: -10%;
    -webkit-mask: linear-gradient(90deg, #000 0%, #000 var(--write), transparent calc(var(--write) + 6%), transparent 100%);
            mask: linear-gradient(90deg, #000 0%, #000 var(--write), transparent calc(var(--write) + 6%), transparent 100%);
}

.intro-logo .box-ti-group {
    animation: introTextReveal 0.01s linear 6.3s forwards,
               introWriteText 1s cubic-bezier(0.4, 0, 0.2, 1) 6.3s forwards;
}
.intro-logo .software-group {
    animation: introTextReveal 0.01s linear 6.6s forwards,
               introWriteText 1s cubic-bezier(0.4, 0, 0.2, 1) 6.6s forwards;
}

@keyframes introTextReveal { to { opacity: 1; } }
@keyframes introWriteText {
    0%   { --write: -10%; }
    100% { --write: 115%; }
}

/* Headline clonada que voa pro hero (criada via JS) */
.intro-headline-clone {
    z-index: 3;
    pointer-events: none;
    will-change: transform, opacity;
}

/* --------------------------------------------------------------------------
   Fase 3 — Estados dos elementos da landing durante a intro
   (escopados em .hero / .site-header p/ não afetar clones do overlay)
   -------------------------------------------------------------------------- */
body.intro-playing .site-header .site-header__logo,
body.intro-playing .hero .hero__title {
    opacity: 0;
}

body.intro-playing .main-nav,
body.intro-playing .site-header__cta,
body.intro-playing .hero__tag,
body.intro-playing .hero__text,
body.intro-playing .hero .btn--wide,
body.intro-playing .hero__art-wrap {
    opacity: 0;
    transform: translateY(20px);
}

/* Cascade reveal dos elementos secundários (7.5–9s) */
body.intro-reveal .main-nav,
body.intro-reveal .site-header__cta,
body.intro-reveal .hero__tag,
body.intro-reveal .hero__text,
body.intro-reveal .hero .btn--wide,
body.intro-reveal .hero__art-wrap {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

body.intro-reveal .hero__tag      { transition-delay: 0.05s; }
body.intro-reveal .hero__text     { transition-delay: 0.15s; }
body.intro-reveal .hero__art-wrap { transition-delay: 0.20s; }
body.intro-reveal .hero .btn--wide { transition-delay: 0.25s; }
body.intro-reveal .main-nav       { transition-delay: 0.30s; }
body.intro-reveal .site-header__cta { transition-delay: 0.40s; }

/* Crossfade dos alvos (logo + headline) com os animados do palco */
body.intro-swap .site-header .site-header__logo,
body.intro-swap .hero .hero__title {
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* --------------------------------------------------------------------------
   Botão de replay (flutuante)
   -------------------------------------------------------------------------- */
#intro-replay {
    position: absolute; /* preso ao hero — rola junto e some após o início */
    bottom: 24px;
    right: 24px;
    z-index: 5; /* acima do conteúdo do hero, porém ABAIXO do header (--z-header: 100) */
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-pill);
    background: rgba(10, 21, 32, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--color-text-secondary);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    line-height: 1;
    cursor: pointer;
    transition: color var(--transition-fast),
                border-color var(--transition-fast),
                box-shadow var(--transition-base);
}

#intro-replay:hover {
    color: var(--color-lime);
    border-color: var(--color-lime);
    box-shadow: var(--shadow-lime);
}

.intro-replay__icon {
    font-size: 1.05rem;
    line-height: 1;
}

@media (max-width: 560px) {
    .intro-replay__label {
        display: none;
    }
    #intro-replay {
        padding: var(--space-3);
    }
}

/* --------------------------------------------------------------------------
   Acessibilidade — pula tudo
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    #intro-overlay { display: none !important; }
    body.intro-playing { overflow: auto; }
}