/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --color-black: #000000;
    --color-white: #ffffff;
    --color-grey: #808080;
    --color-light-grey: #d3d3d3;
    --color-beige: #f5f5dc;
    --color-dark-blue: #1a1a2e;
    --color-dark-red: #8b0000;
    --color-olive-green: #556b2f;
    --color-pink: #ffc0cb;
    --color-eggshell: #f5f5f0;
}

* {
    cursor: none !important;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    background-color: var(--color-white);
    color: var(--color-black);
    line-height: 1.6;
    overflow-x: hidden;
    cursor: none !important;
}

html {
    cursor: none !important;
}

/* Custom Cursor */
.cursor {
    width: 30px;
    height: 30px;
    border: 2px solid var(--color-white);
    background-color: transparent;
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), 
                width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), 
                height 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                border-color 0.2s ease,
                background-color 0.2s ease;
    transform: translate(-50%, -50%);
    mix-blend-mode: difference;
    opacity: 0;
    will-change: transform, width, height;
}

.cursor.visible {
    opacity: 1;
}

.cursor-dot {
    width: 6px;
    height: 6px;
    background-color: var(--color-white);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%);
    transition: transform 0.1s ease, width 0.2s ease, height 0.2s ease;
    mix-blend-mode: difference;
    opacity: 0;
    will-change: transform;
}

.cursor-dot.visible {
    opacity: 1;
}

.cursor.hover {
    width: 50px;
    height: 50px;
    border-width: 1px;
}

.cursor.shrink {
    width: 15px;
    height: 15px;
    border-width: 2px;
}

.cursor.grow {
    width: 60px;
    height: 60px;
    border-width: 1px;
}

.cursor.click {
    transform: translate(-50%, -50%) scale(0.7);
}

.cursor-dot.hover {
    width: 8px;
    height: 8px;
}

.cursor-dot.shrink {
    width: 3px;
    height: 3px;
}

/* Corner Navigation Elements */
.corner-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1000;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.corner-nav.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.corner-item {
    position: absolute;
    pointer-events: all;
    z-index: 1001;
}

.corner-about {
    top: 1.7vw;
    left: 3vw;
}

.corner-directions {
    top: 1.7vw;
    right: 3vw;
}

.corner-label {
    display: inline-block;
    color: var(--color-black);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    z-index: 2;
}

.corner-expand {
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    background-color: var(--color-white);
    border: 1px solid var(--color-black);
    opacity: 0;
    transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                height 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.4s ease 0.1s,
                padding 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 1;
    padding: 0;
    white-space: nowrap;
    pointer-events: none;
}

.corner-about .corner-expand {
    left: 0;
    transform-origin: top left;
}

.corner-directions .corner-expand {
    right: 0;
    transform-origin: top right;
}

.corner-expand p {
    padding: 20px 30px;
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-black);
    white-space: normal;
    opacity: 0;
    transition: opacity 0.3s ease 0.2s;
}

.corner-item {
    position: absolute;
    pointer-events: all;
    z-index: 1001;
}

.corner-expand {
    pointer-events: all;
}

.corner-item:hover .corner-label,
.corner-item:hover .corner-expand ~ .corner-label {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    width: auto;
    text-align: center;
    margin: 0;
}

.corner-about:hover .corner-label {
    left: 50%;
    transform: translateX(-50%);
}

.corner-directions:hover .corner-label {
    left: 50%;
    transform: translateX(-50%);
}

.corner-item:hover .corner-expand {
    width: 400px;
    height: auto;
    min-height: 150px;
    opacity: 1;
    padding: 0;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    position: relative;
    pointer-events: all;
    overflow: visible;
    transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                height 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.3s ease,
                padding 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.corner-item:hover .corner-expand p {
    opacity: 1;
    padding: 50px 30px 20px;
    margin: 0;
}

@media (max-width: 768px) {
    .corner-about {
        top: 6vw;
        left: 3vw;
    }
    
    .corner-directions {
        top: 6vw;
        right: 3vw;
    }
    
    .corner-item:hover .corner-expand {
        width: calc(100vw - 6vw);
        max-width: 400px;
    }
}

/* 🚀 UPDATED WIGGLE KEYFRAME ANIMATION (Stronger Effect) 🚀 */
@keyframes titleWiggle {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        /* Increased translation and rotation */
        transform: translate(1px, -1px) rotate(0.3deg);
    }
    50% {
        /* Increased translation and rotation */
        transform: translate(-1px, 1px) rotate(-0.3deg);
    }
    75% {
        /* Increased translation and rotation */
        transform: translate(1px, 1px) rotate(0.3deg);
    }
}


/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 120px 3vw 60px;
    text-align: center;
    position: relative;
    animation: fadeIn 1s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.hero-title {
    font-size: clamp(64px, 15vw, 180px);
    font-weight: 900;
    line-height: 1;
    margin: 0;
    letter-spacing: 0.08em;
    color: var(--color-black);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1400px;
    /* titleAppear animation is moved to .title-line */
}


@keyframes titleAppear {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.title-line {
    display: block;
    position: relative;
    width: 100%;
    text-align: center;
    
    /* Apply both animations. titleWiggle delay is increased to ensure titleAppear finishes */
    animation: 
        titleAppear 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, 
        titleWiggle 1.8s ease-in-out infinite alternate; /* Slightly faster loop for stronger effect */
    transform-origin: center center;

    /* Reduced bubbly texture effect for better readability */
    text-shadow: 
        /* Base shadows for depth - reduced intensity */
        1px 1px 0 rgba(0,0,0,0.3),
        2px 2px 0 rgba(0,0,0,0.2),
        3px 3px 0 rgba(0,0,0,0.15),
        /* Subtle bubbly texture dots - reduced */
        4px 1px 1px rgba(0,0,0,0.25),
        8px 3px 1px rgba(0,0,0,0.2),
        12px 5px 1px rgba(0,0,0,0.18),
        16px 2px 1px rgba(0,0,0,0.22),
        20px 4px 1px rgba(0,0,0,0.2),
        24px 6px 1px rgba(0,0,0,0.18),
        28px 3px 1px rgba(0,0,0,0.2),
        32px 5px 1px rgba(0,0,0,0.18),
        /* Light scattered texture */
        6px 8px 1px rgba(0,0,0,0.2),
        14px 10px 1px rgba(0,0,0,0.18),
        22px 12px 1px rgba(0,0,0,0.15);
    filter: contrast(1.1) brightness(1);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Reduced texture layer for better readability */
.title-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle 2px at 10% 15%, rgba(0,0,0,0.15) 0%, transparent 50%),
        radial-gradient(circle 1.5px at 25% 30%, rgba(0,0,0,0.12) 0%, transparent 50%),
        radial-gradient(circle 3px at 40% 20%, rgba(0,0,0,0.15) 0%, transparent 50%),
        radial-gradient(circle 2px at 55% 35%, rgba(0,0,0,0.14) 0%, transparent 50%),
        radial-gradient(circle 2.5px at 70% 25%, rgba(0,0,0,0.15) 0%, transparent 50%),
        radial-gradient(circle 1.8px at 85% 40%, rgba(0,0,0,0.13) 0%, transparent 50%);
    background-size: 100% 100%;
    mix-blend-mode: multiply;
    opacity: 0.3;
    pointer-events: none;
}

/* Adjust animation delays for staggering both effects */
/* The total duration of the fade-in (titleAppear) is 1.2s + delay (0.1s to 0.3s) = 1.3s to 1.5s */
/* We set the wiggle start time to 1.5s, ensuring the fade-in is done */
.title-line:nth-child(1) {
    animation-delay: 0.1s, 1.5s; /* titleAppear starts at 0.1s, Wiggle starts at 1.5s */
}

.title-line:nth-child(2) {
    animation-delay: 0.2s, 1.6s; /* titleAppear starts at 0.2s, Wiggle starts at 1.6s */
}

.title-line:nth-child(3) {
    animation-delay: 0.3s, 1.7s; /* titleAppear starts at 0.3s, Wiggle starts at 1.7s */
}

.hero-subtitle {
    font-size: 12px;
    color: var(--color-grey);
    font-weight: 300;
    margin-top: 20px;
    text-align: left;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 3vw;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hero-subtitle::after {
    content: 'Announce innovation';
    font-size: 12px;
    color: var(--color-grey);
    font-weight: 300;
}

@media (max-width: 768px) {
    .hero-subtitle {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* Services Overview */
.services-overview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto 60px;
    padding: 0 3vw 40px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.services-column {
    display: flex;
    flex-direction: column;
}

.services-label {
    font-size: 12px;
    color: var(--color-grey);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
}

.services-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-black);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Service Grid */
.service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    max-width: 1400px;
    margin: 0 auto 60px;
    padding: 0;
}

.grid-item {
    aspect-ratio: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0;
    animation: gridItemFadeIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    background-color: var(--color-white);
    border: 1px solid var(--color-black);
}

.grid-content-null {
    font-size: clamp(18px, 2.5vw, 32px);
    font-weight: 700;
    color: var(--color-black);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: center;
}

@keyframes gridItemFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.grid-item:nth-child(1) { animation-delay: 0.1s; }
.grid-item:nth-child(2) { animation-delay: 0.2s; }
.grid-item:nth-child(3) { animation-delay: 0.3s; }
.grid-item:nth-child(4) { animation-delay: 0.4s; }
.grid-item:nth-child(5) { animation-delay: 0.5s; }
.grid-item:nth-child(6) { animation-delay: 0.6s; }

.grid-item:hover {
    transform: scale(1.02);
    z-index: 10;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}


/* Brand Statement */
.brand-statement {
    max-width: 1400px;
    margin: 0 auto 60px;
    padding: 0 3vw;
    text-align: center;
}

.statement-text {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-black);
    line-height: 1.4;
    max-width: 800px;
    margin: 0 auto;
}

/* CTA Section */
.cta-section {
    max-width: 1400px;
    margin: 0 auto 60px;
    padding: 0 3vw;
    display: flex;
    justify-content: center;
}

.cta-button {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 30px;
    background-color: var(--color-white);
    border: 1px solid var(--color-black);
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-black);
    text-decoration: none;
}

.cta-button:hover {
    background-color: var(--color-black);
    color: var(--color-white);
}

.cta-button:hover .cta-arrow {
    transform: translate(3px, -3px);
}

.cta-arrow {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.cta-text {
    font-size: 14px;
}

/* Portfolio Showcase */
.portfolio-showcase {
    max-width: 1400px;
    margin: 0 auto 60px;
    padding: 0 3vw;
}

.showcase-animation {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--color-white);
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
    border: 1px solid var(--color-black);
}

/* Abstract Animation */
.showcase-animation::before,
.showcase-animation::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.showcase-animation::before {
    background: 
        radial-gradient(circle 200px at 20% 30%, var(--color-black) 0%, transparent 50%),
        radial-gradient(circle 150px at 80% 70%, var(--color-black) 0%, transparent 50%),
        radial-gradient(circle 120px at 50% 50%, var(--color-black) 0%, transparent 50%),
        radial-gradient(circle 100px at 10% 80%, var(--color-black) 0%, transparent 50%),
        radial-gradient(circle 90px at 90% 20%, var(--color-black) 0%, transparent 50%),
        linear-gradient(45deg, transparent 0%, var(--color-black) 1.5%, transparent 3%),
        linear-gradient(-45deg, transparent 0%, var(--color-black) 1.5%, transparent 3%),
        linear-gradient(135deg, transparent 0%, var(--color-black) 1%, transparent 2%);
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 250px 250px, 250px 250px, 200px 200px;
    animation: abstractMove1 20s ease-in-out infinite;
    opacity: 0.85;
}

.showcase-animation::after {
    background: 
        radial-gradient(ellipse 250px 120px at 60% 40%, var(--color-black) 0%, transparent 60%),
        radial-gradient(ellipse 150px 100px at 30% 60%, var(--color-black) 0%, transparent 60%),
        radial-gradient(ellipse 180px 90px at 70% 80%, var(--color-black) 0%, transparent 60%),
        linear-gradient(90deg, transparent 0%, var(--color-black) 0.8%, transparent 1.6%),
        linear-gradient(0deg, transparent 0%, var(--color-black) 0.8%, transparent 1.6%),
        linear-gradient(30deg, transparent 0%, var(--color-black) 0.5%, transparent 1%);
    background-size: 100% 100%, 100% 100%, 100% 100%, 180px 180px, 180px 180px, 220px 220px;
    animation: abstractMove2 25s ease-in-out infinite reverse;
    opacity: 0.65;
}

@keyframes abstractMove1 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 0.8;
    }
    25% {
        transform: translate(20px, -30px) rotate(5deg) scale(1.1);
        opacity: 0.9;
    }
    50% {
        transform: translate(-15px, 20px) rotate(-5deg) scale(0.95);
        opacity: 0.7;
    }
    75% {
        transform: translate(30px, 10px) rotate(3deg) scale(1.05);
        opacity: 0.85;
    }
}

@keyframes abstractMove2 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 0.6;
    }
    33% {
        transform: translate(-25px, 25px) rotate(-8deg) scale(1.15);
        opacity: 0.7;
    }
    66% {
        transform: translate(20px, -20px) rotate(8deg) scale(0.9);
        opacity: 0.5;
    }
}

.showcase-text {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-black);
}

/* Footer */
.footer {
    background-color: var(--color-eggshell);
    color: var(--color-black);
    padding: 60px 3vw 30px;
    margin-top: 80px;
}

.footer-logo {
    text-align: center;
    margin-bottom: 40px;
}

.footer-title {
    font-size: clamp(48px, 8vw, 80px);
    font-weight: 900;
    letter-spacing: 0.08em;
    color: var(--color-black);
    position: relative;
    /* Reduced bubbly effect for better readability - black text version */
    text-shadow: 
        /* Base shadows for depth - reduced intensity */
        1px 1px 0 rgba(0,0,0,0.3),
        2px 2px 0 rgba(0,0,0,0.2),
        3px 3px 0 rgba(0,0,0,0.15),
        /* Subtle bubbly texture dots - reduced */
        4px 1px 1px rgba(0,0,0,0.25),
        8px 3px 1px rgba(0,0,0,0.2),
        12px 5px 1px rgba(0,0,0,0.18),
        16px 2px 1px rgba(0,0,0,0.22),
        20px 4px 1px rgba(0,0,0,0.2),
        24px 6px 1px rgba(0,0,0,0.18),
        28px 3px 1px rgba(0,0,0,0.2),
        32px 5px 1px rgba(0,0,0,0.18),
        /* Light scattered texture */
        6px 8px 1px rgba(0,0,0,0.2),
        14px 10px 1px rgba(0,0,0,0.18),
        22px 12px 1px rgba(0,0,0,0.15);
    filter: contrast(1.1) brightness(1);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Reduced texture layer for footer title */
.footer-title::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle 2px at 10% 15%, rgba(0,0,0,0.15) 0%, transparent 50%),
        radial-gradient(circle 1.5px at 25% 30%, rgba(0,0,0,0.12) 0%, transparent 50%),
        radial-gradient(circle 3px at 40% 20%, rgba(0,0,0,0.15) 0%, transparent 50%),
        radial-gradient(circle 2px at 55% 35%, rgba(0,0,0,0.14) 0%, transparent 50%),
        radial-gradient(circle 2.5px at 70% 25%, rgba(0,0,0,0.15) 0%, transparent 50%),
        radial-gradient(circle 1.8px at 85% 40%, rgba(0,0,0,0.13) 0%, transparent 50%);
    background-size: 100% 100%;
    mix-blend-mode: multiply;
    opacity: 0.3;
    pointer-events: none;
}

.footer-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding-top: 20px;
    border-top: 1px solid rgba(0,0,0,0.2);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-black);
}

.footer-copyright,
.footer-social {
    margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero {
        padding: 100px 3vw 40px;
        min-height: auto;
    }

    .hero-title {
        font-size: clamp(36px, 15vw, 80px);
    }

    .hero-subtitle {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .services-overview {
        grid-template-columns: 1fr;
        gap: 30px;
        padding-bottom: 30px;
    }

    .service-grid {
        grid-template-columns: 1fr;
    }

    .grid-item {
        aspect-ratio: 1;
        min-height: 300px;
    }

    .grid-title {
        font-size: 20px;
    }

    .category-title {
        font-size: 24px;
    }

    .statement-text {
        font-size: 18px;
    }

    .cta-button {
        width: 100%;
        justify-content: center;
    }

    .footer-info {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .service-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-item {
        aspect-ratio: 1;
    }
}

@media (min-width: 1025px) {
    .service-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}