/* =========================================
   SCYGHOST — UNDERWATER SEA GLASS PORTFOLIO
   ========================================= */


/* =========================================
   BASIC
   ========================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;

    font-family: Arial, Helvetica, sans-serif;

    color: #d8f8ff;

    background:
        url("https://file.garden/agXKbdwhTUPrNmaM/lenny/26067-357512245_medium-ezgif.com-video-to-gif-converter.gif")
        center center / cover
        fixed
        no-repeat;

    background-color: #03111c;

    overflow-x: hidden;
}


/* =========================================
   WATER OVERLAY
   ========================================= */

.water-overlay {
    position: fixed;
    inset: 0;

    pointer-events: none;

    z-index: 0;

    overflow: hidden;

    background:
        linear-gradient(
            rgba(1, 13, 23, 0.25),
            rgba(1, 13, 23, 0.48)
        );
}


/* =========================================
   WATER LIGHT
   ========================================= */

.water-overlay::before {
    content: "";

    position: absolute;
    inset: -40%;

    background:
        linear-gradient(
            110deg,
            transparent 15%,
            rgba(124, 235, 255, 0.12) 30%,
            transparent 42%
        ),

        linear-gradient(
            75deg,
            transparent 42%,
            rgba(98, 222, 250, 0.10) 53%,
            transparent 66%
        );

    filter: blur(22px);

    animation: water-light 18s ease-in-out infinite alternate;
}

@keyframes water-light {

    0% {
        transform:
            translate(-4%, -2%)
            rotate(-2deg);
    }

    50% {
        transform:
            translate(3%, 2%)
            rotate(1deg);
    }

    100% {
        transform:
            translate(-2%, 4%)
            rotate(-2deg);
    }
}


/* =========================================
   WEBSITE CONTAINER
   ========================================= */

.site {
    position: relative;

    z-index: 10;

    width: min(1000px, 92%);

    margin: 40px auto;
}


/* =========================================
   SEA GLASS CONTENT BOXES
   ========================================= */

.content-box {

    position: relative;

    margin-bottom: 25px;

    padding: 30px;

    /*
       THIS IS THE IMPORTANT PART:
       translucent glass instead of dark opaque panels
    */

    background:
        linear-gradient(
            135deg,
            rgba(86, 213, 241, 0.16),
            rgba(7, 42, 57, 0.38) 45%,
            rgba(3, 23, 36, 0.32)
        );

    border:
        1px solid
        rgba(137, 235, 255, 0.48);

    border-radius: 26px;

    /*
       Frosted glass
    */

    backdrop-filter:
        blur(14px)
        saturate(135%);

    -webkit-backdrop-filter:
        blur(14px)
        saturate(135%);

    /*
       Glass depth
    */

    box-shadow:

        inset 0 1px 0
        rgba(220, 252, 255, 0.22),

        inset 0 -1px 0
        rgba(22, 128, 157, 0.25),

        inset 12px 0 25px
        rgba(102, 225, 247, 0.025),

        0 8px 30px
        rgba(0, 15, 25, 0.30),

        0 0 18px
        rgba(56, 205, 235, 0.12);

    overflow: hidden;

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}


/* Glass shine across the top */

.content-box::before {

    content: "";

    position: absolute;

    top: 0;
    left: 7%;
    right: 7%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(220, 252, 255, 0.65),
            transparent
        );

    opacity: 0.7;

    pointer-events: none;
}


/* =========================================
   SUBTLE GLASS REFLECTION
   ========================================= */

.content-box::after {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(170, 246, 255, 0.08),
            transparent
        );

    pointer-events: none;
}


/* Hover */

.content-box:hover {

    transform: translateY(-2px);

    border-color:
        rgba(155, 241, 255, 0.72);

    box-shadow:

        inset 0 1px 0
        rgba(230, 253, 255, 0.3),

        inset 0 -1px 0
        rgba(50, 174, 204, 0.35),

        0 10px 35px
        rgba(0, 15, 25, 0.35),

        0 0 28px
        rgba(63, 213, 244, 0.18);
}


/* =========================================
   HEADER
   ========================================= */

.header {

    text-align: center;

    padding:
        40px 30px 25px;
}


/* =========================================
   LOGO
   ========================================= */

.small-text {

    display: block;

    font-size: 11px;

    letter-spacing: 5px;

    color: #62d7f2;

    margin-bottom: 10px;
}


.logo h1 {

    margin: 0;

    font-size:
        clamp(42px, 8vw, 76px);

    letter-spacing: 8px;

    color: #ecfcff;

    text-shadow:

        0 0 8px #46d4f3,

        0 0 25px
        rgba(70, 212, 243, 0.5);
}


.subtitle {

    display: block;

    margin-top: 8px;

    font-size: 12px;

    letter-spacing: 3px;

    color: #83cddd;
}


/* =========================================
   NAVIGATION
   ========================================= */

nav {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 30px;
}


nav a {

    padding:
        9px 18px;

    color: #bceefa;

    text-decoration: none;

    font-size: 12px;

    letter-spacing: 2px;

    border:
        1px solid
        rgba(128, 231, 250, 0.38);

    border-radius: 14px;

    /*
       Smaller glass buttons
    */

    background:
        rgba(79, 190, 214, 0.09);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    box-shadow:
        inset 0 1px 0
        rgba(220, 252, 255, 0.12);

    transition:
        0.25s ease;
}


nav a:hover {

    color: white;

    border-color:
        #69e4ff;

    background:
        rgba(80, 211, 238, 0.18);

    box-shadow:

        inset 0 1px 0
        rgba(255, 255, 255, 0.18),

        0 0 15px
        rgba(77, 220, 248, 0.45);

    transform:
        translateY(-2px);
}


/* =========================================
   SECTION TITLES
   ========================================= */

.section-title {

    position: relative;

    margin-bottom: 25px;

    text-align: center;

    color: #73e5ff;

    font-size: 18px;

    font-weight: bold;

    letter-spacing: 4px;

    text-shadow:
        0 0 8px
        rgba(77, 218, 247, 0.5);
}


.section-title span {

    color: #3caeca;

    margin:
        0 8px;
}


/* =========================================
   GENERAL TEXT
   ========================================= */

p {

    color: #c0e2e9;

    line-height: 1.8;
}


/* =========================================
   INTRO
   ========================================= */

.intro {

    text-align: center;

    max-width: 800px;

    margin-left: auto;

    margin-right: auto;
}


.intro p {

    max-width: 650px;

    margin:
        10px auto;

    line-height: 1.8;

    color: #b8dce5;
}


.intro strong {

    color: #73e5ff;
}


/* =========================================
   BUTTON
   ========================================= */

.glow-button {

    display: inline-block;

    margin-top: 20px;

    padding:
        12px 25px;

    color: #dfffff;

    text-decoration: none;

    font-size: 12px;

    letter-spacing: 2px;

    border:
        1px solid
        #55d8f5;

    border-radius: 14px;

    background:
        rgba(82, 207, 232, 0.12);

    backdrop-filter:
        blur(8px);

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,0.15),

        0 0 10px
        rgba(64, 213, 245, 0.2);

    transition:
        0.3s ease;
}


.glow-button:hover {

    background:
        rgba(45, 159, 187, 0.28);

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,0.2),

        0 0 20px
        rgba(64, 213, 245, 0.55);

    transform:
        translateY(-3px);
}


/* =========================================
   FEATURED ART
   ========================================= */

.featured-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 15px;
}


.art-card {

    position: relative;

    display: block;

    overflow: hidden;

    aspect-ratio: 1 / 1;

    border:
        1px solid
        rgba(90, 211, 238, 0.35);

    border-radius: 20px;

    background:
        rgba(3, 18, 29, 0.55);

    text-decoration: none;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,0.08);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}


.art-card img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        transform 0.5s ease,
        filter 0.5s ease;
}


.art-card:hover {

    transform:
        translateY(-7px);

    border-color:
        #71e5ff;

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,0.2),

        0 0 25px
        rgba(63, 213, 244, 0.45);
}


.art-card:hover img {

    transform:
        scale(1.06);

    filter:
        brightness(1.08)
        saturate(1.1);
}


/* =========================================
   ART LABEL
   ========================================= */

.art-label {

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    padding:
        20px 12px 12px;

    background:
        linear-gradient(
            transparent,
            rgba(1, 15, 24, 0.95)
        );

    color: #c9f6ff;

    font-size: 10px;

    letter-spacing: 2px;

    opacity: 0;

    transform:
        translateY(10px);

    transition:
        0.3s ease;
}


.art-card:hover .art-label {

    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================
   QUICK ABOUT
   ========================================= */

.quick-about {

    text-align: center;
}


.quick-about p {

    max-width: 650px;

    margin: auto;

    line-height: 1.8;

    color: #b8dce5;
}


.text-link {

    display: inline-block;

    margin-top: 15px;

    color: #72def8;

    text-decoration: none;

    letter-spacing: 2px;

    font-size: 12px;
}


.text-link:hover {

    color: white;

    text-shadow:
        0 0 10px #55d8f5;
}


/* =========================================
   SOCIALS
   ========================================= */

.socials {

    text-align: center;
}


.social-links {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;
}


.social-links a {

    padding:
        10px 16px;

    color: #9ddce9;

    border:
        1px solid
        rgba(84, 211, 240, 0.28);

    border-radius: 14px;

    background:
        rgba(77, 207, 230, 0.07);

    backdrop-filter:
        blur(7px);

    text-decoration: none;

    font-size: 11px;

    letter-spacing: 1px;

    transition:
        0.25s ease;
}


.social-links a:hover {

    color: white;

    border-color:
        #69e4ff;

    background:
        rgba(77, 220, 248, 0.14);

    box-shadow:
        0 0 12px
        rgba(77, 220, 248, 0.35);

    transform:
        translateY(-2px);
}


/* =========================================
   FOOTER
   ========================================= */

footer {

    display: flex;

    justify-content: space-between;

    padding:
        10px 5px 30px;

    color: #6095a3;

    font-size: 9px;

    letter-spacing: 2px;
}


/* =========================================
   BUBBLES
   ========================================= */

.bubble {

    position: fixed;

    bottom: -50px;

    z-index: 5;

    border-radius: 50%;

    border:
        1px solid
        rgba(160, 240, 255, 0.55);

    background:
        radial-gradient(
            circle at 30% 25%,
            rgba(255, 255, 255, 0.55),
            rgba(113, 229, 255, 0.08) 40%,
            transparent 70%
        );

    box-shadow:

        0 0 8px
        rgba(113, 229, 255, 0.25),

        inset 0 0 4px
        rgba(255, 255, 255, 0.2);

    pointer-events: none;

    animation:
        bubble-rise linear infinite;
}


@keyframes bubble-rise {

    0% {

        transform:
            translateY(0)
            translateX(0)
            scale(0.7);

        opacity: 0;
    }

    10% {
        opacity: 0.6;
    }

    35% {

        transform:
            translateY(-35vh)
            translateX(20px)
            scale(0.9);
    }

    65% {

        transform:
            translateY(-70vh)
            translateX(-25px)
            scale(1);
    }

    100% {

        transform:
            translateY(-120vh)
            translateX(15px)
            scale(1.15);

        opacity: 0;
    }
}


/* =========================================
   FLOATING PARTICLES
   ========================================= */

.water-overlay::after {

    content:
        "✦   ·   ˚   ✧   ·   ✦   ˚   ·   ⋆   ✧   ·";

    position:
        absolute;

    inset:
        0;

    color:
        rgba(154, 239, 255, 0.35);

    font-size:
        11px;

    letter-spacing:
        30px;

    line-height:
        80px;

    opacity:
        0.35;

    animation:
        particle-drift 25s linear infinite;
}


@keyframes particle-drift {

    0% {

        transform:
            translateY(20px)
            translateX(0);
    }

    50% {

        transform:
            translateY(-20px)
            translateX(15px);
    }

    100% {

        transform:
            translateY(-60px)
            translateX(-10px);
    }
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 700px) {

    .site {

        width: 94%;

        margin-top: 20px;
    }

    .content-box {

        padding: 22px;

        border-radius: 22px;
    }

    .featured-grid {

        grid-template-columns:
            1fr;
    }

    nav a {

        flex:
            1 1 40%;

        text-align: center;
    }

    footer {

        flex-direction:
            column;

        text-align:
            center;

        gap:
            10px;
    }
}


/* =========================================
   ACCESSIBILITY
   ========================================= */

@media (prefers-reduced-motion: reduce) {

    .water-overlay::before,
    .water-overlay::after,
    .bubble {

        animation:
            none;
    }

    * {

        scroll-behavior:
            auto !important;
    }
}
/* =========================================
   SCYGHOST — TALLY CONTACT FORM
   ========================================= */

.contact-form-section {
    text-align: center;

    position: relative;
    z-index: 20;

    overflow: visible;
}


/* ---------- FORM INTRO ---------- */

.form-intro {
    max-width: 650px;

    margin:
        -8px auto 25px;

    color:
        #b8dce5;

    line-height:
        1.8;
}


/* =========================================
   TALLY EMBED CONTAINER
   ========================================= */

.tally-wrapper {

    position: relative;

    z-index: 25;

    width: 100%;
    max-width: 700px;

    margin: 0 auto;

    padding: 8px;

    border-radius: 20px;

    /*
       Glass surrounding the form
    */

    background:
        linear-gradient(
            135deg,
            rgba(126, 231, 248, 0.08),
            rgba(3, 28, 42, 0.22),
            rgba(94, 214, 235, 0.06)
        );

    border:
        1px solid
        rgba(126, 231, 248, 0.22);

    box-shadow:

        inset 0 1px 0
        rgba(255, 255, 255, 0.12),

        inset 0 -1px 0
        rgba(40, 160, 190, 0.12),

        0 0 20px
        rgba(63, 213, 244, 0.08);

}


/* =========================================
   TALLY IFRAME
   ========================================= */

.tally-wrapper iframe {

    display:
        block;

    position:
        relative;

    z-index:
        30;

    width:
        100%;

    min-height:
        750px;

    border:
        none;

    border-radius:
        14px;

    background:
        transparent;

    /*
       VERY IMPORTANT:
       Allows the embedded Tally form
       to receive clicks.
    */

    pointer-events:
        auto;
}


/* =========================================
   TALLY GLASS EFFECT
   ========================================= */

.tally-wrapper::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        8%;

    right:
        8%;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(220, 252, 255, 0.55),
            transparent
        );

    pointer-events:
        none;

    z-index:
        40;
}


/* =========================================
   FORM SECURITY / STATUS TEXT
   ========================================= */

.form-security-note {

    max-width:
        600px;

    margin:
        18px auto 0;

    text-align:
        center;

    font-size:
        10px;

    line-height:
        1.7;

    letter-spacing:
        1px;

    color:
        #83cddd;

    opacity:
        0.45;
}


/* =========================================
   MAKE SURE WATER EFFECTS STAY BEHIND
   ========================================= */

/*
   The animated water effects should NEVER
   sit above the actual website.
*/

.water-overlay {

    z-index:
        0 !important;

    pointer-events:
        none !important;
}


.water-overlay::before,
.water-overlay::after {

    pointer-events:
        none !important;
}


/*
   Website sits above the water.
*/

.site {

    position:
        relative;

    z-index:
        10;
}


/*
   Contact form gets an extra layer
   because it contains an iframe.
*/

.contact-form-section {

    isolation:
        isolate;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 600px) {

    .tally-wrapper {

        padding:
            4px;

        border-radius:
            16px;

    }

    .tally-wrapper iframe {

        min-height:
            800px;

        border-radius:
            12px;

    }

}
/* =========================================
   SCYGHOST — FLOATING PROFILE IMAGE
   ========================================= */

/*
   Removes the old box/frame around the
   profile image and lets it float freely.
*/

.profile {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    margin-bottom: 25px;
}


/* =========================================
   PROFILE FRAME — NO BOX
   ========================================= */

.profile-frame {

    width: 240px;
    height: 300px;

    padding: 0;

    border: none;

    border-radius: 0;

    background: transparent;

    overflow: visible;

    /*
       Soft cyan underwater glow
    */

    filter:
        drop-shadow(0 0 7px rgba(113, 229, 255, 0.35))
        drop-shadow(0 0 18px rgba(63, 213, 244, 0.22))
        drop-shadow(0 0 35px rgba(63, 213, 244, 0.10));

    transition:
        transform 0.45s ease,
        filter 0.45s ease;
}


/* =========================================
   PROFILE HOVER
   ========================================= */

.profile-frame:hover {

    transform:
        translateY(-7px)
        scale(1.025);

    filter:
        drop-shadow(0 0 9px rgba(113, 229, 255, 0.65))
        drop-shadow(0 0 22px rgba(63, 213, 244, 0.40))
        drop-shadow(0 0 45px rgba(63, 213, 244, 0.20));
}


/* =========================================
   PROFILE IMAGE
   ========================================= */

.profile-frame img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    border: none;

    border-radius: 0;

    background: transparent;

    /*
       Feather the edges so the image
       blends into the underwater background.
    */

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            black 7%,
            black 92%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            black 7%,
            black 92%,
            transparent 100%
        );

    transition:
        transform 0.45s ease,
        filter 0.45s ease;
}


/* Slightly brighten the artwork on hover */

.profile-frame:hover img {

    filter:
        brightness(1.06)
        saturate(1.08);

    transform:
        translateY(-2px);
}


/* =========================================
   PROFILE NAME
   ========================================= */

.profile-label {

    margin-top: 14px;

    font-size: 12px;

    letter-spacing: 4px;

    color: #71e5ff;

    text-shadow:

        0 0 8px
        rgba(113, 229, 255, 0.5),

        0 0 18px
        rgba(63, 213, 244, 0.25);

    transition:
        text-shadow 0.4s ease,
        transform 0.4s ease;
}


.profile:hover .profile-label {

    transform:
        translateY(-2px);

    text-shadow:

        0 0 10px
        rgba(113, 229, 255, 0.75),

        0 0 25px
        rgba(63, 213, 244, 0.4);
}


/* =========================================
   MOBILE PROFILE
   ========================================= */

@media (max-width: 650px) {

    .profile-frame {

        width: 210px;

        height: 270px;

    }

}


/* =========================================
   ACCESSIBILITY
   ========================================= */

@media (prefers-reduced-motion: reduce) {

    .profile-frame,
    .profile-frame img,
    .profile-label {

        transition: none;
    }

    .profile-frame:hover {

        transform: none;
    }

    .profile-frame:hover img {

        transform: none;

        filter: none;
    }

}