/* ==========================================================
   STUDIO PAGE — SELF-CONTAINED STYLESHEET
   Module: /studio/
   Delete this folder to remove all Studio page resources.
   ========================================================== */

/* ── 1. BASE ── */
body { background-color: #050505; color: #ffffff; overflow-x: clip; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* ── 2. GLASS NAV & CARDS ── */
.glass-nav {
    background: rgba(5, 5, 5, 0.7);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.glass-card {
    background: rgba(26, 26, 26, 0.4);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.4s ease-out;
}
.glass-card:hover {
    background: rgba(26, 26, 26, 0.6);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* ── 3. NAV LINK UNDERLINE ── */
.nav-link { position: relative; }
.nav-link::after {
    content: ''; position: absolute; width: 0; height: 1px;
    bottom: 0; left: 50%; background-color: #fff;
    transition: all 0.3s ease; transform: translateX(-50%);
}
.nav-link:hover::after { width: 100%; }

/* ── 4. SCROLL REVEAL ── */
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }
.reveal.active { opacity: 1; transform: translateY(0); }

/* ── 5. PAGE TRANSITION ── */
#page-transition {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: #050505; z-index: 9999;
    display: flex; justify-content: center; align-items: center;
    pointer-events: none; opacity: 1; transition: opacity 0.5s ease-in-out;
}
#page-transition.fade-out { opacity: 0; }
#page-transition.fade-in  { opacity: 1; pointer-events: all; }
#page-transition .brand-text {
    font-size: 2.5rem; font-weight: 700; letter-spacing: 0.1em;
    color: #ffffff; opacity: 0; transform: translateY(10px); transition: all 0.5s ease-out;
}
#page-transition .brand-text.show { opacity: 1; transform: translateY(0); }

/* ── 6. ANIMATIONS ── */
@keyframes blob {
    0%   { transform: translate(0px, 0px) scale(1); }
    33%  { transform: translate(30px, -50px) scale(1.1); }
    66%  { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
}
@keyframes fadeIn {
    0%   { opacity: 0; transform: translateY(4px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ── 7. BEFORE/AFTER MAIN SLIDER ── */
.ba-wrapper {
    position: relative;
    width: 100%;
    max-width: 900px;
    height: 520px;
    margin: 0 auto;
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.8);
    background: #0a0a0a;
    cursor: ew-resize;
}
.ba-base-img, .ba-clip-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center 28%;
    pointer-events: none; user-select: none;
}
.ba-clip-layer {
    position: absolute; inset: 0; width: 100%; height: 100%;
    clip-path: inset(0 0 0 50%); z-index: 3;
}
.ba-divider {
    position: absolute; top: 0; left: 50%; width: 2px; height: 100%;
    background: linear-gradient(to bottom, transparent 0%, #fff 8%, #fff 92%, transparent 100%);
    transform: translateX(-50%); z-index: 5; pointer-events: none;
    box-shadow: 0 0 15px rgba(255,255,255,0.3);
}
.ba-slider-input {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; z-index: 10; cursor: ew-resize; margin: 0;
}
.ba-handle {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); z-index: 8; pointer-events: none;
}
.handle-pill {
    width: 52px; height: 52px; background: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid rgba(255,255,255,0.9);
    box-shadow: 0 0 0 6px rgba(255,255,255,0.08), 0 8px 24px rgba(0,0,0,0.5);
}
.ba-label {
    position: absolute; bottom: 18px; z-index: 6;
    padding: 5px 16px; border-radius: 60px; font-weight: 600; font-size: 0.7rem;
    letter-spacing: 0.1em; background: rgba(0,0,0,0.6); backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.1); pointer-events: none; text-transform: uppercase;
}
.ba-label-left  { left: 20px; color: #999; }
.ba-label-right { right: 20px; color: #fff; }

/* ── 8. MINI BEFORE/AFTER SLIDERS (feature cards) ── */
.mini-ba {
    position: relative; width: 100%; height: 240px;
    border-radius: 0.75rem; overflow: hidden; background: #0a0a0a;
    margin-bottom: 1.25rem; border: 1px solid rgba(255,255,255,0.08);
    cursor: ew-resize;
}
.mini-ba-base, .mini-ba-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center top;
    pointer-events: none; user-select: none;
}
.mini-ba-clip {
    position: absolute; inset: 0; width: 100%; height: 100%;
    clip-path: inset(0 0 0 50%); z-index: 2;
}
.mini-ba-div {
    position: absolute; top: 0; left: 50%; width: 2px; height: 100%;
    background: #fff; transform: translateX(-50%); z-index: 4;
    pointer-events: none; box-shadow: 0 0 8px rgba(255,255,255,0.3);
}
.mini-ba-slider {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: ew-resize; z-index: 8; margin: 0;
}
.mini-ba-handle {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); z-index: 6; pointer-events: none;
}
.mini-handle-pill {
    width: 36px; height: 36px; background: #fff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid rgba(255,255,255,0.8);
    box-shadow: 0 0 0 4px rgba(255,255,255,0.06), 0 4px 14px rgba(0,0,0,0.5);
}
.mini-lbl {
    position: absolute; bottom: 10px; z-index: 5; pointer-events: none;
    font-size: 0.6rem; font-weight: 600; letter-spacing: 0.1em;
    text-transform: uppercase; background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px); padding: 3px 10px;
    border-radius: 60px; border: 1px solid rgba(255,255,255,0.08);
}
.mini-lbl-b { left: 10px; color: #999; }
.mini-lbl-a { right: 10px; color: #fff; }

/* ── 9. RESPONSIVE ── */
@media (max-width: 640px) {
    .ba-wrapper { height: 340px; border-radius: 1.5rem; }
    .handle-pill { width: 44px; height: 44px; }
    .ba-label { font-size: 0.6rem; padding: 4px 12px; }
    .mini-ba { height: 200px; }
}
@media (hover: none) and (pointer: coarse) {
    .ba-slider-input, .mini-ba-slider { opacity: 0.01; }
}

/* ==========================================================
   STUDYPAL LOGO — animated blob mark
   ==========================================================
   Standalone copy of StudyPal's own product mark (studypal.watulab.com
   has no static logo file — its identity IS this CSS animation).
   Duplicated here as plain CSS, not imported/cross-linked, since
   studypal.watulab.com is a separate Next.js app/repo. If the mark
   changes there, this block must be updated by hand to match.
   ========================================================== */
.sp-logo {
    --sp-c1: #ffbf48;
    --sp-c2: #be4a1d;
    --sp-t: 2s;
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    box-shadow:
        0 0 25px 0 #ffbf47a0,
        0 10px 45px 0 #bf4a1d80,
        inset 0 0 25px 0 #ffbf4780,
        inset 0 20px 50px 0 #bf4a1d80;
    animation: sp-colorize calc(var(--sp-t) * 3) ease-in-out infinite;
    overflow: hidden;
    flex-shrink: 0;
}
.sp-logo--sm { width: 64px; height: 64px; }
.sp-logo--lg { width: 140px; height: 140px; }

.sp-logo::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border-top: 1px solid var(--sp-c1);
    border-bottom: 1px solid var(--sp-c2);
    background: linear-gradient(180deg, #ffbf4740, #bf4a1d80);
    box-shadow:
        inset 0 10px 10px 0 #ffbf4780,
        inset 0 -10px 10px 0 #bf4a1d80;
}

.sp-logo-inner {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    filter: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><filter id="g"><feGaussianBlur in="SourceGraphic" stdDeviation="5"/><feColorMatrix values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 22 -9"/></filter></svg>#g');
}

.sp-blob {
    position: absolute;
    border-radius: 42%;
    background: linear-gradient(180deg, var(--sp-c1) 30%, var(--sp-c2) 70%);
}
.sp-b1 { width: 44px; height: 44px; top: 12px; left: 28px; transform-origin: 50% 130%; animation: sp-spin var(--sp-t) linear infinite reverse; }
.sp-b2 { width: 40px; height: 40px; top: 18px; left: 30px; transform-origin: 50% -30%; animation: sp-spin var(--sp-t) linear infinite; animation-delay: calc(var(--sp-t) / -3); }
.sp-b3 { width: 30px; height: 30px; top: 28px; left: 35px; transform-origin: -30% -10%; animation: sp-spin var(--sp-t) linear infinite reverse; }
.sp-b4 { width: 28px; height: 28px; top: 30px; left: 36px; transform-origin: -30% -10%; animation: sp-spin var(--sp-t) linear infinite reverse; animation-delay: calc(var(--sp-t) / -2); }
.sp-b5 { width: 30px; height: 30px; top: 28px; left: 35px; transform-origin: 130% -10%; animation: sp-spin var(--sp-t) linear infinite; }

.sp-logo--sm .sp-b1 { width: 28px; height: 28px; top: 8px; left: 18px; }
.sp-logo--sm .sp-b2 { width: 26px; height: 26px; top: 11px; left: 19px; }
.sp-logo--sm .sp-b3 { width: 19px; height: 19px; top: 18px; left: 22px; }
.sp-logo--sm .sp-b4 { width: 18px; height: 18px; top: 19px; left: 23px; }
.sp-logo--sm .sp-b5 { width: 19px; height: 19px; top: 18px; left: 22px; }

.sp-logo--lg .sp-b1 { width: 62px; height: 62px; top: 17px; left: 39px; }
.sp-logo--lg .sp-b2 { width: 56px; height: 56px; top: 25px; left: 42px; }
.sp-logo--lg .sp-b3 { width: 42px; height: 42px; top: 39px; left: 49px; }
.sp-logo--lg .sp-b4 { width: 39px; height: 39px; top: 42px; left: 50px; }
.sp-logo--lg .sp-b5 { width: 42px; height: 42px; top: 39px; left: 49px; }

@keyframes sp-spin {
    to { transform: rotate(360deg); }
}
@keyframes sp-colorize {
    0%   { filter: hue-rotate(0deg); }
    20%  { filter: hue-rotate(-30deg); }
    40%  { filter: hue-rotate(-60deg); }
    60%  { filter: hue-rotate(-90deg); }
    80%  { filter: hue-rotate(-45deg); }
    100% { filter: hue-rotate(0deg); }
}