/* ==========================================================================
   Hewth — base.css
   Camada comum a todos os viewports: tokens, tipografia, paleta, correções de
   scroll, scaffolding dos textos revelados e preloader.

   Tudo o que depende de viewport vive em:
     css/mobile.css   -> @media (max-width: 1024px)  telemóvel + tablet
     css/desktop.css  -> @media (min-width: 1025px)  laptop / desktop
   Assim, mexer no mobile nunca afeta o desktop e vice-versa.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
    --hw-ink: #0d0d0d;
    --hw-ink-soft: rgba(13, 13, 13, 0.6);
    --hw-ink-mute: rgba(13, 13, 13, 0.32);
    --hw-ink-ghost: rgba(13, 13, 13, 0.18);
    --hw-accent: #f53636;
    --hw-surface: #e0dede;
    --hw-surface-alt: #c6c6c4;
    --hw-inverse: #000;
    --hw-rule: rgba(13, 13, 13, 0.16);
    --hw-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------------------
   Tipografia
   -------------------------------------------------------------------------- */
@font-face {
    font-family: "Stardos Stencil";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../assets/StardosStencil-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Stardos Stencil";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../assets/StardosStencil-Bold.ttf") format("truetype");
}

html {
    font-family: "Stardos Stencil", sans-serif !important;
}

body {
    font-family: "Stardos Stencil", sans-serif !important;
}

.desc {
    font-family: "Stardos Stencil", sans-serif !important;
}

.body-text,
.display,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6,
p {
    font-family: "Stardos Stencil", sans-serif !important;
    letter-spacing: 0.020em !important;
}

button,
input,
textarea,
select {
    font-family: "Stardos Stencil", sans-serif !important;
}

/* --------------------------------------------------------------------------
   Documento / scroll
   -------------------------------------------------------------------------- */
body:not(.site__template-mobile) .is-animation-loading {
    opacity: 0;
}

body,
html {
    scroll-behavior: unset !important;
    overscroll-behavior-y: none !important;
}

/* Scrollbar escondida (Chrome, Safari, Opera) */
body::-webkit-scrollbar {
    display: none;
}

/* Scrollbar escondida (IE, Edge, Firefox) */
body {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Correções de scroll para visualização offline */
html,
body {
    overflow: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100% !important;
    scroll-behavior: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* O tema usa animações JS para a exibição inicial: forçar visibilidade */
body,
.wrapper,
main,
#__next,
#app,
.page,
.content {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.loader,
.preloader,
.loading,
[class*="loader"],
[class*="preloader"] {
    display: none !important;
    opacity: 0 !important;
}

.word-inner,
.char,
.line,
[data-aos],
[data-scroll],
.hero-text span,
.hero-fade,
[class*="hero"] span {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

.translate-y-full,
.translate-x-full,
.-translate-y-full,
.-translate-x-full,
.translate-y-1\/2,
.-translate-y-1\/2,
.translate-y-\[100\%\],
.translate-y-\[110\%\] {
    transform: none !important;
}

.opacity-0,
[class*="opacity-0"] {
    opacity: 1 !important;
}

.scale-0,
.scale-50,
.scale-75 {
    transform: none !important;
}

html.lenis,
html.lenis-smooth,
body.lenis,
body.lenis-smooth,
.lenis-wrapper,
.lenis-content,
[data-lenis-prevent],
[data-scroll-container] {
    overflow: visible !important;
    height: auto !important;
}

body.flex.items-center,
body.flex.justify-center {
    align-items: flex-start !important;
    min-height: 100vh;
    height: auto !important;
}

main,
#__next,
#__nuxt,
#app,
.main-content {
    overflow: visible !important;
    height: auto !important;
}

/* --------------------------------------------------------------------------
   Paleta
   -------------------------------------------------------------------------- */
html,
body {
    background-color: var(--hw-surface-alt) !important;
    color: var(--hw-ink) !important;
}

.header {
    background-color: var(--hw-surface-alt) !important;
    color: var(--hw-ink) !important;
    --color-link: #0d0d0d !important;
    --color-link-active: #0d0d0d !important;
    mix-blend-mode: normal !important;
}

.header a,
.header .desc,
.header .header_menu_item_link__deep,
.header .header_menu_item_link__active {
    color: var(--hw-ink) !important;
}

.main-layer,
.layer.layer__dark {
    background-color: var(--hw-surface) !important;
    color: var(--hw-ink) !important;
}

.layer.layer__dark .text-dark,
.layer.layer__dark .contact_link,
.layer.layer__dark .sub-content {
    color: var(--hw-ink) !important;
}

/* Logo do sidebar: substituído pelo header (mobile volta a mostrá-lo) */
.header_logo {
    display: none !important;
}

/* Hero "high end": acento vermelho (app.css usa #eb5939 no strong) */
.layer.layer__dark .hero > .hero_content .anim--chars .line strong,
.layer.layer__dark .hero > .hero_content .anim--chars .line strong .char {
    color: var(--hw-accent) !important;
}

/* Âncoras do menu não ficam por baixo do header fixo */
#top,
#about,
#work,
#client,
#contact {
    scroll-margin-top: clamp(4.5rem, 10vw, 6.5rem);
}

/* Kerning do @ com Stardos Stencil */
.contact-email .contact-email-at {
    display: inline-block;
    margin-left: 0.28em;
    margin-right: -0.20em;
}

.footer_legal_text {
    color: rgba(13, 13, 13, 0.7);
    font-size: clamp(0.68rem, 1.35vw, 0.8125rem);
    letter-spacing: 0.04em;
    line-height: 1.45;
    margin: 0 auto;
    max-width: 36rem;
}

.contact_legal {
    margin-top: clamp(1.35rem, 3vw, 2rem);
    padding-top: clamp(1rem, 2vw, 1.35rem);
    border-top: 1px solid rgba(13, 13, 13, 0.1);
}

.contact_legal .footer_legal_text {
    margin-left: 0;
    margin-right: 0;
    text-align: left;
    max-width: 34rem;
}

/* --------------------------------------------------------------------------
   Parágrafos revelados no scroll (about / work / client / testimonials)
   Estrutura partilhada: uma camada "base" apagada e uma camada "fill" por
   cima que ganha opacidade caractere a caractere conforme o scroll.
   -------------------------------------------------------------------------- */
.about-scroll-text,
.work-scroll-text,
.client-scroll-text,
.testimonial-scroll-text {
    line-height: 1.06;
    position: relative;
}

.about-scroll-text {
    --about-progress: 0;
}

.work-scroll-text {
    --work-progress: 0;
}

.client-scroll-text {
    --client-progress: 0;
}

.testimonial-scroll-text {
    --testimonial-progress: 0;
}

.about-scroll-text .line,
.work-scroll-text .line,
.client-scroll-text .line,
.testimonial-scroll-text .line {
    display: block;
    text-align: start;
    width: 100%;
}

.about-scroll-base,
.work-scroll-base,
.client-scroll-base,
.testimonial-scroll-base {
    color: var(--hw-ink-ghost);
    position: relative !important;
    z-index: 1;
}

.about-scroll-base strong,
.work-scroll-base strong,
.client-scroll-base strong {
    color: var(--hw-ink-ghost);
}

.testimonial-scroll-base b,
.testimonial-scroll-base strong {
    color: var(--hw-accent);
}

.about-scroll-fill,
.work-scroll-fill,
.client-scroll-fill,
.testimonial-scroll-fill {
    color: var(--hw-ink);
    left: 0;
    position: absolute !important;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 2;
}

.about-scroll-fill .line,
.work-scroll-fill .line,
.client-scroll-fill .line,
.testimonial-scroll-fill .line {
    display: block;
    text-align: start;
    white-space: nowrap;
    width: 100%;
}

.about-base-char,
.about-fill-char,
.work-base-char,
.work-fill-char,
.client-base-char,
.client-fill-char,
.testimonial-base-char,
.testimonial-fill-char {
    display: inline;
    vertical-align: baseline;
}

.about-fill-char,
.work-fill-char,
.client-fill-char,
.testimonial-fill-char {
    opacity: 0;
}

.about-scroll-fill strong,
.work-scroll-fill strong,
.client-scroll-fill strong,
.testimonial-scroll-fill b,
.testimonial-scroll-fill strong {
    color: var(--hw-accent);
}

/* --------------------------------------------------------------------------
   Preloader
   -------------------------------------------------------------------------- */
.page-loading_start,
.page-loading_text,
.page-loading_text b {
    color: var(--hw-inverse) !important;
}

.page-loading_start {
    background-color: transparent !important;
    border: 1px solid #000 !important;
    border-color: #000 !important;
    overflow: hidden;
    cursor: pointer;
    transition:
        border-color 0.45s var(--hw-ease),
        box-shadow 0.5s var(--hw-ease),
        background-color 0.4s ease;
}

.page-loading_start::before {
    content: "";
    position: absolute;
    inset: -1px;
    background: linear-gradient(115deg,
            transparent 38%,
            rgba(255, 255, 255, 0.42) 50%,
            transparent 62%);
    transform: translateX(-130%);
    opacity: 0;
    transition:
        transform 0.7s var(--hw-ease),
        opacity 0.3s ease;
    pointer-events: none;
    z-index: 0;
}

.page-loading_start:hover::before {
    transform: translateX(130%);
    opacity: 1;
}

.page-loading_start_label {
    position: relative;
    z-index: 1;
    display: inline-block;
}

.page-loading:not(.is-booting) .page-loading_start_label {
    animation: page-loading-start-label-in 0.95s var(--hw-ease) 0.15s both;
}

@keyframes page-loading-start-label-in {
    0% {
        opacity: 0;
        filter: blur(5px);
    }

    100% {
        opacity: 1;
        filter: blur(0);
    }
}

.page-loading_start:hover {
    border-color: var(--hw-accent) !important;
    box-shadow:
        0 0 0 1px rgba(245, 54, 54, 0.12),
        0 12px 32px rgba(0, 0, 0, 0.1);
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.page-loading_start:hover .page-loading_start_label {
    color: var(--hw-accent) !important;
    transition: color 0.35s ease;
}

.page-loading_start:focus-visible {
    outline: 2px solid var(--hw-accent);
    outline-offset: 3px;
}

/* Fase inicial: contador 0–100% antes do logo / Iniciar */
.page-loading.is-booting .js-page-loading_inner {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.js-page-loading_inner {
    transition:
        opacity 0.55s ease,
        visibility 0.55s ease;
}

.page-loading_boot {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    text-align: center;
    transition:
        opacity 0.45s ease,
        visibility 0.45s ease;
}

.page-loading_boot.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.page-loading_boot_label {
    margin: 0;
    font-size: clamp(0.85rem, 2.5vw, 1rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--hw-ink);
}

.page-loading_boot_pct {
    margin: 0;
    font-size: clamp(2.5rem, 10vw, 4rem);
    line-height: 1;
    color: var(--hw-ink);
    font-variant-numeric: tabular-nums;
}

.page-loading_boot_track {
    width: min(18rem, 78vw);
    height: 4px;
    border-radius: 999px;
    background: rgba(13, 13, 13, 0.12);
    overflow: hidden;
}

.page-loading_boot_fill {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: var(--hw-ink);
    transition: width 0.05s linear;
}

.page-loading_notice {
    position: absolute;
    left: 50%;
    top: calc(100% + 0.9rem);
    transform: translateX(-50%);
    width: min(42rem, 88vw);
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: clamp(0.78rem, 1.55vw, 0.95rem);
    line-height: 1.45;
    color: rgba(13, 13, 13, 0.78);
    pointer-events: none;
}

#page-loading_logo,
.page-loading_logo img {
    width: clamp(280px, 62vmin, 620px) !important;
    height: auto !important;
    max-width: min(96vw, 680px) !important;
    display: block;
}

@media (prefers-reduced-motion: reduce) {

    .page-loading_start,
    .page-loading_start::before,
    .page-loading_start_label,
    .page-loading:not(.is-booting) .page-loading_start_label {
        animation: none !important;
        transition: none !important;
    }

    .page-loading_start::before {
        display: none;
    }

    .page-loading_start_label {
        opacity: 1;
        filter: none;
    }
}