/* ==========================================================================
   Riviera Troncones - "Coming Soon" Landing Page
   ========================================================================== */

:root {
    --bg-color: #ADD8E6;
    --bg-gradient-start: #C5E7F2;
    --bg-gradient-end: #9ECFDF;
    --text-color: #074734;
    --border-color: #074734;
    --border-subtle: rgba(7, 71, 52, 0.25);
    
    --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-subheading: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

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

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    background-color: var(--bg-color);
    background: radial-gradient(circle at center, var(--bg-gradient-start) 0%, var(--bg-color) 60%, var(--bg-gradient-end) 100%);
    color: var(--text-color);
    font-family: var(--font-subheading);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
    padding: 1.5rem;
}

/* --------------------------------------------------------------------------
   Page Container (Viewport Center)
   -------------------------------------------------------------------------- */
.page-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --------------------------------------------------------------------------
   The Circular Container
   -------------------------------------------------------------------------- */
.circle-container {
    /* Responsive sizing maintaining perfect 1:1 aspect ratio across all screen sizes */
    width: min(84vw, 76vh, 520px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    
    /* Luxury styling: crisp dark green border with subtle ambient ring */
    border: 2px solid var(--border-color);
    box-shadow: 
        0 0 0 7px rgba(7, 71, 52, 0.05),
        0 20px 45px rgba(7, 71, 52, 0.08);
    
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    /* Centering all internal elements */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    
    /* Adequate circular padding to ensure text never clips outside circle curves */
    padding: clamp(1.75rem, 11%, 3.5rem);
    position: relative;
    user-select: none;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.circle-container:hover {
    transform: scale(1.015);
    box-shadow: 
        0 0 0 9px rgba(7, 71, 52, 0.08),
        0 26px 55px rgba(7, 71, 52, 0.12);
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
.title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5.2vw, 3.4rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0.03em;
    color: var(--text-color);
    max-width: 90%;
    text-wrap: balance;
}

.accent-divider {
    width: clamp(36px, 10%, 54px);
    height: 1.5px;
    background-color: var(--border-color);
    opacity: 0.65;
    margin: clamp(0.75rem, 3.2%, 1.35rem) 0;
    border-radius: 2px;
}

.subheading {
    font-family: var(--font-subheading);
    font-size: clamp(0.78rem, 2vw, 1.05rem);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-color);
    max-width: 82%;
    text-wrap: balance;
    opacity: 0.95;
}

/* --------------------------------------------------------------------------
   Media Queries & Responsiveness
   -------------------------------------------------------------------------- */

/* Extra small mobile screens */
@media (max-width: 380px) {
    body {
        padding: 0.75rem;
    }

    .circle-container {
        width: min(88vw, 88vh, 320px);
        padding: 1.5rem 1rem;
    }

    .title {
        font-size: 1.75rem;
    }

    .subheading {
        font-size: 0.72rem;
        letter-spacing: 0.11em;
    }
}

/* Landscape orientation on mobile / short viewports */
@media (max-height: 500px) and (orientation: landscape) {
    body {
        padding: 0.5rem;
    }

    .circle-container {
        width: min(78vh, 78vw, 340px);
        padding: 1rem;
    }

    .title {
        font-size: 1.6rem;
    }

    .subheading {
        font-size: 0.7rem;
        letter-spacing: 0.1em;
    }

    .accent-divider {
        margin: 0.4rem 0;
    }
}