/* === Font Import (Tailwind Default Font Stack Fallback) === */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* === Root Design System === */
:root {
    /* Orange Brand Colors */
    --orange-50: #fff7ed;
    --orange-100: #ffedd5;
    --orange-200: #fed7aa;
    --orange-300: #fdba74;
    --orange-400: #fb923c;
    --orange-500: #f97316;
    --orange-600: #ea580c;
    --orange-700: #c2410c;
    --orange-800: #9a3412;

    /* Background Colors */
    --zinc-900: #18181b;

    /* Glass/Transparency Colors */
    --white-5: rgba(255, 255, 255, 0.05);
    --white-10: rgba(255, 255, 255, 0.1);
    --white-20: rgba(255, 255, 255, 0.2);
    --white-30: rgba(255, 255, 255, 0.3);
    --white-60: rgba(255, 255, 255, 0.6);
    --white-70: rgba(255, 255, 255, 0.7);
    --white-80: rgba(255, 255, 255, 0.8);
    --white-90: rgba(255, 255, 255, 0.9);

    /* Black Overlays */
    --black-10: rgba(0, 0, 0, 0.1);
    --black-20: rgba(0, 0, 0, 0.2);
    --black-50: rgba(0, 0, 0, 0.5);
    --black-90: rgba(0, 0, 0, 0.9);

    /* Orange with Transparency */
    --orange-500-10: rgba(249, 115, 22, 0.1);
    --orange-500-20: rgba(249, 115, 22, 0.2);
    --orange-400-30: rgba(251, 146, 60, 0.3);

    /* Font Stack */
    --font-primary: 'Inter', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    /* Text Sizes */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;
    --text-8xl: 6rem;

    /* Font Weights */
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* Line Height */
    --leading-relaxed: 1.625;

    /* Border Radius */
    --rounded-lg: 0.5rem;
    --rounded-xl: 0.75rem;
    --rounded-2xl: 1rem;
    --rounded-3xl: 1.5rem;
    --rounded-full: 9999px;

    /* Shadows */
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* Background Gradients */
    --main-gradient: linear-gradient(to bottom right, #fff7ed, #ffffff, #fff7ed);
    --hero-overlay: linear-gradient(to bottom right, rgba(234, 88, 12, 0.2), rgba(154, 52, 18, 0.2));
    --cta-gradient: linear-gradient(to right, #ea580c, #9a3412);
    --image-overlay-1: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent, transparent);
    --image-overlay-2: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);

    /* Glass Cards */
    --glass-card-bg: rgba(255, 255, 255, 0.05);
    --glass-card-border: 1px solid rgba(255, 255, 255, 0.1);
    --glass-card-blur: blur(24px);

    /* Glass Nav */
    --glass-nav-bg: rgba(255, 255, 255, 0.1);
    --glass-nav-border: 1px solid rgba(255, 255, 255, 0.2);
    --glass-nav-blur: blur(16px);

    /* Glass Buttons */
    --glass-btn-bg: rgba(255, 255, 255, 0.2);
    --glass-btn-border: 1px solid rgba(255, 255, 255, 0.3);
    --glass-btn-blur: blur(4px);

    /* Padding */
    --p-3: 0.75rem;
    --p-4: 1rem;
    --p-6: 1.5rem;
    --p-8: 2rem;
    --p-12: 3rem;

    /* Width & Height */
    --w-4-h-4: .6rem;
    --w-5-h-5: 1.25rem;
    --w-6-h-6: 1.5rem;
    --w-8-h-8: 2rem;

    /* Button Padding */
    --btn-sm: 0.75rem 0.5rem;
    --btn-base: 1rem 0.5rem;
    --btn-lg: 1.5rem 0.75rem;
    --btn-xl: 2rem 1rem;
}


* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

li {
    list-style-type: none;
    border-bottom: var(--glass-nav-border);
    padding: 0.5rem;
    background-color: var(--black-50);
    text-align: center;
}

.dropdown-menu {
    position: absolute;
    padding-top: 12px;
    left: 0;
    width: 100%;
    bottom: -200px;
    transform: scaleY(0);
    transition: transform 0.4s ease-in;
    transform-origin: 50% 0%;
    color: var(--white-90);
}

.dropdown-menu.active {
    transform: scaleY(1);
}

.island-icon i {
    font-size: var(--w-4-h-4);
}

.image-holder.display-card-1 {
    transform: rotateY(0deg) translateX(2%);
    animation: turnSlightly 4s ease forwards;
    pointer-events: all;
    z-index: 5;
}

.image-holder.display-card-2 {
    transform: rotateY(-24deg) translateX(-120%);
    z-index: 4;
}

.image-holder.hidden-display-card {
    visibility: hidden;
    z-index: 2;
}

.display-card-2::after,
.display-card-3::after {
    position: absolute;
    content: '';
    border-radius: var(--rounded-xl);
    inset: 0;
    backdrop-filter: blur(12px);
    /* this blurs the background behind it */
    background: rgba(255, 255, 255, 0.1);
    /* optional glass effect */
}

.image-holder.display-card-3 {
    transform: rotateY(24deg) translateX(120%);
    z-index: 3;
}

.projectDisplay {
    background-color: var(--zinc-900);
    width: 100dvw;
    height: 100dvh;
    overflow: hidden;
    touch-action: none;
}

.island-holder {
    position: fixed;
    top: 0;
    left: 0;
    height: 84px;
    width: 100%;
    align-content: center;
    z-index: 30;
}

.island-holder:hover {
    cursor: pointer;
}

.back-to{
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.back-to a{
    text-decoration: none;
    color: var(--black-90);
    font-size: var(--text-sm);
}

.island {
    margin: 0 auto;
    height: max-content;
    width: max-content;
    padding: var(--p-3) var(--p-4);
    border-radius: var(--rounded-full);
    background-color: var(--glass-nav-bg);
    border: var(--glass-nav-border);
    backdrop-filter: var(--glass-nav-blur);
    /*whats this*/
    color: var(--black-90);
    font-family: var(--font-primary);
    font-weight: var(--font-medium);
    font-size: var(--text-xs);
    display: flex;
    column-gap: 6px;
    letter-spacing: .1em;
}

.project-body {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.project-body::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 5;
    backdrop-filter: var(--glass-nav-blur);
}

.image-holder {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--glass-card-bg);
    border: var(--glass-card-border);
    backdrop-filter: var(--glass-card-blur);
    border-radius: var(--rounded-2xl);
    pointer-events: none;
}

.image-display-holder {
    height: 70%;
    max-height: 460px;
    width: 90%;
    max-width: 320px;
    perspective: 400px;
    transform-style: preserve-3d;
    position: relative;
    z-index: 10;
}

.image-display-holder.landscape {
    width: 90%;
    aspect-ratio: 2/1;
    max-width: 640px;
    height: unset;
}

@media (min-width:768px) {
    .image-display-holder {
        max-width: 420px;
        max-height: 560px;
    }
}

@keyframes turnSlightly {
    to {
        transform: rotate(0deg) translateX(0);
    }
}