/*

@keyframes loaderAnim {
	to {
		opacity: 1;
		transform: scale3d(0.5,0.5,1);
	}
}

a {
	text-decoration: none;
	color: var(--color-link);
	outline: none;
}


.frame {
	padding: 3rem 5vw;
	text-align: center;
	position: relative;
	z-index: 1000;
}

.frame__title {
	font-size: 1rem;
	margin: 0 0 0rem;
	font-weight: normal;
}
*/

.content {
	display: flex;
	flex-direction: column;
	width: 100%; 
	height: 100vh !important; /* FIXED: Now stretches 100% of the screen height */
	position: relative;
	justify-content: flex-start;
	align-items: center;
	margin: 0 !important;
	padding: 0 !important;
}

/* FIXED: Removes the default grid padding that was pushing the universe canvas down */
.portal_intro .container-fluid {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.title-group {
    position: absolute;
    top: 48.5%; /* Move the whole invisible box up or down */
    left:-2%;
    width: 100%;
    background: transparent !important;
    box-shadow: none !important;
}

.content__subtitle {
	position: absolute;
	top: 58%;
	left: -13.5vw;  /* position of title */
	width: 100%;
	text-align: center;
	margin: 0vw 0 0 0;
	z-index: 100;
	font-size: clamp(22px, 1.5vw, 40px) !important;
	color: #b7a77e;
	line-height: 1;
}

.content__title {
	position: absolute;
	top: 58%;
	left: -15vw;  /* position of title */
	width: 100%;
	text-align: center;
	margin: 0vw 0 0 0;
	z-index: 100;
	font-size: clamp(55px, 4.3vw, 120px) !important;
	color: #b7a77e;
	line-height: 1;
    text-shadow: none !important;
    background: transparent !important;
}

.content__title2 {
	position: absolute;
	top: 80%;
	width: 96%;
	text-align: center;
	margin: 0 0 0 50%;
	z-index: 100;
	font-size: 3vw;
	line-height: 1;
    letter-spacing: -1px;
    text-decoration-color: #FF3337;
}


/* ==========================================================================
(Aero Glass + Native Canvas Lift)
   
   1. THE CANVAS LIFT ENGINE (Do Not Remove)
   -------------------------------------------------------------------------- */
.portal_intro {
	position: fixed;
	z-index: 10;
	overflow: hidden;
	width: 100%;
	height: 100%;
	background: #000000; /* Deep space black */
	transition: transform 0.6s cubic-bezier(0.7, 0, 0.3, 1);
}

.portal_container {
    overflow-x: hidden;
    width: 100%;
}

/* THE MAGIC LIFT: This pushes the galaxy up and reveals the thumbnails */
.portal_container--open .portal_intro {
    transform: translate3d(0, -100%, 0) translate3d(0, 380px, 0) !important;
    border-bottom-left-radius: 28px !important;
    border-bottom-right-radius: 28px !important;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.9), 0 15px 35px rgba(0, 0, 0, 0.7) !important;
}


/* -----------------------------------------------------------------------
   2. THE TRIGGER & 4-CUBES ENGINE
   ---------------------------------------------------------------------*/
.portal_intro__content {
	position: absolute;
	bottom: 7em;
	padding: 5em 5em 0em 5em;
	width: 40%;
	font-size: 0.7em;
    z-index: 50 !important; /* Keeps text above any glass effects */
}

.portal_intro__title {
	margin: auto;
	font-weight: 500;
	font-size: 4em;
	font-family: "Playfair Display", Georgia, serif;
	line-height: 1;
    text-shadow: none !important;
    background: transparent !important;
}

.portal_intro__subtitle {
	display: flex;
	align-items: center;
}

/*Group change for  We started from here and 4 cubes*/
.portal_intro__description {
	margin: 1em 10em;
	line-height: 1.3;
	font-size: 1.5em;
}

.portal_trigger {
	position: relative;
	flex: none;
	overflow: hidden;
	margin: 4em -10em;
	padding: 0 ;
	width: 75px;
	height: 75px;
	outline: none;
	border: none;
	background: none;
    cursor: pointer;
}

.portal_trigger span {
	position: absolute;
	top: 100%; /* Hides the "View Content" text natively */
}

.portal_icon {
	transform-origin: 50% 50%;
	transition: opacity 0.4s, transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Hide grid and show cross when opening */
.portal_icon--cross,
.portal_trigger--active .portal_icon--grid {
	opacity: 0;
	transform: scale3d(0.5, 0.5, 1);
    pointer-events: none;
}

/* Reveal the X button when active */
.portal_trigger--active .portal_icon--cross {
	opacity: 1;
	transform: scale3d(1.1, 1.1, 1.1);
    pointer-events: all;
}

/* 1. Base Container Setup (Normal state before clicking) */
.portal_intro {
	position: fixed;
	z-index: 800 !important; /* THE FIX: Increased from 10 to 800 so cards can't jump over it */
	overflow: hidden;
	width: 100%;
	height: 100%;
	background: #000000; 
	transition: transform 0.6s cubic-bezier(0.7, 0, 0.3, 1);
    
    /* Keep the 3D hardware acceleration if you added it from the last step! */
    transform-style: preserve-3d !important; 
}


/* 2. The FULL Screen Aero Glass Overlay (Hidden by default) */
.portal_intro::before {
    content: '';
    position: absolute;
    inset: 0; /* Covers the ENTIRE galaxy canvas */
    z-index: 20; /* Sits ABOVE the galaxy, but BELOW the text */
    pointer-events: none;
    opacity: 0; /* Invisible before click */
    transition: opacity 0.7s cubic-bezier(0.7, 0, 0.3, 1);
    
    /* Gorgeous Glass Physics */
    background: linear-gradient(
        135deg, 
        rgba(255, 255, 255, 0.12) 0%, 
        rgba(255, 255, 255, 0.02) 50%, 
        rgba(255, 255, 255, 0.08) 100%
    );
    backdrop-filter: blur(10px) saturate(250%) brightness(200%);
    -webkit-backdrop-filter: blur(10px) saturate(250%) brightness(200%);
    
    /* The Sharp Bezel Edge & Inner Depth Shadow */
    box-shadow: 
        inset 0 0 0 1px rgba(255, 255, 255, 0.3),
        inset 1px 1px 3px rgba(255, 255, 255, 0.8),
        inset 0 0 50px rgba(0, 0, 0, 0.8);
}

/* Disable the old ::after if it was left over */
.portal_intro::after {
    display: none !important;
}

/* =======================================================
   THE TRANSFORMED STATE (When "We Started From HERE" is clicked)
   ======================================================= */

/* 3. Outer Frame & Heavy 3D Lift Shadow */
.portal_container--open .portal_intro {
    border-bottom-left-radius: 28px !important;
    border-bottom-right-radius: 28px !important;
    box-shadow: 
        0 40px 80px rgba(0, 0, 0, 0.9), 
        0 15px 35px rgba(0, 0, 0, 0.7) !important;
}

/* Reveal the Full Glass Layer and round its bottom corners */
.portal_container--open .portal_intro::before {
    opacity: 1;
    border-bottom-left-radius: 28px;
    border-bottom-right-radius: 28px;
}

/* =======================================================
   LAYERING FIX: Bring Text & Icon Above the Glass
   ======================================================= */

/* 4. Pull the "We Started From HERE" text and button to the very front */
.portal_intro__content {
    position: absolute !important; 
    z-index: 50 !important; /* Forces the text/button to sit higher than the glass (10) */
}

/* ==========================================================================
   Appended Fixes: 4-Cube Aero Glass (Bigger, Sharper, Unified Gradient)
   ========================================================================== */

/* 1. Setup the 2x2 Grid Container (Tighter gap = Bigger Cubes) */
.portal_icon--grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 4px; /* Reduced gap to make cubes larger */
    padding: 1px; /* Pushed closer to the edge, restoring original SVG scale */
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: absolute;
    inset: 0;
}

/* 2. Base Apple Glass Style (Sharper, less blur for particle visibility) */
.oled-cube {
    position: relative;
    border-radius: 18px; /* Sharper edges, back to the original aesthetic */
    border: 1px solid rgba(155,182,255,0.70); /* Crisp outer rim */
    box-shadow: 
        inset 0.5px 1px 2px rgba(178,159,237,0.60), 
        inset -1px -1px 2px rgba(0, 0, 0, 0.2), 
        0 4px 8px rgba(0, 0, 0, 0.3);
    
    /* Reduced blur to clearly see the galaxy particles sweeping underneath! */
    backdrop-filter: blur(3px) saturate(100%);
    -webkit-backdrop-filter: blur(3.5px) saturate(100%);
    
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), border 0.3s ease;
    pointer-events: all;
    overflow: hidden; /* Keeps the color layer perfectly contained */
}

/* =======================================================
   3. THE UNIFIED GRADIENT RAMP (Stitched across 4 cubes)
   ======================================================= */

.oled-cube::before {
    content: '';
    position: absolute;
    /* Sizes the gradient to cover the entire 2x2 grid perfectly (2 cubes + 1 gap) */
    width: calc(200% + 4px);
    height: calc(200% + 4px);
    
    /* The continuous color ramp */
    background: linear-gradient(
        135deg, 
        rgba(20,255,0,0.60) 0%, 
        rgba(89,0,255,0.60) 50%, 
        rgba(255,200,3,0.60) 100%
    );
    filter: contrast(2.0);
    filter: brightness(1.5);
    background-size: 150% 150%;
    animation: flowRamp 6s infinite linear;
    z-index: -1;
    pointer-events: none;
}

/* THE MAGIC: Pin the gradient to the correct corner for each cube to stitch them into one continuous image */
.oled-cube:nth-child(1)::before { top: 0; left: 0; }
.oled-cube:nth-child(2)::before { top: 0; right: 0; }
.oled-cube:nth-child(3)::before { bottom: 0; left: 0; }
.oled-cube:nth-child(4)::before { bottom: 0; right: 0; }

/* The animation that moves the unified color ramp through all cubes synchronously */
@keyframes flowRamp {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* =======================================================
   4. Elegant Lift on Hover
   ======================================================= */
.oled-cube:hover {
    transform: scale(1.01); 
    border: 2px solid rgba(255, 240, 146, 0.6) !important; /* Your custom gold border */
    z-index: 59;
    filter: brightness(1.25) blur(0.5px) contrast(150%);
    
    /* THE FIX: Kills the dark 3D inset shadows that were creating the dark pad */
    box-shadow: none !important; 
}

/* Brightens and blurs the color inside the cube you are currently hovering */
.oled-cube:hover::before {
    filter: brightness(1.3);
    
    /* THE MAGIC FIX: Scale the color layer up! 
       This pushes the faded, blurry edges completely outside the border 
       so ONLY rich, glowing color fills the inside of the cube. */
    transform: scale(1.25); 
}


/* =======================================================
   5. The "X" Close Button (Pearlescent Apple Glass)
   ======================================================= */
.portal_icon--cross {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.oled-line {
    position: absolute;
    /* Enlarged by 25% and significantly thickened */
    width: 15px; 
    height: 65px; 
    border-radius: 6px;
    
    /* Pearlescent Milky Glass Base */
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(2px) saturate(120%);
    -webkit-backdrop-filter: blur(2px) saturate(120%);
    
    /* Crisp 3D Outer Rim */
    border: 0.5px solid rgba(112,145,227,0.90);
    
    /* Continuous Shifting Pastel Lighting */
    animation: pearlLineShift 12s infinite linear;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Stagger the colors so the two crossing sticks reflect different pastel hues! */
.oled-line:nth-child(1) { 
    transform: rotate(45deg); 
    animation-delay: 0s; 
}
.oled-line:nth-child(2) { 
    transform: rotate(-45deg); 
    animation-delay: -6s; 
}

/* Interactive Spin on Hover */
.portal_trigger:hover .portal_icon--cross .oled-line:nth-child(1) { transform: rotate(135deg); }
.portal_trigger:hover .portal_icon--cross .oled-line:nth-child(2) { transform: rotate(45deg); }

/* Specially tuned inset shadows for the thin sticks */
@keyframes pearlLineShift {
    /* Soft Blue */
    0%   { box-shadow: inset 1px 1px 2px rgba(255,255,255,1), inset 0 -15px 15px rgba(140, 200, 255, 0.8), 0 4px 8px rgba(0,0,0,0.3); } 
    /* Soft Pink */
    25%  { box-shadow: inset 1px 1px 2px rgba(255,255,255,1), inset 0 -15px 15px rgba(255, 170, 200, 0.8), 0 4px 8px rgba(0,0,0,0.3); } 
    /* Soft Yellow/Gold */
    50%  { box-shadow: inset 1px 1px 2px rgba(255,255,255,1), inset 0 -15px 15px rgba(255, 225, 130, 0.8), 0 4px 8px rgba(0,0,0,0.3); } 
    /* Soft Mint Green */
    75%  { box-shadow: inset 1px 1px 2px rgba(255,255,255,1), inset 0 -15px 15px rgba(150, 240, 190, 0.8), 0 4px 8px rgba(0,0,0,0.3); } 
    /* Back to Blue */
    100% { box-shadow: inset 1px 1px 2px rgba(255,255,255,1), inset 0 -15px 15px rgba(140, 200, 255, 0.8), 0 4px 8px rgba(0,0,0,0.3); } 
}



@media screen and (max-width: 800px) {
    .content {
	display: flex;
	flex-direction: column;
	width: 100%; 
	height: 100vh !important; /* FIXED: Now stretches 100% of the screen height */
	position: relative;
	justify-content: flex-start;
	align-items: center;
	margin: 0 !important;
	padding: 0 !important;
}

    .portal_intro .container-fluid {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
    .title-group {
    position: absolute;
    top: 46%; /* Move the whole invisible box up or down */
    left: 4.8%;
    width: 100%;
    /* Enlarges the group */
    transform: scale(1.1); 
    transform-origin: center center; 
    /* THE FIX: Pulls the text back in front of the galaxy canvas! */
    z-index: 100 !important;  
    background: transparent !important;
    box-shadow: none !important;    
}

	.content__title {
	top: 60%;
	left: -11vw;      /* position of title */
	font-size: 10vw;
}
	.content__title2 {
	top: 20%;
	left: -17vw;  /* position of title */
	font-size: 4.5vw;
}	
	.content__subtitle {
	top: 57%;
	left: -10vw; 
	font-size: 3.7vw;
}
    /* 1. Move the entire group to align with the left edge of "Luniverse" */
    .portal_intro__content {
        width: 100% !important;
        padding: 0 !important;
        left: 14vw !important; /* TWEAK THIS: Increase to push right, decrease to pull left */
        bottom: 12vh !important; 
    }

    /* 2. Ensure perfect horizontal flex alignment */
    .portal_intro__subtitle {
        display: flex !important;
        align-items: center !important; 
        justify-content: flex-start !important;
    }

    /* 3. Clean up the text: kill conflicting margins and force 2 clean lines */
    .portal_intro__description {
        margin: 0 !important;
        margin-right: 2vw !important; /* Spacing between the text and the cubes */
        
        /* Stops the text from squishing into 4 lines */
        white-space: nowrap !important; 
        font-size: 16px !important; 
        line-height: 1.3 !important;
    }

/*    4cubes change size transfer to X button */
    .portal_trigger {
        margin: 0 !important;
        width: 66px !important;
        height: 66px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
    }
    
    /* Target strictly the "X" button icon ONLY when the portal is open */
    .portal_trigger--active .portal_icon--cross {
        /* The scale3d(1,1,1) keeps it fully visible, translateY pushes it down */
        transform: scale3d(1.05, 1.05, 1.05) translateY(45px) !important; 
    }
    
    /* 4. Make the text slide down to perfectly align with the offset X button */
    .portal_container--open .portal_intro__description {
        transform: translateY(50px) !important; /* Matches the 12px offset of your X button */
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
    }

    /* Ensure it smoothly glides back up when closing */
    .portal_intro__description {
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
        text-align-last: justify !important; /* Forces lines broken by <BR> to stretch */
    }
    
}