/* =====================================================
   ChalcedonX - Scene Animation Styles
   Istanbul street scene with scroll-driven animation
   Color scheme adapted to ChalcedonX palette
   ===================================================== */

/* ── Scene Container ── */
.scroll-container { height: 600vh; position: relative }
.sticky-scene { position: sticky; top: 0; height: 100vh; width: 100%; overflow: hidden }

.scene-full {
    width: 100%; height: 100%; position: relative;
    background: linear-gradient(180deg, #5BA3D9 0%, #7BB8E0 30%, #A8D0E8 60%, #D0E4F0 100%);
}
.scene-full::after {
    content: ''; position: absolute; inset: 0;
    background: repeating-conic-gradient(rgba(0,0,0,.015) 0% 25%, transparent 0% 50%) 0 0/3px 3px;
    pointer-events: none; mix-blend-mode: multiply;
}
.scene-full svg { width: 100%; height: 100% }

/* ── Animated Clouds ── */
@keyframes driftRight { from { transform: translateX(-200px) } to { transform: translateX(1500px) } }
@keyframes driftLeft { from { transform: translateX(1500px) } to { transform: translateX(-200px) } }
.cloud-1 { animation: driftRight 80s linear infinite }
.cloud-2 { animation: driftLeft 110s linear infinite }
.cloud-3 { animation: driftRight 95s linear infinite; animation-delay: -30s }
.cloud-4 { animation: driftLeft 130s linear infinite; animation-delay: -50s }
.cloud-5 { animation: driftRight 100s linear infinite; animation-delay: -70s }

/* ── Animated Seagulls ── */
@keyframes flyRight { from { transform: translateX(-100px) } to { transform: translateX(1600px) } }
@keyframes flyLeft { from { transform: translateX(1400px) } to { transform: translateX(-200px) } }
@keyframes flapWings {
    0%, 100% { d: path("M-8 0 Q-4 -6 0 0 Q4 -6 8 0") }
    50% { d: path("M-8 0 Q-4 3 0 0 Q4 3 8 0") }
}
.gull-1 { animation: flyRight 18s linear infinite }
.gull-2 { animation: flyLeft 22s linear infinite; animation-delay: -5s }
.gull-3 { animation: flyRight 25s linear infinite; animation-delay: -12s }
.gull-4 { animation: flyLeft 20s linear infinite; animation-delay: -8s }
.gull-5 { animation: flyRight 28s linear infinite; animation-delay: -18s }
.gull path { animation: flapWings 1.2s ease-in-out infinite }

/* ── Speech Bubbles ── */
.speech-bubble {
    position: absolute; z-index: 10;
    max-width: 340px; width: 90%;
    background: #FBF8F3;
    border-radius: 18px;
    padding: 1.6rem 1.8rem;
    filter: drop-shadow(0 6px 20px rgba(0,0,0,.14));
    opacity: 0;
    transform: translateY(8px) scale(.96);
    transition: opacity .4s ease, transform .4s ease;
    pointer-events: none;
    will-change: opacity, transform;
}
.speech-bubble.active {
    opacity: 1; transform: translateY(0) scale(1); pointer-events: auto;
}
.speech-bubble.dismissed {
    opacity: 0 !important; transform: translateY(8px) scale(.96) !important; pointer-events: none !important;
}

/* Tail pointing at cart man */
.speech-bubble::after {
    content: ''; position: absolute;
    bottom: -18px;
    left: var(--tail-left, 32px);
    width: 28px; height: 20px;
    background: #FBF8F3;
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}

/* Close button */
.bubble-close {
    position: absolute; top: 10px; right: 12px;
    width: 26px; height: 26px;
    background: rgba(0,0,0,.06); border: none; border-radius: 50%;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 14px; color: #8B8B8B; line-height: 1;
    font-family: 'Outfit', sans-serif; font-weight: 700;
    transition: background .2s, color .2s;
}
.bubble-close:hover { background: rgba(0,0,0,.12); color: #3D3D3D }

/* Bubble content — ChalcedonX themed */
.speech-bubble .section-tag {
    display: inline-block; font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .15em;
    color: #5B8FB9; background: rgba(91,143,185,.08);
    padding: .35rem .9rem; border-radius: 2rem; margin-bottom: 1rem;
}
.speech-bubble h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.3rem, 2.4vw, 1.8rem); font-weight: 700;
    line-height: 1.15; color: #3D3D3D; margin-bottom: .9rem;
}
.speech-bubble p {
    font-size: .9rem; line-height: 1.7; color: #5A5A5A; margin-bottom: 1.2rem;
    font-family: 'Outfit', sans-serif;
}

/* ── CTA Button — ChalcedonX Blue ── */
.cta-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .7rem 1.6rem; background: #5B8FB9; color: #fff;
    border: none; border-radius: .45rem;
    font-family: 'Outfit', sans-serif; font-size: .9rem; font-weight: 600;
    cursor: pointer; transition: background .2s, transform .2s, box-shadow .2s;
    text-decoration: none; box-shadow: 0 3px 10px rgba(91,143,185,.25);
}
.cta-btn:hover {
    background: #4A7A9E; transform: translateY(-2px);
    box-shadow: 0 5px 16px rgba(91,143,185,.35);
}
.cta-btn .arr { transition: transform .2s }
.cta-btn:hover .arr { transform: translateX(3px) }

/* ── Chinese Dragon ── */
.dragon { animation: dragonFly 45s linear infinite; animation-delay: -8s }
@keyframes dragonFly {
    0%, 38% { transform: translateX(-300px); opacity: 0 }
    40% { opacity: .7 }
    60% { opacity: .7 }
    62%, 100% { transform: translateX(1600px); opacity: 0 }
}
.dragon-seg { animation: dragonUndulate 1.2s ease-in-out infinite }
.dragon-seg-2 { animation-delay: .1s }
.dragon-seg-3 { animation-delay: .2s }
.dragon-seg-4 { animation-delay: .3s }
.dragon-seg-5 { animation-delay: .4s }
.dragon-seg-6 { animation-delay: .5s }
@keyframes dragonUndulate {
    0%, 100% { transform: translateY(0) }
    50% { transform: translateY(-4px) }
}
.dragon-head { animation: dragonBob 2s ease-in-out infinite }
@keyframes dragonBob {
    0%, 100% { transform: translateY(0) rotate(0deg) }
    25% { transform: translateY(-2px) rotate(2deg) }
    75% { transform: translateY(2px) rotate(-2deg) }
}

/* ── Bald Eagle ── */
.eagle { animation: eagleFly 55s linear infinite; animation-delay: -20s }
@keyframes eagleFly {
    0%, 68% { transform: translateX(-300px); opacity: 0 }
    70% { opacity: .65 }
    90% { opacity: .65 }
    92%, 100% { transform: translateX(1600px); opacity: 0 }
}
.eagle-wing-l, .eagle-wing-r {
    transform-origin: -2px -35px;
    animation: eagleFlap 1.8s ease-in-out infinite;
}
.eagle-wing-r { animation-direction: reverse }
@keyframes eagleFlap {
    0%, 100% { transform: rotate(0deg) }
    30% { transform: rotate(-12deg) }
    60% { transform: rotate(8deg) }
}

/* ── Italian Shutter Windows ── */
.window { cursor: pointer }
.shutter-l, .shutter-r {
    transform-box: fill-box;
    transition: transform .6s cubic-bezier(.25,.46,.45,.94);
}
.shutter-l { transform-origin: 0% 50% }
.shutter-r { transform-origin: 100% 50% }
.window.open .shutter-l { transform: scaleX(-1) }
.window.open .shutter-r { transform: scaleX(-1) }

/* ── Window Characters ── */
.window-char {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .5s ease, transform .5s ease;
}
.window.open .window-char {
    opacity: 1;
    transform: translateY(0);
}

/* f3-3 sleepy person: eyes swap on open */
.window-person .eye-open { opacity: 0; transition: opacity .3s ease .4s }
.window-person .eye-closed { opacity: 1; transition: opacity .3s ease .4s }
.window.open .window-person .eye-open { opacity: 1 }
.window.open .window-person .eye-closed { opacity: 0 }

/* f3-2 kid waving hand */
.wave-hand {
    transform-origin: 213px 330px;
    transition: transform .3s ease;
}
.window.open .wave-hand {
    animation: waveHand 1s ease-in-out .5s 3;
}
@keyframes waveHand {
    0%, 100% { transform: rotate(0deg) }
    25% { transform: rotate(-15deg) }
    75% { transform: rotate(15deg) }
}

/* Cart man clickable */
#bottomPerson { cursor: pointer }

/* ── Scene Navigation Overlay ── */
.scene-nav-overlay {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity .4s ease;
}
.scene-nav-overlay.visible { opacity: 1; pointer-events: auto }

.scene-nav-menu {
    background: #FBF8F3; border-radius: 20px;
    padding: 2.5rem 2rem 2rem;
    max-width: 360px; width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    transform: translateY(30px) scale(.9);
    transition: transform .4s cubic-bezier(.34,1.56,.64,1);
    position: relative;
}
.scene-nav-overlay.visible .scene-nav-menu { transform: translateY(0) scale(1) }

.scene-nav-menu-close {
    position: absolute; top: 12px; right: 14px;
    width: 30px; height: 30px; background: rgba(0,0,0,.06);
    border: none; border-radius: 50%; cursor: pointer;
    font-size: 16px; color: #8B8B8B;
    font-family: 'Outfit', sans-serif; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, color .2s;
}
.scene-nav-menu-close:hover { background: rgba(0,0,0,.12); color: #3D3D3D }

.scene-nav-menu h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.4rem; font-weight: 700; color: #3D3D3D;
    margin-bottom: 1.2rem; text-align: center;
}

.scene-nav-menu-items { list-style: none; padding: 0; margin: 0 }
.scene-nav-menu-items li { border-bottom: 1px solid rgba(0,0,0,.06) }
.scene-nav-menu-items li:last-child { border-bottom: none }
.scene-nav-menu-items a {
    display: flex; align-items: center; gap: .75rem;
    padding: .9rem .6rem;
    text-decoration: none; color: #3D3D3D;
    font-family: 'Outfit', sans-serif; font-size: 1rem; font-weight: 600;
    transition: background .2s, padding-left .2s;
    border-radius: 8px;
}
.scene-nav-menu-items a:hover { background: rgba(91,143,185,.06); padding-left: 1rem }

.scene-nav-menu-items .nav-icon {
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; flex-shrink: 0;
}
.scene-nav-menu-items .nav-icon.blue { background: rgba(91,143,185,.12); color: #5B8FB9 }
.scene-nav-menu-items .nav-icon.green { background: rgba(125,184,125,.12); color: #7DB87D }
.scene-nav-menu-items .nav-icon.gold { background: rgba(212,165,116,.15); color: #D4A574 }
.scene-nav-menu-items .nav-icon.purple { background: rgba(168,160,196,.12); color: #A8A0C4 }
.scene-nav-menu-items .nav-icon.peach { background: rgba(232,168,124,.12); color: #E8A87C }

/* ── Progress Dots ── */
.progress-dots {
    position: absolute; right: 28px; top: 50%;
    transform: translateY(-50%);
    display: flex; flex-direction: column; gap: 12px;
    z-index: 80; opacity: 0; transition: opacity .4s;
}
.progress-dots.visible { opacity: 1 }
.pdot {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(251,248,243,.5);
    transition: background .3s, transform .3s;
}
.pdot.on { background: #5B8FB9; transform: scale(1.4) }

/* ── Newsletter Form Inside Bubble ── */
.bubble-form-wrapper {
    display: flex; gap: .5rem;
}
.bubble-form-wrapper input[type="email"] {
    flex: 1; min-width: 0;
    padding: .55rem .75rem;
    border: 1.5px solid rgba(91,143,185,.2);
    border-radius: .4rem;
    font-family: 'Outfit', sans-serif;
    font-size: .82rem;
    background: #fff;
    color: #3D3D3D;
    outline: none;
    transition: border-color .2s;
}
.bubble-form-wrapper input[type="email"]:focus {
    border-color: #5B8FB9;
}
.bubble-form-wrapper input[type="email"]::placeholder {
    color: #A8A8A8;
}
.bubble-form-wrapper .cta-btn {
    padding: .55rem 1rem;
    font-size: .8rem;
    white-space: nowrap;
}

.bubble-note {
    font-size: .72rem;
    color: #8B8B8B;
    margin-top: .5rem;
    margin-bottom: 0;
}

/* ── Contact Info Inside Bubble ── */
.bubble-contact-item {
    display: flex; align-items: center; gap: .5rem;
    margin-bottom: .8rem;
    font-size: .88rem;
    color: #5A5A5A;
}
.bubble-contact-item a {
    color: #5B8FB9;
    text-decoration: none;
    transition: color .2s;
}
.bubble-contact-item a:hover { color: #4A7A9E }

/* ── Responsive ── */
@media (max-width: 900px) {
    .speech-bubble { max-width: 280px; padding: 1.2rem 1.4rem }
    .speech-bubble h2 { font-size: clamp(1.1rem, 2vw, 1.5rem) }
    .speech-bubble p { font-size: .84rem }
    .progress-dots { right: 12px }
    .bubble-form-wrapper { flex-direction: column }
}
@media (max-width: 600px) {
    .speech-bubble { max-width: 240px; padding: 1rem 1.2rem }
    .speech-bubble h2 { font-size: 1.1rem }
}