/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-brown: #8B4513;
    --light-brown: #DEB887;
    --dark-brown: #5C2E0B;
    --accent-green: #9ACD32;
    --accent-blue: #4A90E2;
    --neutral-gray: #6B7280;
    --light-background: #F8FAFC;
    --dark-text: #1F2937;
    --white: #FFFFFF;
    --gold-accent: #FFD700;
    --warm-orange: #FF8C42;
}

body {
    font-family: 'Josefin Sans', sans-serif;
    background: linear-gradient(135deg, var(--primary-brown) 0%, var(--dark-brown) 50%, #3C1810 100%);
    position: relative;
}

html, body {
    width: 100%;
    height: 100%;
}

/* Sophisticated Background System */
.background-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

/* Animated Gradient Orbs */
.floating-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    animation: floatingOrb 15s ease-in-out infinite;
}

.orb-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(154, 205, 50, 0.3) 0%, rgba(154, 205, 50, 0.1) 40%, transparent 70%);
    top: -20%;
    left: -10%;
    animation-delay: 0s;
}

.orb-2 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.25) 0%, rgba(255, 215, 0, 0.08) 40%, transparent 70%);
    top: 30%;
    right: -15%;
    animation-delay: -5s;
}

.orb-3 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(74, 144, 226, 0.2) 0%, rgba(74, 144, 226, 0.06) 40%, transparent 70%);
    bottom: -25%;
    left: 20%;
    animation-delay: -10s;
}

.orb-4 {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(255, 140, 66, 0.3) 0%, rgba(255, 140, 66, 0.1) 40%, transparent 70%);
    top: 10%;
    right: 30%;
    animation-delay: -7s;
}

@keyframes floatingOrb {
    0%, 100% { 
        transform: translate(0, 0) scale(1); 
        opacity: 0.6;
    }
    25% { 
        transform: translate(30px, -40px) scale(1.1); 
        opacity: 0.8;
    }
    50% { 
        transform: translate(-20px, 30px) scale(0.9); 
        opacity: 0.4;
    }
    75% { 
        transform: translate(40px, 20px) scale(1.05); 
        opacity: 0.7;
    }
}

/* Sophisticated Geometric Pattern */
.geometric-pattern {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(222, 184, 135, 0.08) 2px, transparent 2px),
        radial-gradient(circle at 75% 75%, rgba(154, 205, 50, 0.06) 1px, transparent 1px),
        linear-gradient(45deg, rgba(255, 215, 0, 0.03) 1px, transparent 1px),
        linear-gradient(-45deg, rgba(139, 69, 19, 0.05) 1px, transparent 1px);
    background-size: 80px 80px, 120px 120px, 60px 60px, 60px 60px;
    animation: patternShift 25s linear infinite;
}

@keyframes patternShift {
    0% { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%; }
    100% { background-position: 100% 100%, -100% -100%, 60px 60px, -60px -60px; }
}

/* Elegant Light Rays */
.light-rays {
    position: absolute;
    width: 300%;
    height: 300%;
    top: -100%;
    left: -100%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255, 215, 0, 0.15) 20deg,
        transparent 40deg,
        rgba(154, 205, 50, 0.14) 100deg,
        transparent 120deg,
        rgba(222, 184, 135, 0.16) 180deg,
        transparent 200deg,
        rgba(74, 144, 226, 0.13) 260deg,
        transparent 280deg,
        rgba(255, 140, 66, 0.15) 340deg,
        transparent 360deg
    );
    animation: lightRotation 40s linear infinite;
}

@keyframes lightRotation {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Main Container */
.pause-container {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
}

/* Logo Section with Sophisticated Design */
.logo-section {
    position: relative;
    margin-bottom: 2rem;
    animation: logoEntrance 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes logoEntrance {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.logo {
    width: 120px;
    height: auto;
    filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.3));
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 2;
}

.logo:hover {
    transform: scale(1.05) rotate(2deg);
    filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.4));
}

.logo-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(154, 205, 50, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    animation: logoGlow 3s ease-in-out infinite;
    z-index: 1;
}

@keyframes logoGlow {
    0%, 100% { 
        transform: translate(-50%, -50%) scale(1); 
        opacity: 0.5;
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.2); 
        opacity: 0.8;
    }
}

/* Message Section */
.message-section {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(25px);
    border-radius: 30px;
    padding: 4rem 3rem;
    border: 2px solid rgba(222, 184, 135, 0.3);
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    max-width: 700px;
    width: 100%;
    position: relative;
    animation: messageEntrance 1.8s ease-out 0.5s backwards;
}

@keyframes messageEntrance {
    from {
        opacity: 0;
        transform: translateY(50px);
        filter: blur(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* Sleep Icon Container */
.sleep-icon-container {
    position: relative;
    margin-bottom: 2.5rem;
    display: inline-block;
}

.sleep-icon {
    font-size: 5rem;
    position: relative;
    z-index: 2;
    animation: sleepFloat 2.5s ease-in-out infinite;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));
}

@keyframes sleepFloat {
    0%, 100% { 
        transform: translateY(0) rotate(-2deg); 
    }
    50% { 
        transform: translateY(-10px) rotate(2deg); 
    }
}

.icon-ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border: 2px solid rgba(154, 205, 50, 0.4);
    border-radius: 50%;
    animation: ripple 2s ease-out infinite;
}

@keyframes ripple {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

/* Main Heading */
.main-heading {
    margin-bottom: 2rem;
    line-height: 1.2;
}

.heading-line {
    display: block;
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--light-brown);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    margin-bottom: 0.5rem;
    animation: headingSlide 1s ease-out;
}

.heading-line.accent {
    background: linear-gradient(45deg, var(--accent-green), var(--gold-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 2.2rem;
    animation-delay: 0.3s;
}

@keyframes headingSlide {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Subtitle */
.subtitle-container {
    margin-bottom: 2.5rem;
    position: relative;
}

.subtitle {
    font-size: 1.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.subtitle-underline {
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-green), var(--warm-orange));
    margin: 0 auto;
    border-radius: 2px;
    animation: underlineGrow 2s ease-out 1s backwards;
}

@keyframes underlineGrow {
    from { width: 0; }
    to { width: 80px; }
}

/* Message Content */
.message-content {
    font-size: 1.3rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 2.5rem;
    font-weight: 400;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

/* Contact Info */
.contact-info {
    background: rgba(139, 69, 19, 0.3);
    border: 2px solid rgba(222, 184, 135, 0.4);
    border-radius: 20px;
    padding: 2rem;
    margin-top: 2rem;
    position: relative;
    overflow: hidden;
}

.contact-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-green), var(--gold-accent), var(--warm-orange));
}

.contact-info p {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
}

.contact-info a {
    color: var(--accent-green);
    text-decoration: none;
    font-weight: 700;
    margin-top: 10px;
    position: relative;
    transition: all 0.3s ease;
}

.contact-info a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gold-accent);
    transition: width 0.3s ease;
}

.contact-info a:hover {
    color: var(--gold-accent);
    transform: translateY(-2px);
}

.contact-info a:hover::after {
    width: 100%;
}

/* Floating Particles */
.floating-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--accent-green);
    border-radius: 50%;
    opacity: 0.6;
    animation: particleFloat 8s ease-in-out infinite;
}

.particle:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; }
.particle:nth-child(2) { top: 40%; right: 15%; animation-delay: 2s; }
.particle:nth-child(3) { bottom: 30%; left: 20%; animation-delay: 4s; }
.particle:nth-child(4) { top: 60%; right: 25%; animation-delay: 6s; }

@keyframes particleFloat {
    0%, 100% { 
        transform: translateY(0px) translateX(0px); 
        opacity: 0.6;
    }
    25% { 
        transform: translateY(-30px) translateX(20px); 
        opacity: 1;
    }
    50% { 
        transform: translateY(-60px) translateX(-10px); 
        opacity: 0.4;
    }
    75% { 
        transform: translateY(-30px) translateX(-25px); 
        opacity: 0.8;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .pause-container {
        padding: 1rem;
    }

    .message-section {
        padding: 2.5rem 2rem;
        margin: 0 1rem;
    }

    .logo {
        width: 90px;
    }

    .sleep-icon {
        font-size: 3.5rem;
    }

    .heading-line {
        font-size: 2.2rem;
    }

    .heading-line.accent {
        font-size: 1.8rem;
    }

    .subtitle {
        font-size: 1.5rem;
    }

    .message-content {
        font-size: 1.1rem;
    }

    .contact-info {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    .logo {
        width: 70px;
    }

    .sleep-icon {
        font-size: 3rem;
    }

    .heading-line {
        font-size: 1.8rem;
    }

    .heading-line.accent {
        font-size: 1.5rem;
    }

    .subtitle {
        font-size: 1.3rem;
    }

    .message-content {
        font-size: 1rem;
    }

    .subtitle-underline {
        width: 60px;
    }

    .message-section {
        padding: 2rem 1.5rem;
    }
}