/* ==========================================================================
   Hewth — desktop.css
   Tudo aqui está dentro de @media (min-width: 1025px): laptop/desktop com
   rato. Telemóvel, iPad e tablets ficam no mobile.css.

   Contém o que só existe com rato: o orb do cursor, as camadas de revelação
   (.layer__red clonada por cima do conteúdo) e os hovers do heading-mask.
   ========================================================================== */

@media (min-width: 1025px) {

    /* ----------------------------------------------------------------------
       Hero — animação de caracteres
       ---------------------------------------------------------------------- */
    .anim--chars .line {
        display: flex !important;
        justify-content: center;
        align-items: flex-start;
        flex-wrap: nowrap;
        gap: 0;
    }

    .anim--chars .line strong {
        display: flex !important;
        gap: 0;
    }

    .layer.layer__dark .hero .anim--chars .char,
    .layer.layer__red .hero .anim--chars .char {
        margin-top: 5px !important;
    }

    /* Coluna mais larga + overflow visível para palavras longas (ex.: LANDING) */
    .layer.layer__dark .hero .hero_content_inner,
    .layer.layer__red .hero .hero_content_inner,
    .layer.layer__dark .hero .anim--chars,
    .layer.layer__red .hero .anim--chars,
    .layer.layer__dark .hero > .hero_content,
    .layer.layer__red .hero > .hero_content {
        overflow: visible;
    }

    /* ----------------------------------------------------------------------
       Cursor orb
       Referência Unseen: .cursor__circle — borda 1.5px, sem fill;
       raio 1.2rem numa caixa 2.2rem (o ratio é aplicado em JS).
       ---------------------------------------------------------------------- */
    .cursor-orb {
        position: fixed;
        top: 0;
        left: 0;
        width: 60px;
        height: 60px;
        box-sizing: border-box;
        border: 1.5px solid #0d0d0d;
        border-radius: 32.73px;
        background: transparent;
        opacity: 0;
        pointer-events: none;
        transform: translate3d(-999px, -999px, 0);
        transform-origin: 50% 50%;
        transition: opacity .2s ease;
        will-change: transform;
        z-index: 10010;
    }

    .cursor-orb.is-visible {
        opacity: 1;
    }

    /* Contorno do orb nos itens do menu (retângulo; sem squash) */
    .cursor-orb.is-nav-outline {
        transform-origin: 0 0;
    }

    @media (pointer: coarse) {
        .cursor-orb {
            display: none !important;
        }
    }

    /* ----------------------------------------------------------------------
       Camadas de revelação
       ---------------------------------------------------------------------- */
    .hero-reveal-overlay,
    .motto-reveal-overlay,
    .about-reveal-overlay,
    .work-reveal-overlay,
    .client-reveal-overlay,
    .testimonial-reveal-overlay {
        background: #000;
        inset: 0;
        overflow: hidden;
        pointer-events: none;
        position: absolute;
        -webkit-clip-path: circle(0 at 0 0);
        clip-path: circle(0 at 0 0);
        z-index: 3;
    }

    .layer__dark .motto,
    .layer__dark .about,
    .layer__dark .work,
    .layer__dark .client,
    .layer__dark .testimonials {
        position: relative;
    }

    .layer__dark .motto .motto_bg {
        display: none !important;
    }

    .layer__dark .about .about_content.js-about-reveal-target {
        position: relative;
    }

    /* Hero */
    .hero-reveal-overlay .hero_content {
        position: relative;
        z-index: 1;
    }

    .layer.layer__dark .hero-reveal-overlay .hero_content,
    .layer.layer__dark .hero-reveal-overlay .hero_content * {
        color: #fff !important;
    }

    /* Motto */
    .motto-reveal-overlay .motto_content_heading {
        margin: 0;
        position: absolute;
        text-align: center;
        z-index: 1;
    }

    .motto-reveal-overlay .motto_content_heading .line {
        display: block;
        white-space: nowrap;
    }

    .motto-reveal-overlay .motto_content {
        z-index: 1;
    }

    .layer.layer__dark .motto-reveal-overlay .motto_content_heading,
    .layer.layer__dark .motto-reveal-overlay .motto_content_heading * {
        color: #fff !important;
    }

    .layer__red .motto__red .motto_content {
        visibility: hidden;
    }

    /* About */
    .about-reveal-overlay .about_me,
    .about-reveal-overlay .about_content {
        position: relative;
        z-index: 1;
    }

    .layer.layer__dark .about-reveal-overlay .about_content,
    .layer.layer__dark .about-reveal-overlay .about_content *,
    .layer.layer__dark .about-reveal-overlay .about_content strong {
        color: #fff !important;
    }

    .about-reveal-overlay .about_content_desc {
        line-height: 1.06;
        overflow: visible;
        width: auto;
    }

    .about-reveal-overlay .scroll-paragraph-mask.text-dark,
    .layer__red .about__red .scroll-paragraph-mask.text-dark {
        display: inline-block;
        max-width: none;
        white-space: nowrap;
        width: auto;
    }

    .layer__red .about__red .about_content {
        visibility: hidden;
    }

    /* Work */
    .work-reveal-overlay .work_experience,
    .work-reveal-overlay .work_content {
        position: relative;
        z-index: 1;
    }

    .layer.layer__dark .work-reveal-overlay .work_content,
    .layer.layer__dark .work-reveal-overlay .work_content *,
    .layer.layer__dark .work-reveal-overlay .work_content strong {
        color: #fff !important;
    }

    .work-reveal-overlay .work_content_desc {
        line-height: 1.06;
    }

    .work-reveal-overlay .scroll-paragraph-mask.text-dark,
    .layer__red .work__red .scroll-paragraph-mask.text-dark {
        display: inline-block;
        max-width: none;
        white-space: nowrap;
        width: auto;
    }

    .layer__red .work__red .work_content {
        visibility: hidden;
    }

    /* Client */
    .client-reveal-overlay .client_info,
    .client-reveal-overlay .client_content {
        position: relative;
        z-index: 1;
    }

    .layer.layer__dark .client-reveal-overlay .client_content,
    .layer.layer__dark .client-reveal-overlay .client_content *,
    .layer.layer__dark .client-reveal-overlay .client_content strong {
        color: #fff !important;
    }

    .client-reveal-overlay .client_content_desc {
        line-height: 1.06;
    }

    .client-reveal-overlay .scroll-paragraph-mask,
    .layer__red .client__red .scroll-paragraph-mask {
        display: inline-block;
        max-width: none;
        white-space: nowrap;
        width: auto;
    }

    .layer__red .client__red .client_content {
        visibility: hidden;
    }

    /* Testimonials */
    .testimonial-reveal-overlay .testimonial_inner {
        position: absolute;
        z-index: 1;
    }

    .layer.layer__dark .testimonial-reveal-overlay .testimonial_content,
    .layer.layer__dark .testimonial-reveal-overlay .testimonial_content *,
    .layer.layer__dark .testimonial-reveal-overlay .testimonial_content b,
    .layer.layer__dark .testimonial-reveal-overlay .testimonial_info,
    .layer.layer__dark .testimonial-reveal-overlay .testimonial_info * {
        color: #fff !important;
    }

    .testimonial-reveal-overlay .scroll-paragraph-mask.text-dark,
    .layer__red .testimonials__red .testimonial:first-child .scroll-paragraph-mask.text-dark {
        display: inline-block;
        max-width: none;
        white-space: nowrap;
        width: auto;
    }

    .testimonial-reveal-overlay .scroll-paragraph-mask.text-dark b,
    .layer__red .testimonials__red .testimonial:first-child .scroll-paragraph-mask.text-dark b {
        display: inline-block;
        margin-right: .14em;
    }

    .testimonial-reveal-overlay .scroll-paragraph-mask.text-dark .d-sm-block,
    .testimonial-reveal-overlay .scroll-paragraph-mask.text-dark .d-sm-none,
    .layer__red .testimonials__red .testimonial:first-child .scroll-paragraph-mask.text-dark .d-sm-block,
    .layer__red .testimonials__red .testimonial:first-child .scroll-paragraph-mask.text-dark .d-sm-none {
        display: block;
        padding-left: .86em;
        position: relative;
    }

    .testimonial-reveal-overlay .scroll-paragraph-mask.text-dark .d-sm-block > b,
    .testimonial-reveal-overlay .scroll-paragraph-mask.text-dark .d-sm-none > b,
    .layer__red .testimonials__red .testimonial:first-child .scroll-paragraph-mask.text-dark .d-sm-block > b,
    .layer__red .testimonials__red .testimonial:first-child .scroll-paragraph-mask.text-dark .d-sm-none > b {
        left: 0;
        margin-right: 0;
        position: absolute;
        top: 0;
        transform: translateX(0);
    }

    .layer__red .testimonials__red .testimonial:first-child .testimonial_inner {
        visibility: hidden;
    }

    /* ----------------------------------------------------------------------
       Máscara .layer__red — bolinha expandida = preto, texto branco
       (app.css usa #eb5939)
       ---------------------------------------------------------------------- */
    .layer.layer__red {
        background-color: #000 !important;
    }

    .layer.layer__red .text-dark,
    .layer.layer__red .desc,
    .layer.layer__red .body-text,
    .layer.layer__red .sub-content,
    .layer.layer__red .h1,
    .layer.layer__red .h2,
    .layer.layer__red .h4,
    .layer.layer__red .h6,
    .layer.layer__red strong,
    .layer.layer__red b,
    .layer.layer__red .anim--chars .char {
        color: #fff !important;
    }

    /* ----------------------------------------------------------------------
       Listas heading-mask (serviços e clientes)
       ---------------------------------------------------------------------- */
    .layer.layer__dark .about_ido .heading-mask,
    .layer.layer__dark .client_list .heading-mask {
        border-top: 1px solid rgba(13, 13, 13, 0.32) !important;
    }

    /*
     * Respiro vertical: o tema usa .heading-mask_el__deep { position:absolute; top:0 },
     * por isso padding só no .heading-mask não afasta a camada “deep”. Padding igual
     * em __deep e __masking mantém as duas camadas alinhadas.
     */
    .layer.layer__dark .about_ido .heading-mask > .heading-mask_el__deep,
    .layer.layer__dark .about_ido .heading-mask > .heading-mask_el__masking,
    .layer.layer__dark .client_list .heading-mask > .heading-mask_el__deep,
    .layer.layer__dark .client_list .heading-mask > .heading-mask_el__masking {
        box-sizing: border-box !important;
        padding-top: clamp(0.55rem, 1.4vw, 1.1rem) !important;
    }

    /*
     * app.css: .h1 { line-height: 84% } — caixa de linha mais baixa que o glifo
     * (Stardos tem S/G altos). overflow-hidden em .simple-masking corta o excesso.
     */
    .layer.layer__dark .about_ido .simple-masking .h1,
    .layer.layer__dark .client_list .simple-masking .h1 {
        line-height: 1.02 !important;
        box-sizing: border-box;
    }

    .layer.layer__dark .about_ido .simple-masking.overflow-hidden,
    .layer.layer__dark .client_list .simple-masking.overflow-hidden {
        overflow: visible !important;
    }

    /*
     * Hit-test: __deep em absolute pode cobrir área maior que o título; o rato “real”
     * dispara hover antes de a bolinha (que usa suavização) parecer alinhada.
     */
    .layer.layer__dark .about_ido .heading-mask > .heading-mask_el__deep,
    .layer.layer__dark .client_list .heading-mask > .heading-mask_el__deep {
        pointer-events: none !important;
    }

    .layer.layer__dark .about_ido .heading-mask_el__deep .simple-masking,
    .layer.layer__dark .about_ido .heading-mask_el__deep .simple-masking_el,
    .layer.layer__dark .client_list .heading-mask_el__deep .simple-masking,
    .layer.layer__dark .client_list .heading-mask_el__deep .simple-masking_el {
        pointer-events: auto !important;
    }

    .layer.layer__dark .about_ido .heading-mask_el__deep .simple-masking_el.js-simple-masking_el,
    .layer.layer__dark .client_list .heading-mask_el__deep .simple-masking_el.js-simple-masking_el {
        position: relative !important;
    }

    .layer.layer__dark .about_ido .simple-masking .js-heading-mask_heading.is-deep,
    .layer.layer__dark .client_list .simple-masking .js-heading-mask_heading.is-deep {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        margin: 0 !important;
        z-index: 1 !important;
        opacity: 0.2 !important;
    }

    .layer.layer__dark .about_ido .simple-masking .js-heading-mask_heading.is-masking,
    .layer.layer__dark .client_list .simple-masking .js-heading-mask_heading.is-masking {
        position: relative !important;
        z-index: 2 !important;
    }

    /* Fundo 3D do client_list não participa do hit-test (evita “buracos” na pilha) */
    .layer.layer__dark .client .client_list_3d,
    .layer.layer__dark .client .client_list_3d * {
        pointer-events: none !important;
    }

    /*
     * Camada __deep é absolute: pode prolongar-se para a linha seguinte e o item
     * de baixo herdava hover fantasma. Corta o excesso.
     */
    .layer.layer__dark .client_list > .heading-mask:not(:last-child),
    .layer.layer__dark .client_list > .heading-mask:last-child {
        overflow: hidden;
    }

    .layer.layer__dark .client_list > .heading-mask:last-child .simple-masking_el.js-simple-masking_el {
        display: inline-block !important;
        width: fit-content !important;
        max-width: 100% !important;
        vertical-align: top;
    }

    .layer.layer__dark .about_ido .heading-mask:last-child,
    .layer.layer__dark .client_list .heading-mask:last-child {
        border-bottom: 1px solid rgba(13, 13, 13, 0.32) !important;
    }

    .layer.layer__dark .about_ido .heading-mask__now,
    .layer.layer__dark .client_list .heading-mask__now {
        border-top: 1px solid #0d0d0d !important;
    }

    /*
     * O que eu faço ? / Clientes / Contatos: cor #f53636 e revelação
     * esquerda → direita. (app.css usa inset(50% 0 50% 0), faixa que cresce do meio.)
     */
    .layer.layer__dark .about_ido .heading-mask_el__masking,
    .layer.layer__dark .client_list .heading-mask_el__masking,
    .layer.layer__dark .contact .heading-mask_el__masking {
        background: #f53636 !important;
        -webkit-clip-path: inset(0 100% 0 0) !important;
        clip-path: inset(0 100% 0 0) !important;
        -webkit-transition: -webkit-clip-path .4s cubic-bezier(.165, .84, .44, 1) !important;
        transition: clip-path .4s cubic-bezier(.165, .84, .44, 1), -webkit-clip-path .4s cubic-bezier(.165, .84, .44, 1) !important;
    }

    .layer.layer__dark .about_ido .heading-mask.is-hover .heading-mask_el__masking,
    .layer.layer__dark .client_list .heading-mask.is-hover .heading-mask_el__masking,
    .layer.layer__dark .contact .heading-mask.is-hover .heading-mask_el__masking {
        -webkit-clip-path: inset(0) !important;
        clip-path: inset(0) !important;
        -webkit-transition: -webkit-clip-path .6s cubic-bezier(.165, .84, .44, 1) !important;
        transition: clip-path .6s cubic-bezier(.165, .84, .44, 1), -webkit-clip-path .6s cubic-bezier(.165, .84, .44, 1) !important;
    }

    /* Contatos: seta afastada do texto e centrada na altura da linha */
    .layer.layer__dark .contact .contact_link {
        padding-left: 1.9rem !important;
    }
}