/* ============================================================
   BULL SYSTEMS — MOTION POR SEÇÃO
   Hero cinematográfico, mascote, processo, portfólio, sobre,
   diferenciais, CTA, formulário, páginas de projeto e
   transição entre páginas.
   Estados iniciais ocultos SEMPRE sob html.js-motion.
   ============================================================ */

/* ------------------------------------------------------------
   HERO CINEMATOGRÁFICO (home)
   Sequência: eyebrow → título linha a linha → passagem de luz →
   descrição → botões → card → métricas → mascote de fundo
   ------------------------------------------------------------ */
.hero-title-line {
    display: block;
    overflow: hidden;
}
.hero-title-line > span {
    display: block;
    position: relative;
}

html.js-motion .hero-content .eyebrow {
    clip-path: inset(0 100% 0 0);
    animation: hero-eyebrow 700ms var(--motion-ease-enter) 150ms both;
}
@keyframes hero-eyebrow {
    from { clip-path: inset(0 100% 0 0); opacity: 0; }
    to   { clip-path: inset(0 0 0 0); opacity: 1; }
}

html.js-motion .hero-title-line > span {
    transform: translateY(112%);
    animation: hero-line 850ms var(--motion-ease-enter) both;
    /* Evita bug do Safari/iOS onde o texto com background-clip:text do
       h1 pai fica invisivel apos a animacao de transform terminar. */
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
html.js-motion .hero-title-line:nth-child(1) > span { animation-delay: 260ms; }
html.js-motion .hero-title-line:nth-child(2) > span { animation-delay: 380ms; }
html.js-motion .hero-title-line:nth-child(3) > span { animation-delay: 500ms; }
@keyframes hero-line {
    from { transform: translateY(112%); }
    to   { transform: translateY(0); }
}

/* Passagem de luz no título: uma cópia alinhada de cada linha é revelada por
   uma faixa de clip-path. Não anima background-position nem blend do bloco
   inteiro, evitando repintura pesada do h1. */
.hero-title-line > span::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    pointer-events: none;
    color: #fff;
    -webkit-text-fill-color: #fff;
    clip-path: polygon(-28% 0, -8% 0, -18% 100%, -38% 100%);
    opacity: 0;
}
html.js-motion .hero-title-line > span::after {
    animation: hero-sweep 1050ms var(--motion-ease-standard) 1120ms 1 both;
}
html.js-motion .hero-title-line:nth-child(2) > span::after { animation-delay: 1180ms; }
html.js-motion .hero-title-line:nth-child(3) > span::after { animation-delay: 1240ms; }
@keyframes hero-sweep {
    0%   { opacity: 0; clip-path: polygon(-28% 0, -8% 0, -18% 100%, -38% 100%); }
    12%  { opacity: .88; }
    76%  { opacity: .88; }
    100% { opacity: 0; clip-path: polygon(128% 0, 148% 0, 138% 100%, 118% 100%); }
}

html.js-motion .hero-content > p {
    opacity: 0;
    transform: translateY(18px);
    animation: hero-rise 700ms var(--motion-ease-enter) 620ms both;
}
html.js-motion .hero-actions .btn {
    opacity: 0;
    transform: translateY(16px);
    animation: hero-rise 620ms var(--motion-ease-enter) both;
}
html.js-motion .hero-actions .btn:nth-child(1) { animation-delay: 760ms; }
html.js-motion .hero-actions .btn:nth-child(2) { animation-delay: 850ms; }

html.js-motion .hero-card {
    opacity: 0;
    transform: translateX(28px);
    animation: hero-card-in 800ms var(--motion-ease-enter) 900ms both;
}
@keyframes hero-card-in {
    from { opacity: 0; transform: translateX(28px); }
    to   { opacity: 1; transform: translateX(0); }
}

html.js-motion .hero-stats > div {
    opacity: 0;
    transform: translateY(14px);
    animation: hero-rise 560ms var(--motion-ease-enter) both;
}
html.js-motion .hero-stats > div:nth-child(1) { animation-delay: 1000ms; }
html.js-motion .hero-stats > div:nth-child(2) { animation-delay: 1090ms; }
html.js-motion .hero-stats > div:nth-child(3) { animation-delay: 1180ms; }

@keyframes hero-rise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Mascote de fundo: entrada pela direita + parallax de cursor (JS) */
.hero {
    --hero-mx: 0px;
    --hero-my: 0px;
}
.hero::before {
    transform: translateY(-46%) translate(var(--hero-mx), var(--hero-my));
}
html.js-motion .hero::before {
    animation: hero-bull-in 1100ms var(--motion-ease-enter) 500ms both;
}
@keyframes hero-bull-in {
    from { opacity: 0; }
    to   { opacity: 0.5; }
}

/* Pulso discreto no único olho visível pela perspectiva da arte da Hero.
   A camada é pequena e acompanha as variáveis do parallax do mascote. */
.hero-eye-glow {
    position: absolute;
    /* Calibrado sobre o centro luminoso do olho no PNG original. */
    left: 65.55%;
    top: 36.65%;
    z-index: 2;
    width: clamp(28px, 3vw, 44px);
    aspect-ratio: 2.35;
    border-radius: 58% 42% 62% 38% / 48% 42% 58% 52%;
    clip-path: polygon(2% 57%, 14% 31%, 39% 10%, 68% 15%, 96% 39%, 84% 67%, 54% 91%, 20% 82%);
    background:
        radial-gradient(ellipse at 43% 52%, rgba(220, 248, 255, .94) 0 9%, rgba(88, 207, 255, .86) 26%, transparent 58%),
        linear-gradient(104deg, transparent 3%, rgba(40, 137, 255, .28) 18%, rgba(70, 203, 255, .78) 48%, rgba(36, 126, 255, .4) 77%, transparent 97%);
    box-shadow: 0 0 5px rgba(105, 220, 255, .72), 0 0 14px rgba(43, 173, 255, .5), 0 0 24px rgba(27, 102, 255, .3);
    /* Permanece totalmente apagado enquanto o mascote faz o fade de entrada. */
    opacity: 0;
    transform: translate3d(calc(-50% + var(--hero-mx)), calc(-50% + var(--hero-my)), 0) rotate(-10deg) scale(.88);
    pointer-events: none;
}
html.js-motion .hero-eye-glow {
    /* A Hero termina em 1600 ms (500 ms de espera + 1100 ms de fade). */
    animation: hero-eye-pulse 5s ease-in-out 1750ms infinite;
}
@keyframes hero-eye-pulse {
    0%, 24%, 100% {
        opacity: .14;
        transform: translate3d(calc(-50% + var(--hero-mx)), calc(-50% + var(--hero-my)), 0) rotate(-10deg) scale(.88);
    }
    55% {
        opacity: .52;
        transform: translate3d(calc(-50% + var(--hero-mx)), calc(-50% + var(--hero-my)), 0) rotate(-10deg) scale(1.05);
    }
    66% {
        opacity: .72;
        transform: translate3d(calc(-50% + var(--hero-mx)), calc(-50% + var(--hero-my)), 0) rotate(-10deg) scale(1.18);
    }
    84% {
        opacity: .28;
        transform: translate3d(calc(-50% + var(--hero-mx)), calc(-50% + var(--hero-my)), 0) rotate(-10deg) scale(.94);
    }
}

/* Fragmentos digitais discretos atrás do mascote */
.hero::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 52%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.35;
    background-image:
        radial-gradient(2px 2px at 18% 28%, rgba(78, 171, 255, 0.8), transparent 60%),
        radial-gradient(2px 2px at 62% 16%, rgba(78, 171, 255, 0.55), transparent 60%),
        radial-gradient(3px 3px at 80% 44%, rgba(217, 4, 41, 0.5), transparent 60%),
        radial-gradient(2px 2px at 38% 62%, rgba(78, 171, 255, 0.6), transparent 60%),
        radial-gradient(2px 2px at 72% 74%, rgba(78, 171, 255, 0.45), transparent 60%);
    mask-image: linear-gradient(to left, black 55%, transparent 100%);
    -webkit-mask-image: linear-gradient(to left, black 55%, transparent 100%);
}
html.js-motion .hero::after {
    animation: hero-fragments-in 900ms var(--motion-ease-enter) 900ms both;
}
@keyframes hero-fragments-in {
    from { opacity: 0; }
    to   { opacity: 0.35; }
}
/* ------------------------------------------------------------
   SOBRE — aproximação 3D da esquerda + pulso ocular do mascote
   Somente opacity/transform: o halo roda uma vez e apenas a pequena
   camada do olho permanece em loop, sem animar filtros na imagem.
   ------------------------------------------------------------ */
.sobre-bull {
    position: relative;
    transform-origin: 35% 50%;
    backface-visibility: hidden;
}
/* Com JS funcional, o mascote aguarda fora de cena e entra apenas quando o
   IntersectionObserver adiciona .is-visible. Sem JS/reduced motion, o estado
   base de style.css continua visível como fallback seguro. */
html.js-motion .sobre-bull[data-animate="trigger"]:not(.is-visible) {
    opacity: 0;
    transform: perspective(900px) translate3d(-140px, -18px, -240px) rotateY(12deg) scale(.74);
}
html.js-motion .sobre-bull[data-animate="trigger"] {
    /* O reveal genérico também define transition; removê-lo evita duas
       interpolações concorrentes sobre opacity/transform neste mascote. */
    transition: none;
}
html.js-motion .sobre-bull.is-visible {
    animation: sobre-bull-depth-run 1100ms cubic-bezier(.2, .76, .24, 1) both;
}
@keyframes sobre-bull-depth-run {
    from {
        opacity: 0;
        transform: perspective(900px) translate3d(-140px, -18px, -240px) rotateY(12deg) scale(.74);
    }
    to {
        opacity: 1;
        transform: perspective(900px) translate3d(0, 0, 0) rotateY(0) scale(1);
    }
}

/* Halo de ativação atrás do touro — uma única passagem. */
.sobre-bull::before {
    content: '';
    position: absolute;
    inset: 8% 3% 5%;
    z-index: 0;
    border-radius: 50%;
    background: radial-gradient(ellipse at 66% 42%, rgba(100, 211, 255, .14), rgba(25, 108, 255, .05) 30%, transparent 64%);
    opacity: 0;
    transform: scale(.88);
    pointer-events: none;
}
html.js-motion .sobre-bull.is-visible::before {
    animation: sobre-bull-halo 1100ms var(--motion-ease-enter) 180ms 1 both;
}
@keyframes sobre-bull-halo {
    0%   { opacity: 0; transform: scale(.88); }
    42%  { opacity: .46; transform: scale(1.02); }
    100% { opacity: 0; transform: scale(1.09); }
}

/* O ativo tem um único olho visível na perspectiva. O brilho é uma camada
   mínima e independente, alinhada proporcionalmente à imagem responsiva. */
.sobre-bull::after {
    content: '';
    position: absolute;
    left: 65.2%;
    top: 40.8%;
    z-index: 2;
    width: clamp(10px, 3.2%, 16px);
    aspect-ratio: 1.22;
    border-radius: 55% 45% 58% 42%;
    background: radial-gradient(ellipse at center, rgba(190, 243, 255, .9) 0 16%, rgba(73, 199, 255, .84) 42%, rgba(32, 130, 255, .54) 63%, transparent 82%);
    box-shadow: 0 0 5px rgba(111, 224, 255, .72), 0 0 14px rgba(45, 177, 255, .5), 0 0 26px rgba(24, 101, 255, .3);
    /* Evita o olho desacoplado enquanto o touro ainda se aproxima. */
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) rotate(17deg) scale(.84);
    pointer-events: none;
}
html.js-motion .sobre-bull.is-visible::after {
    /* A aproximação termina em 1100 ms; o pulso começa depois da imagem. */
    animation: sobre-bull-eye-pulse 4.2s ease-in-out 1200ms infinite;
}
@keyframes sobre-bull-eye-pulse {
    0%, 18%, 100% {
        opacity: .14;
        transform: translate3d(-50%, -50%, 0) rotate(17deg) scale(.84);
    }
    46% {
        opacity: .56;
        transform: translate3d(-50%, -50%, 0) rotate(17deg) scale(1.05);
    }
    58% {
        opacity: .84;
        transform: translate3d(-50%, -50%, 0) rotate(17deg) scale(1.18);
    }
    78% {
        opacity: .28;
        transform: translate3d(-50%, -50%, 0) rotate(17deg) scale(.94);
    }
}

@media (max-width: 760px) {
    .hero::before {
        transform: translate3d(var(--hero-mx), var(--hero-my), 0);
        transition: none;
    }
    html.js-motion .hero::before {
        animation-name: hero-bull-in-mobile;
    }
    @keyframes hero-bull-in-mobile {
        from { opacity: 0; }
        to   { opacity: .5; }
    }
}

/* ------------------------------------------------------------
   PROCESSO — linha de progresso sincronizada com o scroll
   (JS define --process-progress em .timeline)
   ------------------------------------------------------------ */
.timeline {
    position: relative;
    --process-progress: 0;
    padding-top: 22px;
}
.timeline::before,
.timeline::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 2px;
    right: 2px;
    height: 2px;
    border-radius: 2px;
    pointer-events: none;
}
.timeline::before {
    background: rgba(255, 255, 255, 0.08);
}
.timeline::after {
    background: linear-gradient(90deg, rgba(217, 4, 41, 0.85), rgba(29, 139, 255, 0.9));
    transform: scaleX(var(--process-progress));
    transform-origin: left center;
    transition: transform 160ms linear;
}

html.js-motion .timeline-item {
    opacity: 0.45;
    transition:
        opacity var(--motion-duration-slow) var(--motion-ease-standard),
        transform .25s ease,
        border-color .25s ease;
}
html.js-motion .timeline-item.is-lit { opacity: 1; }
.timeline-item span {
    transition:
        color var(--motion-duration-normal) var(--motion-ease-standard),
        border-color var(--motion-duration-normal) var(--motion-ease-standard),
        background-color var(--motion-duration-normal) var(--motion-ease-standard),
        transform var(--motion-duration-normal) var(--motion-ease-bounce);
}
.timeline-item.is-lit span {
    color: #fff;
    border-color: rgba(78, 171, 255, 0.65);
    background: rgba(29, 139, 255, 0.16);
    transform: scale(1.06);
}

@media (max-width: 760px) {
    .timeline { padding-top: 0; padding-left: 20px; }
    .timeline::before,
    .timeline::after {
        top: 6px;
        bottom: 6px;
        left: 4px;
        right: auto;
        width: 2px;
        height: auto;
    }
    .timeline::after {
        transform: scaleY(var(--process-progress));
        transform-origin: top center;
    }
}

/* ------------------------------------------------------------
   PORTFÓLIO — números grandes, entrada alternada e brilho único
   ------------------------------------------------------------ */
.project-showcase-card { position: relative; }
.project-num {
    position: absolute;
    top: 10px;
    left: 14px;
    z-index: 2;
    font-family: 'Eurostile Bold Extended', 'Michroma', sans-serif;
    font-size: 2.3rem;
    font-weight: 800;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);
    pointer-events: none;
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity 700ms var(--motion-ease-enter) 350ms,
        transform 700ms var(--motion-ease-enter) 350ms;
}
.project-showcase-card.is-visible .project-num,
html:not(.js-motion) .project-num {
    opacity: 1;
    transform: translateY(0);
}

/* Brilho atravessando a imagem uma única vez por hover */
.project-image-link { position: relative; overflow: hidden; }
.project-image-link::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.16) 50%, transparent 58%);
    transform: translateX(-120%);
    pointer-events: none;
}
.project-image-link:hover::after {
    animation: card-shine 900ms var(--motion-ease-standard) 1;
}
@keyframes card-shine {
    from { transform: translateX(-120%); }
    to   { transform: translateX(120%); }
}

/* Seta/link de detalhe com deslocamento */
.project-detail-link .material-icons-outlined {
    transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
}
.project-detail-link:hover .material-icons-outlined {
    transform: translateX(5px);
}

/* Filtros: saída/entrada suave (FLIP via WAAPI no JS) */
.portfolio-grid-cards {
    transition: height var(--motion-duration-normal) var(--motion-ease-standard);
}
.portfolio-filter-btn {
    transition:
        color var(--motion-duration-fast) var(--motion-ease-standard),
        border-color var(--motion-duration-fast) var(--motion-ease-standard),
        background-color var(--motion-duration-fast) var(--motion-ease-standard),
        transform var(--motion-duration-fast) var(--motion-ease-standard);
}
.portfolio-filter-btn:active { transform: scale(0.97); }

/* ------------------------------------------------------------
   CTA — momento de energia
   ------------------------------------------------------------ */
.cta-box { position: relative; overflow: hidden; }
.cta-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(217, 4, 41, 0.9), rgba(29, 139, 255, 0.9), transparent);
    transform: translateX(-100%);
    pointer-events: none;
}
html.js-motion .cta-box.is-visible::before {
    animation: energy-line 1100ms var(--motion-ease-standard) 200ms 1 both;
}
@keyframes energy-line {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}

html.js-motion .cta-content .section-title {
    clip-path: inset(0 0 100% 0);
    opacity: 0;
    transition:
        clip-path 800ms var(--motion-ease-enter),
        opacity 800ms var(--motion-ease-enter);
}
html.js-motion .cta-box.is-visible .cta-content .section-title {
    clip-path: inset(0 0 0% 0);
    opacity: 1;
}
html.js-motion .cta-content p,
html.js-motion .cta-content .btn {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 650ms var(--motion-ease-enter) 250ms,
        transform 650ms var(--motion-ease-enter) 250ms;
}
html.js-motion .cta-box.is-visible .cta-content p,
html.js-motion .cta-box.is-visible .cta-content .btn {
    opacity: 1;
    transform: translateY(0);
}
html.js-motion .cta-box.is-visible .cta-content .btn { transition-delay: 380ms; }

/* Mascote do CTA: entrada pela direita com escala/rotação sutil */
html.js-motion .bull-wrap {
    opacity: 0;
    transform: translateX(40px) scale(0.94) rotate(2deg);
    transition:
        opacity 950ms var(--motion-ease-enter) 300ms,
        transform 950ms var(--motion-ease-enter) 300ms,
        filter 950ms var(--motion-ease-standard) 300ms;
}
html.js-motion .cta-box.is-visible .bull-wrap {
    opacity: 1;
    transform: translateX(0) scale(1) rotate(0deg);
}
.cta-box.is-visible .bull-wrap img {
    filter: drop-shadow(0 0 24px rgba(29, 139, 255, 0.28));
}
.bull-wrap img { transition: filter 900ms var(--motion-ease-standard); }

/* Brilho ocasional no botão do CTA: uma vez ao entrar na tela */
.cta-content .btn-primary { position: relative; overflow: hidden; }
.cta-content .btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.28) 50%, transparent 60%);
    transform: translateX(-130%);
    pointer-events: none;
}
html.js-motion .cta-box.is-visible .cta-content .btn-primary::before {
    animation: card-shine 1000ms var(--motion-ease-standard) 1400ms 1;
}
.cta-content .btn-primary:hover::before {
    animation: card-shine 900ms var(--motion-ease-standard) 1;
}

/* ------------------------------------------------------------
   PÁGINAS DE PROJETO — mesma linguagem de movimento
   ------------------------------------------------------------ */
.browser-frame { overflow: hidden; }
html.js-motion .project-hero-visual.is-visible .browser-frame img {
    animation: frame-reveal 900ms var(--motion-ease-enter) both;
}
@keyframes frame-reveal {
    from { opacity: 0; transform: scale(1.03); }
    to   { opacity: 1; transform: scale(1); }
}

/* ------------------------------------------------------------
   TRANSIÇÃO ENTRE PÁGINAS (overlay criado por JS)
   ------------------------------------------------------------ */
.page-transition {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: #04070f;
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms var(--motion-ease-standard);
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-transition::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(217, 4, 41, 0.9), rgba(29, 139, 255, 0.95), transparent);
    transform: translateX(-100%);
}
.page-transition img {
    width: 74px;
    height: auto;
    opacity: 0;
    transform: scale(0.9);
    transition:
        opacity 240ms var(--motion-ease-enter) 120ms,
        transform 240ms var(--motion-ease-enter) 120ms;
}
.page-transition.is-active {
    opacity: 1;
    pointer-events: auto;
}
.page-transition.is-active::before {
    animation: energy-line 420ms var(--motion-ease-standard) 1 both;
}
.page-transition.is-active img {
    opacity: 1;
    transform: scale(1);
}

/* ------------------------------------------------------------
   Acessibilidade — anula tudo desta folha
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .hero-eye-glow {
        animation: none !important;
        opacity: .38 !important;
        transform: translate3d(-50%, -50%, 0) rotate(-10deg) scale(1) !important;
    }
    .sobre-bull::before,
    .sobre-bull::after {
        animation: none !important;
    }
    .sobre-bull {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .sobre-bull::before { opacity: 0 !important; }
    .sobre-bull::after {
        opacity: .4 !important;
        transform: translate3d(-50%, -50%, 0) rotate(17deg) scale(1) !important;
    }
    html.js-motion .hero-content .eyebrow,
    html.js-motion .hero-title-line > span,
    html.js-motion .hero-content h1,
    html.js-motion .hero-content > p,
    html.js-motion .hero-actions .btn,
    html.js-motion .hero-card,
    html.js-motion .hero-stats > div,
    html.js-motion .hero::before,
    html.js-motion .hero::after,
    html.js-motion .timeline-item,
    html.js-motion .cta-content .section-title,
    html.js-motion .cta-content p,
    html.js-motion .cta-content .btn,
    html.js-motion .bull-wrap,
    html.js-motion .sobre-bull-img,
    html.js-motion .hero-title-line > span::after {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
    }
    html.js-motion .hero::before { opacity: 0.5 !important; transform: translateY(-46%) !important; }
    html.js-motion .hero::after { opacity: 0.35 !important; }
    html.js-motion .sobre-bull-img { opacity: 0.6 !important; }
    html.js-motion .hero-title-line > span::after { display: none !important; }
    .timeline::after { transform: none !important; }
    .page-transition { display: none !important; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 760px) {
    html.js-motion .hero::before { transform: none !important; }
}

@media print {
    .hero-eye-glow { display: none !important; }
    .sobre-bull::before,
    .sobre-bull::after { display: none !important; }
    html.js-motion .hero-content .eyebrow,
    html.js-motion .hero-title-line > span,
    html.js-motion .hero-content > p,
    html.js-motion .hero-actions .btn,
    html.js-motion .hero-card,
    html.js-motion .hero-stats > div,
    html.js-motion .timeline-item,
    html.js-motion .cta-content .section-title,
    html.js-motion .cta-content p,
    html.js-motion .cta-content .btn,
    html.js-motion .bull-wrap,
    html.js-motion .sobre-bull-img,
    html.js-motion .hero-title-line > span::after {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
    }
    html.js-motion .sobre-bull-img { opacity: 0.6 !important; }
    html.js-motion .hero-title-line > span::after { display: none !important; }
    .page-transition { display: none !important; }
}