* { margin: 0; padding: 0; box-sizing: border-box; }

body.no-scroll {
    background-color: #FCE6C6;
    font-family: "Tilt Warp", sans-serif;
    overflow: hidden;
    height: 100vh; width: 100vw;
}

/* --- ORIENTATION WARNING --- */
#orientation-warning {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: #FCE6C6; z-index: 9999;
    display: none; align-items: center; justify-content: center;
    text-align: center; padding: 20px;
}
@media (orientation: portrait), (max-width: 1100px) { #orientation-warning { display: flex; } }

/* --- BACKGROUND & ZONES --- */
#bg-image-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1; overflow: hidden; }
#hero-image { width: 100%; height: 100%; object-fit: cover; transform-origin: center center; }

.project-zone { 
    position: absolute; cursor: pointer; display: none; z-index: 20; 
    /* background: rgba(255,0,0,0.2); */ /* Uncomment this to see the zones while positioning */
}

/* ADJUST THESE TO MATCH YOUR IMAGE */
#zone-gossip  { top: 75%; left: 23%; width: 10%; height: 10%; }
#zone-aspoc   { top: 10%; left: 24%; width: 15%; height: 15%; }
#zone-tales   { top: 5%; left: 52%; width: 12%; height: 25%; }
#zone-ux      { top: 70%; left: 70%; width: 15%; height: 20%; }
#zone-pokemon { top: 55%; left: 24%; width: 10%; height: 12%; }
#zone-six     { top: 15%; left: 70%; width: 15%; height: 25%; }

/* --- TOOLTIP --- */
#project-tooltip {
    position: fixed; display: none; background: #451501; color: white;
    padding: 8px 15px; border-radius: 20px; font-size: 16px;
    pointer-events: none; z-index: 100; transform: translate(15px, 15px);
}

/* --- SCROLL ARROWS --- */
.scroll-indicator {
    position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; transition: opacity 0.5s;
}
.scroll-indicator span {
    display: block; width: 20px; height: 20px;
    border-bottom: 3px solid #BF492D; border-right: 3px solid #BF492D;
    transform: rotate(45deg); margin: -5px;
    animation: arrowScroll 2s infinite;
}
.scroll-indicator span:nth-child(2) { animation-delay: -0.2s; }

@keyframes arrowScroll {
    0% { opacity: 0; transform: rotate(45deg) translate(-10px, -10px); }
    50% { opacity: 1; }
    100% { opacity: 0; transform: rotate(45deg) translate(10px, 10px); }
}

/* --- UI BASICS (The Rest) --- */
#screen-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; z-index: 10; pointer-events: none; }
#landing-page-ui { width: 100vw; height: 100vh; background-color: #FCE6C6; pointer-events: auto; position: relative; transform-origin: center center; }
.main-viewport { display: flex; width: 100%; height: 100%; }
.left-pane { width: 50%; display: flex; align-items: flex-start; justify-content: flex-end; padding-top: 150px; padding-right: 40px; }
#hello-text { color: #BF492D; font-size: 248px; letter-spacing: -12.4px; white-space: nowrap; transition: opacity 0.4s; }
.right-pane { width: 50%; display: flex; align-items: flex-start; padding-top: 100px; padding-left: 40px; }
.phrase-container { max-width: 600px; line-height: 1.05; }
.phrase { display: inline; opacity: 0; position: relative; top: 50px; margin-right: 12px; transition: opacity 0.8s; }
.p1 { color: #451501; font-size: 76px; } .p2 { color: #862E1A; font-size: 50px; } .p3 { color: #BF492D; font-size: 40px; } .p4 { color: #ED5D3B; font-size: 30px; } .p5 { color: #FF7858; font-size: 25px; }
.dock-container { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.5s; }
.dock-container.visible { opacity: 1; }
.dock-label { font-family: "Gochi Hand", cursive; font-size: 24px; margin-bottom: 5px; }
.dock-bar-image { width: 961px; height: 85px; background: url('dock-bg.png') no-repeat center; background-size: contain; }
/* --- MODAL OVERLAY --- */
#modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(69, 21, 1, 0.4); 
    backdrop-filter: blur(3.1px);
    z-index: 500; display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.4s;
}

#modal-overlay.visible { opacity: 1; pointer-events: auto; }

#modal-container {
    width: 85vw;
    max-width: 1200px; /* Adjust max width as needed for your big images */
    height: 85vh; /* Fixed height relative to viewport */
    max-height: 900px;
    background: #FCE6C6; 
    border-radius: 30px; /* Slightly smaller radius for a cleaner look with full images */
    position: relative; 
    /* Padding around the image content */
    padding: 50px 30px 30px 30px; 
    display: flex; flex-direction: column;
    box-shadow: 0 30px 60px rgba(0,0,0,0.3);
}

#modal-close {
    position: absolute; top: 15px; right: 25px;
    font-size: 40px; color: #862E1A; cursor: pointer; z-index: 10;
    line-height: 1;
}

/* THE SCROLLING AREA */
#modal-scroll-area {
    flex: 1; /* Takes remaining height in container */
    overflow-y: auto; /* Enables vertical scrolling for long images */
    overflow-x: hidden;
    width: 100%;
    /* Optional: adds a little space between scrollbar and image */
    padding-right: 10px; 
}

/* Custom Scrollbar styling to match your theme */
#modal-scroll-area::-webkit-scrollbar { width: 8px; }
#modal-scroll-area::-webkit-scrollbar-track { background: transparent; }
#modal-scroll-area::-webkit-scrollbar-thumb { background: #862E1A; border-radius: 10px; border: 2px solid #FCE6C6; }

/* THE BIG PROJECT IMAGE */
#modal-img {
    width: 100%; /* Forces image to fit container width */
    height: auto; /* Maintains aspect ratio */
    display: block;
    border-radius: 10px; /* Optional: slight rounding on the image itself */
}

/* --- KEEP YOUR ZONE POSITIONS BELOW THIS LINE --- */
/* Updated Zone Positions from your tests */
#zone-gossip  { top: 75%; left: 23%; width: 10%; height: 10%; }
/* ... etc ... */
/* --- STRICT SCROLL LOCK --- */
html.modal-open, body.modal-open {
    overflow: hidden !important;
    height: 100vh !important;
    padding-right: 15px; /* Prevent layout shift */
}

/* --- ANASTASIA: VIDEO ON TOP OF IMAGE --- */
.anastasia-wrapper {
    position: relative; /* Essential for absolute positioning inside */
    width: 100%;
    display: block;
}

.anastasia-base-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}

/* CHANGE THESE VALUES TO MOVE THE VIDEO */
.anastasia-video-overlay {
    position: absolute;
    /* --- POSITIONING VARIABLES --- */
    top: 15%;    /* Distance from top of the image */
    left: 55%;   /* Distance from left of the image */
    width: 40%;  /* Width relative to the image */
    /* ----------------------------- */
    
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    z-index: 10;
    object-fit: cover;
}

/* --- ASPOC & GENERIC STYLES --- */
.project-content-wrapper {
    display: flex; flex-direction: column; gap: 30px; width: 100%;
}

.aspoc-layout {
    color: #451501; font-family: "Tilt Warp", sans-serif;
}
.aspoc-header {
    margin-bottom: 40px; border-bottom: 2px solid #862E1A; padding-bottom: 20px;
}
.aspoc-title { font-size: 64px; color: #862E1A; line-height: 1; margin-bottom: 10px; }
.aspoc-subtitle { font-size: 24px; opacity: 0.8; }

.aspoc-section { margin-bottom: 40px; }
.aspoc-section h3 { font-size: 32px; color: #862E1A; margin-bottom: 15px; }
.aspoc-section p { font-size: 20px; line-height: 1.5; margin-bottom: 20px; max-width: 800px; }

/* ASPOC VIDEO GRID */
.aspoc-video-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 30px;
}

.video-card {
    background: rgba(134, 46, 26, 0.05);
    padding: 15px;
    border-radius: 15px;
    display: flex; flex-direction: column;
}

.video-card p {
    font-size: 18px; color: #862E1A; margin-bottom: 10px; text-align: center;
}

.rounded-video {
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
    box-shadow: 0 5px 15px rgba(69, 21, 1, 0.1);
}

@media (max-width: 900px) {
    .aspoc-video-grid { grid-template-columns: 1fr; }
    .aspoc-title { font-size: 48px; }
}
/* --- AUDIO PLAYER --- */
#audio-container {
    position: fixed; bottom: 30px; left: 30px; z-index: 9999;
    display: flex; align-items: center; gap: 15px;
    background: rgba(252, 230, 198, 0.9);
    padding: 10px 15px; border-radius: 50px;
    box-shadow: 0 5px 15px rgba(69, 21, 1, 0.2);
    border: 2px solid #862E1A;
    transition: opacity 0.3s;
}

#audio-icon {
    width: 24px; height: 24px; color: #862E1A; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
#audio-icon svg { width: 100%; height: 100%; }

/* ICON STATES */
/* Default: Waves visible, X hidden */
.speaker-wave { display: block; }
.speaker-x { display: none; }

/* When class 'muted' is added to #audio-icon */
#audio-icon.muted .speaker-wave { display: none; }
#audio-icon.muted .speaker-x { display: block; }

/* Slider Styling */
#volume-slider {
    -webkit-appearance: none; width: 80px; height: 4px;
    background: #451501; border-radius: 2px; outline: none; cursor: pointer;
}
#volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 14px; height: 14px;
    background: #862E1A; border-radius: 50%;
    cursor: pointer; border: 2px solid #FCE6C6;
}