/* Base styles - fonts, variables, reset, global styles */

/* Font declarations */
@font-face {
    font-family: 'Fredoka One';
    src: url('../fonts/FredokaOne-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-VariableFont_opsz\,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Italic-VariableFont_opsz\,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
}

/* CSS Variables */
:root {
    --dark-intense-brown: #282220;
    --dark-brown-color: #3A3330;
    --light-brown-color: #82746D;
    --figma-color: #F5F5F5;
    --figma-color-rgb: 245, 245, 245;
    --orange-color: #F68B56;
    --dehighlight-color: #B1AEAD;
}

/* Reset default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter';
    -webkit-user-select: none;  /* Safari */
    -ms-user-select: none;      /* IE 10 and IE 11 */
    user-select: none;          /* Standard syntax */
    -webkit-tap-highlight-color: transparent;  /* Remove tap highlight on mobile */
}

/* Allow text selection only in input fields and textareas */
input, textarea {
    -webkit-user-select: text;  /* Safari */
    -ms-user-select: text;      /* IE 10 and IE 11 */
    user-select: text;          /* Standard syntax */
}

/* Remove focus outlines and tap highlights on interactive elements */
button, a, [role="button"], [tabindex]:not([tabindex="-1"]) {
    outline: none;
}

/* But keep outline for keyboard navigation (accessibility) */
button:focus-visible, a:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--orange-color);
    outline-offset: 2px;
}

/* Global animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes blink {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

@keyframes slideUpLogo {
    to {
        transform: translateY(-100vh);
        opacity: 0;
    }
}

@keyframes slideUpCurtain {
    to {
        transform: translateY(-100%);
    }
}

/* Global layout */
html,
body {
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex-direction: column;
    font-family: 'Inter', sans-serif;
    background-color: var(--dark-brown-color);
    color: white;
    font-weight: 250;
}

html {
    font-size: 16px;
}

body {
/* Add space for the fixed navigation */
    flex-direction: column;
    font-family: 'Inter', sans-serif;
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
}

/* Initially hide sections */
.translate-phrases-exercise,
.cards,
.catalog,
.exercises,
.exercises-navigation,
.paraphrase-exercise,
dialog-exercise {
    display: none;
}


/* Add width constraints to prevent overflow */
.natives-phrases,
.welcome-text,
.phrase-rus,
.phrase-eng,
.floating-content,
.final-card-content,
.current-phrase-to-translate {
    max-width: 100%;
    word-wrap: break-word;
}

/* Ensure inputs don't overflow */
.remember-phrases-input,
.translate-phrase-input {
    width: calc(100% - 2rem);
    margin: 0 1rem;
}

.paralax {
    transition: opacity 0.25s ease-in-out;
    opacity: 0.6;
} 

/* Reels video styles */
.reels {
    width: 100vw;
    height: 100vh;
    position: relative;
    z-index: 1;
    overflow: hidden;
    margin-bottom: 2rem;
}

.reels video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.welcome-video {
    /* width: 100vw;
    height: 100vh; */
    position: relative;
    overflow: hidden;
}

.welcome-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;

}

/* Loading Curtain Styles */
.loading-curtain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--figma-color);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-curtain.slide-up {
    animation: slideUpCurtain 0.8s ease-in-out forwards;
}

.loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.loading-logo-wrapper {
    overflow: hidden;
    height: 3.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-logo {
    font-family: 'Fredoka One', sans-serif;
    font-size: 3rem;
    color: var(--dark-brown-color);
    transition: all 0.5s ease-in-out;
}

.loading-logo.slide-up {
    animation: slideUpLogo 1.5s ease-in-out forwards;
}

.loading-progress-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    min-width: 250px;
    transition: opacity 0.5s ease-in-out;
}

.loading-progress-container.fade-out {
    opacity: 0;
}

.loading-progress-bar {
    width: 100%;
    height: 4px;
    background-color: rgba(58, 51, 48, 0.2);
    border-radius: 2px;
    overflow: hidden;
}

.loading-progress-fill {
    height: 100%;
    background-color: var(--dark-brown-color);
    transition: width 0.3s ease-out;
    width: 0%;
}

.loading-percentage {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: var(--dark-brown-color);
    font-weight: 300;
}