/*
  Vividly Wanted Studio: shared styles (glassmorphism).
  KNOWN LIMITATION: backdrop-filter (the frosted-glass blur) is not supported by very old
  browsers. There the panels fall back to a semi-transparent tint, which is still readable.
*/

body {
    background-color: #06071B;
    color: #E2E8F0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
}

/* ---------- Colour orbs behind the glass (fixed, so the glass always has colour to blur) ---------- */
.bg-orbs {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}
.orb { position: absolute; border-radius: 50%; will-change: transform; }
.orb-1 {
    width: max(60vw, 380px); height: max(60vw, 380px); left: -16vw; top: -18vw;
    background: radial-gradient(circle, rgba(224, 0, 108, .62), rgba(224, 0, 108, 0) 68%);
    animation: drift-a 26s ease-in-out infinite;
}
.orb-2 {
    width: max(50vw, 340px); height: max(50vw, 340px); right: -14vw; top: 6vh;
    background: radial-gradient(circle, rgba(255, 138, 61, .5), rgba(255, 138, 61, 0) 68%);
    animation: drift-b 30s ease-in-out infinite;
}
.orb-3 {
    width: max(64vw, 420px); height: max(64vw, 420px); left: 18vw; bottom: -26vw;
    background: radial-gradient(circle, rgba(120, 36, 150, .85), rgba(87, 16, 106, 0) 68%);
    animation: drift-a 34s ease-in-out infinite reverse;
}
.orb-4 {
    width: max(30vw, 240px); height: max(30vw, 240px); right: 16vw; bottom: 4vh;
    background: radial-gradient(circle, rgba(255, 220, 82, .32), rgba(255, 220, 82, 0) 68%);
    animation: drift-b 22s ease-in-out infinite reverse;
}
@keyframes drift-a { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(5vw, 4vh); } }
@keyframes drift-b { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-5vw, 5vh); } }

/* ---------- Glass surfaces ---------- */
.glass-panel {
    background: linear-gradient(135deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .04));
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, .2);
    box-shadow: 0 10px 40px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .28);
    transition: border-color .3s ease, background .3s ease, box-shadow .3s ease, transform .3s ease;
}
.glass-panel:hover { border-color: rgba(255, 255, 255, .32); }

.glass-nav {
    background: rgba(255, 255, 255, .06);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    backdrop-filter: blur(22px) saturate(170%);
    border-bottom: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
}

.glass-footer {
    background: rgba(255, 255, 255, .04);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.glass-btn {
    background: rgba(255, 255, 255, .1);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .25);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
    transition: background .3s ease, transform .3s ease;
}
.glass-btn:hover { background: rgba(255, 255, 255, .2); transform: translateY(-2px); }

.glass-input {
    width: 100%;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .2);
    color: #fff;
    border-radius: 14px;
    padding: .8rem 1rem;
    font-size: .875rem;
    outline: none;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
    transition: border-color .25s ease, background .25s ease;
}
.glass-input::placeholder { color: rgba(203, 213, 225, .6); }
.glass-input:focus { border-color: #FF8A3D; background: rgba(255, 255, 255, .13); }
select.glass-input option { background: #0D0F2D; color: #fff; }

/* Fallback when backdrop-filter is missing */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass-panel, .glass-nav, .glass-footer, .glass-btn { background: rgba(13, 15, 45, .88); }
}

/* ---------- Text and buttons ---------- */
.text-gradient {
    background: linear-gradient(90deg, #FFDC52 0%, #FF8A3D 30%, #E0006C 70%, #B04BD6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.btn-gradient {
    background: linear-gradient(135deg, #FF8A3D 0%, #E0006C 55%, #7A1E96 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 24px rgba(224, 0, 108, .3);
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
}
.btn-gradient:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 28px rgba(224, 0, 108, .55);
    transform: translateY(-2px);
}

/* ---------- Cards and animation ---------- */
.project-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 138, 61, .55);
    box-shadow: 0 18px 44px -10px rgba(224, 0, 108, .35), inset 0 1px 0 rgba(255, 255, 255, .3);
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(2deg); }
}
.animate-float { animation: float 6s ease-in-out infinite; }

/* Placeholder slot for your own screenshots */
.shot-placeholder {
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 138, 61, .55), transparent 55%),
        linear-gradient(135deg, #57106A 0%, #0A0C38 100%);
}

/* Respect visitors who ask their device to reduce motion */
@media (prefers-reduced-motion: reduce) {
    .orb, .animate-float, .animate-ping { animation: none !important; }
    .project-card, .btn-gradient, .glass-btn, .glass-panel { transition: none; }
    html { scroll-behavior: auto; }
}

/* ---------- Transparent logo: soft light rim so its dark bars stay visible on dark glass ---------- */
.logo-img {
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, .55)) drop-shadow(0 0 8px rgba(255, 255, 255, .15));
}

/* ---------- Sliding gallery under each project ---------- */
.gallery-item { flex: 0 0 78%; min-width: 0; }
@media (min-width: 640px) { .gallery-item { flex-basis: calc((100% - 1.5rem) / 3); } }
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.gallery { cursor: grab; }
.gallery img, .gallery video { -webkit-user-drag: none; user-select: none; }
.gallery.dragging { scroll-snap-type: none !important; scroll-behavior: auto !important; cursor: grabbing; }
.gallery.dragging * { pointer-events: none; }