/* ==========================================================
   FFXIVPenumbra.com
   PREMIUM FOOTER — FINAL DARK FOG VERSION
   ========================================================== */


/* ==========================================================
   ROOT
========================================================== */

.pf-footer {
    position: relative;

    width: 100%;

    overflow: hidden;

    isolation: isolate;

    color: #ffffff;

    background: #06172f;

    font-family:
        "Roboto",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;
}


/* ==========================================================
   BACKGROUND ART
========================================================== */

.pf-footer-art {
    position: absolute;

    top: 0;
    left: 0;

    z-index: -4;

    width: 100%;
    height: 355px;

    background-image:
        url("/assets/images/footer/penumbra-footer-bg.webp");

    background-size: cover;

    background-position: center 42%;

    background-repeat: no-repeat;
}


.pf-footer-art::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(3, 17, 37, .10) 0%,
            rgba(4, 19, 41, .20) 28%,
            rgba(4, 20, 44, .56) 63%,
            rgba(5, 22, 46, .90) 87%,
            #06172f 100%
        );
}


/* ==========================================================
   TOP DARK BLEND
========================================================== */

/*
   Softens the edge between the previous white section
   and the footer without producing a white glowing border.
*/

.pf-footer::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    z-index: 2;

    width: 100%;
    height: 86px;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(42, 59, 80, .46) 0%,
            rgba(29, 48, 73, .34) 16%,
            rgba(18, 38, 64, .22) 38%,
            rgba(8, 27, 52, .08) 68%,
            transparent 100%
        );
}


/* ==========================================================
   VISIBLE ANIMATED DARK FOG
========================================================== */

.pf-footer-fog {
    position: absolute;

    top: -20px;
    left: 0;

    z-index: 4;

    width: 100%;
    height: 145px;

    overflow: hidden;

    pointer-events: none;
}


/* Shared fog cloud */

.pf-fog {
    position: absolute;

    display: block;

    width: 72vw;

    min-width: 800px;

    height: 115px;

    border-radius: 50%;

    filter:
        blur(24px);

    will-change:
        transform;

    pointer-events: none;
}


/* ==========================================================
   FOG 1 — LEFT TO RIGHT
========================================================== */

.pf-fog-one {
    top: 3px;

    left: -60vw;

    opacity: .88;

    background:
        radial-gradient(
            ellipse at center,
            rgba(81, 111, 145, .78) 0%,
            rgba(57, 88, 122, .64) 24%,
            rgba(39, 68, 103, .47) 43%,
            rgba(23, 48, 78, .26) 60%,
            rgba(10, 29, 54, .08) 72%,
            transparent 82%
        );

    animation:
        pfFogMoveLeft
        16s linear infinite;
}


/* ==========================================================
   FOG 2 — RIGHT TO LEFT
========================================================== */

.pf-fog-two {
    top: 26px;

    right: -62vw;

    opacity: .72;

    background:
        radial-gradient(
            ellipse at center,
            rgba(65, 99, 137, .68) 0%,
            rgba(47, 79, 115, .55) 29%,
            rgba(31, 59, 94, .38) 48%,
            rgba(18, 40, 70, .18) 65%,
            transparent 80%
        );

    animation:
        pfFogMoveRight
        21s linear infinite;
}


/* ==========================================================
   FOG 3 — SLOW CENTER DRIFT
========================================================== */

.pf-fog-three {
    top: -5px;

    left: 8%;

    width: 88vw;

    opacity: .58;

    background:
        radial-gradient(
            ellipse at center,
            rgba(74, 105, 141, .57) 0%,
            rgba(51, 82, 117, .44) 32%,
            rgba(33, 62, 96, .28) 52%,
            rgba(18, 41, 72, .09) 69%,
            transparent 82%
        );

    animation:
        pfFogCenter
        11s ease-in-out infinite alternate;
}


/* ==========================================================
   FOG MOVEMENT
========================================================== */

@keyframes pfFogMoveLeft {

    0% {
        transform:
            translate3d(
                -5vw,
                0,
                0
            )
            scale(1);
    }

    50% {
        transform:
            translate3d(
                105vw,
                9px,
                0
            )
            scale(1.14);
    }

    100% {
        transform:
            translate3d(
                205vw,
                0,
                0
            )
            scale(1);
    }

}


@keyframes pfFogMoveRight {

    0% {
        transform:
            translate3d(
                0,
                0,
                0
            )
            scale(1.08);
    }

    50% {
        transform:
            translate3d(
                -105vw,
                -7px,
                0
            )
            scale(1.16);
    }

    100% {
        transform:
            translate3d(
                -205vw,
                0,
                0
            )
            scale(1.08);
    }

}


@keyframes pfFogCenter {

    0% {
        transform:
            translate3d(
                -12%,
                0,
                0
            )
            scale(1);
    }

    100% {
        transform:
            translate3d(
                16%,
                13px,
                0
            )
            scale(1.13);
    }

}


/* ==========================================================
   REMOVE OLD EXTRA ELEMENTS
========================================================== */

.pf-footer-motto,
.pf-footer-divider,
.pf-footer-arrow,
.pf-footer-nav > a b {
    display: none !important;
}


/* ==========================================================
   CTA AREA
========================================================== */

.pf-footer-help {
    position: relative;

    z-index: 8;

    padding:
        48px 24px
        26px;
}


.pf-footer-help-inner {
    width:
        min(
            740px,
            100%
        );

    margin:
        0 auto;

    text-align:
        center;
}


/* ==========================================================
   TOP ICON
========================================================== */

.pf-footer-top-icon {
    margin-bottom:
        7px;

    color:
        #45b8ff;

    font-size:
        22px;

    line-height:
        1;

    text-shadow:
        0 0 17px
        rgba(51, 174, 255, .34);
}


/* ==========================================================
   EYEBROW
========================================================== */

.pf-footer-eyebrow {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    margin-bottom:
        10px;
}


.pf-footer-eyebrow span {
    width:
        48px;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(71, 177, 246, .55)
        );
}


.pf-footer-eyebrow span:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(71, 177, 246, .55),
            transparent
        );
}


.pf-footer-eyebrow small {
    color:
        #64c5ff;

    font-size:
        8.5px;

    line-height:
        1;

    font-weight:
        800;

    letter-spacing:
        .25em;
}


/* ==========================================================
   HEADING
========================================================== */

.pf-footer-help-title {
    margin:
        0;

    color:
        #ffffff;

    font-family:
        "Outfit",
        sans-serif;

    font-size:
        clamp(
            33px,
            3.4vw,
            46px
        );

    line-height:
        1.05;

    font-weight:
        800;

    letter-spacing:
        -.035em;
}


.pf-footer-help-title span {
    color:
        #39adff;
}


/* ==========================================================
   DESCRIPTION
========================================================== */

.pf-footer-help-text {
    margin:
        10px 0 0;

    color:
        #ffffff;

    font-size:
        14.5px;

    line-height:
        1.55;

    font-weight:
        700;
}


/* ==========================================================
   CTA BUTTONS
========================================================== */

.pf-footer-help-actions {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        11px;

    margin-top:
        20px;
}


.pf-footer-btn {
    width:
        210px;

    min-height:
        47px;

    padding:
        0 17px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        flex-start;

    gap:
        10px;

    border-radius:
        10px;

    color:
        #ffffff;

    font-size:
        13.5px;

    line-height:
        1;

    font-weight:
        800;

    white-space:
        nowrap;

    text-decoration:
        none;

    transition:
        transform 180ms ease,
        background 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}


.pf-footer-btn i {
    width:
        19px;

    flex:
        0 0 19px;

    color:
        #ffffff;

    font-size:
        16px;

    text-align:
        center;
}


.pf-footer-btn-primary {
    border:
        1px solid
        rgba(89, 190, 255, .50);

    background:
        linear-gradient(
            135deg,
            #249ff0,
            #0876e9
        );

    box-shadow:
        0 9px 22px
        rgba(5, 112, 225, .19);
}


.pf-footer-btn-secondary {
    border:
        1px solid
        rgba(72, 180, 255, .62);

    background:
        rgba(4, 29, 61, .78);

    backdrop-filter:
        blur(7px);

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


.pf-footer-btn:hover {
    transform:
        translateY(-2px);
}


.pf-footer-btn-primary:hover {
    box-shadow:
        0 14px 28px
        rgba(5, 112, 225, .26);
}


.pf-footer-btn-secondary:hover {
    background:
        rgba(9, 55, 100, .92);
}


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

.pf-footer-main {
    position:
        relative;

    z-index:
        7;

    padding:
        23px 0
        26px;

    background:
        linear-gradient(
            180deg,
            rgba(6, 23, 47, .91),
            #06172f 23%
        );
}


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

.pf-footer-container {
    width:
        min(
            1100px,
            calc(100% - 48px)
        );

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        minmax(290px, 1.16fr)
        .69fr
        .69fr
        .66fr;

    gap:
        24px;

    align-items:
        center;
}


/* ==========================================================
   BRAND
========================================================== */

.pf-footer-brand {
    min-width:
        0;

    padding-right:
        25px;

    border-right:
        1px solid
        rgba(114, 184, 233, .18);
}


.pf-footer-brand-top {
    display:
        flex;

    align-items:
        center;

    gap:
        14px;
}


.pf-footer-brand-mark {
    width:
        53px;

    height:
        53px;

    flex:
        0 0 53px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #4dbbff;

    border:
        1px solid
        rgba(78, 186, 255, .28);

    border-radius:
        50%;

    background:
        rgba(18, 101, 169, .11);
}


.pf-footer-brand-mark i {
    font-size:
        24px;
}


.pf-footer-brand-copy {
    display:
        flex;

    flex-direction:
        column;
}


.pf-footer-brand-mini {
    color:
        #8ed3ff;

    font-family:
        Georgia,
        serif;

    font-size:
        16px;

    line-height:
        1;

    font-weight:
        700;

    letter-spacing:
        .16em;
}


.pf-footer-brand-name {
    margin-top:
        3px;

    color:
        #ffffff;

    font-family:
        Georgia,
        serif;

    font-size:
        28px;

    line-height:
        .96;

    font-weight:
        700;

    letter-spacing:
        .035em;
}


.pf-footer-brand-description {
    max-width:
        350px;

    margin:
        14px 0 0;

    color:
        #ffffff;

    font-size:
        13.5px;

    line-height:
        1.58;

    font-weight:
        700;
}


/* ==========================================================
   VALUES
========================================================== */

.pf-footer-values {
    margin-top:
        16px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;
}


.pf-footer-value {
    display:
        flex;

    align-items:
        center;

    gap:
        7px;
}


.pf-footer-value-icon {
    width:
        30px;

    height:
        30px;

    flex:
        0 0 30px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    color:
        #4ebcff;

    background:
        rgba(30, 122, 197, .17);
}


.pf-footer-value-icon i {
    font-size:
        12px;
}


.pf-footer-value > span:last-child {
    display:
        flex;

    flex-direction:
        column;

    color:
        #ffffff;

    font-size:
        7.5px;

    line-height:
        1.35;

    font-weight:
        800;

    letter-spacing:
        .095em;

    text-transform:
        uppercase;
}


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

.pf-footer-nav {
    min-width:
        0;

    align-self:
        start;
}


.pf-footer-nav-title {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    margin-bottom:
        12px;
}


.pf-footer-nav-title i {
    width:
        21px;

    color:
        #37b0ff;

    font-size:
        16px;

    text-align:
        center;
}


.pf-footer-nav-title strong {
    color:
        #ffffff;

    font-size:
        10.5px;

    line-height:
        1;

    font-weight:
        800;

    letter-spacing:
        .17em;
}


.pf-footer-nav > a {
    width:
        100%;

    min-height:
        34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-start;

    color:
        #ffffff;

    font-size:
        14.5px;

    line-height:
        1.2;

    font-weight:
        800;

    text-decoration:
        none;

    border-bottom:
        1px solid
        rgba(122, 182, 224, .09);

    transition:
        color 160ms ease,
        padding-left 160ms ease;
}


.pf-footer-nav > a:last-child {
    border-bottom:
        0;
}


.pf-footer-nav > a:hover {
    padding-left:
        4px;

    color:
        #58bdff;
}


/* ==========================================================
   SIGNATURE
========================================================== */

.pf-footer-signature {
    align-self:
        center;

    color:
        #ffffff;

    font-family:
        Georgia,
        serif;

    font-size:
        20px;

    line-height:
        1.16;

    font-style:
        italic;

    font-weight:
        700;

    transform:
        rotate(-3deg);
}


.pf-footer-signature span,
.pf-footer-signature strong {
    display:
        block;
}


.pf-footer-signature strong {
    color:
        #ffffff;

    font-weight:
        700;
}


.pf-footer-signature > i {
    display:
        block;

    width:
        92px;

    height:
        2px;

    margin-top:
        8px;

    background:
        linear-gradient(
            90deg,
            #58bbff,
            transparent
        );

    transform:
        rotate(-6deg);
}


/* ==========================================================
   BOTTOM BAR
========================================================== */

.pf-footer-bottom {
    position:
        relative;

    z-index:
        7;

    border-top:
        1px solid
        rgba(94, 162, 211, .16);

    background:
        #05142a;
}


.pf-footer-bottom-inner {
    width:
        min(
            1100px,
            calc(100% - 48px)
        );

    min-height:
        58px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;
}


.pf-footer-copyright p {
    margin:
        0;

    color:
        #ffffff;

    font-size:
        12px;

    line-height:
        1.25;

    font-weight:
        700;
}


.pf-footer-copyright strong {
    color:
        #ffffff;

    font-weight:
        800;
}


.pf-footer-copyright small {
    display:
        block;

    margin-top:
        2px;

    color:
        #ffffff;

    font-size:
        9.5px;

    line-height:
        1.35;

    font-weight:
        600;
}


.pf-footer-disclaimer {
    display:
        none !important;
}


/* ==========================================================
   LEGAL
========================================================== */

.pf-footer-legal {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    white-space:
        nowrap;
}


.pf-footer-legal a {
    color:
        #ffffff;

    font-size:
        11.5px;

    font-weight:
        700;

    text-decoration:
        none;
}


.pf-footer-legal span {
    color:
        rgba(255, 255, 255, .38);
}


.pf-footer-legal a:hover {
    color:
        #58bdff;
}


/* ==========================================================
   1366 DESKTOP
========================================================== */

@media
(min-width: 981px)
and
(max-width: 1400px) {

    .pf-footer-art {
        height:
            345px;
    }


    .pf-footer-help {
        padding:
            45px 20px
            24px;
    }


    .pf-footer-container,
    .pf-footer-bottom-inner {
        width:
            min(
                1060px,
                calc(100% - 42px)
            );
    }


    .pf-footer-container {
        grid-template-columns:
            1.14fr
            .69fr
            .69fr
            .64fr;

        gap:
            21px;
    }


    .pf-footer-main {
        padding:
            21px 0
            23px;
    }

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 980px) {

    .pf-footer-art {
        height:
            350px;

        background-position:
            64% center;
    }


    .pf-footer-container {
        grid-template-columns:
            1fr
            1fr;

        gap:
            27px
            25px;
    }


    .pf-footer-brand {
        grid-column:
            1 / -1;

        padding-right:
            0;

        padding-bottom:
            20px;

        border-right:
            0;

        border-bottom:
            1px solid
            rgba(113, 181, 228, .15);
    }


    .pf-footer-signature {
        display:
            none;
    }

}


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

@media (max-width: 680px) {

    .pf-footer-art {
        height:
            340px;

        background-position:
            69% center;
    }


    .pf-footer-fog {
        height:
            105px;
    }


    .pf-fog {
        min-width:
            600px;

        height:
            85px;

        filter:
            blur(20px);
    }


    .pf-footer-help {
        padding:
            37px 15px
            23px;
    }


    .pf-footer-help-title {
        font-size:
            30px;
    }


    .pf-footer-help-text {
        font-size:
            13px;
    }


    .pf-footer-help-actions {
        width:
            100%;

        display:
            grid;

        grid-template-columns:
            1fr;

        gap:
            8px;
    }


    .pf-footer-btn {
        width:
            100%;
    }


    .pf-footer-container,
    .pf-footer-bottom-inner {
        width:
            calc(100% - 28px);
    }


    .pf-footer-container {
        grid-template-columns:
            1fr
            1fr;

        gap:
            24px
            17px;
    }


    .pf-footer-brand {
        grid-column:
            1 / -1;
    }


    .pf-footer-values {
        display:
            grid;

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

        gap:
            7px;
    }


    .pf-footer-bottom-inner {
        min-height:
            0;

        padding:
            16px 0;

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            11px;
    }

}


/* ==========================================================
   VERY SMALL MOBILE
========================================================== */

@media (max-width: 390px) {

    .pf-footer-container {
        grid-template-columns:
            1fr;
    }


    .pf-footer-values {
        grid-template-columns:
            1fr;
    }

}


/* ==========================================================
   HEADER HIDE ON FOOTER
========================================================== */

.site-header {
    transition:
        opacity 220ms ease,
        transform 220ms ease;
}


body.footer-in-view
.site-header {
    opacity:
        0;

    transform:
        translateY(-100%);

    pointer-events:
        none;
}


/* ==========================================================
   REDUCED MOTION
========================================================== */

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

    .pf-fog {
        animation:
            none !important;
    }

}