/* =========================================================
   Dizzt's Shoal
   components.css

   Component responsibilities:
   - Site logo
   - Navigation
   - Hero details
   - Cards
   - Profile
   - Shore clock
   - Project cards
   - Notes
   - Social cards
   - Ocean / waves
   - Visitor counter
   - Guestbook
   - Footer details
   ========================================================= */


/* =========================================================
   1. Site Logo
   ========================================================= */

.site-logo {
    position: relative;
    display: inline-block;

    font-family: "Cherry Bomb One", system-ui;
    font-size: clamp(2.4rem, 5vw, 4.5rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.025em;

    /* Main gradient */
    background: linear-gradient(
        120deg,
        #BFDDF0 0%,
        #D9E4DF 50%,
        #FFEBCC 100%
    );

    background-size: 200% 100%;

    background-clip: text;
    -webkit-background-clip: text;

    color: transparent;
    -webkit-text-fill-color: transparent;

    /* Important: darker outline instead of white */
    -webkit-text-stroke: 1.4px rgba(82, 108, 121, 0.72);

    /* Soft depth without washing out the fill */
    filter:
        drop-shadow(0 3px 0 rgba(255, 255, 255, 0.75))
        drop-shadow(0 7px 12px rgba(72, 105, 125, 0.18));

    transition:
        transform var(--transition-base),
        filter var(--transition-base);
}


.site-logo:hover {
    filter:
        drop-shadow(0 3px 0 rgba(255, 255, 255, 0.85))
        drop-shadow(0 9px 16px rgba(72, 105, 125, 0.24));
}


.site-logo::after {
    content:
        "";

    position:
        absolute;

    left:
        15%;

    right:
        15%;

    bottom:
        -11px;

    height:
        5px;

    border-radius:
        50%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(140, 192, 235, 0.4),
            rgba(172, 207, 163, 0.5),
            transparent
        );

    filter:
        blur(3px);

    pointer-events:
        none;
}


/* =========================================================
   2. Site Tagline
   ========================================================= */

.site-tagline {
    color:
        rgba(32, 35, 38, 0.72);

    font-size:
        1.1rem;

    letter-spacing:
        0.025em;
}


/* =========================================================
   3. Main Navigation
   ========================================================= */

.main-navigation {
    padding:
        var(--space-2);

    background:
        rgba(255, 255, 255, 0.24);

    border:
        1px solid rgba(255, 255, 255, 0.5);

    border-radius:
        var(--radius-pill);

    box-shadow:
        0 8px 25px rgba(81, 143, 170, 0.07);

    backdrop-filter:
        blur(8px);

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


.nav-link {
    position:
        relative;

    min-width:
        88px;

    padding:
        0.58rem 1.12rem;

    overflow:
        hidden;

    color:
        var(--color-text);

    border-radius:
        var(--radius-pill);

    font-size:
        1.05rem;

    font-weight:
        700;

    text-align:
        center;

    isolation:
        isolate;

    transition:
        color var(--transition-fast),
        background var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}


.nav-link::before {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    background:
        linear-gradient(
            135deg,
            rgba(140, 192, 235, 0.85),
            rgba(191, 221, 240, 0.82)
        );

    border-radius:
        inherit;

    opacity:
        0;

    transform:
        scale(0.88);

    transition:
        opacity var(--transition-fast),
        transform var(--transition-fast);
}


.nav-link:hover {
    color:
        var(--color-dark);

    transform:
        translateY(-2px);
}


.nav-link:hover::before {
    opacity:
        0.68;

    transform:
        scale(1);
}


.nav-link.active {
    color:
        var(--color-dark);

    background:
        linear-gradient(
            135deg,
            rgba(191, 221, 240, 0.95),
            rgba(172, 207, 163, 0.9)
        );

    box-shadow:
        0 5px 14px rgba(92, 143, 158, 0.15);
}


/* =========================================================
   4. Hero Eyebrow
   ========================================================= */

.hero-eyebrow {
    color:
        var(--color-blue-dark);

    font-family:
        var(--font-mono);

    font-optical-sizing:
        auto;

    font-size:
        0.78rem;

    font-weight:
        600;

    font-style:
        normal;

    font-variation-settings:
        "MONO" 1;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;
}


/* =========================================================
   5. Hero Title
   ========================================================= */

.hero-title {
    font-size: var(--font-size-hero);
    line-height: 0.95;

    /* Blue → Cream */
    background: linear-gradient(
        120deg,
        #BFDDF0 0%,
        #D9E4DF 48%,
        #FFEBCC 100%
    );

    background-clip: text;
    -webkit-background-clip: text;

    color: transparent;
    -webkit-text-fill-color: transparent;

    /* Darker, thinner outline */
    -webkit-text-stroke: 1.7px rgba(82, 108, 121, 0.72);

    filter:
        drop-shadow(0 3px 0 rgba(255, 255, 255, 0.72))
        drop-shadow(0 8px 12px rgba(72, 105, 125, 0.17));
}


/* =========================================================
   6. Hero Description
   ========================================================= */

.hero-description {
    color:
        rgba(32, 35, 38, 0.82);

    font-size:
        clamp(1.15rem, 2vw, 1.35rem);

    line-height:
        1.7;
}


.site-history-short {
    color:
        rgba(32, 35, 38, 0.58);

    font-size:
        0.72rem;

    letter-spacing:
        0.035em;
}


/* =========================================================
   7. Hero Character Glow
   ========================================================= */

.hero-character-glow {
    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.72) 0%,
            rgba(191, 221, 240, 0.34) 42%,
            rgba(140, 192, 235, 0.09) 68%,
            transparent 74%
        );

    border-radius:
        50%;

    filter:
        blur(5px);
}


.hero-character {
    filter:
        drop-shadow(
            0 18px 14px rgba(82, 120, 138, 0.17)
        );
}


.hero-shell,
.hero-starfish {
    filter:
        drop-shadow(
            0 6px 7px rgba(90, 120, 125, 0.14)
        );
}


/* =========================================================
   8. Generic Card Enhancement
   ========================================================= */

.card {
    overflow:
        hidden;

    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base),
        border-color var(--transition-base);
}


.card::before {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        0;

    border-radius:
        inherit;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.43),
            rgba(255, 255, 255, 0.04)
        );

    pointer-events:
        none;
}


.card > * {
    position:
        relative;

    z-index:
        1;
}


/* =========================================================
   9. Profile Card
   ========================================================= */

.profile-card {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.87),
            rgba(234, 246, 252, 0.78)
        );

    border:
        1px solid rgba(255, 255, 255, 0.85);
}


.profile-card:hover {
    transform:
        translateY(-4px);

    box-shadow:
        0 18px 42px rgba(75, 130, 160, 0.16);
}


.profile-image-wrapper {
    position:
        relative;
}


.profile-image-wrapper::before {
    content:
        "";

    position:
        absolute;

    width:
        92%;

    aspect-ratio:
        1 / 1;

    border-radius:
        48% 52% 56% 44%
        /
        50% 46% 54% 50%;

    background:
        linear-gradient(
            145deg,
            rgba(191, 221, 240, 0.72),
            rgba(172, 207, 163, 0.52),
            rgba(255, 235, 204, 0.48)
        );

    box-shadow:
        inset 0 0 25px rgba(255, 255, 255, 0.6);
}


.profile-image {
    position:
        relative;

    z-index:
        2;

    filter:
        drop-shadow(
            0 8px 8px rgba(72, 110, 125, 0.14)
        );
}


.profile-content .card-title {
    margin-bottom:
        var(--space-3);
}


/* =========================================================
   10. Shore Clock
   ========================================================= */

.shore-clock-card {
    background:
        linear-gradient(
            160deg,
            rgba(255, 244, 223, 0.95),
            rgba(255, 235, 204, 0.9)
        );

    border:
        2px solid rgba(255, 255, 255, 0.8);

    box-shadow:
        0 14px 30px rgba(142, 122, 91, 0.11);
}


.clock-sign {
    padding:
        var(--space-6)
        var(--space-4);

    background:
        rgba(255, 255, 255, 0.42);

    border:
        2px solid rgba(235, 204, 165, 0.38);

    border-radius:
        38% 62% 44% 56%
        /
        56% 42% 58% 44%;

    box-shadow:
        inset 0 2px 12px rgba(255, 255, 255, 0.56),
        0 6px 15px rgba(144, 117, 83, 0.08);
}


.clock-date {
    margin:
        var(--space-3) 0
        var(--space-1);

    color:
        var(--color-text-soft);

    font-size:
        0.78rem;

    font-weight:
        500;
}


.clock-time {
    margin:
        0;

    color:
        var(--color-dark);

    font-size:
        clamp(1.8rem, 4vw, 2.7rem);

    letter-spacing:
        -0.04em;

    line-height:
        1.1;
}


.clock-zone {
    margin:
        var(--space-2) 0 0;

    color:
        rgba(32, 35, 38, 0.52);

    font-size:
        0.64rem;

    letter-spacing:
        0.04em;
}


.clock-shell,
.clock-crab {
    filter:
        drop-shadow(
            0 5px 5px rgba(100, 90, 78, 0.12)
        );
}


/* =========================================================
   11. Section Headings
   ========================================================= */

.section-heading {
    position:
        relative;
}


.section-heading::after {
    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        calc(var(--space-4) * -1);

    width:
        min(220px, 40%);

    height:
        3px;

    background:
        linear-gradient(
            90deg,
            var(--color-blue),
            var(--color-green),
            transparent
        );

    border-radius:
        var(--radius-pill);

    opacity:
        0.6;
}


/* =========================================================
   12. Project Cards
   ========================================================= */

.project-card {
    background:
        rgba(255, 255, 255, 0.85);

    border:
        1px solid rgba(255, 255, 255, 0.82);

    box-shadow:
        0 12px 30px rgba(62, 122, 150, 0.11);
}


.project-card:hover {
    transform:
        translateY(-7px)
        rotate(-0.25deg);

    box-shadow:
        0 20px 40px rgba(62, 122, 150, 0.16);
}


.project-card:nth-child(2):hover {
    transform:
        translateY(-7px)
        rotate(0.25deg);
}


.project-image-wrapper {
    background:
        linear-gradient(
            145deg,
            rgba(191, 221, 240, 0.48),
            rgba(234, 246, 252, 0.75)
        );
}


.project-image {
    transition:
        transform var(--transition-slow),
        filter var(--transition-base);
}


.project-card:hover .project-image {
    transform:
        scale(1.035);

    filter:
        saturate(1.04);
}


.project-placeholder {
    background:
        linear-gradient(
            145deg,
            rgba(191, 221, 240, 0.72),
            rgba(172, 207, 163, 0.48),
            rgba(255, 235, 204, 0.52)
        );
}


.project-placeholder-decoration {
    filter:
        drop-shadow(
            0 9px 8px rgba(80, 110, 120, 0.12)
        );
}


.project-content {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.3),
            rgba(255, 255, 255, 0)
        );
}


.project-tag {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        25px;

    padding:
        0.28rem 0.65rem;

    background:
        rgba(140, 192, 235, 0.18);

    color:
        var(--color-blue-dark);

    border:
        1px solid rgba(140, 192, 235, 0.26);

    border-radius:
        var(--radius-pill);

    font-family:
        var(--font-mono);

    font-optical-sizing:
        auto;

    font-size:
        0.62rem;

    font-weight:
        500;

    font-style:
        normal;

    font-variation-settings:
        "MONO" 1;

    letter-spacing:
        0.025em;
}


.project-tag:nth-child(even) {
    background:
        rgba(172, 207, 163, 0.19);

    color:
        var(--color-green-dark);

    border-color:
        rgba(172, 207, 163, 0.35);
}


.project-title {
    font-size:
        clamp(1.55rem, 2.5vw, 2rem);
}


.project-description {
    color:
        var(--color-text-soft);
}


/* =========================================================
   13. Wave Divider
   ========================================================= */

.wave-divider {
    background:
        transparent;
}


.wave-divider::before {
    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        0;

    height:
        45%;

    background:
        rgba(191, 221, 240, 0.26);
}


.wave-divider img {
    opacity:
        0.62;

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


/* =========================================================
   14. Notes Section
   ========================================================= */

.notes-section {
    background:
        linear-gradient(
            180deg,
            rgba(191, 221, 240, 0.22),
            rgba(234, 246, 252, 0.08)
        );
}


/* =========================================================
   15. Note Cards
   ========================================================= */

.note-card {
    background:
        rgba(255, 255, 255, 0.75);

    border:
        1px solid rgba(255, 255, 255, 0.75);

    border-left:
        5px solid rgba(140, 192, 235, 0.75);

    border-radius:
        var(--radius-lg);

    box-shadow:
        0 7px 22px rgba(70, 125, 150, 0.08);
}


.note-card:nth-child(even) {
    border-left-color:
        rgba(172, 207, 163, 0.88);
}


.note-card:hover {
    transform:
        translateX(5px);

    box-shadow:
        0 10px 28px rgba(70, 125, 150, 0.11);
}


.note-date {
    color:
        var(--color-blue-dark);

    font-size:
        0.66rem;

    font-weight:
        600;

    line-height:
        1.6;
}


.note-title {
    font-size:
        clamp(1.4rem, 2.3vw, 1.8rem);
}


.note-title a {
    color:
        var(--color-dark);
}


.note-title a:hover {
    color:
        var(--color-blue-dark);
}


.note-excerpt {
    color:
        var(--color-text-soft);
}


/* =========================================================
   16. Social Cards
   ========================================================= */

.social-card {
    border:
        1px solid rgba(255, 255, 255, 0.82);

    box-shadow:
        0 14px 35px rgba(70, 125, 150, 0.12);
}


.social-card:hover {
    transform:
        translateY(-5px);

    box-shadow:
        0 20px 43px rgba(70, 125, 150, 0.17);
}


/* =========================================================
   17. Discord Card
   ========================================================= */

.discord-card {
    background:
        linear-gradient(
            135deg,
            rgba(191, 221, 240, 0.88),
            rgba(140, 192, 235, 0.56),
            rgba(255, 255, 255, 0.7)
        );
}


.discord-card .social-card-label {
    color:
        #4E7FA8;
}


.discord-card .social-card-art::before {
    content:
        "";

    position:
        absolute;

    width:
        190px;

    height:
        190px;

    border-radius:
        50%;

    background:
        rgba(255, 255, 255, 0.24);

    filter:
        blur(2px);
}


/* =========================================================
   18. Steam Card
   ========================================================= */

.steam-card {
    background:
        linear-gradient(
            135deg,
            rgba(172, 207, 163, 0.73),
            rgba(255, 235, 204, 0.68),
            rgba(255, 255, 255, 0.78)
        );
}


.steam-card .social-card-label {
    color:
        var(--color-green-dark);
}


.steam-card .social-card-art::before {
    content:
        "";

    position:
        absolute;

    width:
        190px;

    height:
        190px;

    border-radius:
        48% 52% 43% 57%
        /
        52% 42% 58% 48%;

    background:
        rgba(255, 255, 255, 0.27);
}


/* =========================================================
   19. Social Card Art
   ========================================================= */

.social-card-art img {
    position:
        relative;

    z-index:
        2;

    filter:
        drop-shadow(
            0 12px 10px rgba(70, 105, 120, 0.13)
        );

    transition:
        transform var(--transition-base);
}


.social-card:hover .social-card-art img {
    transform:
        translateY(-4px)
        rotate(1deg);
}


/* =========================================================
   20. Ocean Transition
   ========================================================= */

.ocean-transition {
    background:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(191, 221, 240, 0.18) 35%,
            rgba(140, 192, 235, 0.6) 100%
        );
}


.ocean-wave {
    border-radius:
        50% 50% 0 0
        /
        25% 25% 0 0;
}


.ocean-wave-back {
    background:
        rgba(191, 221, 240, 0.82);

    clip-path:
        polygon(
            0% 45%,
            8% 36%,
            16% 43%,
            24% 31%,
            33% 41%,
            42% 32%,
            50% 42%,
            59% 28%,
            68% 39%,
            77% 31%,
            86% 40%,
            93% 32%,
            100% 38%,
            100% 100%,
            0% 100%
        );
}


.ocean-wave-front {
    background:
        linear-gradient(
            180deg,
            #8CC0EB,
            #A8D3ED
        );

    clip-path:
        polygon(
            0% 48%,
            7% 40%,
            14% 51%,
            22% 40%,
            30% 48%,
            38% 37%,
            46% 48%,
            55% 39%,
            64% 50%,
            72% 37%,
            81% 46%,
            90% 36%,
            100% 47%,
            100% 100%,
            0% 100%
        );

    box-shadow:
        inset 0 8px 0 rgba(255, 255, 255, 0.24);
}


/* =========================================================
   21. Shore Section
   ========================================================= */

.shore-section {
    background:
        linear-gradient(
            180deg,
            #FFEFDA 0%,
            #FFEBCC 55%,
            #F7DCB7 100%
        );

    border-top:
        5px solid rgba(255, 255, 255, 0.45);
}


/* Subtle sand texture without external images */

.shore-section::before {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    background-image:
        radial-gradient(
            circle,
            rgba(168, 132, 90, 0.09) 1px,
            transparent 1.5px
        );

    background-size:
        27px 27px;

    opacity:
        0.35;

    pointer-events:
        none;
}


/* =========================================================
   22. Shore Decorations
   ========================================================= */

.shore-decoration {
    filter:
        drop-shadow(
            0 6px 5px rgba(112, 93, 68, 0.14)
        );
}


/* =========================================================
   23. Visitor Counter
   ========================================================= */

.visitor-widget {
    background:
        rgba(255, 255, 255, 0.2);

    border-radius:
        var(--radius-xl);
}


.visitor-shell {
    filter:
        drop-shadow(
            0 4px 4px rgba(100, 85, 70, 0.12)
        );
}


.visitor-label {
    color:
        var(--color-text-soft);

    font-family:
        var(--font-title);

    font-size:
        1.35rem;
}


.visitor-count {
    padding:
        0.4rem 0.9rem;

    background:
        rgba(255, 255, 255, 0.55);

    color:
        var(--color-dark);

    border:
        1px solid rgba(255, 255, 255, 0.72);

    border-radius:
        var(--radius-md);

    box-shadow:
        inset 0 2px 8px rgba(255, 255, 255, 0.5);

    font-size:
        clamp(1.6rem, 4vw, 2.3rem);

    font-weight:
        600;

    letter-spacing:
        0.12em;
}


.visitor-note {
    color:
        rgba(32, 35, 38, 0.58);

    font-size:
        1rem;
}


/* =========================================================
   24. Guestbook Card
   ========================================================= */

.guestbook-card {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.88),
            rgba(255, 247, 235, 0.84)
        );

    border:
        2px solid rgba(255, 255, 255, 0.78);

    box-shadow:
        0 16px 40px rgba(130, 105, 78, 0.12);
}


.guestbook-card:hover {
    box-shadow:
        0 19px 46px rgba(130, 105, 78, 0.14);
}


.guestbook-title {
    margin-bottom:
        var(--space-2);

    color:
        var(--color-dark);

    font-size:
        clamp(2rem, 4vw, 2.8rem);
}


.guestbook-starfish {
    filter:
        drop-shadow(
            0 5px 5px rgba(130, 95, 75, 0.12)
        );
}


/* =========================================================
   25. Guestbook Form
   ========================================================= */

.guestbook-form label {
    color:
        var(--color-text-soft);

    font-family:
        var(--font-mono);

    font-optical-sizing:
        auto;

    font-size:
        0.72rem;

    font-weight:
        600;

    font-style:
        normal;

    font-variation-settings:
        "MONO" 1;

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;
}


.guestbook-form input,
.guestbook-form textarea {
    background:
        rgba(255, 255, 255, 0.63);

    border:
        2px solid rgba(140, 192, 235, 0.2);

    box-shadow:
        inset 0 2px 7px rgba(100, 130, 140, 0.04);
}


.guestbook-form input:focus,
.guestbook-form textarea:focus {
    border-color:
        rgba(140, 192, 235, 0.85);

    box-shadow:
        0 0 0 5px rgba(140, 192, 235, 0.13);
}


.guestbook-status {
    color:
        var(--color-green-dark);

    font-family:
        var(--font-mono);

    font-optical-sizing:
        auto;

    font-size:
        0.68rem;

    font-weight:
        500;

    font-style:
        normal;

    font-variation-settings:
        "MONO" 1;
}


/* =========================================================
   26. Guestbook Entries
   ========================================================= */

.guestbook-entry {
    position:
        relative;

    padding:
        var(--space-5);

    background:
        rgba(255, 255, 255, 0.48);

    border:
        1px solid rgba(140, 192, 235, 0.17);

    border-radius:
        var(--radius-lg);
}


.guestbook-entry-header {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        var(--space-4);

    margin-bottom:
        var(--space-2);
}


.guestbook-entry-name {
    color:
        var(--color-dark);

    font-weight:
        700;
}


.guestbook-entry-date {
    color:
        var(--color-gray-light);

    font-family:
        var(--font-mono);

    font-optical-sizing:
        auto;

    font-size:
        0.62rem;

    font-weight:
        400;

    font-style:
        normal;

    font-variation-settings:
        "MONO" 1;
}


.guestbook-entry-message {
    margin:
        0;

    color:
        var(--color-text-soft);
}


/* =========================================================
   27. Shore Character
   ========================================================= */

.shore-character {
    filter:
        drop-shadow(
            0 12px 10px rgba(110, 92, 68, 0.14)
        );
}


/* =========================================================
   28. Footer
   ========================================================= */

.site-footer {
    background:
        linear-gradient(
            180deg,
            #F7DCB7,
            #F2D2A8
        );

    color:
        rgba(32, 35, 38, 0.72);

    border-top:
        1px solid rgba(255, 255, 255, 0.42);
}


.footer-logo {
    margin-bottom:
        var(--space-2);

    font-family:
        var(--font-title);

    font-size:
        2rem;

    color:
        var(--color-dark);
}


.footer-navigation a {
    position:
        relative;

    color:
        rgba(32, 35, 38, 0.66);

    font-weight:
        700;
}


.footer-navigation a:hover {
    color:
        var(--color-blue-dark);

    transform:
        translateX(3px);
}


.footer-history {
    color:
        rgba(32, 35, 38, 0.55);

    font-size:
        0.67rem;
}


.footer-bottom {
    border-top:
        1px solid rgba(116, 95, 69, 0.12);

    color:
        rgba(32, 35, 38, 0.5);

    font-size:
        0.95rem;
}


/* =========================================================
   29. Background Clouds
   ========================================================= */

.cloud {
    opacity:
        0.46;

    filter:
        drop-shadow(
            0 8px 12px rgba(92, 145, 168, 0.07)
        );
}


/* =========================================================
   30. Seagulls
   ========================================================= */

.seagull {
    opacity:
        0.72;

    filter:
        drop-shadow(
            0 4px 5px rgba(70, 110, 130, 0.12)
        );
}


/* =========================================================
   31. Bubbles
   ========================================================= */

.bubble {
    width:
        28px;

    height:
        28px;

    border:
        2px solid rgba(255, 255, 255, 0.55);

    border-radius:
        50%;

    background:
        radial-gradient(
            circle at 32% 28%,
            rgba(255, 255, 255, 0.75),
            rgba(255, 255, 255, 0.15) 32%,
            rgba(140, 192, 235, 0.08) 65%,
            rgba(140, 192, 235, 0.12)
        );

    box-shadow:
        inset -4px -4px 8px rgba(140, 192, 235, 0.08),
        0 5px 12px rgba(90, 140, 160, 0.05);

    opacity:
        0.55;
}


.bubble-2 {
    width:
        18px;

    height:
        18px;
}


.bubble-3 {
    width:
        38px;

    height:
        38px;
}


.bubble-4 {
    width:
        22px;

    height:
        22px;
}


.bubble-5 {
    width:
        15px;

    height:
        15px;
}


/* =========================================================
   32. Minor Cute Details
   ========================================================= */

.card-label::before,
.section-eyebrow::before,
.social-card-label::before {
    content:
        "·";

    margin-right:
        0.35rem;

    color:
        var(--color-green);
}


.card-label::after,
.section-eyebrow::after,
.social-card-label::after {
    content:
        "·";

    margin-left:
        0.35rem;

    color:
        var(--color-blue);
}


/* =========================================================
   33. Button Shine
   ========================================================= */

.button {
    position:
        relative;

    overflow:
        hidden;
}


.button::before {
    content:
        "";

    position:
        absolute;

    top:
        -90%;

    left:
        -55%;

    width:
        45%;

    height:
        250%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.4),
            transparent
        );

    transform:
        rotate(24deg);

    transition:
        left 500ms ease;

    pointer-events:
        none;
}


.button:hover::before {
    left:
        125%;
}


/* =========================================================
   34. Image Fallback Appearance
   ========================================================= */

img {
    color:
        transparent;
}


.project-image-wrapper:has(img:not([src])),
.social-card-art:has(img:not([src])) {
    background:
        linear-gradient(
            135deg,
            var(--color-sky-light),
            var(--color-green-light)
        );
}


/* =========================================================
   35. Desktop Fine Tuning
   ========================================================= */

@media (min-width: 1100px) {

    .profile-card {
        border-radius:
            38px;
    }


    .shore-clock-card {
        border-radius:
            42% 58% 46% 54%
            /
            56% 46% 54% 44%;
    }


    .discord-card {
        border-radius:
            36px 55px 38px 48px;
    }


    .steam-card {
        border-radius:
            50px 36px 54px 38px;
    }

}


/* =========================================================
   36. Tablet Adjustments
   ========================================================= */

@media (max-width: 900px) {

    .main-navigation {
        width:
            fit-content;

        max-width:
            100%;
    }


    .project-card:hover,
    .project-card:nth-child(2):hover {
        transform:
            translateY(-5px);
    }


    .note-card:hover {
        transform:
            translateY(-3px);
    }

}


/* =========================================================
   37. Mobile Components
   ========================================================= */

@media (max-width: 767px) {

    .site-logo {
        font-size:
            clamp(2.8rem, 13vw, 4rem);
    }


    .main-navigation {
        background:
            rgba(255, 255, 255, 0.2);

        border-radius:
            var(--radius-xl);
    }


    .nav-link {
        min-width:
            auto;

        padding:
            0.5rem 0.9rem;

        font-size:
            1rem;
    }


    .hero-description {
        font-size:
            1.15rem;
    }


    .hero-character-glow {
        width:
            330px;
    }


    .clock-sign {
        width:
            min(
                100%,
                360px
            );

        margin-inline:
            auto;
    }


    .social-card-art::before {
        opacity:
            0.7;
    }


    .visitor-count {
        letter-spacing:
            0.08em;
    }


    .footer-navigation a:hover {
        transform:
            none;
    }

}


/* =========================================================
   38. Small Mobile Components
   ========================================================= */

@media (max-width: 480px) {

    .main-navigation {
        padding:
            var(--space-2);
    }


    .nav-link {
        padding:
            0.48rem 0.72rem;
    }


    .site-tagline {
        font-size:
            1rem;
    }


    .project-tag {
        font-size:
            0.57rem;
    }


    .guestbook-title {
        font-size:
            2.2rem;
    }


    .visitor-count {
        font-size:
            1.75rem;
    }

}


/* =========================================================
   39. No Hover Devices
   ========================================================= */

@media (hover: none) {

    .card:hover,
    .profile-card:hover,
    .project-card:hover,
    .project-card:nth-child(2):hover,
    .social-card:hover,
    .note-card:hover {
        transform:
            none;
    }


    .button:hover {
        transform:
            none;
    }


    .button::before {
        display:
            none;
    }

}


/* =========================================================
   40. Fallbacks
   ========================================================= */

@supports not (
    (background-clip: text)
    or
    (-webkit-background-clip: text)
) {

    .site-logo,
    .gradient-title {
        background:
            none;

        color:
            var(--color-green-dark);

        -webkit-text-fill-color:
            currentColor;
    }

}


@supports not selector(:has(*)) {

    .project-image-wrapper {
        background-color:
            var(--color-sky-light);
    }

}

/* =========================================================
   41. Guestbook States
   ========================================================= */

.guestbook-status[data-state="success"] {
    color: var(--color-green-dark);
}

.guestbook-status[data-state="error"] {
    color: #B66A64;
}

.guestbook-status[data-state="loading"] {
    color: var(--color-blue-dark);
}


.guestbook-loading,
.guestbook-empty,
.guestbook-error {
    margin: 0;

    padding: var(--space-5);

    text-align: center;

    border-radius: var(--radius-lg);

    font-size: 1rem;
}


.guestbook-loading {
    color: var(--color-blue-dark);

    background:
        rgba(191, 221, 240, 0.18);
}


.guestbook-empty {
    color: var(--color-text-soft);

    background:
        rgba(255, 255, 255, 0.3);
}


.guestbook-error {
    color: #A45E59;

    background:
        rgba(255, 220, 215, 0.35);
}


.guestbook-form button:disabled {
    opacity: 0.65;

    cursor: wait;

    transform: none;
}


.guestbook-entry {
    animation:
        guestbookEntryAppear
        350ms
        ease
        both;
}


@keyframes guestbookEntryAppear {

    from {
        opacity: 0;

        transform:
            translateY(7px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}