/**
 * Layout Styles
 * 
 * Contains styles for:
 * - Container layouts
 * - Screen transitions
 * - Responsive adjustments
 */

/* Main container layout */
.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Screen transitions */
.screen-transition {
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.screen-transition.hidden {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}

/* Story container layout */
#storyContainer {
    position: relative;
    transition: opacity 0.5s ease-in-out;
    padding-top: 15px;
    /* Add padding for content to not overlap with accent line */
    padding-bottom: 40px;
    /* Extra padding at bottom for better scrolling */
    background: transparent;
    overflow: visible;
}

#storyContainer.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Prevent scroll anchoring from nudging the viewport during streaming */
#storyContent {
    overflow-anchor: none;
}

/* Create the curved-down effect at the top edges */
#storyContainer::before {
    content: "";
    position: absolute;
    top: -15px;
    left: -5%;
    right: -5%;
    height: 30px;
    background: transparent;
    border-radius: 50%;
    z-index: 1;
}

/* Paper fold effect at the top */
#storyContainer::after {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(to right,
            transparent 0%,
            rgba(139, 120, 93, 0.1) 20%,
            rgba(139, 120, 93, 0.2) 50%,
            rgba(139, 120, 93, 0.1) 80%,
            transparent 100%);
    box-shadow:
        0 1px 2px rgba(139, 120, 93, 0.1),
        0 -1px 1px rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    opacity: 0.8;
    z-index: 2;
}

/* Paper-like story container styling */
#storyContainer .bg-white {
    background: var(--color-paper-base) !important;
    box-shadow:
        0 4px 20px var(--color-paper-shadow),
        0 1px 3px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(139, 120, 93, 0.15);
    position: relative;
    z-index: 1;
}

/* Paper texture on story container */
#storyContainer .bg-white::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 2px 2px, rgba(139, 120, 93, 0.03) 1px, transparent 0),
        linear-gradient(90deg, transparent 39px, rgba(139, 120, 93, 0.02) 40px, transparent 41px);
    background-size: 40px 40px, 40px 20px;
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
}

/* Override body background to use paper theme */
body {
    background: var(--color-bg-secondary) !important;
    min-height: 100vh;
}

/* Responsive adjustments */
@media (max-width: 768px) {

    /* Make the app title area blend with content */
    h1.text-4xl {
        background: transparent;
        padding: 1rem 1rem 0.5rem;
        margin: 0;
    }

    /* Container styling for seamless experience */
    .container {
        padding: 0;
    }

    /* Mobile-specific story container adjustments */
    #storyContainer {
        margin-top: 0;
        background: transparent;
        /* restore default bottom padding */
        padding-bottom: 40px;
    }

    .swipe-tip {
        display: block;
        text-align: center;
        margin-bottom: 1rem;
        color: #6b7280;
        font-size: 0.875rem;
    }

    .hand {
        display: inline-block;
        animation: point 1.5s infinite;
    }
}

@media (min-width: 769px) {
    .swipe-tip {
        display: none;
    }
}

/* Animation for the hand pointer */
@keyframes point {
    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(10px);
    }

    100% {
        transform: translateX(0);
    }
}