/* ============================================
   DRAWER FOR ABOUT PAGE AND CASE STUDIES
   Clean sheet layout (no negative offsets) to avoid cut-offs and click bugs.
   ============================================ */

:root {
    --drawer-desktop-inset: 24px;
    --drawer-desktop-top: 24px;
    --drawer-mobile-top-gap: 14px; /* visible gap above sheet + tap-to-exit area */
}

/* Overlay */
.drawer-overlay {
    position: fixed;
    inset: 0;
    height: 100dvh;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    /* Performance optimizations */
    will-change: opacity;
    contain: strict;
}

.drawer-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    /* Prevent accidental taps from opening drawer - only close on overlay click */
    touch-action: pan-y pinch-zoom;
}

.drawer-overlay.ios-black {
    /* iOS request: fully cover the page behind the sheet with true black */
    background: #000000;
}

/* Container: responsible only for slide animation + hit testing */
.drawer-container {
    position: fixed;
    inset: 0;
    height: 100dvh;
    z-index: 10000;
    transform: translate3d(0, 100%, 0);
    transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 0.5s;
    pointer-events: none;
    visibility: hidden;
    /* Performance optimizations */
    will-change: transform;
    contain: layout style paint;
}

.drawer-container.ios-sheet {
    /* Avoid Safari seam artifacts during keyframed transforms */
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
}

.drawer-container.active {
    transform: translate3d(0, 0, 0);
    transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 0s;
    pointer-events: auto;
    visibility: visible;
    /* Ensure smooth animation on iOS */
    -webkit-transform: translate3d(0, 0, 0);
    will-change: transform;
}

.drawer-container.closing {
    transform: translate3d(0, 100%, 0);
    /* Smooth iOS-native feeling animation - slightly faster and more responsive */
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0s 0.4s;
    /* Ensure animation completes smoothly without stopping */
    will-change: transform;
}

.drawer-container.ios-sheet.active {
    /* iOS uses keyframes for open/close */
    transition: none;
}

/* If iOS Safari still shows a bottom "gap" during open/close, remove bounce to reduce viewport jitter. */
.drawer-container.ios-sheet.ios-opening {
    animation: drawerSlideUpBounce 520ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

.drawer-container.ios-sheet.ios-closing {
    animation: drawerSlideDownSolid 420ms cubic-bezier(0.2, 0, 0.2, 1);
    pointer-events: none;
}

.drawer-container.ios-sheet.ios-closing,
.drawer-container.ios-sheet.ios-opening {
    will-change: transform;
}

.drawer-container.ios-sheet.ios-closing .drawer-surface,
.drawer-container.ios-sheet.ios-opening .drawer-surface {
    /* Avoid the existing micro "impact" fighting the sheet bounce */
    animation: none !important;
}

@keyframes drawerSlideUpBounce {
    0%   { transform: translate3d(0, 100%, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

@keyframes drawerSlideDownSolid {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(0, 100%, 0); }
}

/* Tap-to-exit area (inside container, above sheet) */
.drawer-dismiss-area {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--drawer-mobile-top-gap);
    z-index: 1;
    background: transparent;
}

/* Surface: visual sheet (rounded corners + shadow + overflow clip) */
.drawer-surface {
    position: absolute;
    inset: var(--drawer-mobile-top-gap) 0 0 0; /* show rounded corners by not touching very top */
    background: var(--drawer-surface-bg, #ffffff); /* fallback while iframe loads */
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    overflow: hidden;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    z-index: 2;
    /* Force proper clipping of iframe content on Chrome */
    transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);
    /* Extra safety against 1px seams on iOS */
    clip-path: inset(0 round var(--radius-sm) var(--radius-sm) 0 0);
    /* Performance optimizations */
    contain: layout style paint;
    isolation: isolate;
}

/* iOS: dark-grey rounded cap in the top gap (matches native sheet "edge" feel) */
/* NOTE: must NOT live on .drawer-surface because the surface has overflow:hidden (would clip the cap). */
.drawer-container.ios-sheet::before {
    content: '';
    position: absolute;
    /* Only span the straight edge between the rounded corners */
    left: var(--radius-sm);
    right: var(--radius-sm);
    top: 0;
    height: var(--drawer-mobile-top-gap);
    background: rgba(34, 34, 36, 0.98);
    border-radius: 18px 18px 0 0;
    pointer-events: none;
    z-index: 3; /* above scrim + above sheet edge */
}

/* When the drawer is open on iOS, ensure the page background can't "shine" through rubber-band areas */
html.drawer-ios-open,
body.drawer-ios-open {
    background: #000000 !important;
}

@supports (overscroll-behavior: none) {
    html.drawer-ios-open,
    body.drawer-ios-open {
        overscroll-behavior: none;
    }
}

/* Subtle “impact” micro-animation on open (pairs with best-effort haptics). */
.drawer-surface.drawer-impact {
    animation: drawerImpact 240ms cubic-bezier(0.12, 1.15, 0.18, 1);
}

@keyframes drawerImpact {
    0%   { transform: translateZ(0) scale(1); }
    40%  { transform: translateZ(0) scale(0.988); }
    100% { transform: translateZ(0) scale(1); }
}

/* Content */
.drawer-content {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
}

.drawer-content iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: transparent;
    border-radius: inherit;
    /* Ensure smooth corner rounding - prevent white/light grey pixels */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    isolation: isolate;
    /* Additional clipping to prevent white bleed */
    clip-path: inset(0 round var(--radius-sm) var(--radius-sm) 0 0);
    -webkit-clip-path: inset(0 round var(--radius-sm) var(--radius-sm) 0 0);
    /* Performance optimizations */
    contain: layout style paint;
    will-change: contents;
    transition: opacity 180ms ease;
}

.drawer-content.is-fade iframe {
    opacity: 0;
}

/* Loading overlay (avoids blank feeling without flashing previous content) */
.drawer-content.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--drawer-surface-bg, #ffffff);
    opacity: 1;
    pointer-events: none;
}

/* Chrome (handle + close) overlays content (doesn't affect layout) */
.drawer-chrome {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding-top: max(12px, env(safe-area-inset-top, 0px) + 12px);
    pointer-events: none;
}

/* Mobile swipe zone (sits above iframe so swipe-down always works) */
.drawer-gesture-zone {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 86px;
    pointer-events: auto;
    background: transparent;
}

/* iOS: allow swipe-to-dismiss from further down the sheet (more native feeling).
   Note: can't capture gestures inside the iframe, so we expand this overlay zone. */
@media (max-width: 768px) {
    .drawer-gesture-zone {
        /* Keep this small so it doesn't block scrolling inside the iframe (especially after segment jumps). */
        height: 88px;
    }
}

.drawer-handle {
    width: 36px;
    height: 5px;
    /* WCAG-friendly contrast on light sheets; overridden to white on dark About sheet */
    background: var(--drawer-handle-bg, #8A8A8A);
    border-radius: 3px;
    margin: 0 auto 10px auto;
    transition: background 0.2s ease;
}

/* Dark mode: lighter handle for dark backgrounds */
.drawer-container.dark-mode .drawer-handle {
    background: rgba(255, 255, 255, 0.6);
}

/* Topbar (segmented controller + optional case title + close) */
.drawer-topbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 56px 12px 56px; /* reserves space for left title + right close button */
    pointer-events: none;
}

.drawer-case-title {
    position: absolute;
    left: 16px;
    top: 0;
    display: flex;
    align-items: center;
    font-family: 'Google Sans Flex', sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.1px;
    line-height: 1;
    color: var(--drawer-text-color, rgba(20, 20, 20, 0.88));
    white-space: nowrap;
    opacity: 0.9;
    pointer-events: none;
    display: none; /* desktop only */
    /* No background for case studies (Vanguard/Pangea) - title uses dynamic page color */
    padding: 0;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* Align with segmented controller - account for topbar bottom padding */
    /* Topbar has padding-bottom, so we need to align to the content area center, not full height */
    height: calc(100% - 12px);
    transform: translateY(0px);
}

.drawer-seg {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    gap: 0;
    width: fit-content;
    max-width: 100%;
    border-radius: 999px;
    /* Daytime: airy glass (slightly more transparent, slightly less blur) */
    background: rgba(255, 255, 255, 0.78);
    /* Use a single “hairline ring” instead of border+inset combo (avoids double-outline on iOS) */
    border: none;
    /* Soft, subtle drop shadow only (no outline/ring) */
    box-shadow:
                0 10px 40px rgba(0, 0, 0, 0.08),
                0 2px 16px rgba(0, 0, 0, 0.05),
                inset 0 1px 0 rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(16px) saturate(185%);
    -webkit-backdrop-filter: blur(16px) saturate(185%);
    pointer-events: auto;
    transform: translateZ(0);
    overflow: hidden;
    /* Create stacking context for pseudo-elements */
    z-index: 0;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Subtle top highlight for glass effect */
.drawer-seg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    /* Sheen: highlight from top, no right-side dark fade */
    /* Softer, higher-quality sheen (less contrast) */
    background: linear-gradient(to bottom, 
        rgba(255, 255, 255, 0.38) 0%,
        rgba(255, 255, 255, 0.12) 40%,
        rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    border-radius: 999px 999px 0 0;
    z-index: 1; /* Above the background but below content */
}

/* Extra “liquid glass” sheen: soft top-left bloom */
.drawer-seg::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
    /* Softer bloom, reduced "gradienty" look */
    background: radial-gradient(120% 95% at 18% 8%,
        rgba(255, 255, 255, 0.32) 0%,
        rgba(255, 255, 255, 0.10) 24%,
        rgba(255, 255, 255, 0) 60%);
    mix-blend-mode: screen;
    opacity: 0.32;
}

/* Dark mode: dark background with liquid glass feel */
.drawer-container.dark-mode .drawer-seg {
    /* Slightly lighter dark gray (less "black", more premium) */
    background: rgba(58, 58, 60, 0.74);
    border: none;
    /* Soft, subtle drop shadows with wide blur for dark mode */
    /* Soft, subtle drop shadow only (no outline/ring) */
    /* More restrained, premium shadow in dark mode (less contrast) */
    box-shadow:
                0 10px 34px rgba(0, 0, 0, 0.18),
                0 2px 12px rgba(0, 0, 0, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(16px) saturate(185%);
    -webkit-backdrop-filter: blur(16px) saturate(185%);
}

.drawer-container.dark-mode .drawer-seg::before {
    /* Subtle highlight on dark glass */
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0) 100%);
}

.drawer-container.dark-mode .drawer-seg::after {
    /* Reduce bloom intensity on dark backgrounds */
    background: radial-gradient(120% 95% at 18% 8%,
        rgba(255, 255, 255, 0.10) 0%,
        rgba(255, 255, 255, 0.03) 30%,
        rgba(255, 255, 255, 0) 64%);
    opacity: 0.14;
}

.drawer-seg.is-hidden {
    display: none;
}

.drawer-seg-indicator {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    width: var(--seg-w, 0px);
    transform: translate3d(var(--seg-x, 0px), 0, 0);
    will-change: transform, width;
    transition: transform 520ms cubic-bezier(0.22, 1.05, 0.2, 1), width 520ms cubic-bezier(0.22, 1.05, 0.2, 1);
    z-index: 0;
}

.drawer-seg-indicator::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Darker neutral for contrast without outlines */
    background: #B6B6B6;
    border-radius: 999px;
    transform-origin: 50% 50%;
    box-shadow: none;
}

/* Dark mode: lighter indicator for dark backgrounds */
.drawer-container.dark-mode .drawer-seg-indicator::before {
    background: rgba(255, 255, 255, 0.34);
    box-shadow: none;
}

/* "Water drip" squish as the indicator moves */
.drawer-seg-indicator.is-moving::before {
    animation: drawerSegDrip 520ms cubic-bezier(0.22, 1.05, 0.2, 1);
}

@keyframes drawerSegDrip {
    0%   { transform: scaleX(0.98) scaleY(0.92); filter: blur(0px); }
    30%  { transform: scaleX(1.08) scaleY(0.86); filter: blur(0.25px); }
    60%  { transform: scaleX(0.96) scaleY(1.06); filter: blur(0px); }
    100% { transform: scaleX(1) scaleY(1); filter: blur(0px); }
}

.drawer-seg-btn {
    position: relative;
    z-index: 1;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    padding: 8px 16px;
    border-radius: 999px;
    font-family: 'Google Sans Flex', sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.1px;
    line-height: 1;
    color: rgba(20, 20, 20, 0.88);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.drawer-seg-btn:focus-visible {
    outline: 2px solid rgba(0, 0, 0, 0.18);
    outline-offset: 2px;
}

@media (hover: hover) {
    .drawer-seg-btn:hover {
        color: rgba(20, 20, 20, 1);
    }
}

/* Dark mode: light text for dark backgrounds */
.drawer-container.dark-mode .drawer-seg-btn {
    color: rgba(255, 255, 255, 0.88);
}

.drawer-container.dark-mode .drawer-seg-btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.3);
}

@media (hover: hover) {
    .drawer-container.dark-mode .drawer-seg-btn:hover {
        /* Keep dark mode hover restrained (no brightening) */
        color: rgba(255, 255, 255, 0.88);
    }
}

.drawer-close-button {
    pointer-events: auto;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 999px;
    /* Daytime: airy glass (slightly more transparent, slightly less blur) */
    background: rgba(255, 255, 255, 0.78);
    border: none;
    /* Soft, subtle drop shadow only (no outline/ring) */
    box-shadow:
                0 10px 40px rgba(0, 0, 0, 0.08),
                0 2px 16px rgba(0, 0, 0, 0.05),
                inset 0 1px 0 rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(16px) saturate(185%);
    -webkit-backdrop-filter: blur(16px) saturate(185%);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    position: absolute;
    right: 16px;
    top: 0;
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    /* X icon uses stroke="currentColor" in markup */
    color: rgba(20, 20, 20, 0.88);
}

/* Close button sheen overlay (matches segmented controller) */
.drawer-close-button::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(120% 95% at 18% 8%,
        rgba(255, 255, 255, 0.6) 0%,
        rgba(255, 255, 255, 0.22) 26%,
        rgba(255, 255, 255, 0) 56%);
    mix-blend-mode: screen;
    opacity: 0.45;
}

.drawer-close-button:hover {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 3px 25px rgba(0, 0, 0, 0.08),
                0 5px 45px rgba(0, 0, 0, 0.05),
                inset 0 1px 0 rgba(255, 255, 255, 0.9),
                inset 0 -1px 0 rgba(0, 0, 0, 0.06);
}

/* Dark mode: dark background with liquid glass feel */
.drawer-container.dark-mode .drawer-close-button {
    /* Slightly lighter dark gray (less "black", more premium) */
    background: rgba(58, 58, 60, 0.74);
    border: none;
    /* Soft, subtle drop shadows with wide blur for dark mode */
    /* Soft, subtle drop shadow only (no outline/ring) */
    /* More restrained, premium shadow in dark mode (less contrast) */
    box-shadow:
                0 10px 34px rgba(0, 0, 0, 0.18),
                0 2px 12px rgba(0, 0, 0, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(16px) saturate(185%);
    -webkit-backdrop-filter: blur(16px) saturate(185%);
    /* Drive X stroke via currentColor */
    color: #ffffff;
}

/* Dark mode: soften close button sheen (less "gradienty") */
.drawer-container.dark-mode .drawer-close-button::before {
    opacity: 0.28;
    background: radial-gradient(120% 95% at 18% 8%,
        rgba(255, 255, 255, 0.22) 0%,
        rgba(255, 255, 255, 0.08) 26%,
        rgba(255, 255, 255, 0) 62%);
}

.drawer-container.dark-mode .drawer-close-button:hover {
    /* Keep dark mode hover restrained (no “pop” shadow jump) */
    background: rgba(58, 58, 60, 0.74);
    box-shadow:
                0 10px 34px rgba(0, 0, 0, 0.18),
                0 2px 12px rgba(0, 0, 0, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Mobile: remove X button (use swipe + overlay + tap-to-exit gap) */
@media (max-width: 768px) {
    .drawer-topbar {
        /* Match the content well on mobile (no oversized side gutters) */
        padding: 0 30px 12px 30px;
    }

    .drawer-seg {
        width: 100%;
        max-width: 100%;
    }

    .drawer-seg-btn {
        flex: 1 1 0;
        min-width: 0;
        text-align: center;
    }

    .drawer-close-button {
        display: none;
    }
}

.drawer-close-button svg {
    width: 18px;
    height: 18px;
    /* Ensure the SVG respects currentColor */
    color: currentColor;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    transition: stroke 0.3s ease;
}

/* Dark mode: light stroke for dark backgrounds */
.drawer-container.dark-mode .drawer-close-button svg {
    color: #ffffff;
    stroke: currentColor;
}

/* If any inline stroke leaks through, force it on the actual path */
.drawer-close-button svg path {
    stroke: currentColor !important;
}

/* Desktop: inset sheet with padding on left/right/top, bottom flush */
@media (min-width: 769px) {
    .drawer-dismiss-area {
        display: none;
    }

    .drawer-surface {
        inset: var(--drawer-desktop-top) var(--drawer-desktop-inset) 0 var(--drawer-desktop-inset);
        border-radius: var(--radius-sm) var(--radius-sm) 0 0;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .drawer-chrome {
        padding-top: max(20px, env(safe-area-inset-top, 0px) + 20px);
    }

    .drawer-handle {
        display: none;
    }

    .drawer-topbar {
        padding: 0 84px 16px 84px;
    }

    .drawer-close-button {
        right: 22px;
    }

    .drawer-case-title {
        left: 22px;
        display: flex;
        font-size: 16px;
        font-weight: 500;
        letter-spacing: 0px;
        /* On desktop, topbar has 16px bottom padding, so adjust accordingly */
        height: calc(100% - 16px);
        transform: translateY(-2px);
    }

    .drawer-seg {
        width: fit-content;
        max-width: 100%;
    }

    .drawer-close-button {
        width: 38px;
        height: 38px;
    }

    .drawer-close-button svg {
        width: 20px;
        height: 20px;
    }
}

/* Lock scroll only when open */
body.drawer-open {
    overflow: hidden;
}

/* Pause animations and reduce repaints when drawer is open for better performance */
body.drawer-open main,
body.drawer-open .container,
body.drawer-open .video-showcase,
body.drawer-open .video-showcase-item {
    animation-play-state: paused !important;
    /* Reduce repaints by containing layout */
    contain: layout style paint;
}

/* Pause video showcase videos specifically when drawer is open */
body.drawer-open .video-showcase video {
    animation-play-state: paused !important;
}