@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@600;800&family=Rubik:wght@600;800&display=swap');

/* THE FIX: Allows the entire page background to shift colors smoothly */
html {
    background-color: #08080C !important;
}

body {
    background-color: transparent !important;
    min-height: 100vh;
}

/* ==========================================================================
   HOLLOW AERO GLASS IMAGE CARDS (FROZEN FRAME, ZOOMING IMAGE)
   
   1. LAYOUT & GAPS
   -------------------------------------------------------------------------- */
.portal_items-wrap0 {
    padding: 134px 10vw 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 1vw !important; 
}

.portal_items-wrap2 {
    padding: 15px 10vw 20px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 1vw !important; 
}

/* --------------------------------------------------------------------------
   2. LAYER 1: MASTER CONTAINER (FROZEN)
   -------------------------------------------------------------------------- */
.portal_items {
    position: relative !important;
    display: block !important;
    flex: 1 1 calc(30% - 2.5vw) !important; 
    max-width: 450px !important; 
    height: 22vw !important;
    border-radius: 28px !important; 
    overflow: hidden !important;
    
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important; 
    
    z-index: 3 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
    
    /* ABSOLUTE LOCK: Card frame stays frozen */
    transform: none !important;
    transition: box-shadow 0.4s ease !important;
}

.portal_items:hover {
    transform: none !important; /* No lifting or scaling */
    z-index: 13 !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8) !important; /* Deeper shadow on hover */
}

/* --------------------------------------------------------------------------
   3. LAYER 2: THE IMAGE (ZOOMS ON HOVER)
   -------------------------------------------------------------------------- */
.portal_items__image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 28px !important;
    z-index: 4 !important; /* Under the glass */
    
    transform: scale(1) !important;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
    opacity: 1 !important; 
}

/* Image zooms smoothly behind the static mask */
.portal_items:hover .portal_items__image {
    transform: scale(1.15) !important; 
}

/* --------------------------------------------------------------------------
   4. LAYER 3: HOLLOW AERO GLASS + MASK
   -------------------------------------------------------------------------- */
.portal_items::before {
    content: '';
    position: absolute !important;
    inset: 0 !important;
    z-index: 5 !important; /* Above the image, below the text */
    pointer-events: none !important;
    border-radius: 28px !important;
    
    /* The Frosted Glass Base */
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(25px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(140%) !important;
    
    /* The Hollow Center (Mask punches a hole in the blur) */
    -webkit-mask-image: radial-gradient(circle, transparent 40%, black 70%) !important;
    mask-image: radial-gradient(circle, transparent 40%, black 70%) !important;
    
    /* Crisp inner rim */
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2) !important;

    opacity: 1 !important;
    transform: none !important;
    transition: box-shadow 0.4s ease !important;
}

/* Subtle light catch on the glass rim when hovering */
.portal_items:hover::before {
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.45), inset 0 0 30px rgba(255, 255, 255, 0.15) !important; 
}

/* --------------------------------------------------------------------------
   5. LAYER 4: STATIC TITLES (FROZEN)
   -------------------------------------------------------------------------- */
.portal_items__title {
    position: absolute !important;
    bottom: 2em !important;
    margin-left: 17.5px !important;
    padding: 1em !important;
    font-size: 1.7em !important;
    font-family: "Playfair Display", Georgia, serif !important;
    line-height: 1 !important;
    z-index: 15 !important; /* Absolute top layer */
    pointer-events: none !important;
    
    /* ABSOLUTE LOCK: Kills all movement */
    transform: none !important; 
    transition: none !important; 
}

.portal_items__titlepad span {
    display: inline-block !important;
    background-color: rgba(0, 30, 150, 0.35) !important; 
    backdrop-filter: blur(15px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(180%) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;

    color: #E8CE81 !important;
    padding: 0.3em 0.8em !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    
    /* ABSOLUTE LOCK: Kills hover color shift */
    transition: none !important; 
}

/* Reduce the border-radius on all card layers simultaneously */
.portal_items,
.portal_items__image,
.portal_items::before {
    border-radius: 8px !important; /*change card corner round*/
}


/* The Frosted Glass Frame */
.portal_items::before {
    content: '';
    position: absolute !important;
    inset: 0 !important;
    border-radius: 8px !important; /* Keeps your sharp corners */
    z-index: 5 !important;
    pointer-events: none !important;
    
    /* 1. The Frost Effect (Grabs the image underneath and blurs it) */
    background: rgba(75,226,218,0.125) !important; /* Almost entirely clear */
    backdrop-filter: blur(5px) saturate(150%) brightness(1.2)!important; /* "A little bit blurr" + rich color */
    -webkit-backdrop-filter: blur(5px) saturate(150%) brightness(1.2) !important;
    
    /* 2. THE MAGIC: Feathered Rectangular Mask */
    -webkit-mask-image: 
        linear-gradient(to bottom, black 0%, black 20px, transparent 80px),
        linear-gradient(to top, black 0%, black 20px, transparent 80px),
        linear-gradient(to right, black 0%, black 20px, transparent 80px),
        linear-gradient(to left, black 0%, black 20px, transparent 80px) !important;
        
    mask-image: 
        linear-gradient(to bottom, black 0%, black 20px, transparent 80px),
        linear-gradient(to top, black 0%, black 20px, transparent 80px),
        linear-gradient(to right, black 0%, black 20px, transparent 80px),
        linear-gradient(to left, black 0%, black 20px, transparent 80px) !important;
        
    /* Note: You no longer need padding or mask-composite for this to work! */
    
    /* 3. The subtle 3D lighting on the inner and outer edges of the glass */
    box-shadow: 
        inset 0.5px 0.7px 1px rgba(99,179,254,1.00),  /* Top-left light catch */
        inset -1px -1px 2px rgba(0, 0, 0, 0.4) !important; /* Bottom-right shadow */
}

/* Hover State (Frame catches more light) */
.portal_items:hover::before {
    box-shadow: 
        inset 1px 1px 3px rgba(77,114,246,1.0),  
        inset -1px 1px 1px rgba(0, 0, 0, 0.6) !important; 
}


/* ==========================================================================
   Appended Fixes: The Clean Layout (Gradient Face + 3D Shadows)
   ========================================================================== */
/* 1. THE BASE LAYER (Casts the 3D shadows safely) */
/* 1. THE BASE LAYER (Casts the 3D shadows safely) */
.portal_items__titlepad span {
    position: relative !important; 
    display: inline-block !important;

    /* THE NEW "STRUCTURED SOFT" FONT */
    font-size: 3.7em !important; 
    font-family: 'Rubik', sans-serif !important; /* THE FIX: Sturdy, thick, with gently softened corners */
    font-weight: 400 !important; /* Nice and thick! */
    
    /* THE FIX: Give the letters breathing room so they don't get sliced */
    line-height: 1.2 !important; 
    padding: 0 0 0.1em 0 !important; /* Adds a tiny bit of padding exactly to the bottom */

    /* Clean slate */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important; 
    animation: none !important;
    background: none !important; 

    /* Make base text invisible so ONLY its shadows show */
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;

    /* Shadows */
    text-shadow: 
        -1px -1px 4px rgba(8,8,8,0.50),             
         0.2px  -1px 5px rgba(255,255,255,0.25),            
         -3px 2px 2px rgba(12,16,18,0.20) !important; 
}



/* ==========================================================================
   THE MAGIC: Creating the Gradient Highlight Shadow
   ========================================================================== */
.portal_items__titlepad span::before {
    content: attr(data-text) !important; 
    position: absolute !important;
    z-index: -1 !important; /* Pushes it BEHIND the main text */
    

    /* 2. BLUR IT SO IT LOOKS LIKE A SHADOW */
    filter: blur(20px) !important;
    -webkit-filter: blur(20px) !important;
    
    /* 3. SET THE INTENSITY (Opacity) */
    opacity: 0.65 !important; /* Matches your old 0.65 transparency */
}


/* 2. THE TOP LAYER (The Mixed Metals Gradient Face) */
.portal_items__titlepad span::after {
    content: attr(data-text) !important; 
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    z-index: 2 !important; 

    /* Removed the center highlight for a smooth, direct fade */
    background: linear-gradient(135deg, #47CED0 0%, #3E7CEA 50%, #C0D54A 100%) !important;
    filter: contrast(200%);
    filter: brightness(115%);
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;

    -webkit-text-stroke: 1px rgba(220,221,207,0.50) !important;
    
    text-shadow: none !important; 
}

/* ==========================================================================
   UNIQUE GRADIENTS FOR EACH CARD (Targeted by data-text)
   ========================================================================== */

/* 1. MUSIC (Icy Blue to Sand Gold) */
.portal_items__titlepad span[data-text="Music"]::after {
    /* THE FIX: Use background-image so it doesn't break the text clip! */
    background-image: linear-gradient(135deg, #7DBEFF 10%, #FFAFDC 50%, #D1BE9C 80%) !important;
}

/* 2. DESIGN (Warm Peach to Sunset Orange) */
.portal_items__titlepad span[data-text="Design"]::after {
    background-image: linear-gradient(135deg, #1729C9 0%, #70E1F5 50%, #BE76DA 100%) !important; 
}

/* 3. VISUAL (Electric Purple to Mint) */
.portal_items__titlepad span[data-text="Visual"]::after {
    background-image: linear-gradient(135deg, #9BC798 0%, #6FF2DB 50%, #F79093 100%) !important; 
}

/* 3. VISUAL (Electric Purple to Mint) */
.portal_items__titlepad span[data-text="Photo"]::after {
    background-image: linear-gradient(135deg, #E9DFEF 0%, #EEA244 50%, #5EE7DF 100%) !important; 
}
/* 3. VISUAL (Electric Purple to Mint) */
.portal_items__titlepad span[data-text="Ad"]::after {
    background-image: linear-gradient(135deg, #C5A6EC 20%, #485EA8 100%) !important; 
}



/* THE FIX: Removed all !important tags from the keyframes so the browser can read it */
@keyframes textGlowShift {
    /* Soft Blue */
    0%   { text-shadow: 0 0 15px rgba(140, 200, 255, 0.9), 0 0 30px rgba(140, 200, 255, 0.5), 0 4px 10px rgba(0,0,0,0.8); } 
    /* Soft Pink */
    25%  { text-shadow: 0 0 15px rgba(255, 170, 200, 0.9), 0 0 30px rgba(255, 170, 200, 0.5), 0 4px 10px rgba(0,0,0,0.8); } 
    /* Soft Yellow/Gold */
    50%  { text-shadow: 0 0 15px rgba(255, 225, 130, 0.9), 0 0 30px rgba(255, 225, 130, 0.5), 0 4px 10px rgba(0,0,0,0.8); } 
    /* Soft Mint Green */
    75%  { text-shadow: 0 0 15px rgba(150, 240, 190, 0.9), 0 0 30px rgba(150, 240, 190, 0.5), 0 4px 10px rgba(0,0,0,0.8); } 
    /* Back to Blue */
    100% { text-shadow: 0 0 15px rgba(140, 200, 255, 0.9), 0 0 30px rgba(140, 200, 255, 0.5), 0 4px 10px rgba(0,0,0,0.8); } 
}

/* ==========================================================================
   THE MASTER AERO GLASS BOARD (Pure Frosted Glass)
   ========================================================================== */
.aero_glass_board {
    background-color: transparent !important;
    background: linear-gradient(135deg, rgba(40, 40, 55, 0.4) 0%, rgba(20, 20, 30, 0.6) 100%) !important;
    backdrop-filter: blur(35px) saturate(160%);
    -webkit-backdrop-filter: blur(35px) saturate(160%);
    
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-top: 1.5px solid rgba(255, 255, 255, 0.25); 
    border-radius: 32px;
    margin: 250px 3vw 50px 3vw; 
    padding-bottom: 50px; 
    
    box-shadow: 
        0 40px 80px rgba(0, 0, 0, 0.8), 
        inset 0 1px 0 rgba(255, 255, 255, 0.1); 
        
    position: relative;
    z-index: 15; /* Must be 2 so it sits ON TOP of the new background layers! */
}



/* ==========================================================================
   Z-INDEX & TRANSPARENCY FIX: Floating Bio and Footer
   ========================================================================== */

/* 1. APPLY GLASS ONLY TO THE OUTER FOOTER (Direct child of body) */
body > footer {
    position: relative !important;
    z-index: 10 !important; 
    
    /* THE FIX: Stripped the heavy dark paint! It is now ultra-sheer, clear glass */
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.10) 0%, rgba(0, 0, 0, 0.15) 100%) !important;
    
    /* Softened the blur so the background's true colors push through effortlessly */
    backdrop-filter: blur(6px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(6px) saturate(120%) !important;
    
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.075), inset 0 0.15px 0 rgba(255, 255, 255, 0.2) !important;
    
    /* Smooth Apple-style dock curves */
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
    overflow: hidden !important;
}

/* 2. THE FIX: Strip the paint off EVERY inner box so the blur shines through */
.digital-services, 
.digital-services .container-fluid,
.digital-services .row,
.content-about, 
.light-gray-section, /* This was likely the main culprit! */
footer, 
#luchen-global-footer,
#luchen-global-footer div {
    background-color: transparent !important;
    background: transparent !important;
}

/* 3. Keep the text crisp over the glowing background */
.content-about h3,
.content-about h16 {
    position: relative !important;
    z-index: 6 !important;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8) !important;
}


/* ==========================================================================
   THE AERO GLASS PARALLAX UPGRADE (Melting Edge + Zero Lag)
   ========================================================================== */
.digital-services .last-image {
    /* 1. RESTORED: These three lines keep the box visible and tall! */
    position: relative !important;
    z-index: 4 !important; 
    min-height: 750px !important; 
    
    /* 2. Hardware-Accelerated Parallax */
    background-attachment: fixed !important;
    background-size: cover !important;
    background-position: 25% 85% !important;
    background-repeat: no-repeat !important;
    
    /* 3. The Melting Edge (Fades the hard square photo into the black background) */
    -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%) !important;
    mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%) !important;
    
    /* 4. GPU Rendering */
    transform: translateZ(0) !important; 
    border-radius: 0 !important;
}

/* ==========================================================================
   STAGE 5: TRUE VISTA AERO GLASS PARALLAX PORTRAIT
   ========================================================================== */

/* 1. The Main Box & Parallax Photo */
.digital-services .last-image {
    position: relative !important;
    z-index: 4 !important; 
    min-height: 750px !important; 
    
    /* Hardware-Accelerated Parallax */
    background-attachment: fixed !important;
    background-size: cover !important;
    background-position: 25% 85% !important;
    background-repeat: no-repeat !important;
    
    /* Outer Vista Corner Radius */
    border-radius: 13px !important; 
/*    transition: transform 0.3s ease !important;*/
    will-change: transform, box-shadow !important;

    /* SPECULAR OUTER HIGHLIGHTS & DEEP SHADOW */
    box-shadow: 
        inset 0 0 0 2px rgba(255, 255, 255, 0.3),
        inset 2px 2px 10px rgba(255, 255, 255, 0.5), 
        0 30px 60px rgba(0,0,0,0.6) !important;                
        
    /* Clear out the old melting masks! */
    -webkit-mask-image: none !important;
    mask-image: none !important;
}


/* 2. The Glass Body (Blur & Glare on the outer rim) */
.digital-services .last-image::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 1; /* Sits OVER the edges of the parallax photo */
    pointer-events: none;
    
    /* THE VISTA HORIZON GLARE */
    background: linear-gradient(
        to bottom, 
        rgba(108,157,181,0.65) 0%, 
        rgba(120,142,183,0.25) 49%, 
        rgba(135,139,208,0.05) 50%, 
        rgba(255, 255, 255, 0.2) 100%
    ) !important;
    
    backdrop-filter: blur(2.5px) saturate(100%) !important;
    -webkit-backdrop-filter: blur(2.5px) saturate(100%) !important;
    
    /* THE MAGIC HOLLOW MASK: Punches a 12px hole in the glass so the center photo is clear! */
    border: 18px solid transparent !important; /*change frame size*/
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: destination-out !important;
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) !important;
    mask-composite: exclude !important;
}


/* --------------------------------------------------------------------------
   6. RESPONSIVE SIZING
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1440px) {
    .portal_items { flex: 1 0 33.333% !important; height: 38vw !important; }
    .portal_items-wrap0:first-of-type { 
        padding: 140px 10vw 0 !important;
        gap: 2.5vw !important; 
}
    }
}

@media screen and (max-width: 1000px) {
    .portal_items { flex: 1 0 50% !important; height: 54vw !important; }
    
    /* THE FIX 1: Increased tablet font size from 1.2em to 2.5em */
    .portal_items__title span,
    .portal_items__titlepad span { font-size: 3em !important; } 
    .portal_items-wrap0:first-of-type { 
        padding: 140px 10vw 0 !important;
        gap: 2.5vw !important; 
    }
      

        .digital-services .last-image {
        /* Release the parallax lock on mobile screens so it fits the box natively */
        background-attachment: scroll !important;
        
        /* Re-center the image perfectly */
        background-position: center 20% !important;
        
        /* Shrink the box height so it frames you beautifully on a phone */
        min-height: 450px !important; 
    }
}

@media screen and (max-width: 800px) {
    .portal_items { height: 68vw !important; }
    .portal_items-wrap0:first-of-type { 
        padding-top: 140px !important; 
    }
    /* THE FIX: Prevents "L U C H E N  W a t s o n" from breaking a single letter */
    .digital-services h2,
    .digital-services h3,
    .digital-services .section-title,
    .digital-services .title-service {
        /* Forces the word to stay together on one line */
        white-space: nowrap !important;
        
        /* Smoothly scales the font down so it perfectly fits the phone screen */
        font-size: clamp(20px, 7vw, 40px) !important; 
    }
}

    
@media screen and (max-width: 590px) {
    /* THE FIX 2: Removed the "font-size: 0.8em" that was shrinking the whole card */
    .portal_items { flex: 1 0 100% !important; height: 70vw !important; }    
    
    .portal_items-wrap0:first-of-type { 
        padding-top: 140px !important; 
    }
    
    /* THE FIX 3: Explicitly set the mobile font size here so you can control it */
    .portal_items__title span,
    .portal_items__titlepad span { font-size: 3em !important; } /* Tweak this if you want it even bigger on phones! */
    
    /* THE FIX: Prevents "L U C H E N  W a t s o n" from breaking a single letter */
    .digital-services h2,
    .digital-services h3,
    .digital-services .section-title,
    .digital-services .title-service {
        /* Forces the word to stay together on one line */
        white-space: nowrap !important;
        
        /* Smoothly scales the font down so it perfectly fits the phone screen */
        font-size: clamp(20px, 7vw, 40px) !important; 
    }
    
}