/* Desktop-specific styles */

/* Desktop container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Hide mobile-specific elements on desktop */
.mobile-character-left,
.mobile-character-right,
.mobile-staircase-section {
    display: none !important;
}

/* Landing Section */
.landing {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
}

.landing-content {
    text-align: center;
    z-index: 10;
    animation: fadeInUp 1s ease;
}

.logo-main {
    width: 300px;
    max-width: 80vw;
    margin-bottom: 2rem;
    filter: drop-shadow(0 20px 40px rgba(99, 102, 241, 0.3));
}

.tagline {
    font-size: 2.5rem;
    font-weight: 700;
    background: var(--gradient-1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
    position: relative;
    transition: transform 0.1s ease;
}

.tagline.jittering {
    animation: jitter 0.1s infinite;
}

@keyframes jitter {
    0% { transform: translateX(0); }
    25% { transform: translateX(-2px) translateY(1px); }
    50% { transform: translateX(2px) translateY(-1px); }
    75% { transform: translateX(-1px) translateY(1px); }
    100% { transform: translateX(0); }
}

.subtitle {
    font-size: 1.3rem;
    font-style: italic;
    font-family: 'EB Garamond', 'Noto Serif SC', serif;
    color: var(--light-text);
    opacity: 0.8;
    margin-bottom: 0;
    font-weight: 300;
    letter-spacing: 0.5px;
}

/* Character Animations */
.characters-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: visible;
}

.characters-left, .characters-right {
    position: absolute;
    bottom: 0;
    width: 50%;
    height: 100%;
}

.characters-left {
    left: 0;
}

.characters-right {
    right: 0;
}

.character-main {
    width: 320px;
    height: auto;
    opacity: 0;
    position: absolute;
    transition: all 0.5s ease;
    mask: linear-gradient(to bottom, white 0%, white 70%, transparent 100%);
    -webkit-mask: linear-gradient(to bottom, white 0%, white 70%, transparent 100%);
    visibility: hidden; /* Hide completely until animation starts */
}

/* Prevent animations until images are loaded */
.characters-container.loading .character-main {
    animation: none !important;
    visibility: hidden !important;
}

/* Left side characters - stair-step left-right-left with proper z-ordering */
.characters-container.loaded #char-basil {
    bottom: 45%;
    left: 5%;
    z-index: 1;
    animation: slideInLeft 1s ease 0.2s forwards;
}

.characters-container.loaded #char-dimitri {
    bottom: 25%;
    left: 30%;
    z-index: 2;
    animation: slideInLeft 1s ease 0.4s forwards;
}

.characters-container.loaded #char-kat {
    bottom: 5%;
    left: 15%;
    z-index: 3;
    animation: slideInLeft 1s ease 0.6s forwards;
}

/* Right side characters - stair-step right-left-right with proper z-ordering */
.characters-container.loaded #char-mari {
    bottom: 45%;
    right: 5%;
    z-index: 1;
    width: 260px;
    animation: slideInRight 1s ease 0.3s forwards;
}

.characters-container.loaded #char-random-1 {
    bottom: 25%;
    right: 30%;
    z-index: 2;
    animation: slideInRight 1s ease 0.5s forwards;
}

.characters-container.loaded #char-random-2 {
    bottom: 5%;
    right: 15%;
    z-index: 3;
    animation: slideInRight 1s ease 0.7s forwards;
}

/* Maintain positioning for non-loaded state */
#char-basil {
    bottom: 45%;
    left: 5%;
    z-index: 1;
}

#char-dimitri {
    bottom: 25%;
    left: 30%;
    z-index: 2;
}

#char-kat {
    bottom: 5%;
    left: 15%;
    z-index: 3;
}

#char-mari {
    bottom: 45%;
    right: 5%;
    z-index: 1;
    width: 260px;
}

#char-random-1 {
    bottom: 25%;
    right: 30%;
    z-index: 2;
}

#char-random-2 {
    bottom: 5%;
    right: 15%;
    z-index: 3;
}

/* Floating elements */
.character-floating {
    position: fixed;
    opacity: 0;
    transition: transform 0.3s ease;
    will-change: transform;
}

#char-sprite {
    width: 130px;
    height: auto;
    left: 8%;
    bottom: 15%;
    z-index: 10;
    opacity: 1;
}

#char-six {
    width: 90px;
    height: auto;
    right: 8%;
    bottom: 12%;
    z-index: 10;
    opacity: 1;
}

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

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Demo Section */
.demo-section {
    padding: 5rem 0;
    background: linear-gradient(180deg, transparent 0%, rgba(99, 102, 241, 0.05) 100%);
}

.demo-section h2 {
    text-align: center;
    font-size: 3rem;
    margin-bottom: 3rem;
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 900px;
    margin: 0 auto;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 20px;
}

/* Synopsis Section. Sits up inside the landing's bottom band, hidden until
   the first scroll, then rises into view (see script.js, "Synopsis reveal").
   Hidden is the default state so nothing flashes on load. */
.hero-section {
    position: relative;
    z-index: 5;
    margin-top: -18vh;
    padding: 4rem 0 5rem;
    background: linear-gradient(180deg,
        rgba(15, 15, 26, 0) 0%,
        rgba(15, 15, 26, 0.85) 30%,
        var(--dark-bg) 60%);
    opacity: 0;
    transform: translateY(28px);
}

.hero-section.revealed {
    opacity: 1;
    transform: none;
}

.hero-section.revealed.animate {
    transition: opacity 0.6s ease, transform 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
    .hero-section.revealed.animate {
        transition: none;
    }
}

/* Character Showcase Section */
.character-section {
    padding: 5rem 0;
    background: linear-gradient(180deg, transparent 0%, rgba(139, 92, 246, 0.05) 50%, transparent 100%);
}

.character-section h2 {
    text-align: center;
    font-size: 3rem;
    margin-bottom: 4rem;
}

.character-showcase {
    max-width: 1100px;
    margin: 0 auto;
}

.character-display {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 4rem;
    align-items: center;
    margin-bottom: 3rem;
}

.character-image {
    position: relative;
    border-radius: 20px;
    overflow: visible; /* Keep visible for Chinese names */
    background: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    width: 400px; /* Fixed width for container */
    height: 584px; /* Height maintaining 500:731 aspect ratio */
}

.character-image img {
    width: auto;
    height: 100%; /* Force height to match container */
    min-width: 100%; /* Ensure full coverage */
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the image */
    object-fit: cover; /* Maintain aspect ratio while filling height */
    border-radius: 20px; /* Match container radius */
}

/* Width-based scaling for specific characters like Six app */
.character-image.width-based img {
    width: 100%; /* Force width to match container */
    height: auto !important; /* Let height adjust */
    min-width: 100%; /* Keep full width coverage */
    min-height: unset; /* Remove height constraint */
    object-fit: contain; /* Show full image within bounds */
}

.vertical-chinese-name {
    position: absolute;
    left: -60px;
    top: 10%;
    height: 80%;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-family: 'Ma Shan Zheng', 'Noto Serif SC', serif;
    font-size: 4rem;
    font-weight: 700;
    color: var(--char-accent, var(--accent-color));
    text-shadow: 0 0 20px color-mix(in srgb, var(--char-accent, var(--accent-color)) 50%, transparent);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    z-index: 20;
    letter-spacing: 0.3em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.character-info {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.character-name h3 {
    font-size: 4rem;
    font-weight: 700;
    margin: 0;
    background: var(--gradient-1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.character-name h4 {
    font-size: 2rem;
    font-weight: 900;
    margin: 0.5rem 0 0 0;
    color: var(--secondary-color);
    opacity: 0.9;
    font-family: 'Noto Sans SC', sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--char-accent, var(--accent-color)) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.character-stats {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.character-stats span {
    font-size: 1.1rem;
    color: var(--light-text);
    opacity: 0.8;
}

.character-stats span:last-child {
    font-weight: 600;
    color: var(--char-accent, var(--accent-color));
}

#char-description {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    opacity: 0.9;
}

.char-quotes-container {
    margin-bottom: 2rem;
}

.char-quote {
    font-family: 'Inter', sans-serif;
    font-style: italic;
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--char-accent, var(--accent-color));
    border-left: 2px solid var(--char-accent, var(--accent-color));
    padding-left: 1rem;
    margin: 0 0 0.75rem 0;
    opacity: 0.95;
}

.char-quote:last-child {
    margin-bottom: 0;
}

.character-traits {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.trait {
    background: rgba(99, 102, 241, 0.2);
    color: var(--primary-color);
    padding: 0.5rem 1rem;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 500;
    border: 1px solid rgba(99, 102, 241, 0.3);
}

/* Desktop Character Navigation */
.character-navigation-wrapper {
    position: relative;
    width: 100%;
    max-width: 700px; /* Accommodate 7 tiles comfortably */
    margin: 0 auto;
    overflow: hidden;
}

.gradient-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    pointer-events: none;
    z-index: 10;
    transition: opacity 0.3s ease;
}

.gradient-left {
    left: 0;
    background: linear-gradient(to right, rgba(15, 15, 26, 1) 0%, rgba(15, 15, 26, 0.8) 50%, transparent 100%);
}

.gradient-right {
    right: 0;
    background: linear-gradient(to left, rgba(15, 15, 26, 1) 0%, rgba(15, 15, 26, 0.8) 50%, transparent 100%);
}

.character-navigation {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 0 1rem;
    justify-content: flex-start; /* Align to start for scrolling */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.character-navigation::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.char-nav-btn {
    width: 80px;
    height: 80px;
    min-width: 80px; /* Prevent shrinking */
    border-radius: 15px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    background: var(--card-bg);
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
    padding: 0;
    flex-shrink: 0; /* Prevent flex shrinking */
}

/* Inner frame: clips the portrait independently of the border, so the
   outline stays put while the portrait moves beneath it. */
.char-nav-thumb {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 13px; /* tile radius minus border */
    overflow: hidden;
    clip-path: inset(0 round 13px);
}

.char-nav-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Portraits are tall: keep the face, let the body crop. */
    object-position: 50% 0;
    transform-origin: 50% 20%;
    transition: transform 0.3s ease;
    display: block;
}

.char-nav-btn:hover {
    border-color: var(--primary-color);
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);
}

.char-nav-btn:hover img {
    transform: translateY(-4px) scale(1.08);
}

.char-nav-btn.active {
    border-color: var(--char-accent, var(--accent-color));
    background: color-mix(in srgb, var(--char-accent, var(--accent-color)) 12%, transparent);
    box-shadow: 0 10px 30px color-mix(in srgb, var(--char-accent, var(--accent-color)) 30%, transparent);
}

.hero-description {
    font-family: 'EB Garamond', 'Noto Serif SC', serif;
    font-weight: 400;
    font-size: 1.85rem;
    text-align: center;
    max-width: 750px;
    margin: 0 auto;
    line-height: 2;
    opacity: 0.95;
    letter-spacing: 0.01em;
}

.hero-description em {
    font-style: italic;
}

/* Screenshots Section */
.screenshots-section {
    padding: 5rem 0;
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.05) 0%, transparent 100%);
}

.screenshots-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

.screenshots-carousel {
    position: relative;
}

.screenshot-container {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.screenshot {
    width: 100%;
    height: auto;
    display: none;
}

.screenshot.active {
    display: block;
}

.screenshot-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    background: var(--primary-color);
    transform: scale(1.2);
}

/* Signup Section */
.signup-section {
    padding: 5rem 0;
    text-align: center;
}

.signup-section h2 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
}

.signup-description {
    font-size: 1.25rem;
    max-width: 600px;
    margin: 0 auto 3rem;
    opacity: 0.9;
}

.signup-form {
    display: flex;
    gap: 1rem;
    max-width: 500px;
    margin: 0 auto 2rem;
}

.email-input {
    flex: 1;
    padding: 1rem 1.5rem;
    border-radius: 50px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: white;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.email-input:focus {
    outline: none;
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.1);
}

.signup-button {
    padding: 1rem 2rem;
    border-radius: 50px;
    border: none;
    background: var(--gradient-1);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.signup-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 40px rgba(99, 102, 241, 0.3);
}

.signup-note {
    opacity: 0.7;
    font-size: 0.9rem;
}

/* Footer */
.footer {
    background: rgba(0, 0, 0, 0.5);
    padding: 3rem 0;
    text-align: center;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2rem;
}

.social-link {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1) !important;
    -webkit-text-fill-color: initial !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.social-link:hover {
    background: var(--primary-color) !important;
    transform: translateY(-3px);
}

.social-link svg {
    width: 24px;
    height: 24px;
    fill: white;
}

.footer-text {
    opacity: 0.7;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-200px);
        opacity: 0;
        visibility: visible; /* Make visible when animation starts */
    }
    to {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(200px);
        opacity: 0;
        visibility: visible; /* Make visible when animation starts */
    }
    to {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
    }
}

@keyframes slideInBottomRight {
    from {
        transform: translate(100px, 100px);
        opacity: 0;
    }
    to {
        transform: translate(0, 0);
        opacity: 0.7;
    }
}

/* Desktop styles end here - no mobile media queries needed */
/* Six App Store Card — desktop sizing */
.six-section {
    padding: 1rem 0 2rem;
}

.six-store-card {
    max-width: 640px;
    padding: 2.25rem 2.25rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.six-icon {
    width: 112px;
    height: 112px;
}

.six-title {
    font-size: 2.1rem;
}

.six-subtitle {
    font-size: 1.05rem;
}

.six-pitch {
    font-size: 1.45rem;
}

.six-reviews-head {
    padding-top: 1.5rem;
}

.signup-icon {
    width: 132px;
    height: 132px;
    margin-bottom: 2rem;
}

.character-navigation-row {
    gap: 1rem;
}

.character-navigation-row .character-navigation-wrapper {
    width: auto;
    flex: 0 1 700px;
    margin: 0;
}

.char-nav-arrow {
    width: 44px;
    height: 44px;
}