/* Esta camada acrescenta movimento sem mudar a estrutura das páginas. */
body { isolation: isolate; }
.page-main, .site-footer { position: relative; z-index: 1; }
.page-main > :not(.petal-field) { position: relative; z-index: 1; }

/* A luz fica atrás do conteúdo, sem capturar cliques ou arrastar a página. */
.ambient-glow, .petal-field {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.ambient-glow::before {
    content: '';
    position: absolute;
    inset: -10%;
    background: radial-gradient(ellipse at 88% 22%, #9a10101c, transparent 42%),
                radial-gradient(ellipse at 5% 65%, #9a101010, transparent 40%);
    opacity: .65;
}

/* Poucas pétalas, pequenas e espaçadas: apenas um detalhe no fundo do início. */
.petal-field { display: none; }
.effects-ready /*[data-page="inicio"]--permite decidir a página*/ .petal-field { display: block; }
.petal {
    position: absolute;
    top: -10vh;
    left: var(--x, 50vw);
    width: var(--size, 12px);
    height: calc(var(--size, 12px) * .64);
    border-radius: 80% 8% 80% 8%;
    background: linear-gradient(135deg, #ff4c4c, #850c17 80%);
    box-shadow: 0 0 16px rgba(255, 50, 70, .45);
    opacity: 0;
}

.effects-ready .petal { animation: petal-fall var(--duration, 25s) var(--delay, 0s) linear infinite; }
@keyframes petal-fall {
    2% { transform: translate3d(0, -5vh, 0) rotate(var(--turn, 0deg)); opacity: .20; }
    8% { opacity: .65; }
    80% { opacity: .50; }
    100% { transform: translate3d(var(--drift, 40px), 120vh, 0) rotate(calc(var(--turn, 0deg) + 220deg)); opacity: 0; }
}

/* O vidro tem uma base quase opaca quando o navegador não oferece desfoque. */
.site-header {
    background: #0a0a0af5;
    border-bottom-color: #ffffff0c;
    box-shadow: 0 8px 34px #00000024;
}
.site-footer { background: #101010f5; border-top-color: #ffffff12; }
@supports ((backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px))) {
    .site-header {
        background: linear-gradient(120deg, #181313a8, #080808cc);
        -webkit-backdrop-filter: blur(20px) saturate(125%);
        backdrop-filter: blur(20px) saturate(125%);
    }
    .site-footer {
        background: linear-gradient(120deg, #191313b8, #0d0d0dd9);
        -webkit-backdrop-filter: blur(18px) saturate(115%);
        backdrop-filter: blur(18px) saturate(115%);
    }
}
.site-header::after, .site-footer::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent 4%, #ff5b5b42 34%, #ffffff20 62%, transparent 96%);
}
.site-header::after { bottom: -1px; }
.site-footer::before { top: 0; }
.site-header .brand { transition: color .25s, text-shadow .25s; }
.site-header .brand:hover, .site-header .brand:focus-visible {
    color: #ff6262;
    text-shadow: 0 0 24px #ff303064;
}

/* O JavaScript mede o item do menu; esta pequena peça de vidro desliza até ele. */
.site-nav { position: relative; isolation: isolate; }
.site-nav a { position: relative; z-index: 1; transition: color .22s, border-color .22s; }
.nav-glass-indicator {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: var(--indicator-width, 0px);
    height: var(--indicator-height, 0px);
    transform: translate3d(var(--indicator-x, 0px), var(--indicator-y, 0px), 0);
    border: 1px solid #ff777730;
    border-radius: 9px;
    background: linear-gradient(145deg, #ffffff0b, #ff30300c);
    box-shadow: inset 0 1px 0 #ffffff12, 0 4px 18px #80000014;
    opacity: 0;
    pointer-events: none;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), width .35s cubic-bezier(.22, 1, .36, 1), height .35s, opacity .2s;
}
.site-nav.indicator-visible .nav-glass-indicator { opacity: 1; }
.site-nav.indicator-ready a { border-bottom-color: transparent; }

/* A altura reservada para cada habilidade impede que os botões mudem de lugar. */
.skill-rotator { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 10px; margin-top: 22px; }
.skill-intro { color: var(--muted); font-size: 14px; }
.skill-window {
    --skill-line: 1.85em;
    height: var(--skill-line);
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    font-size: clamp(16px, 1.6vw, 20px);
    font-weight: 600;
    color: var(--accent-soft);
    text-shadow: 0 0 22px #ff303026;
}
.skill-track { display: flex; flex-direction: column; }
.effects-ready .skill-track { animation: skill-cycle 16s cubic-bezier(.65, 0, .35, 1) infinite; }
.skill-track > span { display: block; flex-shrink: 0; height: var(--skill-line); line-height: var(--skill-line); white-space: nowrap; }
@keyframes skill-cycle {
    0%, 18% { transform: translateY(0); }
    25%, 43% { transform: translateY(calc(-1 * var(--skill-line))); }
    50%, 68% { transform: translateY(calc(-2 * var(--skill-line))); }
    75%, 93% { transform: translateY(calc(-3 * var(--skill-line))); }
    100% { transform: translateY(calc(-4 * var(--skill-line))); }
}

/* Uma entrada curta recebe o visitante; os textos continuam visíveis sem JavaScript. */
body.effects-ready[data-page="inicio"] .hero-copy > .eyebrow,
body.effects-ready[data-page="inicio"] .hero-copy > h1,
body.effects-ready[data-page="inicio"] .hero-copy > .skill-rotator,
body.effects-ready[data-page="inicio"] .hero-copy > .lead,
body.effects-ready[data-page="inicio"] .hero-copy > .hero-actions,
body.effects-ready[data-page="inicio"] .hero-photo { animation: welcome-in .75s cubic-bezier(.22, 1, .36, 1) both; }
body[data-page="inicio"] .hero-copy > h1 { animation-delay: .06s; }
body[data-page="inicio"] .hero-copy > .skill-rotator { animation-delay: .12s; }
body[data-page="inicio"] .hero-copy > .lead { animation-delay: .18s; }
body[data-page="inicio"] .hero-copy > .hero-actions { animation-delay: .24s; }
body[data-page="inicio"] .hero-photo { animation-delay: .16s; }
@keyframes welcome-in {
    from { opacity: 0; transform: translate3d(0, 12px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.hero-copy h1 > span { transition: text-shadow .3s; }

/* O brilho acompanha o mouse dentro do cartão, sem deslocar seus conteúdos. */
.explore-card, .service-card, .project-card { position: relative; isolation: isolate; transition: border-color .25s, box-shadow .25s; }
.explore-card::before, .service-card::before, .project-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(280px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), #ff3b3b15, transparent 72%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
}
.project-card::after { z-index: 1; background: radial-gradient(280px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), #ff3b3b0c, transparent 72%); }
.is-pointer-active::before, .is-pointer-active::after { opacity: 1; }
.hero-photo { position: relative; }
.hero-photo::after {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(210px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), #ff5c5c12, transparent 68%);
    box-shadow: inset 0 0 24px #f5242412;
    opacity: 0;
    transition: opacity .35s;
}
.hero-photo img { transition: border-color .3s, box-shadow .3s; }
.button { transition: background .22s, border-color .22s, box-shadow .22s, transform .22s; }
.text-link > span, .card-arrow, .contact-method > span:last-child { transition: transform .22s; }
.technology-list li { transition: color .22s, border-color .22s, background .22s; }
.footer-nav a { position: relative; transition: color .22s; }
.footer-nav a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 1px;
    background: #ff5a5a;
    box-shadow: 0 0 8px #ff303040;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .22s;
}
.footer-nav a:focus-visible::after, .footer-nav a:hover::after { transform: scaleX(1); }
.button:focus-visible, .menu-toggle:focus-visible { border-color: #ff929280; box-shadow: 0 0 24px #ff30302b; }
.explore-card:focus-visible, .service-card:focus-within, .project-card:focus-within { border-color: #e14b4b8c; box-shadow: 0 8px 28px #a5000018; }
.motion-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin-top: 20px;
    border: 1px solid #5a4141;
    border-radius: 20px;
    padding: 6px 12px;
    background: #ffffff04;
    color: #bdb1b1;
    font-size: 11px;
    line-height: 1.5;
    transition: color .2s, border-color .2s, background .2s;
}
.motion-toggle[hidden] { display: none; }
.motion-toggle:hover, .motion-toggle:focus-visible { color: #fff; border-color: #ff6a6a80; background: #ff30300b; }

@media (hover: hover) and (pointer: fine) {
    .hero-copy h1:hover > span { text-shadow: 0 0 36px #ff30304d; }
    .explore-card:hover, .service-card:hover, .project-card:hover { border-color: #b63c3c99; box-shadow: 0 10px 36px #a5000018; }
    .hero-photo:hover img { border-color: #ef5c5c; box-shadow: 0 0 64px #bb151538; }
    .button:hover { transform: translateY(-2px); border-color: #ff8c8c55; box-shadow: 0 7px 24px #ff30302a; }
    .text-link:hover > span, .explore-card:hover .card-arrow, .contact-method:hover > span:last-child { transform: translate3d(2px, -2px, 0); }
    .technology-list li:hover { color: #ffe3e3; border-color: #a83a3a; background: #ff30300a; }
}
/* No toque, a resposta é curta e aparece durante o contato com o elemento. */
.button:active { transform: translateY(0); box-shadow: 0 0 22px #ff303032; }
.explore-card:active, .contact-method:active { border-color: #bc4b4b; background-color: #211515; }

@media (max-width: 1060px) {
    /* Mantém o posicionamento absoluto do menu móvel definido no CSS principal. */
    .site-header .site-nav { position: absolute; background: #111111f5; }
    .nav-glass-indicator { display: none; }
    .site-nav.indicator-ready a.is-current,
    .site-nav.indicator-ready a:hover,
    .site-nav.indicator-ready a:focus-visible { border-bottom-color: var(--accent); }
    @supports ((backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px))) {
        .site-header .site-nav { background: #111111e6; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
    }
}
@media (max-width: 760px) {
    .petal:nth-child(n + 6) { display: block; }
    .petal-field { opacity: .85; }
    .ambient-glow { opacity: .6; }
    .skill-rotator { gap: 1px 9px; margin-top: 18px; }
    .skill-intro { font-size: 13px; }
    .skill-window { font-size: 16px; }
}

/* Pausar é uma escolha real: para a decoração e mantém a primeira habilidade legível. */
.effects-ready.motion-paused .petal-field { display: none; }
.motion-paused .ambient-glow::before { animation: none; transform: none; opacity: .55; }
.motion-paused .skill-track { animation: none; transform: none; }
.motion-paused .hero-copy > *, .motion-paused .hero-photo { animation: none !important; }
.motion-paused .nav-glass-indicator,
.motion-paused .explore-card::before,
.motion-paused .service-card::before,
.motion-paused .project-card::after,
.motion-paused .hero-photo::after { transition: none; }
.motion-paused .button, .motion-paused .text-link > span,
.motion-paused .card-arrow, .motion-paused .contact-method > span:last-child,
.motion-paused .footer-nav a::after { transition: none; }
.motion-paused .button:hover, .motion-paused .button:active,
.motion-paused .text-link:hover > span, .motion-paused .explore-card:hover .card-arrow,
.motion-paused .contact-method:hover > span:last-child { transform: none; }
.motion-paused .is-pointer-active::before, .motion-paused .is-pointer-active::after { opacity: 0; }
.page-hidden .petal, .page-hidden .ambient-glow::before, .page-hidden .skill-track,
.page-hidden .hero-copy > *, .page-hidden .hero-photo { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
    .effects-ready /*[data-page="inicio"] */ .petal-field { display: none; }
    .ambient-glow::before { animation: none; transform: none; opacity: .55; }
    .effects-ready .skill-track { animation: none; transform: none; }
    .nav-glass-indicator { display: none; }
    .site-nav.indicator-ready a.is-current,
    .site-nav.indicator-ready a:hover,
    .site-nav.indicator-ready a:focus-visible { border-bottom-color: var(--accent); }
    .button:hover, .button:active { transform: none; }
    .text-link:hover > span, .explore-card:hover .card-arrow, .contact-method:hover > span:last-child { transform: none; }
    .is-pointer-active::before, .is-pointer-active::after { opacity: 0; }
}