/* ==================================================
   RESET
================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    min-height: 100vh;

    overflow-x: hidden;

    color: #ffffff;

    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

    background:

        radial-gradient(
            circle at 15% 15%,
            rgba(103, 60, 220, .22),
            transparent 32%
        ),

        radial-gradient(
            circle at 85% 35%,
            rgba(0, 174, 255, .18),
            transparent 32%
        ),

        radial-gradient(
            circle at 50% 90%,
            rgba(255, 47, 145, .14),
            transparent 35%
        ),

        #06060d;

    transition:
        background 3s ease;
}


/* ==================================================
   AMBIENT COLORS
================================================== */

.ambient {

    position: fixed;

    width: 650px;
    height: 650px;

    border-radius: 50%;

    filter: blur(130px);

    opacity: .16;

    pointer-events: none;

    z-index: -10;

    will-change: transform;

}


.ambient-purple {

    background: #713dff;

    top: -350px;
    left: -250px;

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


.ambient-blue {

    background: #00bfff;

    top: 25%;
    right: -350px;

    animation:
        blueFloat
        21s
        infinite
        alternate
        ease-in-out;
}


.ambient-pink {

    background: #ff3f9b;

    bottom: -400px;
    left: 30%;

    animation:
        pinkFloat
        24s
        infinite
        alternate
        ease-in-out;
}


@keyframes purpleFloat {

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

    50% {
        transform:
            translate3d(120px, 100px, 0)
            scale(1.15);
    }

    100% {
        transform:
            translate3d(40px, 180px, 0)
            scale(.95);
    }
}


@keyframes blueFloat {

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

    50% {
        transform:
            translate3d(-130px, -80px, 0)
            scale(1.18);
    }

    100% {
        transform:
            translate3d(-60px, 120px, 0)
            scale(.94);
    }
}


@keyframes pinkFloat {

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

    50% {
        transform:
            translate3d(130px, -100px, 0)
            scale(1.16);
    }

    100% {
        transform:
            translate3d(-100px, -40px, 0)
            scale(.95);
    }
}


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

.intro-screen {

    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    justify-content: center;
    align-items: center;

    overflow: hidden;

    background: #04040a;

    transition:
        opacity 1.4s cubic-bezier(.16, 1, .3, 1),
        visibility 1.4s ease;

}


.intro-screen::before {

    content: "";

    position: absolute;

    inset: -30%;

    background:

        radial-gradient(
            circle at 25% 40%,
            rgba(105, 52, 255, .45),
            transparent 25%
        ),

        radial-gradient(
            circle at 75% 55%,
            rgba(0, 205, 255, .38),
            transparent 25%
        ),

        radial-gradient(
            circle at 50% 90%,
            rgba(255, 55, 150, .35),
            transparent 25%
        );

    filter: blur(80px);

    animation:
        introBackground
        10s
        infinite
        alternate
        ease-in-out;
}


@keyframes introBackground {

    0% {
        transform:
            scale(1)
            rotate(0deg);
    }

    50% {
        transform:
            scale(1.18)
            rotate(3deg);
    }

    100% {
        transform:
            scale(1.08)
            rotate(-3deg);
    }
}


.intro-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(80px);

    opacity: .25;
}


.intro-glow-1 {

    width: 400px;
    height: 400px;

    background: #743dff;

    left: 5%;
    top: 20%;

    animation:
        introOrb1
        8s
        infinite
        alternate
        ease-in-out;
}


.intro-glow-2 {

    width: 350px;
    height: 350px;

    background: #00c8ff;

    right: 5%;
    bottom: 15%;

    animation:
        introOrb2
        10s
        infinite
        alternate
        ease-in-out;
}


.intro-glow-3 {

    width: 300px;
    height: 300px;

    background: #ff3f9e;

    left: 45%;
    bottom: -100px;

    animation:
        introOrb3
        9s
        infinite
        alternate
        ease-in-out;
}


@keyframes introOrb1 {

    to {
        transform:
            translate(130px, -80px)
            scale(1.3);
    }
}


@keyframes introOrb2 {

    to {
        transform:
            translate(-100px, 80px)
            scale(1.25);
    }
}


@keyframes introOrb3 {

    to {
        transform:
            translate(70px, -100px)
            scale(1.2);
    }
}


.intro-center {

    position: relative;

    z-index: 5;

    text-align: center;
}


.intro-line {

    width: 0;
    height: 1px;

    margin: 0 auto 25px;

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

    animation:
        introLine
        1.4s
        .2s
        forwards
        cubic-bezier(.16, 1, .3, 1);
}


@keyframes introLine {

    to {
        width: 230px;
    }
}


.intro-brand {

    font-size:
        clamp(30px, 6vw, 75px);

    font-weight: 900;

    letter-spacing: .25em;

    opacity: 0;

    transform:
        translateY(35px)
        scale(.96);

    background:

        linear-gradient(
            110deg,
            #ffffff,
            #8ce7ff,
            #ad87ff,
            #ff83bc,
            #ffffff
        );

    background-size: 300% 300%;

    background-clip: text;

    color: transparent;

    animation:

        introBrandIn
        1.4s
        .7s
        forwards
        cubic-bezier(.16, 1, .3, 1),

        softGradient
        10s
        2s
        infinite
        ease-in-out;

}


@keyframes introBrandIn {

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }
}


.intro-presents {

    margin-top: 16px;

    font-size: 11px;

    letter-spacing: .65em;

    color: #9ce8ff;

    opacity: 0;

    transform:
        translateY(15px);

    animation:
        presentsIn
        1s
        1.6s
        forwards
        ease-out;
}


@keyframes presentsIn {

    to {

        opacity: 1;

        transform:
            translateY(0);

    }
}


.intro-loader {

    width: 260px;

    height: 2px;

    margin: 35px auto 0;

    background: rgba(255,255,255,.1);

    overflow: hidden;
}


.intro-loader span {

    display: block;

    width: 0;

    height: 100%;

    background:

        linear-gradient(
            90deg,
            #743cff,
            #00cfff,
            #ff4e9f
        );

    background-size: 250% 100%;

    animation:

        loadingBar
        2.5s
        .4s
        forwards
        cubic-bezier(.65, 0, .35, 1),

        softGradient
        6s
        infinite
        ease-in-out;
}


@keyframes loadingBar {

    to {
        width: 100%;
    }
}


.page-loaded .intro-screen {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

}


/* ==================================================
   SOFT GRADIENT ANIMATION
================================================== */

@keyframes softGradient {

    0% {
        background-position: 0% 50%;
    }

    25% {
        background-position: 35% 50%;
    }

    50% {
        background-position: 70% 50%;
    }

    75% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }

}


/* ==================================================
   NAVBAR
================================================== */

.navbar {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    height: 90px;

    padding:
        0 5vw;

    display: flex;

    justify-content: space-between;
    align-items: center;

    z-index: 500;

    background:
        linear-gradient(
            to bottom,
            rgba(3,3,10,.85),
            transparent
        );

    backdrop-filter:
        blur(7px);
}


.brand {

    color: white;

    text-decoration: none;

    display: flex;

    flex-direction: column;

    line-height: .9;
}


.brand strong {

    font-size: 19px;

    letter-spacing: .2em;

    text-shadow:
        0 0 18px rgba(0,180,255,.7);
}


.brand small {

    margin-top: 5px;

    font-size: 7px;

    letter-spacing: .6em;

    color: #77ddff;
}


.navbar nav {

    display: flex;

    gap: 38px;
}


.navbar nav a {

    color:
        rgba(255,255,255,.6);

    text-decoration: none;

    font-size: 11px;

    font-weight: 600;

    transition:
        color .7s ease,
        text-shadow .7s ease,
        transform .7s ease;
}


.navbar nav a:hover {

    color: white;

    transform:
        translateY(-2px);

    text-shadow:
        0 0 20px rgba(0,190,255,.8);
}


.nav-rof {

    display: flex;

    align-items: center;

    gap: 9px;

    font-size: 10px;

    letter-spacing: .2em;

    color: rgba(255,255,255,.6);
}


.nav-rof span {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #00e5bb;

    box-shadow:
        0 0 12px #00e5bb;

    animation:
        navPulse
        2s
        infinite
        ease-in-out;
}


@keyframes navPulse {

    0%,
    100% {
        opacity: .5;
        transform: scale(.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.15);
    }

}


/* ==================================================
   HERO
================================================== */

.hero {

    position: relative;

    min-height: 100vh;

    display: flex;

    align-items: center;

    overflow: hidden;
}


.hero-media {

    position: absolute;

    inset: 0;

    overflow: hidden;
}


.hero-media img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform: scale(1.15);

    filter:
        saturate(1.25)
        contrast(1.05)
        blur(6px);

    animation:
        heroImageIn
        3s
        2.5s
        forwards
        cubic-bezier(.16, 1, .3, 1);

    will-change: transform;
}


@keyframes heroImageIn {

    to {

        transform: scale(1.07);

        filter:
            saturate(1.35)
            contrast(1.05)
            blur(0);

    }

}


.hero-color {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            120deg,
            rgba(91,38,255,.32),
            transparent 35%,
            rgba(0,205,255,.24) 65%,
            rgba(255,45,145,.28)
        );

    background-size:
        250% 250%;

    mix-blend-mode: screen;

    animation:
        softColorFlow
        14s
        infinite
        alternate
        ease-in-out;
}


@keyframes softColorFlow {

    0% {
        background-position: 0% 40%;
        opacity: .5;
    }

    50% {
        background-position: 55% 60%;
        opacity: .75;
    }

    100% {
        background-position: 100% 30%;
        opacity: .55;
    }

}


.hero-dark {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(4,4,12,.92),
            rgba(4,4,12,.35) 55%,
            rgba(4,4,12,.2)
        ),

        linear-gradient(
            0deg,
            #04040c,
            transparent 45%,
            rgba(4,4,12,.35)
        );
}


.hero-shine {

    position: absolute;

    top: -30%;

    left: -50%;

    width: 25%;

    height: 160%;

    transform:
        rotate(18deg);

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

    animation:
        heroSweep
        9s
        infinite
        ease-in-out;
}


@keyframes heroSweep {

    0% {
        left: -55%;
    }

    45%,
    100% {
        left: 135%;
    }

}


.hero-content {

    position: relative;

    z-index: 10;

    width: min(760px, 90%);

    margin-right: 9vw;

    padding-top: 80px;
}


.hero-kicker {

    font-size: 10px;

    letter-spacing: .3em;

    color: #82e3ff;

    opacity: 0;

    animation:
        heroTextIn
        1s
        3s
        forwards
        ease-out;
}


@keyframes heroTextIn {

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


.rof-title {

    direction: ltr;

    display: flex;

    justify-content: flex-start;

    gap: 5px;

    margin-top: 20px;

    font-size:
        clamp(130px, 21vw, 285px);

    line-height: .7;

    letter-spacing: -.09em;

    font-weight: 900;

    background:

        linear-gradient(
            110deg,
            #ffffff,
            #7ee7ff,
            #9c75ff,
            #ff67ad,
            #ffffff
        );

    background-size: 300% 300%;

    background-clip: text;

    color: transparent;

    filter:
        drop-shadow(
            0 0 35px rgba(0,150,255,.35)
        );

    animation:
        titleGradient
        12s
        infinite
        ease-in-out;
}


.rof-title span {

    opacity: 0;

    transform:
        translateY(100px)
        rotate(8deg);

    animation:
        letterIn
        1.2s
        forwards
        cubic-bezier(.16, 1, .3, 1);
}


.rof-title span:nth-child(1) {
    animation-delay: 3.25s;
}


.rof-title span:nth-child(2) {
    animation-delay: 3.4s;
}


.rof-title span:nth-child(3) {
    animation-delay: 3.55s;
}


@keyframes letterIn {

    to {

        opacity: 1;

        transform:
            translateY(0)
            rotate(0);

    }

}


@keyframes titleGradient {

    0% {
        background-position: 0% 50%;
    }

    25% {
        background-position: 35% 55%;
    }

    50% {
        background-position: 70% 45%;
    }

    75% {
        background-position: 100% 55%;
    }

    100% {
        background-position: 0% 50%;
    }

}


.rof-full-name {

    direction: ltr;

    margin-top: 38px;

    font-size:
        clamp(13px, 2vw, 22px);

    font-weight: 600;

    letter-spacing: .5em;

    color:
        rgba(255,255,255,.9);

    opacity: 0;

    animation:
        fadeUp
        1.2s
        3.8s
        forwards
        cubic-bezier(.16, 1, .3, 1);
}


.hero-description {

    max-width: 530px;

    margin-top: 28px;

    color:
        rgba(255,255,255,.68);

    font-size: 14px;

    line-height: 2;

    opacity: 0;

    animation:
        fadeUp
        1.2s
        4s
        forwards
        cubic-bezier(.16, 1, .3, 1);
}


@keyframes fadeUp {

    from {

        opacity: 0;

        transform:
            translateY(35px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


.hero-button {

    display: inline-flex;

    align-items: center;

    gap: 30px;

    margin-top: 35px;

    padding:
        16px 23px;

    color: white;

    text-decoration: none;

    border:
        1px solid rgba(255,255,255,.3);

    background:
        rgba(255,255,255,.05);

    backdrop-filter:
        blur(15px);

        border-radius: 15px;

    overflow: hidden;

    position: relative;

    transition:
        transform .8s ease,
        border-color .8s ease,
        box-shadow .8s ease,
        background .8s ease;

    opacity: 0;

    animation:
        fadeUp
        1.2s
        4.2s
        forwards
        cubic-bezier(.16, 1, .3, 1);
}


.hero-button::before {

    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 100%;

    height: 100%;

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

    transition:
        left 1s ease;
}


.hero-button:hover::before {
    left: 120%;
}


.hero-button:hover {

    transform:
        translateY(-5px);

    border-color:
        rgba(91,214,255,.8);

    background:
        rgba(0,160,255,.1);

    box-shadow:
        0 20px 60px
        rgba(0,150,255,.2);
}


.hero-button b {

    font-size: 18px;

    font-weight: normal;

    transition:
        transform .6s ease;
}


.hero-button:hover b {

    transform:
        translateY(5px);
}


.hero-side-label {

    position: absolute;

    left: 3vw;
    top: 50%;

    transform:
        translateY(-50%)
        rotate(-90deg);

    color:
        rgba(255,255,255,.4);

    font-size: 8px;

    letter-spacing: .4em;
}


.hero-scroll {

    position: absolute;

    bottom: 35px;

    left: 50%;

    transform:
        translateX(-50%);

    display: flex;

    align-items: center;

    gap: 12px;

    color:
        rgba(255,255,255,.45);

    font-size: 8px;

    letter-spacing: .25em;
}


.hero-scroll i {

    width: 35px;

    height: 1px;

    background:
        rgba(255,255,255,.5);

    animation:
        scrollLine
        2s
        infinite
        ease-in-out;
}


@keyframes scrollLine {

    0%,
    100% {
        width: 25px;
        opacity: .4;
    }

    50% {
        width: 55px;
        opacity: 1;
    }

}


/* ==================================================
   COMMON
================================================== */

.eyebrow {

    color: #82ddff;

    font-size: 10px;

    letter-spacing: .3em;

    text-shadow:
        0 0 18px rgba(0,190,255,.5);
}


.reveal {

    opacity: 0;

    transform:
        translateY(80px)
        scale(.985);

    filter:
        blur(8px);

    transition:

        opacity 1.4s
        cubic-bezier(.16, 1, .3, 1),

        transform 1.5s
        cubic-bezier(.16, 1, .3, 1),

        filter 1.4s ease;
}


.reveal.visible {

    opacity: 1;

    transform:
        translateY(0)
        scale(1);

    filter:
        blur(0);
}


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

.intro-section {

    min-height: 85vh;

    position: relative;

    display: flex;

    align-items: center;

    padding:
        130px 12vw;
}


.section-index {

    position: absolute;

    top: 100px;

    right: 5vw;

    color: #69dfff;

    font-size: 11px;

    letter-spacing: .2em;
}


.intro-text {

    max-width: 950px;

    margin: auto;
}


.intro-text h2 {

    margin-top: 25px;

    font-size:
        clamp(48px, 8vw, 115px);

    line-height: .95;

    letter-spacing: -.05em;
}


.intro-text h2 span {

    background:

        linear-gradient(
            110deg,
            #00caff,
            #8d6cff,
            #ff5ca8,
            #00caff
        );

    background-size: 300% 300%;

    background-clip: text;

    color: transparent;

    animation:
        titleGradient
        13s
        infinite
        ease-in-out;
}


.intro-text p {

    max-width: 620px;

    margin-top: 45px;

    color:
        rgba(255,255,255,.58);

    font-size: 14px;

    line-height: 2.1;
}


/* ==================================================
   STORY
================================================== */

.story-section {

    min-height: 100vh;

    padding:
        110px 7vw;

    display: grid;

    grid-template-columns:
        1.15fr .85fr;

    gap: 8vw;

    align-items: center;
}


.story-image {

    height: 70vh;

    position: relative;

    overflow: hidden;

    clip-path:
        polygon(
            0 0,
            96% 0,
            100% 93%,
            4% 100%
        );
}


.story-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;
    

    transition:
        transform 2s
        cubic-bezier(.16, 1, .3, 1);
}


.story-image:hover img {

    transform:
        scale(1.08);
}


.image-overlay {

    position: absolute;

    inset: 0;
    

    background:

        linear-gradient(
            130deg,
            rgba(0,190,255,.2),
            transparent 40%,
            rgba(255,45,150,.22)
        );

    mix-blend-mode: screen;

    opacity: .8;

    animation:
        softColorFlow
        12s
        infinite
        alternate
        ease-in-out;
}


.story-index {

    position: absolute;

    bottom: 25px;

    right: 30px;

    font-size: 65px;

    font-weight: 900;

    opacity: .6;

    z-index: 2;
}


.story-content h2 {

    margin-top: 22px;

    font-size:
        clamp(48px, 6vw, 90px);

    line-height: .9;

    letter-spacing: -.06em;
}


.story-content h2 span {

    display: block;

    color: #68dfff;

    text-shadow:
        0 0 30px rgba(0,180,255,.35);
}


.story-content > p {

    margin-top: 35px;

    color:
        rgba(255,255,255,.58);

    font-size: 14px;

    line-height: 2;
}


.story-divider {

    width: 100%;

    height: 1px;

    margin:
        35px 0;

    background:

        linear-gradient(
            90deg,
            #00caff,
            #9a6cff,
            #ff4b9c,
            transparent
        );

    background-size: 300% 100%;

    animation:
        dividerFlow
        12s
        infinite
        ease-in-out;
}


@keyframes dividerFlow {

    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }

}


.story-info {

    display: flex;

    flex-direction: column;

    gap: 14px;
}


.story-info div {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding:
        11px 0;

    border-bottom:
        1px solid rgba(255,255,255,.08);
}


.story-info small {

    color:
        rgba(255,255,255,.35);

    font-size: 9px;
}


.story-info strong {

    color:
        rgba(255,255,255,.8);

    font-size: 10px;
}


/* ==================================================
   WORLD
================================================== */

.world-section {

    padding:
        150px 6vw;
}


.world-heading {

    text-align: center;

    margin-bottom: 75px;
}


.world-heading h2 {

    margin-top: 22px;

    font-size:
        clamp(55px, 9vw, 130px);

    line-height: .85;

    letter-spacing: -.07em;
}


.world-heading h2 span {

    background:

        linear-gradient(
            110deg,
            #00d0ff,
            #956aff,
            #ff579f,
            #00d0ff
        );

    background-size: 300% 300%;

    background-clip: text;

    color: transparent;

    animation:
        titleGradient
        14s
        infinite
        ease-in-out;
}


.world-heading p {

    margin-top: 30px;

    color:
        rgba(255,255,255,.5);

    font-size: 13px;
}


.world-grid {

    max-width: 1500px;

    margin: auto;

    display: grid;

    grid-template-columns:
        1.3fr 1fr 1fr;

    gap: 18px;
}


.world-card {

    height: 510px;

    position: relative;

    overflow: hidden;

    cursor: pointer;

    background: #111;

    transform-style: preserve-3d;

    transition:
        transform .7s
        cubic-bezier(.16, 1, .3, 1);

    will-change: transform;
}


.world-large {
    height: 630px;
}


.world-card::after {

    content: "";

    position: absolute;

    left:
        var(--mouse-x, 50%);

    top:
        var(--mouse-y, 50%);

    width: 250px;
    height: 250px;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0,200,255,.18),
            transparent 65%
        );

    pointer-events: none;

    opacity: 0;

    transition:
        opacity .6s ease;
}


.world-card:hover::after {
    opacity: 1;
}


.world-card img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 1.5s
        cubic-bezier(.16, 1, .3, 1);

    filter:
        saturate(1.2);
}


.world-card:hover img {

    transform:
        scale(1.1);
}


.card-color {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            135deg,
            rgba(70,40,255,.25),
            transparent 45%,
            rgba(255,40,150,.22)
        );

    background-size: 250% 250%;

    animation:
        softColorFlow
        13s
        infinite
        alternate
        ease-in-out;

    mix-blend-mode: screen;
}


.card-gradient {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(3,3,9,.95),
            transparent 65%
        );
}


.card-info {

    position: absolute;

    right: 30px;

    bottom: 30px;

    left: 30px;

    z-index: 3;
}


.card-info small {

    color: #7cddff;

    font-size: 9px;

    letter-spacing: .2em;
}


.card-info h3 {

    margin-top: 8px;

    font-size: 21px;
}


.card-info p {

    margin-top: 10px;

    color:
        rgba(255,255,255,.55);

    font-size: 11px;

    line-height: 1.8;
}


/* ==================================================
   STATEMENT
================================================== */

.statement {

    min-height: 90vh;

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    overflow: hidden;
}


.statement-light {

    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    filter: blur(110px);

    opacity: .2;
}


.light-a {

    background: #703cff;

    top: -250px;
    right: 15%;

    animation:
        statementA
        13s
        infinite
        alternate
        ease-in-out;
}


.light-b {

    background: #00c9ff;

    bottom: -250px;
    left: 15%;

    animation:
        statementB
        15s
        infinite
        alternate
        ease-in-out;
}


.light-c {

    background: #ff3f9b;

    top: 40%;
    left: 40%;

    animation:
        statementC
        17s
        infinite
        alternate
        ease-in-out;
}


@keyframes statementA {

    to {
        transform:
            translate(-150px, 130px)
            scale(1.25);
    }

}


@keyframes statementB {

    to {
        transform:
            translate(130px, -100px)
            scale(1.3);
    }

}


@keyframes statementC {

    to {
        transform:
            translate(-80px, 80px)
            scale(1.2);
    }

}


.statement-content {

    position: relative;

    z-index: 3;

    text-align: center;
}


.statement-content h2 {

    margin-top: 25px;

    font-size:
        clamp(60px, 11vw, 165px);

    line-height: .78;

    letter-spacing: -.08em;
}


.statement-content h2 span {

    display: block;

    background:

        linear-gradient(
            110deg,
            #ffffff,
            #00d2ff,
            #9b6cff,
            #ff579e,
            #ffffff
        );

    background-size: 350% 350%;

    background-clip: text;

    color: transparent;

    animation:
        titleGradient
        14s
        infinite
        ease-in-out;
}


.statement-content p {

    margin-top: 35px;

    color:
        rgba(255,255,255,.55);

    font-size: 14px;

    line-height: 1.9;
}


.statement-line {

    width: 120px;

    height: 1px;

    margin:
        35px auto;

    background:

        linear-gradient(
            90deg,
            transparent,
            #00caff,
            #ff519e,
            transparent
        );

    background-size: 250% 100%;

    animation:
        dividerFlow
        8s
        infinite
        ease-in-out;
}


/* ==================================================
   GALLERY
================================================== */

.gallery-section {

    padding:
        140px 6vw;
}


.gallery-heading {

    margin-bottom: 70px;
}


.gallery-heading h2 {

    margin-top: 20px;

    font-size:
        clamp(60px, 10vw, 145px);

    line-height: .8;

    letter-spacing: -.08em;
}


.gallery-heading h2 span {

    color: #72ddff;

    text-shadow:
        0 0 35px rgba(0,180,255,.35);
}


.gallery-grid {

    display: grid;

    grid-template-columns:
        1.4fr .7fr 1fr;

    grid-template-rows:
        430px 300px;

    gap: 18px;
}


.gallery-item {

    position: relative;

    overflow: hidden;

    background: #111;
}


.gallery-big {

    grid-row:
        span 2;
}


.gallery-wide {

    grid-column:
        span 2;
}


.gallery-item img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 1.5s
        cubic-bezier(.16, 1, .3, 1);

    filter:
        saturate(1.25);
}


.gallery-item:hover img {

    transform:
        scale(1.09);
}


.gallery-shine {

    position: absolute;

    top: -50%;

    left: -70%;

    width: 40%;

    height: 200%;

    transform:
        rotate(20deg);

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

    transition:
        left 1.2s ease;
}


.gallery-item:hover .gallery-shine {

    left: 130%;
}


.gallery-item span {

    position: absolute;

    bottom: 18px;

    right: 20px;

    padding:
        7px 11px;

    background:
        rgba(0,0,0,.4);

    backdrop-filter:
        blur(8px);

    font-size: 8px;

    letter-spacing: .2em;

    color:
        rgba(255,255,255,.8);
}


/* ==================================================
   FINAL
================================================== */

.final-section {

    min-height: 100vh;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;
}


.final-media {

    position: absolute;

    inset: 0;
}


.final-media img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform:
        scale(1.12);

    animation:
        finalZoom
        13s
        infinite
        alternate
        ease-in-out;

    filter:
        saturate(1.3)
        contrast(1.05);
}


@keyframes finalZoom {

    from {
        transform: scale(1.12);
    }

    to {
        transform: scale(1.025);
    }

}


.final-color {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            120deg,
            rgba(76,38,255,.3),
            transparent 35%,
            rgba(0,200,255,.25) 60%,
            rgba(255,45,150,.3)
        );

    background-size: 300% 300%;

    mix-blend-mode: screen;

    animation:
        softColorFlow
        16s
        infinite
        alternate
        ease-in-out;
}


.final-dark {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(3,3,10,.9),
            rgba(3,3,10,.25),
            rgba(3,3,10,.6)
        ),

        linear-gradient(
            0deg,
            #03030a,
            transparent 50%,
            rgba(3,3,10,.5)
        );
}


.final-sweep {

    position: absolute;

    top: -30%;

    left: -50%;

    width: 25%;

    height: 170%;

    transform:
        rotate(18deg);

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

    animation:
        finalSweep
        10s
        infinite
        ease-in-out;
}


@keyframes finalSweep {

    0% {
        left: -55%;
    }

    45%,
    100% {
        left: 135%;
    }

}


.final-content {

    position: relative;

    z-index: 5;

    text-align: center;

    padding: 20px;
}


.final-brand {

    font-size: 10px;

    letter-spacing: .55em;

    color: #86e5ff;

    text-shadow:
        0 0 20px rgba(0,180,255,.7);
}


.final-content h2 {

    direction: ltr;

    margin-top: 30px;

    font-size:
        clamp(70px, 13vw, 190px);

    line-height: .75;

    letter-spacing: -.09em;

    font-weight: 900;
}


.final-content h2 span {

    display: block;

    margin-top: 28px;

    font-size:
        clamp(13px, 2.2vw, 25px);

    letter-spacing: .45em;

    background:

        linear-gradient(
            110deg,
            #ffffff,
            #70dcff,
            #9c70ff,
            #ff559e,
            #ffffff
        );

    background-size: 350% 350%;

    background-clip: text;

    color: transparent;

    animation:
        titleGradient
        13s
        infinite
        ease-in-out;
}


.final-divider {

    width: 180px;

    height: 1px;

    margin:
        40px auto;

    background:

        linear-gradient(
            90deg,
            transparent,
            white,
            transparent
        );
}


.final-content p {

    font-size: 11px;

    letter-spacing: .45em;

    color:
        rgba(255,255,255,.6);
}


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

footer {

    min-height: 180px;

    padding:
        50px 7vw;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    border-top:
        1px solid rgba(255,255,255,.08);

    background:
        #04040a;
}


.footer-brand {

    font-size: 19px;

    font-weight: 900;

    letter-spacing: .2em;

    text-shadow:
        0 0 20px rgba(0,170,255,.6);
}


.footer-title {

    color:
        rgba(255,255,255,.45);

    font-size: 9px;

    letter-spacing: .25em;

    direction: ltr;
}


.footer-copy {

    text-align: left;

    color:
        rgba(255,255,255,.3);

    font-size: 9px;

    line-height: 1.8;
}


/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width: 1000px) {

    .navbar nav {
        display: none;
    }


    .hero-content {
        margin-right: 7vw;
    }


    .story-section {

        grid-template-columns: 1fr;

        gap: 50px;
    }


    .story-image {

        height: 55vh;
    }


    .world-grid {

        grid-template-columns: 1fr;
    }


    .world-card,
    .world-large {

        height: 500px;
    }


    .gallery-grid {

        grid-template-columns: 1fr 1fr;

        grid-template-rows:
            500px
            350px
            350px;
    }


    .gallery-big {

        grid-row: span 1;
    }


    .gallery-wide {

        grid-column: span 2;
    }

}


@media (max-width: 650px) {

    .navbar {

        padding:
            0 6vw;
    }


    .nav-rof {

        display: none;
    }


    .hero-content {

        margin-right: 6vw;
    }


    .rof-title {

        font-size: 115px;
    }


    .rof-full-name {

        letter-spacing: .25em;

        font-size: 12px;
    }


    .hero-description {

        font-size: 12px;

        max-width: 90%;
    }


    .hero-side-label {

        display: none;
    }


    .intro-section {

        padding:
            100px 7vw;
    }


    .story-section {

        padding:
            80px 6vw;
    }


    .story-image {

        height: 45vh;
    }


    .world-section,
    .gallery-section {

        padding:
            100px 6vw;
    }


    .gallery-grid {

        display: flex;

        flex-direction: column;
    }


    .gallery-item,
    .gallery-big,
    .gallery-wide {

        height: 430px;
    }


    .statement {

        min-height: 75vh;
    }


    footer {

        flex-direction: column;

        text-align: center;
    }


    .footer-copy {

        text-align: center;
    }

}


/* ==================================================
   REDUCE MOTION
================================================== */

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

    *,
    *::before,
    *::after {

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;

        scroll-behavior: auto !important;
    }

}




.building-section {
    padding: 80px 20px;
    text-align: center;
}

.building-text {
    display: inline-block;

    font-size: clamp(28px, 4vw, 52px);
    font-weight: 800;

    background: linear-gradient(
        90deg,
        #ffffff,
        #9d8cff,
        #55e6ff,
        #ffffff
    );

    background-size: 300% 100%;

    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    animation: buildingGradient 5s ease-in-out infinite,
               buildingFloat 3.5s ease-in-out infinite;

    text-shadow: 0 0 30px rgba(120, 100, 255, 0.2);
}

@keyframes buildingGradient {
    0%, 100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

@keyframes buildingFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}