/* style.css */

@font-face {
    font-family: 'Ubuntu';
    src: url('fonts/Ubuntu/Ubuntu-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Ubuntu';
    src: url('fonts/Ubuntu/Ubuntu-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Ubuntu';
    src: url('fonts/Ubuntu/Ubuntu-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Ubuntu';
    src: url('fonts/Ubuntu/Ubuntu-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

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

/* Reglas Base */
body {
    background-color: #F2E8DF;
    /* Ivory */
    color: #5D4037;
    /* Cocoa */
    background-image: radial-gradient(#A4A05D 0.5px, transparent 0.5px);
    background-size: 20px 20px;
    background-attachment: fixed;
}

.brand-font {
    font-family: 'Playfair Display', serif;
}

.text-shadow-sm {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.text-shadow-md {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Ocultar Scrollbars pero permitir funcionalidad */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}


/* --- BOTONES LATERALES VERTICALES --- */

.side-btn {
    padding: 20px 0;
    position: relative;
    transition: transform 0.4s ease;
}

/* Al hacer hover en el botón lateral, escala ligeramente */
.side-btn:hover {
    transform: scale(1.05);
}

/* Texto vertical lado izquierdo (lectura abajo->arriba) */
.vertical-text {
    white-space: nowrap;
    cursor: pointer;
    /* Color base visible */
}

/* Texto vertical lado derecho (lectura arriba->abajo) */
.vertical-text-rl {
    white-space: nowrap;
    cursor: pointer;
    /* Color base visible */
}

/* Efecto de brillo al hacer hover en el texto */
.group:hover .vertical-text,
.group:hover .vertical-text-rl {
    text-shadow: 0 0 20px rgba(216, 191, 216, 0.6);
    /* Brillo Lilac */
}


/* --- ANIMACIÓN CENTRAL --- */

/* Animación de parpadeo suave para el cambio de palabra */
@keyframes textFadeInOut {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    10% {
        opacity: 1;
        transform: translateY(0);
    }

    90% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* Clase para aplicar si quisiéramos animación CSS pura, 
   pero usaremos JS para control total */

/* ======================================================= */
/* LOGICA DEL CURSOR PERSONALIZADO (WEB)                   */
/* ======================================================= */

/* El elemento visual del cursor */
.wink-cursor {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    font-size: 2rem;
    line-height: 1;
    transform: translate(-50%, -50%);
    z-index: 9999;
    transition: transform 0.1s ease-out;
    user-select: none;
    /* Solo visible por defecto en Web. En móviles se oculta abajo */
}

.wink-cursor.clicking {
    transform: translate(-50%, -50%) scale(0.8) rotate(-10deg);
}

/* Forzar ocultación del cursor nativo SOLO en Web */
body.platform-web,
body.platform-web a,
body.platform-web button,
body.platform-web input,
body.platform-web select,
body.platform-web textarea,
body.platform-web .cursor-pointer {
    cursor: none !important;
}

/* ======================================================= */
/* ADAPTACIONES MÓVILES (iOS + ANDROID)                    */
/* ======================================================= */

/* REGLAS COMUNES APP (iOS y Android) */
body.platform-ios,
body.platform-android {
    /* Restaurar cursor nativo (invisible en táctil) */
    cursor: auto !important;
}

/* Ocultar cursor personalizado en apps */
body.platform-ios .wink-cursor,
body.platform-android .wink-cursor {
    display: none !important;
}

/* Restaurar punteros en elementos interactivos para Apps */
body.platform-ios a,
body.platform-android a,
body.platform-ios button,
body.platform-android button,
body.platform-ios input,
body.platform-android input,
body.platform-ios select,
body.platform-android select {
    cursor: auto !important;
}

/* ======================================================= */
/* ANIMACIÓN DE FONDO AMBIENTAL (Zen & Fresh)              */
/* ======================================================= */

.ambient-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: -1;
    pointer-events: none;
}

@keyframes floatLeftToRight {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }

    50% {
        transform: translate(100px, -50px) rotate(180deg) scale(1.2);
    }

    100% {
        transform: translate(0, 0) rotate(360deg) scale(1);
    }
}

@keyframes floatRightToLeft {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }

    50% {
        transform: translate(-100px, 50px) rotate(-180deg) scale(1.2);
    }

    100% {
        transform: translate(0, 0) rotate(-360deg) scale(1);
    }
}

@keyframes floatCenter {
    0% {
        transform: scale(1) translate(0, 0);
    }

    50% {
        transform: scale(1.3) translate(20px, -20px);
    }

    100% {
        transform: scale(1) translate(0, 0);
    }
}

.ambient-shape {
    position: absolute;
    filter: blur(60px);
    /* Menos blur para ver mejor el movimiento */
    opacity: 0.6;
    border-radius: 50%;
    mix-blend-mode: multiply;
}

.shape-1 {
    top: 10%;
    left: 10%;
    width: 60vw;
    height: 60vw;
    background: #A4A05D;
    /* Olive */
    animation: floatLeftToRight 20s infinite ease-in-out;
}

.shape-2 {
    bottom: 10%;
    right: 10%;
    width: 55vw;
    height: 55vw;
    background: #5D4037;
    /* Cocoa */
    animation: floatRightToLeft 25s infinite ease-in-out;
    opacity: 0.5;
}

.shape-3 {
    top: 35%;
    left: 35%;
    width: 40vw;
    height: 40vw;
    background: #E1C699;
    /* Sand */
    animation: floatCenter 15s infinite ease-in-out;
    opacity: 0.4;
}