/*
 * Antigravity Design System
 * "Obsidian" - Minimal, Premium, Cinematic
 * 
 * Inspired by Google's Antigravity aesthetic
 */

/* ==========================================================================
   1. FOUNDATIONS: Google Fonts
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

/* ==========================================================================
   2. DESIGN TOKENS - System Adaptive Theme
   Light Mode: "Aerogel" (Default) | Dark Mode: "Obsidian"
   ========================================================================== */
:root {
    /* === Semantic Colors - Light Mode "Aerogel" (Default) === */
    --ag-bg-void: #F9F9F9;
    --ag-surface-glass: rgba(255, 255, 255, 0.6);
    --ag-border-hairline: rgba(0, 0, 0, 0.06);
    --ag-border-hairline-hover: rgba(0, 0, 0, 0.15);
    --ag-text-primary: #1F1F1F;
    --ag-text-secondary: #444746;
    --ag-text-dim: #6B6B6B;

    /* Glass Material */
    --ag-glass-blur: 20px;
    --ag-card-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);

    /* Nav Glass - Light */
    --ag-nav-bg: rgba(255, 255, 255, 0.70);
    --ag-nav-border: rgba(0, 0, 0, 0.08);
    --ag-nav-blur: 24px;

    /* Horizon / Aurora - Pale Lilac for light */
    --ag-horizon-color: #E8E0F0;
    --ag-horizon-opacity: 0.3;

    /* Cursor Colors */
    --ag-cursor-fill: #1F1F1F;
    --ag-cursor-ring: rgba(0, 0, 0, 0.2);
    --ag-cursor-ring-hover: rgba(0, 0, 0, 0.4);

    /* Noise Texture */
    --ag-noise-opacity: 0.05;
    --ag-noise-blend: multiply;

    /* === Static Tokens (same in both modes) === */
    /* Typography */
    --ag-font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --ag-font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
    --ag-tracking-tight: -0.03em;
    --ag-tracking-normal: 0;

    /* Shape */
    --ag-radius-card: 32px;
    --ag-radius-nav: 9999px;
    --ag-radius-chip: 8px;

    /* Motion */
    --ag-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ag-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ag-duration-slow: 1.2s;
    --ag-duration-medium: 0.6s;
    --ag-duration-fast: 0.3s;

    /* Spacing */
    --ag-gap: 24px;
    --ag-gap-lg: 48px;

    /* Dormant Image Effect - Light Mode */
    --ag-dormant-grayscale: 10%;
    --ag-dormant-opacity: 0.9;

    /* Curtain Overlay - Light Mode */
    --ag-curtain-gradient: linear-gradient(to top, rgba(249, 249, 249, 0.95) 0%, rgba(249, 249, 249, 0.5) 40%, transparent 100%);

    /* Article/Blog - Light Mode */
    --ag-article-body-color: #444746;
    --ag-link-color: #2563eb;
    --ag-title-gradient: linear-gradient(to bottom right, #1F1F1F 0%, #6B6B6B 100%);
}

/* === Dark Mode "Obsidian" === */
@media (prefers-color-scheme: dark) {
    :root {
        --ag-bg-void: #000000;
        --ag-surface-glass: rgba(255, 255, 255, 0.03);
        --ag-border-hairline: rgba(255, 255, 255, 0.08);
        --ag-border-hairline-hover: rgba(255, 255, 255, 0.30);
        --ag-text-primary: #F5F5F5;
        --ag-text-secondary: #A3A3A3;
        --ag-text-dim: #808080;

        /* Glass Material - no shadow in dark mode */
        --ag-card-shadow: none;

        /* Nav Glass - Dark */
        --ag-nav-bg: rgba(0, 0, 0, 0.50);
        --ag-nav-border: rgba(255, 255, 255, 0.10);

        /* Horizon / Aurora - Deep Blue/Violet */
        --ag-horizon-color: #1e1b4b;
        --ag-horizon-opacity: 0.4;

        /* Cursor Colors */
        --ag-cursor-fill: #F5F5F5;
        --ag-cursor-ring: rgba(255, 255, 255, 0.2);
        --ag-cursor-ring-hover: rgba(255, 255, 255, 0.4);

        /* Noise Texture */
        --ag-noise-opacity: 0.03;
        --ag-noise-blend: overlay;

        /* Dormant Image Effect - Dark Mode */
        --ag-dormant-grayscale: 40%;
        --ag-dormant-opacity: 0.7;

        /* Curtain Overlay - Dark Mode */
        --ag-curtain-gradient: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.5) 40%, transparent 100%);

        /* Article/Blog - Dark Mode */
        --ag-article-body-color: #C7C7C7;
        --ag-link-color: #93c5fd;
        --ag-title-gradient: linear-gradient(to bottom right, #FFFFFF 0%, #9CA3AF 100%);
    }
}

/* ==========================================================================
   3. GLOBAL RESET & BASE
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    background-color: var(--ag-bg-void);
    color: var(--ag-text-primary);
}

body {
    font-family: var(--ag-font-display);
    background-color: var(--ag-bg-void);
    color: var(--ag-text-primary);
    min-height: 100vh;
    overflow-x: hidden;
}

::selection {
    background: var(--ag-border-hairline-hover);
    color: var(--ag-text-primary);
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */

/* Display - Massive Headlines */
.ag-display {
    font-family: var(--ag-font-display);
    font-weight: 500;
    letter-spacing: var(--ag-tracking-tight);
    line-height: 1.05;
    color: var(--ag-text-primary);
}

.ag-display-xl {
    font-size: clamp(3.5rem, 12vw, 8rem);
}

/* Typewriter Animation */
.ag-typewriter {
    min-height: 1.2em;
    /* Prevent layout jump */
    display: inline-flex;
    align-items: baseline;
}

/* Aurora Energy Cursor - Stable Vertical Beam */
.ag-typewriter-cursor {
    display: inline-block;
    width: 4px;
    height: 1.15em;
    background: linear-gradient(to bottom, #4285f4, #34a853, #fbbc05, #ea4335);
    border-radius: 2px;
    margin-left: 0.06em;
    opacity: 0;
    filter: blur(2px);
    transform: translateY(0.15em);
    /* Extend below text baseline */
    transition: opacity 0.3s ease-out;
}

/* Warm-up Blink Phase - High-frequency digital blink */
.ag-typewriter-cursor.is-breathing {
    animation: aurora-blink 0.5s step-end infinite;
}

@keyframes aurora-blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* Typing Phase - Locked at full brightness */
.ag-typewriter-cursor.is-typing {
    opacity: 1;
    filter: blur(2px);
    animation: none;
}


.ag-display-lg {
    font-size: clamp(2.5rem, 8vw, 5rem);
}

.ag-display-md {
    font-size: clamp(1.75rem, 5vw, 3rem);
}

/* Mono - Meta Text */
.ag-mono {
    font-family: var(--ag-font-mono);
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ag-text-dim);
}

/* Body Text */
.ag-body {
    font-family: var(--ag-font-display);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--ag-text-secondary);
}

.ag-body-lg {
    font-size: 1.125rem;
}

/* ==========================================================================
   5. HORIZON EFFECT (Ambient Light)
   ========================================================================== */
.ag-horizon {
    position: fixed;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 150vw;
    height: 60vh;
    background: radial-gradient(ellipse at center, var(--ag-horizon-color) 0%, transparent 70%);
    opacity: var(--ag-horizon-opacity);
    pointer-events: none;
    z-index: 0;
}

/* ==========================================================================
   6. FLOATING ISLAND NAVIGATION
   ========================================================================== */
.ag-nav {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;

    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;

    background: var(--ag-nav-bg);
    backdrop-filter: blur(var(--ag-nav-blur));
    -webkit-backdrop-filter: blur(var(--ag-nav-blur));
    border: 1px solid var(--ag-nav-border);
    border-radius: var(--ag-radius-nav);
}

.ag-nav a {
    padding: 10px 20px;
    font-family: var(--ag-font-display);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ag-text-secondary);
    border-radius: var(--ag-radius-nav);
    transition: color var(--ag-duration-fast) var(--ag-ease-out),
        background-color var(--ag-duration-fast) var(--ag-ease-out);
}

.ag-nav a:hover {
    color: var(--ag-text-primary);
    background: var(--ag-surface-glass);
}

.ag-nav a.active {
    color: var(--ag-text-primary);
}

/* ==========================================================================
   7. HERO SECTION
   ========================================================================== */
.ag-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: var(--ag-gap);
    z-index: 10;
}

.ag-hero-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
}

.ag-hero-subtitle {
    margin-top: 1rem;
}

/* Star Motif */
.ag-star {
    width: 1em;
    height: 1em;
    animation: ag-rotate 60s linear infinite;
}

.ag-star svg {
    width: 100%;
    height: 100%;
    fill: var(--ag-text-primary);
}

@keyframes ag-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   8. CONTENT SECTIONS
   ========================================================================== */
.ag-section {
    position: relative;
    max-width: 100%;
    padding: var(--ag-gap-lg) max(var(--ag-gap), calc((100% - 1400px) / 2 + var(--ag-gap)));
    z-index: 20;
    background-color: var(--ag-bg-void);
}

.ag-section-header {
    margin-bottom: var(--ag-gap-lg);
}

/* ==========================================================================
   9. BENTO GRID (2x2 Symmetric)
   ========================================================================== */
.ag-bento {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

/* Responsive Grid */
@media (max-width: 640px) {
    .ag-bento {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   10. GLASS CARDS (Adaptive)
   ========================================================================== */
.ag-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    background: var(--ag-surface-glass);
    backdrop-filter: blur(var(--ag-glass-blur));
    -webkit-backdrop-filter: blur(var(--ag-glass-blur));
    border: 1px solid var(--ag-border-hairline);
    border-radius: var(--ag-radius-card);
    box-shadow: var(--ag-card-shadow);

    transition: border-color var(--ag-duration-fast) var(--ag-ease-out),
        transform var(--ag-duration-fast) var(--ag-ease-out),
        box-shadow var(--ag-duration-fast) var(--ag-ease-out);
}

.ag-card:hover {
    border-color: var(--ag-border-hairline-hover);
}

/* Card Image */
.ag-card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.ag-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: var(--ag-dormant-opacity);
    filter: grayscale(var(--ag-dormant-grayscale));
    transition: filter var(--ag-duration-medium) var(--ag-ease-out),
        opacity var(--ag-duration-medium) var(--ag-ease-out),
        transform var(--ag-duration-medium) var(--ag-ease-out);
}

.ag-card:hover .ag-card-media img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.02);
}

/* Card Curtain Overlay - Theme Aware */
.ag-card-media::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70%;
    background: var(--ag-curtain-gradient);
    pointer-events: none;
    z-index: 1;
}

/* Card Content */
.ag-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--ag-gap);
    z-index: 2;
}

.ag-card-title {
    font-family: var(--ag-font-display);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--ag-text-primary);
    margin-bottom: 0.5rem;
}

/* Card Tags */
.ag-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ag-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--ag-surface-glass);
    border: 1px solid var(--ag-border-hairline);
    border-radius: var(--ag-radius-chip);
    font-family: var(--ag-font-mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ag-text-secondary);
}

/* ==========================================================================
   11. SCROLL REVEAL ANIMATION
   ========================================================================== */
.ag-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.ag-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delays */
.ag-reveal:nth-child(1) {
    transition-delay: 0ms;
}

.ag-reveal:nth-child(2) {
    transition-delay: 100ms;
}

.ag-reveal:nth-child(3) {
    transition-delay: 200ms;
}

.ag-reveal:nth-child(4) {
    transition-delay: 300ms;
}

.ag-reveal:nth-child(5) {
    transition-delay: 400ms;
}

.ag-reveal:nth-child(6) {
    transition-delay: 500ms;
}

/* ==========================================================================
   12. ANTIGRAVITY CURSOR (Three.js Particle Canvas)
   ========================================================================== */
#ag-cursor-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: exclusion;
    opacity: 0;
    /* opacity driven by JS scroll math — no CSS transition needed */
}

/* Hide cursor canvas on touch devices */
@media (hover: none) and (pointer: coarse) {
    #ag-cursor-canvas {
        display: none;
    }
}

/* ==========================================================================
   13. SKILLS SECTION
   ========================================================================== */
.ag-skills {
    display: flex;
    flex-direction: column;
    gap: var(--ag-gap-lg);
}

.ag-skill-category h3 {
    font-family: var(--ag-font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ag-text-dim);
    margin-bottom: 1rem;
}

.ag-skill-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.ag-skill-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: var(--ag-surface-glass);
    border: 1px solid var(--ag-border-hairline);
    border-radius: var(--ag-radius-chip);
    font-family: var(--ag-font-display);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ag-text-primary);
    transition: border-color var(--ag-duration-fast) var(--ag-ease-out),
        background-color var(--ag-duration-fast) var(--ag-ease-out);
}

.ag-skill-chip:hover {
    border-color: var(--ag-border-hairline-hover);
}

/* ==========================================================================
   14. FOOTER / CONNECT SECTION
   ========================================================================== */
.ag-footer {
    padding: var(--ag-gap-lg) var(--ag-gap);
    padding-bottom: 120px;
    /* Space for floating nav */
    text-align: center;
}

.ag-footer-links {
    display: flex;
    justify-content: center;
    gap: var(--ag-gap);
    margin-top: var(--ag-gap);
}

.ag-icon-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--ag-border-hairline);
    border-radius: 50%;
    color: var(--ag-text-secondary);
    transition: border-color var(--ag-duration-fast) var(--ag-ease-out),
        color var(--ag-duration-fast) var(--ag-ease-out);
}

.ag-icon-link:hover {
    border-color: var(--ag-border-hairline-hover);
    color: var(--ag-text-primary);
}

.ag-icon-link svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* ==========================================================================
   15. UTILITY CLASSES
   ========================================================================== */
.ag-text-center {
    text-align: center;
}

.ag-text-left {
    text-align: left;
}

.ag-mt-sm {
    margin-top: 0.5rem;
}

.ag-mt-md {
    margin-top: 1rem;
}

.ag-mt-lg {
    margin-top: 2rem;
}

.ag-mb-lg {
    margin-bottom: 2rem;
}

/* ==========================================================================
   16. ARTICLE / BLOG PAGES ("Obsidian Document Shell")
   ========================================================================== */

/* Article Container */
.ag-article {
    position: relative;
    min-height: 100vh;
    z-index: 20;
    background-color: var(--ag-bg-void);
}

/* Article Header - Cinematic */
.ag-article-header {
    padding: 160px 24px 0;
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
}

/* Meta-Data Glass Pill */
.ag-article-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: var(--ag-surface-glass);
    border: 1px solid var(--ag-border-hairline);
    border-radius: 9999px;
    font-family: var(--ag-font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--ag-text-dim);
    margin-bottom: 2rem;
}

.ag-article-pill span {
    opacity: 0.5;
}

/* Massive Title with Gradient */
.ag-article-title {
    font-family: var(--ag-font-display);
    font-size: clamp(2.5rem, 8vw, 5rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.05;
    margin-bottom: 1.5rem;
    /* Gradient Text */
    background: var(--ag-title-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Slide-up Animation */
    animation: ag-slide-up 1s var(--ag-ease-out) forwards;
    opacity: 0;
}

@keyframes ag-slide-up {
    from {
        opacity: 0;
        transform: translateY(32px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ag-article-subtitle {
    font-family: var(--ag-font-display);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ag-text-secondary);
    max-width: 680px;
    margin: 0 auto 3rem;
    animation: ag-slide-up 1s var(--ag-ease-out) 0.1s forwards;
    opacity: 0;
}

/* Hero Visual */
.ag-article-hero {
    position: relative;
    max-width: 1100px;
    margin: 0 auto 4rem;
    border-radius: var(--ag-radius-card);
    overflow: hidden;
    border: 1px solid var(--ag-border-hairline);
    animation: ag-slide-up 1s var(--ag-ease-out) 0.2s forwards;
    opacity: 0;
}

.ag-article-hero img {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0.9;
}

/* Hero Bottom Fade Overlay */
.ag-article-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to top, var(--ag-bg-void) 0%, transparent 100%);
    pointer-events: none;
}

/* Back Link - Above Everything */
.ag-article-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ag-font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ag-text-dim);
    text-decoration: none;
    margin-bottom: 2rem;
    transition: color var(--ag-duration-fast) var(--ag-ease-out);
}

.ag-article-back:hover {
    color: var(--ag-text-primary);
}

/* Article Body */
.ag-article-body {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 24px 120px;
}

/* Body Text - Optimal reading */
.ag-article-body p {
    font-family: var(--ag-font-display);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.75;
    color: var(--ag-article-body-color);
    margin-bottom: 1.75em;
}

/* Section Headings */
.ag-article-body h2 {
    font-family: var(--ag-font-display);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--ag-text-primary);
    margin-top: 3rem;
    margin-bottom: 1.25rem;
    letter-spacing: -0.02em;
}

.ag-article-body h3 {
    font-family: var(--ag-font-mono);
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ag-text-secondary);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

/* Article Links */
.ag-article-body a {
    color: var(--ag-link-color);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition: text-decoration-color var(--ag-duration-fast) var(--ag-ease-out);
}

.ag-article-body a:hover {
    text-decoration-color: var(--ag-link-color);
}

/* Breakout Images - Wider than text */
.ag-article-image {
    display: block;
    width: 100%;
    max-width: 900px;
    height: auto;
    margin: 3rem auto;
    border-radius: var(--ag-radius-card);
    /* Position relative to viewport center, breaking out of 680px container */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* Image Caption */
.ag-article-caption {
    display: block;
    max-width: 680px;
    margin: -2rem auto 3rem;
    font-family: var(--ag-font-mono);
    font-size: 0.75rem;
    text-align: center;
    color: var(--ag-text-dim);
    letter-spacing: 0.02em;
}

/* Back to Home Link */
.ag-article-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ag-font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ag-text-dim);
    text-decoration: none;
    transition: color var(--ag-duration-fast) var(--ag-ease-out);
}

.ag-article-back:hover {
    color: var(--ag-text-primary);
}

/* Blockquote */
.ag-article-body blockquote {
    margin: 2rem 0;
    padding-left: 1.5rem;
    border-left: 2px solid var(--ag-border-hairline);
    font-style: italic;
    color: var(--ag-text-secondary);
}

/* Code inline */
.ag-article-body code {
    font-family: var(--ag-font-mono);
    font-size: 0.9em;
    background: var(--ag-surface-glass);
    padding: 2px 6px;
    border-radius: 4px;
}

/* ==========================================================================
   17. CABSFLIGHT SHOWCASE - Featured Project Scroll Animation
   ========================================================================== */

/* ── Showcase section — full-screen immersive, content centered ── */
.ag-showcase {
    position: relative;
    z-index: 20;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: max(48px, 8vh) 0;
    /* overflow-x removed — body already has overflow-x:hidden.
       Keeping it here created a new scroll container on mobile,
       causing nested scrollbar + text clipping into the header. */
    overflow: visible;
    /* Opaque backdrop prevents z-index bleed-through from previous
       sections (hero sticky/fixed elements, nav glass layers). */
    background-color: var(--ag-bg-void);
}

/* ── Stage — normal document flow (no sticky, no pinning) ── */
.ag-showcase-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 var(--ag-gap);
    text-align: center;
}

/* ── Meta tags row ── */
.ag-showcase-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 20px;
}

/* ── Title ── */
.ag-showcase-title {
    margin-bottom: 14px;
    color: var(--ag-text-primary);
}

/* ── Subtitle ── */
.ag-showcase-sub {
    max-width: 520px;
    margin: 0 auto 8px;
    color: var(--ag-text-secondary);
}

/* ── Phone wrapper — Flexbox podium (side-by-side, center elevated) ── */
.ag-showcase-phones {
    display: flex;
    align-items: flex-end;       /* bottom-aligned; podium offset via transform */
    justify-content: center;
    gap: clamp(12px, 2vw, 28px); /* responsive gap between phones */
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 var(--ag-gap);
    /* No fixed height — phones define it via aspect-ratio */
}

/* ── iPhone mockup — image + label move as one unit ── */
.ag-iphone {
    flex: 0 0 auto;
    width: clamp(200px, 22vw, 320px);

    /* Podium offset — side phones sit 60px lower */
    transform: translateY(60px) translateZ(0);

    /* ── iOS Safari GPU 加速 ──
     * will-change      提前通知合成器分配独立图层
     * translateZ(0)    强制 3D 合成，避免动画触发瞬间
     *                  WebKit 才去光栅化大面积透明 PNG
     * backface-visibility  隐藏 GPU 合成偶发的白边闪烁
     */
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    /* drop-shadow traces the PNG alpha contour */
    filter:
        drop-shadow(0 28px 48px rgba(0, 0, 0, 0.50))
        drop-shadow(0 10px 18px rgba(0, 0, 0, 0.28));
}

/* The image keeps the phone aspect ratio */
.ag-iphone .ag-iphone-img {
    aspect-ratio: 1046 / 2066;
}

/* Center phone — elevated (no Y offset), slightly larger, stronger shadow */
.ag-iphone--featured {
    width: clamp(220px, 24vw, 350px);
    transform: translateY(0) translateZ(0);
    z-index: 2;
    filter:
        drop-shadow(0 36px 58px rgba(0, 0, 0, 0.60))
        drop-shadow(0 14px 22px rgba(0, 0, 0, 0.32))
        drop-shadow(0 0 32px rgba(67, 233, 123, 0.06));
}

/* Light-mode — softer shadows */
@media (prefers-color-scheme: light) {
    .ag-iphone {
        filter:
            drop-shadow(0 28px 48px rgba(0, 0, 0, 0.16))
            drop-shadow(0 10px 18px rgba(0, 0, 0, 0.08));
    }

    .ag-iphone--featured {
        filter:
            drop-shadow(0 36px 58px rgba(0, 0, 0, 0.22))
            drop-shadow(0 14px 22px rgba(0, 0, 0, 0.10))
            drop-shadow(0 0 32px rgba(67, 233, 123, 0.04));
    }
}

/* Screenshot image */
.ag-iphone-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* ── Phone label (lives inside .ag-iphone, moves with translateY) ── */
.ag-iphone-label {
    display: block;
    margin-top: 14px;
    text-align: center;
    font-family: var(--ag-font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ag-text-dim);
    pointer-events: none;
    white-space: nowrap;
}

.ag-iphone-label--c {
    color: var(--ag-text-secondary);
    font-weight: 500;
}

/* ── CTA button — portfolio style ── */
.ag-showcase-cta {
    margin-top: 16px;
    z-index: 10;
}

.ag-showcase-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    font-family: var(--ag-font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ag-text-secondary);
    background: var(--ag-surface-glass);
    border: 1px solid var(--ag-border-hairline);
    border-radius: var(--ag-radius-nav);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    text-decoration: none;
    transition: border-color var(--ag-duration-fast) var(--ag-ease-out),
                color var(--ag-duration-fast) var(--ag-ease-out),
                transform 0.2s var(--ag-ease-out);
}

.ag-showcase-btn:hover {
    border-color: var(--ag-border-hairline-hover);
    color: var(--ag-text-primary);
    transform: scale(1.03);
}

/* ──────────────────────────────────────────────────────────────────────────
   transitions-dev — Icon swap (09) + Text states swap (04)
   Applied as a hover micro-interaction layer for .ag-showcase-btn.
   The button's own transform/border/color transitions above are untouched
   so the GSAP scroll reveal on .ag-showcase-cta keeps its grip on the
   wrapping element. Only the inner .t-text-swap and .t-icon-swap inherit
   blur/scale here.
   ────────────────────────────────────────────────────────────────────── */

/* Universal install — only the tokens these two snippets need.
   Safe to merge into a project-wide :root block later. */
:root {
    /* Text states swap */
    --text-swap-dur: 200ms;
    --text-swap-translate-y: 8px;
    --text-swap-blur: 2px;
    --text-swap-ease: ease-out;
    /* Icon swap */
    --icon-swap-dur: 200ms;
    --icon-swap-blur: 2px;
    --icon-swap-start-scale: 0.25;
    --icon-swap-ease: ease-in-out;
}

/* ── Text states swap (verbatim from skill 04) ────────────────────────── */
.t-text-swap {
    display: inline-block;
    transform: translateY(0);
    filter: blur(0);
    opacity: 1;
    transition:
        transform var(--text-swap-dur) var(--text-swap-ease),
        filter    var(--text-swap-dur) var(--text-swap-ease),
        opacity   var(--text-swap-dur) var(--text-swap-ease);
    will-change: transform, filter, opacity;
}
.t-text-swap.is-exit {
    transform: translateY(calc(var(--text-swap-translate-y) * -1));
    filter: blur(var(--text-swap-blur));
    opacity: 0;
}
.t-text-swap.is-enter-start {
    transform: translateY(var(--text-swap-translate-y));
    filter: blur(var(--text-swap-blur));
    opacity: 0;
    transition: none;
}

/* ── Icon swap (verbatim from skill 09) ───────────────────────────────── */
.t-icon-swap {
    position: relative;
    display: inline-grid;
}
.t-icon-swap .t-icon {
    grid-area: 1 / 1;
    transition:
        opacity   var(--icon-swap-dur) var(--icon-swap-ease),
        filter    var(--icon-swap-dur) var(--icon-swap-ease),
        transform var(--icon-swap-dur) var(--icon-swap-ease);
    will-change: opacity, filter, transform;
}
.t-icon-swap[data-state="a"] .t-icon[data-icon="a"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="b"] {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
}
.t-icon-swap[data-state="a"] .t-icon[data-icon="b"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="a"] {
    opacity: 0;
    filter: blur(var(--icon-swap-blur));
    transform: scale(var(--icon-swap-start-scale));
}

/* ── Hover bridge — drives the swap via :hover instead of changing
   data-state. Snippet rules above stay intact; these only override
   the resting state when the button is hovered.                       ── */
.ag-showcase-btn:hover .t-icon-swap[data-state="a"] .t-icon[data-icon="a"] {
    opacity: 0;
    filter: blur(var(--icon-swap-blur));
    transform: scale(var(--icon-swap-start-scale));
}
.ag-showcase-btn:hover .t-icon-swap[data-state="a"] .t-icon[data-icon="b"] {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
}

/* Text — there is no content swap on hover, so we re-use the text-swap
   tokens (--text-swap-blur / --text-swap-translate-y / --text-swap-ease)
   inside a single keyframes ripple that mirrors the snippet's three-phase
   exit → enter-start → enter sequence. The .t-text-swap class itself is
   left in resting state at all times; the animation runs on top once. */
@keyframes ag-text-swap-hover {
      0% { transform: translateY(0);                                       filter: blur(0);                     opacity: 1; }
     49% { transform: translateY(calc(var(--text-swap-translate-y) * -1)); filter: blur(var(--text-swap-blur)); opacity: 0; }
     50% { transform: translateY(var(--text-swap-translate-y));            filter: blur(var(--text-swap-blur)); opacity: 0; }
    100% { transform: translateY(0);                                       filter: blur(0);                     opacity: 1; }
}
.ag-showcase-btn:hover .t-text-swap {
    animation: ag-text-swap-hover calc(var(--text-swap-dur) * 2) var(--text-swap-ease);
}

/* Required reduced-motion guards (one per snippet). */
@media (prefers-reduced-motion: reduce) {
    .t-text-swap     { transition: none !important; }
    .t-icon-swap .t-icon { transition: none !important; }
    .ag-showcase-btn:hover .t-text-swap { animation: none !important; }
}

/* ── Responsive — Phones ── */
@media (max-width: 768px) {
    .ag-showcase-phones  { gap: 8px; padding: 0 12px; }
    .ag-iphone           { width: min(30vw, 200px); transform: translateY(40px); }
    .ag-iphone--featured { width: min(33vw, 220px); transform: translateY(0); }
    .ag-iphone-label     { font-size: 0.55rem; margin-top: 10px; }
}

@media (max-width: 480px) {
    .ag-showcase-phones  { gap: 4px; padding: 0 8px; }
    .ag-iphone           { width: 29vw; transform: translateY(28px); }
    .ag-iphone--featured { width: 32vw; }
    .ag-iphone-label     { font-size: 0.48rem; letter-spacing: 0.04em; margin-top: 8px; }
}