/* General body and font styles */
body {
    font-family: 'DM Sans', sans-serif;
    background: #89CFF0;
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Hide the scrollbar */
::-webkit-scrollbar {
    display: none;
}

/* Full-screen sections */
#container,
#works,
#page,
#about {
    height: 100vh;
    width: 100%;
    position: relative;
}

/* Section background images */
.second-img,
.third-img,
.fourth-img {
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    z-index: 1;
    background-attachment: fixed; /* Parallax */
}

#works .second-img {
    background-image: url("images/bfhigher.webp");
    background-color: #000000;
}

#page .third-img {
    background-image: url("images/dcastdark.webp");
    background-color: #5488ae;
}

#about .fourth-img {
    background-image: url("images/aboutd_light.webp");
    background-color: #505050;
}

/* Title and content centering */
#container .title,
#works .title,
#page .title,
#about .title {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#works .title h2,
#page .title h2,
#about .title h2 {
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 70px;
    letter-spacing: 1px;
    margin-bottom: 20px;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.7), 0 0 20px rgba(0, 0, 0, 0.5);
}

/* Hamburger menu icon */
.hamburglar {
    position: fixed;
    top: 20px;
    right: 20px;
    display: block;
    width: 68px;
    height: 68px;
    -webkit-touch-callout: none;
    user-select: none;
    z-index: 1002;
    cursor: pointer;
    mix-blend-mode: difference;
}

.path-burger {
    position: absolute;
    top: 0;
    left: 0;
    height: 68px;
    width: 68px;
    mask: url(#mask);
}

.animate-path {
    position: absolute;
    top: 0;
    left: 0;
    width: 68px;
    height: 68px;
}

.path-rotation {
    height: 34px;
    width: 34px;
    margin: 34px 34px 0 0;
    transform: rotate(0deg);
    transform-origin: 100% 0;
}

.path-rotation:before {
    content: '';
    display: block;
    width: 30px;
    height: 34px;
    margin: 0 4px 0 0;
    background: #fff;
    transition: background-color 0.2s ease-in-out 0.4s;
}

@keyframes rotate-out { 0% { transform: rotate(0deg); } 40% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } }
@keyframes rotate-in { 0% { transform: rotate(360deg); } 40% { transform: rotate(180deg); } 100% { transform: rotate(0deg); } }

.hamburglar.is-open .path { animation: dash-in 0.6s linear normal; animation-fill-mode: forwards; }
.hamburglar.is-open .animate-path { animation: rotate-in 0.6s linear normal; animation-fill-mode: forwards; }
.hamburglar.is-closed .path { animation: dash-out 0.6s linear normal; animation-fill-mode: forwards; }
.hamburglar.is-closed .animate-path { animation: rotate-out 0.6s linear normal; animation-fill-mode: forwards; }

.path {
    stroke-dasharray: 240;
    stroke-dashoffset: 240;
    stroke-linejoin: round;
    stroke: #fff;
    transition: stroke 0.2s ease-in-out 0.4s;
}

@keyframes dash-in { 0% { stroke-dashoffset: 240; } 40% { stroke-dashoffset: 240; } 100% { stroke-dashoffset: 0; } }
@keyframes dash-out { 0% { stroke-dashoffset: 0; } 40% { stroke-dashoffset: 240; } 100% { stroke-dashoffset: 240; } }

.burger-icon { position: absolute; padding: 20px 16px; height: 68px; width: 68px; }
.burger-container { position: relative; height: 28px; width: 36px; }

.burger-bun-top,
.burger-bun-bot,
.burger-filling {
    position: absolute;
    display: block;
    height: 4px;
    width: 36px;
    border-radius: 2px;
    background: #fff;
    transition: background-color 0.2s ease-in-out 0.4s;
}

.burger-bun-top { top: 0; transform-origin: 34px 2px; }
.burger-bun-bot { bottom: 0; transform-origin: 34px 2px; }
.burger-filling { top: 12px; }

.hamburglar.is-open .burger-bun-top { animation: bun-top-out 0.6s linear normal; animation-fill-mode: forwards; }
.hamburglar.is-open .burger-bun-bot { animation: bun-bot-out 0.6s linear normal; animation-fill-mode: forwards; }
.hamburglar.is-closed .burger-bun-top { animation: bun-top-in 0.6s linear normal; animation-fill-mode: forwards; }
.hamburglar.is-closed .burger-bun-bot { animation: bun-bot-in 0.6s linear normal; animation-fill-mode: forwards; }

@keyframes bun-top-out { 0% { left: 0; top: 0; transform: rotate(0deg); } 20% { left: 0; top: 0; transform: rotate(15deg); } 80% { left: -5px; top: 0; transform: rotate(-60deg); } 100% { left: -5px; top: 1px; transform: rotate(-45deg); } }
@keyframes bun-bot-out { 0% { left: 0; transform: rotate(0deg); } 20% { left: 0; transform: rotate(-15deg); } 80% { left: -5px; transform: rotate(60deg); } 100% { left: -5px; transform: rotate(45deg); } }
@keyframes bun-top-in { 0% { left: -5px; top: 1px; transform: rotate(-45deg); } 20% { left: -5px; top: 0; transform: rotate(-60deg); } 80% { left: 0; top: 0; transform: rotate(15deg); } 100% { left: 0; top: 0; transform: rotate(0deg); } }
@keyframes bun-bot-in { 0% { left: -5px; transform: rotate(45deg); } 20% { left: -5px; transform: rotate(60deg); } 80% { left: 0; transform: rotate(-15deg); } 100% { left: 0; transform: rotate(0deg); } }

.hamburglar.is-open .burger-filling { animation: burger-fill-out 0.6s linear normal; animation-fill-mode: forwards; }
.hamburglar.is-closed .burger-filling { animation: burger-fill-in 0.6s linear normal; animation-fill-mode: forwards; }

@keyframes burger-fill-in { 0% { width: 0; left: 36px; } 40% { width: 0; left: 40px; } 80% { width: 36px; left: -6px; } 100% { width: 36px; left: 0px; } }
@keyframes burger-fill-out { 0% { width: 36px; left: 0px; } 20% { width: 42px; left: -6px; } 40% { width: 0; left: 40px; } 100% { width: 0; left: 36px; } }

/* Keep the icon white while the menu is open */
.hamburglar.is-open .burger-bun-top,
.hamburglar.is-open .burger-bun-bot,
.hamburglar.is-open .burger-filling {
    background-color: #fff;
}

.hamburglar.is-open .path {
    stroke: #fff;
}

.hamburglar.is-open .path-rotation:before {
    background-color: #fff;
}

/* Full-screen nav panel */
nav {
    position: fixed;
    width: 100%;
    height: 30px; /* Initial height, animated by GSAP */
    top: 0;
    right: -100vw; /* Starts off-screen */
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
}

nav ul { list-style: none; padding: 0; margin: 0; text-align: center; }
nav ul li { margin: 40px 0; }
nav ul li a { color: #fafafa; font-size: 2.5em; text-decoration: none; font-weight: 500; position: relative; opacity: 0; pointer-events: none; font-family: 'Montserrat', sans-serif; transition: color 0.3s ease; }
nav ul li a:hover { color: #cca937; }
nav ul li a:after { content: ''; width: 100%; position: absolute; height: 3px; border-radius: 5px; background: #cca937; bottom: -10px; left: 0; transform-origin: left; transition: transform .5s ease; transform: scaleX(0); }
nav ul li a:hover:after { transform: scaleX(1); }

/* Social and podcast links */
.podcastlinks {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wrapper {
    display: inline-flex;
    padding-top: 20px;
}

.wrapper .icon {
    position: relative;
    background: #ffffff;
    border-radius: 50%;
    padding: 15px;
    margin: 10px;
    width: 50px;
    height: 50px;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-sizing: border-box;
}

/* Inline SVG icons, sized like the Font Awesome glyphs they replace */
.wrapper .icon svg {
    display: inline-block;
    height: 1em;
    vertical-align: -0.125em;
    fill: currentColor;
}

.wrapper .icon .tooltip {
    position: absolute;
    top: 0;
    font-size: 14px;
    background: #ffffff;
    color: #ffffff;
    padding: 5px 8px;
    border-radius: 5px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .icon .tooltip::before {
    position: absolute;
    content: "";
    height: 8px;
    width: 8px;
    background: #ffffff;
    bottom: -3px;
    left: 50%;
    transform: translate(-50%) rotate(45deg);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .icon:hover .tooltip {
    top: -45px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip {
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
}

.wrapper .icon:hover svg {
    filter: drop-shadow(0px -1px 0px rgba(0, 0, 0, 0.1));
}

.wrapper .youtube:hover,
.wrapper .youtube:hover .tooltip,
.wrapper .youtube:hover .tooltip::before {
    background: #de463b;
    color: #fff;
}

.wrapper .linkedin:hover,
.wrapper .linkedin:hover .tooltip,
.wrapper .linkedin:hover .tooltip::before {
    background: #0072b1;
    color: #fff;
}

.wrapper .spotify:hover,
.wrapper .spotify:hover .tooltip,
.wrapper .spotify:hover .tooltip::before {
    background: #1ED760;
    color: #ffffff;
}

/* "Learn more" buttons */
.learn-more { position: relative; display: inline-block; cursor: pointer; border: 0; vertical-align: middle; text-decoration: none; background: transparent; padding: 0; font-size: inherit; font-family: inherit; width: 12rem; height: auto; }
.learn-more .circle { transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); position: relative; display: block; margin: 0; width: 3rem; height: 3rem; background: #cca937; border-radius: 1.625rem; }
.learn-more .circle .icon { transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); position: absolute; top: 0; bottom: 0; margin: auto; background: #fff; }
.learn-more .circle .icon.arrow { left: 0.625rem; width: 1.125rem; height: 0.125rem; background: none; }
.learn-more .circle .icon.arrow::before { position: absolute; content: ''; top: -0.25rem; right: 0.0625rem; width: 0.625rem; height: 0.625rem; border-top: 0.125rem solid #fff; border-right: 0.125rem solid #fff; transform: rotate(45deg); }
.learn-more .button-text { transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 0.75rem 0; margin: 0 0 0 1.85rem; color: #cca937; font-weight: 700; line-height: 1.6; text-align: center; text-transform: uppercase; }
.learn-more:hover .circle { width: 100%; }
.learn-more:hover .circle .icon.arrow { background: #fff; transform: translate(1rem, 0); }
.learn-more:hover .button-text { color: #fff; }
a { text-decoration: none; color: inherit; }

/* Responsive */
@media screen and (max-width: 800px) {
    /* Fixed backgrounds zoom in on mobile, so scroll them instead */
    .second-img, .third-img, .fourth-img {
        background-attachment: scroll;
    }
    #works .title h2, #page .title h2, #about .title h2 { font-size: 50px; }
    #works .second-img { background-image: url("images/mobile2.webp"); }
    #page .third-img { background-image: url("images/mobile3.webp"); }
    #about .fourth-img { background-image: url("images/mobile4.webp"); }
    nav ul li a { font-size: 2em; }
}

/* Hero: video background and overlays */
#container {
    overflow: hidden;
    background-color: #000; /* Fallback color */
    border-bottom-right-radius: 15vw; /* Clips the container to the curve */
}

.video-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    border-bottom-right-radius: 15vw;
}

#video-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    transform: rotate(180deg); /* Flips the video */
}

/* WebGL particle canvas, added by particles.js */
#container canvas {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    pointer-events: none;
    mix-blend-mode: screen;
}

.dim-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0.4); /* 0 is no dimming, 1 is black */
    z-index: 1;
}

.gradient-overlay {
    position: absolute;
    bottom: 0;
    height: 50%;
    width: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 50%);
    z-index: 2;
    pointer-events: none;
}

#container .title {
    z-index: 4; /* Content above the video, overlays and particles */
}

.hero-content {
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    text-shadow: 0 0 5px #ffffff, 0 0 20px #000, 0 0 30px #000;
    margin-bottom: 10px;
}

.hero-content h1 {
    font-size: 60px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 1px;
}

/* The "swoosh" shape below the hero */
#container:before {
    content: "";
    background-color: #000;
    position: absolute;
    top: 100%;
    left: 0;
    width: 15vw;
    height: 15vw;
    z-index: 5;
}

#container:after {
    content: "";
    background-color: #89CFF0; /* Matches the body background */
    position: absolute;
    top: 100%;
    left: 0;
    width: 15vw;
    height: 15vw;
    border-top-left-radius: 15vw;
    z-index: 5;
}

/* Philosophy section */
#philosophy .title {
    align-items: flex-start;
    padding-top: 2vh;
}

.philosophy-content {
    color: #333;
    max-width: 800px; /* Keeps lines readable on wide screens */
    margin-left: auto;
    margin-right: auto;
    padding: 7vh 20px;
}

.philosophy-content h2 {
    text-align: center;
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 40px;
}

.philosophy-content p {
    text-align: left;
    font-size: 18px;
    line-height: 1.8;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 24px;
}

.philosophy-content p:last-of-type {
    margin-bottom: 0;
}

.philosophy-content strong {
    font-weight: 700;
}

.cta-container {
    margin-top: 40px;
    text-align: center;
}

/* Dark buttons in the philosophy section */
#philosophy .learn-more .circle {
    background: #222;
}

#philosophy .learn-more .button-text {
    color: #222;
}

#philosophy .learn-more:hover .button-text {
    color: #fff;
}

/* Buttons: solid by default on mobile */
@media screen and (max-width: 800px) {
    .learn-more .circle {
        width: 100%;
        transition: none;
    }

    .learn-more .button-text,
    #philosophy .learn-more .button-text {
        color: #fff;
    }

    .learn-more .circle .icon.arrow {
        background: #fff;
        transform: translate(1rem, 0);
    }
}

/* Press feedback on all devices */
.learn-more:active .circle {
    filter: brightness(85%);
    transition: filter 0.1s ease-out;
}

/* Lighten the dark buttons instead so the press is visible */
#philosophy .learn-more:active .circle {
    filter: brightness(150%);
}

/* Starting states for the scroll animations. main.js adds .anim-ready once GSAP
   is loaded, so the content stays visible if the scripts are slow or fail. */
html.anim-ready .philosophy-content h2,
html.anim-ready .philosophy-content p,
html.anim-ready .philosophy-content .cta-container {
    opacity: 0;
    transform: translateY(30px);
}

html.anim-ready #works .title h2, html.anim-ready #works .title .learn-more,
html.anim-ready #page .title h2, html.anim-ready #page .title .learn-more,
html.anim-ready #about .title h2, html.anim-ready #about .title .learn-more {
    opacity: 0;
    transform: translateY(30px);
}

/* Philosophy section readability on mobile */
@media (max-width: 768px) {
    .philosophy-content h2 {
        text-align: left;
    }
    .philosophy-content p {
        text-align: left;
    }
}