@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Outfit:wght@400;500;600;700;800&family=Noto+Sans+TC:wght@300;400;500;700&family=Source+Code+Pro:wght@300;400;500&display=swap');

/* Base Styles & Fixed Colorful Cover Background for Global Parallax */
body, .unslate_co--site-inner {
    background-image: url('../images/cover_bg.jpg') !important;
    background-attachment: fixed !important; /* fixed background creates stunning parallax depth */
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #060606 !important; /* dark fallback */
    color: #ffffff !important;
    font-family: 'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Elegant, moderate bottom margin for site wrapper to create balanced scroll depth */
.unslate_co--site-inner {
    margin-bottom: 60px !important; /* Balanced gap between content end and page bottom */
}

/* Hide Solid Color Cover Blocks to prevent flash of block colours */
.gsap-reveal .cover, 
.gsap-reveal-hero .reveal-wrap .cover, 
.gsap-reveal-img .reveal-wrap .cover {
    display: none !important;
}

/* Sticky Premium Glassmorphism Header - Completely transparent container for floating buttons */
.unslate_co--site-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    width: 100%;
    z-index: 1050 !important;
    background: transparent !important; /* no solid background bar */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    padding-top: 25px !important;
    padding-bottom: 25px !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Force navbar to remain transparent and float correctly when scrolled */
.unslate_co--site-nav.scrolled {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    background: transparent !important; /* Overrode the theme's solid #111 black background! */
    box-shadow: none !important;
    margin-top: 0px !important; /* Avoid top jumps */
}

/* Spaced out original layout navigation: Individual Glass Capsule Buttons (Screenshot visual style) */
.nav-capsule-btn {
    display: inline-block !important;
    background: rgba(255, 255, 255, 0.05) !important; /* highly translucent white */
    backdrop-filter: blur(16px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(130%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important; /* thin, clean white border */
    border-radius: 50px !important;
    padding: 8px 24px !important; /* elegant capsule button size */
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    letter-spacing: 0.08em !important;
    text-decoration: none !important;
    
    /* Clean white color & soft glow text shadow */
    color: #ffffff !important; 
    -webkit-text-fill-color: #ffffff !important; 
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 8px rgba(255, 255, 255, 0.15) !important;
    
    font-family: 'Outfit', sans-serif !important;
    font-weight: 500 !important;
    font-size: 0.88rem !important;
}

/* Hover state: clean, light bubble highlight */
.nav-capsule-btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 
        0 12px 30px rgba(0, 0, 0, 0.3),
        0 0 15px rgba(255, 255, 255, 0.12) !important;
}

/* Active Page Highlight Design (當頁的膠囊高亮設計) */
.nav-capsule-btn.active {
    background: rgba(255, 255, 255, 0.16) !important; /* brighter active background */
    border-color: rgba(255, 255, 255, 0.38) !important; /* brighter active border */
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.25),
        0 0 20px rgba(255, 255, 255, 0.18), /* soft white aura highlight for active page! */
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 10px rgba(255, 255, 255, 0.3) !important;
}

/* Logo link (TOM HSIAO) - bold */
.nav-capsule-btn.logo-btn {
    font-weight: 700 !important;
}
.nav-capsule-btn.logo-btn.active {
    font-weight: 800 !important;
}

/* Remove bottom indicator line */
.unslate_co--site-nav a::after {
    display: none !important;
}

/* Mobile responsive padding and sizing for floating capsules */
@media (max-width: 768px) {
    .unslate_co--site-nav {
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }
    .nav-capsule-btn {
        padding: 6px 16px !important;
        font-size: 0.76rem !important;
    }
}

/* Typewriter Title styling in Hero section (Perfect Centering & 3D Parallax container) */
.interactive-title-container {
    font-family: 'Outfit', 'Noto Sans TC', sans-serif;
    text-align: center;
    color: #ffffff;
    padding: 2rem;
    margin: 0 auto !important; /* Vertically and horizontally centered by Flexbox parent */
    width: 100%;
    user-select: none;
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform 0.15s ease-out; /* Smooth spring back when mouse leaves */
}

.interactive-title {
    font-size: 2.6rem !important; /* Smaller, refined desktop size */
    font-weight: 800 !important;
    line-height: 1.45 !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 1.5rem !important;
    text-transform: uppercase;
    transform: translateZ(30px); /* 3D layer pop */
    
    /* Interactive Mouse-magnetic gradient glow */
    background: radial-gradient(circle 200px at var(--title-mouse-x, 50%) var(--title-mouse-y, 50%), #ffffff 0%, rgba(255, 255, 255, 0.45) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: #ffffff;
}

@media (max-width: 768px) {
    .interactive-title {
        font-size: 1.7rem !important; /* Smaller mobile size */
        letter-spacing: 0.05em !important;
    }
}

.interactive-line {
    display: block; /* split sentences into lines/paragraphs */
    margin-bottom: 0.4rem;
}

.word-span {
    display: inline-block;
    white-space: nowrap;
}

.hover-char {
    display: inline-block;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: default;
    transform-origin: center bottom;
}

.hover-char:hover {
    transform: translateY(-10px) scale(1.3) translateZ(15px);
    color: #ffffff !important;
    text-shadow: 0 0 20px rgba(255, 255, 255, 1), 0 0 30px rgba(255, 255, 255, 0.6);
}

/* Highlight words (virtuality & reality) styling */
.hover-char.highlight-char {
    background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

.hover-char.highlight-char:hover {
    background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}

.interactive-subtitle {
    font-family: 'Source Code Pro', monospace;
    color: rgba(255, 255, 255, 0.75);
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    border-right: 2px solid rgba(255, 255, 255, 0.75);
    display: inline-block;
    padding-right: 5px;
    min-height: 1.5em;
    animation: blinkCaret 0.8s step-end infinite;
    transform: translateZ(15px); /* slightly popped back layer */
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
    .interactive-subtitle {
        font-size: 0.95rem;
    }
}

@keyframes blinkCaret {
    from, to { border-color: transparent }
    50% { border-color: #ffffff }
}

/* Hero Cover Styling (Transparent to let body Fixed Background show through) */
.cover-v1 {
    background: transparent !important;
    background-image: none !important;
    position: relative;
    overflow: hidden;
}

.cover-v1::after {
    display: none !important; /* remove dark overlay to keep it bright and colorful */
}

/* Mouse scroll indicator wrap tweak */
.mouse-wrap .mouse {
    border: 2px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.mouse-wrap .mouse .scroll {
    background: #ffffff !important;
}

/* Main Content Sections: Floating Frosted Dark Glass Panel Dashboard (Interactive Mouse Glow & Soft Shadow) */
/* Main Content Sections: Floating Frosted Dark Glass Panel Dashboard (Interactive Mouse Glow & Soft Shadow) */
.unslate_co--section {
    position: relative !important; /* Context for absolute grid overlay */
    
    /* Base translucent dark glass with dynamic mouse spotlight glow gradient */
    background: 
        radial-gradient(circle 700px at var(--section-mouse-x, 50%) var(--section-mouse-y, 50%), rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 80%),
        rgba(10, 10, 10, 0.35) !important;
        
    backdrop-filter: blur(18px) saturate(110%);
    -webkit-backdrop-filter: blur(18px) saturate(110%);
    
    /* Clean glass border */
    border: 1px solid rgba(255, 255, 255, 0.12) !important; 
    border-radius: 48px !important;
    
    /* Removed heavy bottom shadow: extremely soft, clean shadow, and bright top rim inset highlight */
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.08), 
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    
    /* Make the section float over the background with elegant bottom margin */
    margin: 3rem 6% 3rem 6% !important; /* Restored elegant gap spacing */
    padding: 5rem 4rem !important;
    
    transition: border-color 0.4s ease, box-shadow 0.4s ease !important;
}

/* Dynamic Spotlight-revealed Gemini Blueprint Grid Pattern */
.unslate_co--section::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 48px !important;
    pointer-events: none;
    z-index: 0;
    
    /* The static grid pattern (cleaner opacity 16%) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cline x1='12' y1='9' x2='12' y2='15' stroke='rgba%28255,255,255,0.16%29' stroke-width='1'/%3E%3Cline x1='9' y1='12' x2='15' y2='12' stroke='rgba%28255,255,255,0.16%29' stroke-width='1'/%3E%3C/svg%3E") !important;
    background-repeat: repeat !important;
    
    /* Radial spotlight mask: makes crosses visible ONLY inside a 220px circle around mouse */
    -webkit-mask-image: radial-gradient(circle 220px at var(--section-mouse-x, 50%) var(--section-mouse-y, 50%), black 0%, transparent 80%) !important;
    mask-image: radial-gradient(circle 220px at var(--section-mouse-x, 50%) var(--section-mouse-y, 50%), black 0%, transparent 80%) !important;
    
    opacity: 0; /* Hidden by default */
    transition: opacity 0.5s ease !important;
}

/* Fades in on Hover */
.unslate_co--section:hover::before {
    opacity: 1;
}

.unslate_co--section:hover {
    border-color: rgba(255, 255, 255, 0.18) !important;
    box-shadow: 
        0 15px 40px rgba(0, 0, 0, 0.15), 
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

@media (max-width: 991.98px) {
    .unslate_co--section {
        margin: 2rem 3% 2rem 3% !important;
        padding: 4rem 2rem !important;
        border-radius: 36px !important; /* Increased for tablet */
    }
}

@media (max-width: 768px) {
    .unslate_co--section {
        margin: 1.5rem 1rem 1.5rem 1rem !important;
        padding: 3rem 1.5rem !important;
        border-radius: 28px !important; /* Increased for mobile */
    }
}

/* Portfolio Wrapper & Layout spacing */
.portfolio-wrapper .row {
    row-gap: 2.5rem;
}

/* Grid Project Card Style - Glass-on-Glass nested card panels (MORE ROUNDED) */
.portfolio-wrapper .item:has(.gsap-reveal-img) {
    margin-bottom: 0px !important;
}

.portfolio-wrapper .item .gsap-reveal-img {
    display: block;
    position: relative;
    border-radius: 50px !important; /* Default capsule border-radius */
    overflow: hidden;
    
    /* Stable hardware accelerated border to prevent subpixel flickering during scale & 3D transforms */
    border: 1px solid rgba(255, 255, 255, 0.12) !important; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    background: rgba(255, 255, 255, 0.02) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    
    /* Added transform transition to make 3D mouse tracking smooth, floating and liquid-like */
    transition: 
        border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important; 
    transform-style: preserve-3d;
    will-change: transform;
}

/* Capsule Style shape dynamic scaling based on grid column width */
.portfolio-wrapper .item.col-md-12 .gsap-reveal-img,
.portfolio-wrapper .item.col-md-6 .gsap-reveal-img,
.portfolio-wrapper .item.col-md-5 .gsap-reveal-img {
    border-radius: 50px !important;
}

.portfolio-wrapper .item.col-md-4 .gsap-reveal-img,
.portfolio-wrapper .item.col-md-3 .gsap-reveal-img {
    border-radius: 9999px !important;
}

/* Ensure inner structures inherit the capsule curves cleanly */
.portfolio-wrapper .item .gsap-reveal-img .reveal-wrap,
.portfolio-wrapper .item .gsap-reveal-img .reveal-content,
.portfolio-wrapper .item .gsap-reveal-img img,
.portfolio-wrapper .item .gsap-reveal-img::before,
.portfolio-wrapper .item .gsap-reveal-img::after {
    border-radius: inherit !important;
}

.portfolio-wrapper .item .gsap-reveal-img::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, rgba(10, 10, 10, 0) 50%, rgba(10, 10, 10, 0.5) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 3;
    pointer-events: none;
}

/* Card Hover Animation - Elegant Grow, Smooth Solid Border transition and Silver Glow */
.portfolio-wrapper .item:has(.gsap-reveal-img):hover .gsap-reveal-img {
    border-color: rgba(255, 255, 255, 0.45) !important; /* smooth solid border highlight, zero flickering */
    box-shadow: 
        0 20px 45px rgba(0, 0, 0, 0.6), 
        0 0 25px rgba(255, 255, 255, 0.1);
}

.portfolio-wrapper .item .gsap-reveal-img img {
    width: 100% !important;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
    pointer-events: none;
}

.portfolio-wrapper .item:has(.gsap-reveal-img):hover .gsap-reveal-img img {
    transform: scale(1.025) !important;
}

.portfolio-wrapper .item:has(.gsap-reveal-img):hover .gsap-reveal-img::after {
    opacity: 1;
}

/* Card Hover 3D Perspective & Soft-Blurred Halftone Spotlight Overlay (Enlarged card border-radius) */
.portfolio-wrapper .item .gsap-reveal-img::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 28px !important;
    background-image: 
        radial-gradient(rgba(255, 255, 255, 0.4) 30%, transparent 30%),
        radial-gradient(rgba(255, 255, 255, 0.4) 30%, transparent 30%);
    background-size: 12px 12px;
    background-position: 0 0, 6px 6px;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: overlay;
    filter: blur(1px) !important;
    transition: opacity 0.35s ease;
    
    /* Radial gradient mask: cursor-centered spotlight, completely transparent outside 120px */
    -webkit-mask-image: radial-gradient(circle 120px at var(--mouse-x, 50%) var(--mouse-y, 50%), white 0%, rgba(255, 255, 255, 0.8) 45%, transparent 100%);
    mask-image: radial-gradient(circle 120px at var(--mouse-x, 50%) var(--mouse-y, 50%), white 0%, rgba(255, 255, 255, 0.8) 45%, transparent 100%);
}

.portfolio-wrapper .item:has(.gsap-reveal-img):hover .gsap-reveal-img::before {
    opacity: 1;
}

/* Portfolio Info Sibling (title/category) */
.portfolio-wrapper .item:has(h3) {
    padding-top: 0.7rem !important;
    margin-top: -1.4rem;
}

.portfolio-wrapper .item h3 {
    font-family: 'Outfit', 'Noto Sans TC', sans-serif !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    margin-bottom: 4px !important;
    letter-spacing: 0.02em;
    transition: color 0.3s ease;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); /* text shadow for high readability on gradient background */
}

.portfolio-wrapper .item p {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.75) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    margin-bottom: 0 !important;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}

/* Connecting Hover of image card with text card */
.portfolio-wrapper .item:has(.gsap-reveal-img):hover + .item h3,
.portfolio-wrapper .item:has(.gsap-reveal-img):hover h3 {
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

/* Info & About Page Redesign (Borderless Elegant Floating Typography & Capsule Avatar) */
#about-section figure.gsap-reveal-img {
    width: 100%;
    aspect-ratio: 1 / 1; /* Perfect circle aspect ratio */
    border-radius: 50% !important; /* Perfect circle default */
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    transition: 
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.4s ease;
    background: rgba(255, 255, 255, 0.02);
}

#about-section figure.gsap-reveal-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#about-section figure.gsap-reveal-img:hover {
    transform: scale(1.025);
    border-radius: 50% !important; /* Keep perfect circle on hover */
    border-color: rgba(255, 255, 255, 0.35) !important;
}

#about-section figure.gsap-reveal-img:hover img {
    transform: scale(1.04) !important;
}

#about-section h3.heading-h3 span.gsap-reveal {
    font-family: 'Outfit', 'Noto Sans TC', sans-serif !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, #ffffff 0%, #ffffff 60%, #cbd5e1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.about-content {
    font-family: 'Inter', 'Noto Sans TC', sans-serif !important;
    color: #ffffff !important;
    line-height: 1.85 !important;
    font-size: 0.95rem !important;
    font-weight: 350;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* Experience, Exhibition and lists styled as modern borderless floating panels (No background plate) */
#about-section .row.mt-5 > .col-0.col-md-7,
#about-section .row.mt-5 > .col-0.col-md-4.about-content {
    background: transparent !important; /* No background plates for ultimate clean borderless layout */
    border: none !important;
    border-radius: 0 !important;
    padding: 0 1rem !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    transition: transform 0.4s ease;
}

#about-section .row.mt-5 > .col-0.col-md-7:hover,
#about-section .row.mt-5 > .col-0.col-md-4.about-content:hover {
    transform: translateY(-2px); /* Gentle float up on hover */
    background: transparent !important;
    box-shadow: none !important;
}

/* Sub-headers on About Page */
#about-section h3 {
    font-family: 'Outfit', sans-serif !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: 0.05em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

#about-section hr {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: 3rem;
    margin-bottom: 3rem;
}

/* Footer Redesign: Modern Glassmorphic Mac-style Social Dock */
.unslate_co--footer {
    background: transparent !important; /* completely transparent background so body background shows */
    border-top: none !important;
    padding: 40px 0 80px 0 !important; /* Restored generous, breathing padding for elegant height */
    margin-top: 20px !important; /* Elegant spacing between section bottom and dock */
}

/* Centered wrapper for the Social Dock */
.footer-dock-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Frosted Glass Mac Dock Container (Single container for sliding bubble background) */
.footer-dock {
    position: relative !important; /* relative for absolute bubble placement */
    display: inline-flex;
    align-items: center;
    background: rgba(10, 10, 10, 0.4) !important; /* translucent dark base */
    backdrop-filter: blur(20px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important; /* thin glass hairline border */
    border-radius: 80px !important; /* dock pill shape */
    padding: 8px 18px !important; /* padding inside dock */
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* The dynamic sliding bubble background element (iPhone-style hover background) */
.dock-bubble {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
    pointer-events: none;
    z-index: 1; /* behind icons */
    opacity: 0;
    transform: scale(0.85);
    transition: 
        left 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        top 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        height 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.25s ease,
        transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.15),
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease !important;
}

/* Individual Dock Items (Bare icons with no static borders or backgrounds) */
.dock-item {
    position: relative !important;
    z-index: 2 !important; /* display in front of sliding bubble */
    display: flex !important;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    background: transparent !important; /* no static background */
    border: none !important; /* no static border */
    border-radius: 50% !important;
    color: rgba(255, 255, 255, 0.6) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.6) !important;
    font-size: 1.25rem !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    text-decoration: none !important;
}

/* Individual item hover dynamic transform */
.dock-item:hover {
    transform: translateY(-4px) scale(1.12);
}

/* Footer Credits & Texts (Centered Alignment Enabled) */
.footer-credits {
    font-family: 'Inter', sans-serif;
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.05em;
    margin-top: 15px;
    text-align: center !important; /* Force center alignment */
}

.footer-credits p {
    color: rgba(255, 255, 255, 0.45) !important;
    text-align: center !important; /* Force center alignment on paragraph elements */
}

.footer-credits a.credits-logo {
    color: rgba(255, 255, 255, 0.75) !important;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-credits a.credits-logo:hover {
    color: #ffffff !important;
}

.footer-credits a.credits-email {
    color: rgba(255, 255, 255, 0.55) !important;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-credits a.credits-email:hover {
    color: #ffffff !important;
}

/* Mobile Responsive adjustment for Dock */
@media (max-width: 768px) {
    .footer-dock {
        gap: 10px;
        padding: 8px 16px !important;
    }
    .dock-item {
        width: 36px;
        height: 36px;
        font-size: 0.95rem !important;
    }
}

/* Customize Who's The Bad Wolf card to prevent cropping the gold frame */
.portfolio-wrapper .item .gsap-reveal-img.badwolf-card,
.portfolio-wrapper .item .gsap-reveal-img.badwolf-card .reveal-wrap,
.portfolio-wrapper .item .gsap-reveal-img.badwolf-card .reveal-content,
.portfolio-wrapper .item .gsap-reveal-img.badwolf-card img,
.portfolio-wrapper .item .gsap-reveal-img.badwolf-card::before,
.portfolio-wrapper .item .gsap-reveal-img.badwolf-card::after {
    border-radius: 0px !important; /* Completely square corners to preserve gold frame decorations! */
}

.badwolf-combined-images {
    display: flex !important;
    width: 100% !important;
}

.badwolf-combined-images img {
    width: 50% !important;
    max-width: 50% !important;
    height: auto !important;
}

/* Image reveal transitions override for smoother feel */
.reveal-wrap {
    border-radius: 28px;
    overflow: hidden;
}

/* Project Page specific overrides (No big bottom panel) */
.unslate_co--section.project-page-container {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    padding-top: 7rem !important; /* spacing below nav capsule */
    padding-bottom: 2rem !important;
}

/* 💊 Google Capsule Dock Styles */
.dock-container-wrap {
    width: 100%;
    margin-bottom: 50px;
    padding: 0 15px;
}

.dock-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.45) !important;
    text-transform: uppercase;
    margin-bottom: 20px;
    text-align: left;
    padding-left: 10px;
    border-left: 3px solid rgba(255, 255, 255, 0.3);
}

.featured-capsule-dock {
    display: flex;
    gap: 12px;
    width: 100%;
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(25px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(140%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 40px !important;
    padding: 16px !important;
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none; /* Hide standard Firefox scrollbar */
}

.featured-capsule-dock::-webkit-scrollbar {
    display: none; /* Hide Chrome/Safari scrollbar */
}

.dock-item-card {
    flex: 1;
    min-width: 90px;
    height: 280px;
    border-radius: 9999px !important; /* Vertical capsule */
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: rgba(0, 0, 0, 0.2) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    transition: 
        flex 0.65s cubic-bezier(0.16, 1, 0.3, 1), 
        border-radius 0.65s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.4s ease,
        box-shadow 0.4s ease !important;
    text-decoration: none !important;
    display: block;
}

.dock-item-card:hover {
    flex: 3.5; /* Expand horizontally when selected/hovered */
    border-radius: 45px !important; /* Morph to wide rounded rectangle */
    border-color: rgba(255, 255, 255, 0.55) !important;
    box-shadow: 
        0 20px 45px rgba(255, 255, 255, 0.1),
        0 20px 40px rgba(0, 0, 0, 0.5) !important;
}

.dock-img-wrap {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0; left: 0;
    z-index: 1;
}

.dock-item-card img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.dock-item-card:hover img {
    transform: scale(1.04) !important;
}

.dock-card-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0; top: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0) 100%) !important;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 24px 20px;
    opacity: 0;
    transition: opacity 0.5s ease !important;
    pointer-events: none;
}

.dock-item-card:hover .dock-card-overlay {
    opacity: 1;
}

.dock-card-title {
    font-family: 'Outfit', 'Noto Sans TC', sans-serif !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    transform: translateY(12px);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 90%;
}

.dock-item-card:hover .dock-card-title {
    transform: translateY(0);
}

/* 🍱 Bento Grid Styles */
.bento-container-wrap {
    width: 100%;
    padding: 0 15px;
    margin-top: 20px;
}

.bento-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.45) !important;
    text-transform: uppercase;
    margin-bottom: 25px;
    text-align: left;
    padding-left: 10px;
    border-left: 3px solid rgba(255, 255, 255, 0.3);
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Strict 4 columns in a row */
    grid-auto-rows: 250px; /* Spacious row height */
    gap: 20px; /* Spacious gap */
    width: 100%;
}

.bento-item {
    position: relative !important;
    overflow: hidden;
    background: rgba(10, 10, 10, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.3);
    transition: 
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
        border-radius 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.4s ease, 
        box-shadow 0.4s ease !important;
    cursor: pointer;
}

.bento-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: 
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        border-radius 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
    pointer-events: none;
}

.bento-item:hover {
    transform: scale(1.025);
    border-color: rgba(255, 255, 255, 0.4) !important;
    box-shadow: 
        0 15px 35px rgba(255, 255, 255, 0.12), 
        0 20px 40px rgba(0, 0, 0, 0.45) !important;
}

.bento-item:hover img {
    transform: scale(1.04) !important;
}

/* Glassmorphic Caption Overlay (Only shows on Hover) */
.bento-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.22) !important; /* Lighter overlay mask to see the underlying image clearly */
    backdrop-filter: blur(4px) saturate(110%) !important; /* Low blur to keep the background photo recognizable */
    -webkit-backdrop-filter: blur(4px) saturate(110%) !important;
    opacity: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 24px;
    transition: 
        opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        border-radius 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 3;
    pointer-events: none;
    text-align: center;
}

.bento-item:hover .bento-overlay {
    opacity: 1;
}

.bento-overlay h3 {
    font-family: 'Outfit', 'Noto Sans TC', sans-serif !important;
    color: #ffffff !important;
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85); /* Slightly stronger shadow for high readability on light backgrounds */
    max-width: 90%;
    transform: translateY(12px);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.bento-item:hover .bento-overlay h3 {
    transform: translateY(0);
}

.bento-overlay p {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.72rem !important;
    color: rgba(255, 255, 255, 0.7) !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    margin-bottom: 0 !important;
    transform: translateY(16px);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.05s !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.bento-item:hover .bento-overlay p {
    transform: translateY(0);
}

/* Shapes configuration */
.bento-item {
    overflow: hidden !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
}

.bento-circle {
    grid-column: span 1;
    grid-row: span 1;
    border-radius: 9999px !important;
}

.bento-circle img,
.bento-circle .bento-overlay {
    border-radius: 9999px !important;
}

.bento-squircle {
    grid-column: span 1;
    grid-row: span 1;
    border-radius: 9999px !important;
}

.bento-squircle img,
.bento-squircle .bento-overlay {
    border-radius: 9999px !important;
}

.bento-large-vertical {
    grid-column: span 1;
    grid-row: span 2;
    border-radius: 9999px !important;
}

.bento-large-vertical img,
.bento-large-vertical .bento-overlay {
    border-radius: 9999px !important;
}

.bento-wide-squircle {
    grid-column: span 2;
    grid-row: span 1;
    border-radius: 9999px !important;
}

.bento-wide-squircle img,
.bento-wide-squircle .bento-overlay {
    border-radius: 9999px !important;
}

.bento-large-horizontal {
    grid-column: span 2;
    grid-row: span 1;
    border-radius: 9999px !important;
}

.bento-large-horizontal img,
.bento-large-horizontal .bento-overlay {
    border-radius: 9999px !important;
}

/* Hover morphing: scale up and morph to standard rounded rectangle card to show full image */
.bento-item:hover,
.bento-item:hover img,
.bento-item:hover .bento-overlay,
.bento-circle:hover,
.bento-circle:hover img,
.bento-circle:hover .bento-overlay,
.bento-squircle:hover,
.bento-squircle:hover img,
.bento-squircle:hover .bento-overlay,
.bento-large-vertical:hover,
.bento-large-vertical:hover img,
.bento-large-vertical:hover .bento-overlay,
.bento-wide-squircle:hover,
.bento-wide-squircle:hover img,
.bento-wide-squircle:hover .bento-overlay,
.bento-large-horizontal:hover,
.bento-large-horizontal:hover img,
.bento-large-horizontal:hover .bento-overlay {
    border-radius: 24px !important;
}

/* Rebirth expansion override to show full view */
.dock-item-card.rebirth-dock-card:hover {
    flex: 5.5 !important;
    min-width: 620px !important;
}

/* Bad Wolf custom card: Square corners override for dock and bento */
.badwolf-bento,
.badwolf-bento img,
.badwolf-bento .bento-overlay,
.badwolf-bento:hover,
.badwolf-bento:hover img,
.badwolf-bento:hover .bento-overlay,
.dock-item-card.badwolf-dock-card,
.dock-item-card.badwolf-dock-card img,
.dock-item-card.badwolf-dock-card .dock-card-overlay {
    border-radius: 0px !important;
}

/* Who's the Bad Wolf in dock: DO NOT expand on hover */
.dock-item-card.badwolf-dock-card:hover {
    flex: 1 !important;
    min-width: 100px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
}

/* Responsive adjustment for Tablet screens */
@media (max-width: 1200px) {
    .bento-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        grid-auto-rows: 220px !important;
        gap: 16px !important;
    }
    .bento-wide-squircle,
    .bento-large-horizontal,
    .bento-large-vertical {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }
}

/* Responsive adjustment for Mobile screens */
@media (max-width: 768px) {
    .dock-container-wrap {
        margin-bottom: 30px;
    }
    .featured-capsule-dock {
        padding: 16px !important;
        gap: 12px;
    }
    .dock-item-card {
        height: 240px;
        min-width: 70px;
    }
    .dock-item-card:hover {
        flex: 2.8;
        border-radius: 30px !important;
    }
    .dock-card-title {
        font-size: 0.95rem !important;
    }
    .bento-grid {
        grid-template-columns: 1fr !important;
        grid-auto-rows: 200px !important;
        gap: 16px;
    }
    .bento-wide-squircle,
    .bento-large-horizontal,
    .bento-large-vertical,
    .bento-circle,
    .bento-squircle {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
        border-radius: 28px !important;
        aspect-ratio: auto !important;
        width: 100% !important;
        height: 100% !important;
    }
    .bento-circle img,
    .bento-circle .bento-overlay {
        border-radius: 28px !important;
    }
    .bento-spacer {
        display: none !important;
    }
}

.bento-spacer {
    grid-column: span 1;
    grid-row: span 1;
    visibility: hidden;
    pointer-events: none;
    display: block;
}


/* Overlayer screen loaders */
#unslate_co--overlayer {
    background: #060606 !important;
}

.site-loader {
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top: 3px solid #ffffff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Mouse-Following Ambient Glow Aura */
.cursor-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.08) 0%, rgba(59, 130, 246, 0.03) 50%, rgba(0, 0, 0, 0) 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998 !important; /* Bring to top so it's not hidden behind background wrappers */
    mix-blend-mode: screen;
    opacity: 0.85;
    transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), height 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease;
    will-change: transform;
}

/* Brighten glow when hovering active targets */
.cursor-glow.glow-active {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.14) 0%, rgba(59, 130, 246, 0.05) 50%, rgba(0, 0, 0, 0) 70%);
}

/* Floating Sound Toggle Button (Bottom-Right) */
.sound-toggle-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(15, 15, 15, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 9999; /* Always on top */
}

.sound-toggle-btn:hover {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    box-shadow: 0 15px 35px rgba(139, 92, 246, 0.25);
}

.sound-toggle-btn.sound-on {
    color: #a78bfa !important; /* Soft violet color when sound is enabled */
    border-color: rgba(167, 139, 250, 0.4) !important;
    box-shadow: 0 10px 30px rgba(167, 139, 250, 0.2);
}

/* Info page lists hover floating (No background plates) */
#about-section .row.mt-5 > .col-12.col-lg-6 {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 1.5rem !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    transition: transform 0.4s ease;
}

#about-section .row.mt-5 > .col-12.col-lg-6:hover {
    transform: translateY(-2px);
    background: transparent !important;
    box-shadow: none !important;
}

/* Gemini-style Cross Pattern for Bento grid overlays on hover */
.bento-item:hover .bento-overlay {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cline x1='12' y1='9' x2='12' y2='15' stroke='rgba(255,255,255,0.12)' stroke-width='1'/%3E%3Cline x1='9' y1='12' x2='15' y2='12' stroke='rgba(255,255,255,0.12)' stroke-width='1'/%3E%3C/svg%3E") !important;
    background-repeat: repeat !important;
}

/* Gemini List styling with 4-pointed sparkle stars */
.gemini-list {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

.gemini-list li {
    position: relative !important;
    padding-left: 24px !important;
    margin-bottom: 12px !important;
    line-height: 1.6 !important;
    font-size: 0.9rem !important; /* Slightly smaller for elegant non-wrapping layout */
    transition: color 0.3s ease !important;
}

.gemini-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px; /* Adjust vertical alignment to match line-height */
    width: 13px;
    height: 13px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c0 6.627-5.373 12-12 12 6.627 0 12 5.373 12 12 0-6.627 5.373-12 12-12-6.627 0-12-5.373-12-12z' fill='%23ffffff'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.3s ease !important;
}

/* Micro-animation: Star rotates and glows when hovering list item */
.gemini-list li:hover {
    color: #e2e8f0 !important;
}

.gemini-list li:hover::before {
    transform: scale(1.25) rotate(45deg) !important;
    filter: drop-shadow(0 0 4px rgba(167, 139, 250, 0.8)) !important;
}

/* Interactive Profile Click Ripple & Particle Spawner */
.profile-header-area {
    position: relative !important;
    cursor: crosshair; /* Hint at interactive grid drawing! */
}

.click-ripple-container {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 10;
}

/* Expanding Sonar Radar Ring */
.ripple-ring {
    position: absolute;
    width: 10px;
    height: 10px;
    border: 1px solid rgba(167, 139, 250, 0.5) !important;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: ring-expand 0.7s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

@keyframes ring-expand {
    0% {
        width: 10px;
        height: 10px;
        opacity: 1;
    }
    100% {
        width: 150px;
        height: 150px;
        opacity: 0;
        border-color: rgba(139, 92, 246, 0) !important;
    }
}

/* Flying Gemini Sparkle Stars */
.ripple-star {
    position: absolute;
    width: 12px;
    height: 12px;
    transform: translate(-50%, -50%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c0 6.627-5.373 12-12 12 6.627 0 12 5.373 12 12 0-6.627 5.373-12 12-12-6.627 0-12-5.373-12-12z' fill='%23a78bfa'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    animation: star-burst 0.8s cubic-bezier(0.15, 0.85, 0.25, 1) forwards;
}

@keyframes star-burst {
    0% {
        transform: translate(-50%, -50%) translate(0, 0) scale(0.3) rotate(0deg);
        opacity: 1;
        filter: drop-shadow(0 0 2px rgba(167, 139, 250, 0.8)) !important;
    }
    100% {
        transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(1.1) rotate(var(--rot));
        opacity: 0;
        filter: drop-shadow(0 0 6px rgba(139, 92, 246, 0)) !important;
    }
}