/* 
   GLOBAL STYLES
   Think of 'body' as the base class for your entire page. 
   Everything inside inherits these properties unless overridden.
*/
body {
    /* Sets the font family. If 'Plus Jakarta Sans' fails to load, it falls back to generic 'sans-serif' */
    font-family: 'Plus Jakarta Sans', sans-serif;
    /* Makes the page scroll smoothly when clicking anchor links (like #features), instead of jumping instantly */
    scroll-behavior: smooth;
}

/* 
   UTILITY CLASS: .hide-scrollbar
   This is like a helper function to remove scrollbars from specific containers (like the phone screen).
   We use different rules for different browsers (Chrome/Safari vs Firefox/IE).
*/
.hide-scrollbar::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}
.hide-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

/* 
   VISUAL EFFECT: .glass-effect
   Creates a frosted glass look. 
   - background: White with 90% opacity (alpha channel = 0.9).
   - backdrop-filter: Applies a Gaussian blur to whatever is BEHIND this element.
*/
.glass-effect {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
}

/* 
   COMPONENT: .phone-frame
   Defines the physical look of the phone mockup.
   Think of this as the container object for the app demo.
*/
.phone-frame {
    /* Creates a realistic shadow to give depth (x-offset, y-offset, blur, spread, color) */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    
    /* The physical bezel of the phone */
    border: 8px solid #1f2937; /* Dark slate color */
    border-radius: 40px; /* Rounded corners */
    
    /* Clips any content that tries to go outside the rounded corners */
    overflow: hidden;
    
    /* Establishes a local coordinate system for children using 'absolute' positioning */
    position: relative;
    
    background-color: #fff;
    height: 650px;
    width: 340px;
    
    /* Centers the phone horizontally in its parent container */
    margin: 0 auto;
}

/* 
   COMPONENT: .notch
   The black cutout at the top of the phone screen.
*/
.notch {
    /* Positioned relative to the nearest parent with 'position: relative' (the .phone-frame) */
    position: absolute; 
    top: 0;
    
    /* Centering trick: Move to 50% of parent width, then move back 50% of own width */
    left: 50%;
    transform: translateX(-50%);
    
    width: 120px;
    height: 25px;
    background-color: #1f2937; /* Matches border color */
    
    /* Round only the bottom corners */
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    
    /* Z-Index controls the stack order (z-axis). Higher number = closer to the viewer. */
    z-index: 20; 
}

/* 
   STATE MANAGEMENT: .app-screen
   Represents a "View" in the app. By default, all screens are hidden.
*/
.app-screen {
    display: none; /* Hidden by default */
    height: 100%;
    flex-direction: column; /* Stacks children vertically */
    
    /* Applies the 'fadeIn' animation defined below */
    animation: fadeIn 0.3s ease-in-out;
}

/* 
   When the .active class is added via JavaScript, we show the screen.
   This is like toggling visibility in a UI framework.
*/
.app-screen.active {
    display: flex; /* Turns it on and uses Flexbox layout */
}

/* 
   ANIMATION DEFINITION: fadeIn
   Like defining a function that interpolates values over time.
   0% (from) -> 100% (to)
*/
@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: scale(0.98); /* Start slightly smaller */
    }
    to { 
        opacity: 1; 
        transform: scale(1); /* End at full size */
    }
}

/* 
   ANIMATION: Chat Bubbles
   Used for the messages in the chat screen.
   'forwards' means: keep the final state (opacity: 1) after animation ends.
*/
.chat-bubble {
    animation: slideUp 0.4s ease-out forwards;
    opacity: 0; /* Start invisible */
    transform: translateY(20px); /* Start 20px lower */
}

@keyframes slideUp {
    to { 
        opacity: 1; 
        transform: translateY(0); /* Move to original position */
    }
}