/* ============================================
   MAIN STYLES - Fundo do Mar Theme
   ============================================ */

/* Reset */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Root Variables */
:root {
    --ocean-deep: #010810;
    --ocean-dark: #021018;
    --ocean-medium: #041825;
    --gold-primary: #d4af37;
    --gold-medium: #b8960c;
    --paper-light: #fef9ec;
    --font-script: 'Great Vibes', cursive;
    --font-display: 'Cinzel', serif;
    --font-body: 'Cormorant Garamond', serif;
}

/* Body */
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body {
    font-family: var(--font-body);
    background: var(--ocean-deep);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    min-height: 100dvh;
}

/* ============================================
   OCEAN BACKGROUND
   ============================================ */

.ocean-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background:
        radial-gradient(ellipse at 50% 0%, #0a4060 0%, transparent 35%),
        radial-gradient(ellipse at 50% 55%, rgba(10, 50, 70, 0.4) 0%, transparent 40%),
        linear-gradient(180deg,
            #052030 0%,
            #041825 25%,
            #031520 50%,
            #021015 75%,
            #010a10 100%);
    overflow: hidden;
    pointer-events: none;
}

/* Raios de luz */
.light-rays {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.light-rays::before {
    content: '';
    position: absolute;
    top: -10%;
    left: 32%;
    width: 120px;
    height: 120%;
    background: linear-gradient(180deg,
        rgba(200, 230, 255, 0.15) 0%,
        rgba(180, 220, 250, 0.1) 20%,
        rgba(150, 200, 240, 0.05) 50%,
        transparent 85%
    );
    transform: rotate(8deg);
    filter: blur(25px);
    animation: rayMove1 12s ease-in-out infinite;
}

.light-rays::after {
    content: '';
    position: absolute;
    top: -10%;
    left: 52%;
    width: 100px;
    height: 120%;
    background: linear-gradient(180deg,
        rgba(200, 230, 255, 0.12) 0%,
        rgba(180, 220, 250, 0.08) 25%,
        rgba(150, 200, 240, 0.04) 55%,
        transparent 85%
    );
    transform: rotate(-5deg);
    filter: blur(30px);
    animation: rayMove2 15s ease-in-out infinite 2s;
}

@keyframes rayMove1 {
    0%, 100% { transform: rotate(8deg) translateX(0); opacity: 0.6; }
    50% { transform: rotate(5deg) translateX(-30px); opacity: 0.8; }
}

@keyframes rayMove2 {
    0%, 100% { transform: rotate(-5deg) translateX(0); opacity: 0.5; }
    50% { transform: rotate(-8deg) translateX(25px); opacity: 0.7; }
}

/* Raios individuais */
.light-ray {
    position: absolute;
    top: -5%;
    width: 80px;
    height: 110%;
    background: linear-gradient(180deg,
        rgba(200, 230, 255, 0.12) 0%,
        rgba(180, 220, 250, 0.08) 30%,
        rgba(150, 200, 240, 0.03) 60%,
        transparent 90%
    );
    pointer-events: none;
    filter: blur(20px);
}

.ray-1 { left: 22%; width: 70px; transform: rotate(12deg); filter: blur(25px); }
.ray-2 { left: 40%; width: 100px; transform: rotate(3deg); filter: blur(35px); }
.ray-3 { left: 48%; width: 90px; transform: rotate(-2deg); filter: blur(30px); }
.ray-4 { left: 60%; width: 75px; transform: rotate(-8deg); filter: blur(28px); }
.ray-5 { left: 70%; width: 60px; transform: rotate(-12deg); filter: blur(22px); }

/* Containers de particulas */
.particles-container,
.golden-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

/* Elementos decorativos - escondidos por padrao */
.seaweed-group,
.seaweed-corner,
.starfish,
.decorative-star,
.shell,
.fish {
    display: none;
}

/* ============================================
   MAIN CONTAINER - LAYOUT SIMPLES
   ============================================ */

.main-container {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    height: 100dvh;
}

/* ============================================
   MONOGRAMA - Desktop only
   ============================================ */

.monogram-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: -100px;
    z-index: 10;
    position: relative;
}

.logo-img {
    max-width: 400px;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 4px 15px rgba(212, 175, 55, 0.5));
    animation: logoFloat 3s ease-in-out infinite;
}

@keyframes logoFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* Base decorativa - Desktop only */
.base-container {
    display: flex;
    justify-content: center;
    margin-top: -250px;
    z-index: 1;
    position: relative;
}

.base-img {
    max-width: 650px;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 40px rgba(0, 0, 0, 0.5));
}

/* ============================================
   RESPONSIVO MOBILE
   ============================================ */

@media (max-width: 768px) {
    .monogram-container {
        display: none;
    }

    .base-container {
        display: none;
    }

    .main-container {
        justify-content: center;
        align-items: center;
        padding: 20px;
    }
}