/* ============================================
   OZ VILLAS - Link in Bio Stylesheet
   Version: 1.0
   Author: Oz Villas
   ============================================ */

/* -----------------------------------------
   CSS Variables / Custom Properties
   ----------------------------------------- */
:root {
    /* Colors */
    --navy: #1a2744;
    --navy-dark: #131c32;
    --navy-light: #243352;
    --gold: #c9a962;
    --gold-light: #dfc07a;
    --cream: #faf9f7;
    --white: #ffffff;
    --text-dark: #2c2c2c;
    --text-muted: #6b7280;
    --glass-white: rgba(255, 255, 255, 0.97);
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s ease;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--navy);
    color: var(--text-dark);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* -----------------------------------------
   Background Styles
   ----------------------------------------- */
.bg-container {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.bg-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, 
        var(--navy) 0%, 
        var(--navy-dark) 50%, 
        var(--navy) 100%
    );
}

.bg-olive-left {
    position: absolute;
    left: -10%;
    top: 5%;
    width: 45%;
    height: 60%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 600"><g fill="none" stroke="%234a5a4a" stroke-width="0.8" opacity="0.35"><path d="M200 50 Q150 100 180 150 Q140 120 160 180 Q120 150 150 220 Q100 200 140 280 Q80 270 130 350 Q60 350 120 420 Q40 430 110 500 Q20 520 100 580"/><ellipse cx="180" cy="80" rx="25" ry="12" transform="rotate(-30 180 80)"/><ellipse cx="150" cy="120" rx="28" ry="13" transform="rotate(-45 150 120)"/><ellipse cx="165" cy="170" rx="26" ry="12" transform="rotate(-25 165 170)"/><ellipse cx="140" cy="230" rx="30" ry="14" transform="rotate(-50 140 230)"/><ellipse cx="125" cy="300" rx="28" ry="13" transform="rotate(-35 125 300)"/><ellipse cx="115" cy="370" rx="32" ry="14" transform="rotate(-55 115 370)"/><ellipse cx="105" cy="450" rx="30" ry="13" transform="rotate(-40 105 450)"/></g></svg>') no-repeat center;
    background-size: contain;
    opacity: 0.7;
    animation: sway 20s ease-in-out infinite;
}

.bg-olive-right {
    position: absolute;
    right: -10%;
    top: 15%;
    width: 45%;
    height: 60%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 600"><g fill="none" stroke="%234a5a4a" stroke-width="0.8" opacity="0.35"><path d="M200 50 Q250 100 220 150 Q260 120 240 180 Q280 150 250 220 Q300 200 260 280 Q320 270 270 350 Q340 350 280 420 Q360 430 290 500 Q380 520 300 580"/><ellipse cx="220" cy="80" rx="25" ry="12" transform="rotate(30 220 80)"/><ellipse cx="250" cy="120" rx="28" ry="13" transform="rotate(45 250 120)"/><ellipse cx="235" cy="170" rx="26" ry="12" transform="rotate(25 235 170)"/><ellipse cx="260" cy="230" rx="30" ry="14" transform="rotate(50 260 230)"/><ellipse cx="275" cy="300" rx="28" ry="13" transform="rotate(35 275 300)"/><ellipse cx="285" cy="370" rx="32" ry="14" transform="rotate(55 285 370)"/></g></svg>') no-repeat center;
    background-size: contain;
    opacity: 0.7;
    animation: sway 25s ease-in-out infinite reverse;
}

.bg-light {
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 120%;
    height: 50%;
    background: radial-gradient(ellipse at center, rgba(201, 169, 98, 0.08) 0%, transparent 70%);
}

/* -----------------------------------------
   Animations
   ----------------------------------------- */
@keyframes sway {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(8px); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.05); opacity: 0.2; }
}

/* -----------------------------------------
   Container
   ----------------------------------------- */
.container {
    position: relative;
    z-index: 10;
    max-width: 420px;
    margin: 0 auto;
    padding: 48px 20px 60px;
    min-height: 100vh;
    min-height: 100dvh;
}

/* -----------------------------------------
   Profile Section
   ----------------------------------------- */
.profile {
    text-align: center;
    margin-bottom: 36px;
    animation: fadeIn 0.8s ease-out;
}

.logo-wrapper {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 24px;
}

.logo-ring {
    position: absolute;
    inset: -6px;
    border: 1.5px solid var(--gold);
    border-radius: 50%;
    opacity: 0.4;
    animation: pulse 3s ease-in-out infinite;
}

.logo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--navy);
    border: 2px solid var(--gold);
    overflow: hidden;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3), 
        inset 0 0 20px rgba(201, 169, 98, 0.1);
}

.logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.brand-name {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 36px;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--white);
    margin-bottom: 8px;
}

.location {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--gold);
    margin-bottom: 14px;
}

.location svg {
    width: 14px;
    height: 14px;
}

.tagline {
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
    max-width: 300px;
    margin: 0 auto;
}

.tagline-features {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

.dot {
    width: 3px;
    height: 3px;
    background: var(--gold);
    border-radius: 50%;
}

/* -----------------------------------------
   Links Section
   ----------------------------------------- */
.links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 40px;
}

.link-item {
    animation: slideUp 0.5s ease-out both;
}

.link-item:nth-child(1) { animation-delay: 0.1s; }
.link-item:nth-child(2) { animation-delay: 0.15s; }
.link-item:nth-child(3) { animation-delay: 0.2s; }
.link-item:nth-child(4) { animation-delay: 0.25s; }
.link-item:nth-child(5) { animation-delay: 0.3s; }

.link {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--glass-white);
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 14px;
    text-decoration: none;
    color: var(--text-dark);
    transition: var(--transition-normal);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.link:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    border-color: rgba(201, 169, 98, 0.3);
}

.link:active {
    transform: translateY(0);
}

/* Link Icons */
.link-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    flex-shrink: 0;
    transition: transform var(--transition-normal);
}

.link:hover .link-icon {
    transform: scale(1.05);
}

.link-icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

.link-icon.home {
    background: linear-gradient(135deg, var(--navy), var(--navy-light));
    color: var(--gold);
}

.link-icon.airbnb {
    background: linear-gradient(135deg, #ff5a5f, #ff385c);
    color: white;
}

.link-icon.airbnb svg {
    width: 22px;
    height: 22px;
}

.link-icon.whatsapp {
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: white;
}

.link-icon.experience {
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    color: var(--navy);
}

/* Link Content */
.link-content {
    flex: 1;
}

.link-title {
    font-weight: 500;
    font-size: 15px;
    color: var(--text-dark);
}

.link-arrow {
    color: var(--text-muted);
    opacity: 0.5;
    transition: var(--transition-normal);
}

.link:hover .link-arrow {
    opacity: 1;
    transform: translateX(3px);
    color: var(--gold);
}

/* -----------------------------------------
   Trust Section
   ----------------------------------------- */
.trust-section {
    text-align: center;
    animation: fadeIn 0.8s ease-out 0.5s both;
}

.trust-badges {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
}

.trust-badge svg {
    width: 12px;
    height: 12px;
    color: var(--gold);
    opacity: 0.85;
    flex-shrink: 0;
}

.trust-dot {
    width: 2px;
    height: 2px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    flex-shrink: 0;
}

.trust-divider {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    margin: 24px auto 0;
}

/* -----------------------------------------
   Social Icons
   ----------------------------------------- */
.social-icons {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 28px;
}

.social-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    transition: var(--transition-normal);
}

.social-icon:hover {
    color: var(--gold);
    transform: translateY(-2px);
}

.social-icon svg {
    width: 18px;
    height: 18px;
}

/* -----------------------------------------
   Responsive Design
   ----------------------------------------- */
@media (max-width: 380px) {
    .container {
        padding: 40px 16px 50px;
    }
    
    .brand-name {
        font-size: 30px;
    }
    
    .logo-wrapper,
    .logo {
        width: 100px;
        height: 100px;
    }
    
    .link {
        padding: 14px 16px;
        gap: 14px;
    }
    
    .link-icon {
        width: 36px;
        height: 36px;
    }
    
    .link-title {
        font-size: 14px;
    }
}

@media (max-width: 340px) {
    .trust-badges {
        gap: 10px;
    }
    
    .trust-badge {
        font-size: 9px;
        gap: 4px;
    }
    
    .trust-badge svg {
        width: 11px;
        height: 11px;
    }
}

/* -----------------------------------------
   Accessibility - Reduced Motion
   ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}