@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap');

:root {
    --responsivity-background-color: rgb(255 255 255 / 26%);
    --black-purple: #422F68;
    --light-purple: #8441BA;
    --random-purple: #b979d1;
    --hover-purple: #850fe6; 
    --sakura-pink: #FF98BF;
    --sakura-hover: #fb5695;
    --common-white: #FEEBF1;
    --motion-pink: #E5A6E2;
    --error-red: #ff6b6b;
    --success-green: #6bcf8f;
    --header-height: 78px;
}

@media (max-width: 768px) {
    :root {
        --header-height: 68px;
    }
}

.no-scroll {
    overflow: hidden;
}

@font-face {
  font-family: 'Spell of Asia';
  src: url('/fonts/Spell-of-Asia.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

html,
body {
    width: 100%;
    height: 100vh;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

p {
    margin: 0;
    padding: 0;
}

.parallax-background {
    width: 100%;
    height: 100vh;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.fume-container {
    background-color: rgba(0, 0, 0, 0.425);
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: var(--header-height);
    box-sizing: border-box;
}

/* Acessibilidade: foco visível consistente em toda a aplicação */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--common-white);
    outline-offset: 3px;
    border-radius: 4px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.field-error {
    color: var(--error-red);
    font-size: 0.85rem;
    min-height: 1.1em;
    display: block;
}

.spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 3px solid rgba(255, 255, 255, 0.4);
    border-top-color: var(--common-white);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    vertical-align: middle;
    margin-right: 8px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

@media (max-width: 1024px) {
    .parallax-background {
        background-attachment: scroll;
    }
}

@media (max-width: 768px) {
    html, body {
        height: auto;
        min-height: 100vh;
        overflow-x: hidden;
    }

    .fume-container {
        height: auto;
        min-height: 100vh;
        padding: calc(var(--header-height) + 20px) 16px 20px;
        overflow-x: hidden;
    }

    .parallax-background {
        height: auto;
        min-height: 100vh;
        background-attachment: scroll;
        overflow-x: hidden;
    }
}