/* =========================================================
   ACCESS — YOUR PORTAL TO
   COSMIC DIMENSIONAL GATEWAY
========================================================= */

.portal-wrap{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:430px;
    min-width:430px;
    height:128px;
    margin-bottom:16px;
    perspective:900px;
    isolation:isolate;
}


/* =========================================================
   DIMENSIONAL FIELD
========================================================= */

.portal-wrap::before{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:390px;
    height:92px;
    transform:translate(-50%,-50%);
    border-radius:50%;

    background:
        radial-gradient(
            ellipse,
            rgba(255,255,255,.12) 0%,
            rgba(111,255,242,.17) 13%,
            rgba(69,193,183,.095) 26%,
            rgba(26,79,84,.06) 44%,
            rgba(253,81,28,.035) 58%,
            transparent 75%
        );

    filter:blur(9px);
    animation:portalCoreBreath 3.1s ease-in-out infinite;
}


/* =========================================================
   TRAVELLING ENERGY BEAM
========================================================= */

.portal-wrap::after{
    content:"";
    position:absolute;
    left:10%;
    top:50%;
    width:7px;
    height:96px;

    transform:
        translate(-50%,-50%)
        rotate(18deg);

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(111,255,242,.18),
            #ffffff 48%,
            #45c1b7 55%,
            rgba(253,81,28,.24),
            transparent
        );

    filter:
        blur(3px)
        drop-shadow(
            0 0 12px
            rgba(111,255,242,.55)
        );

    opacity:0;

    animation:
        portalEnergyPass
        5s
        ease-in-out
        infinite;
}


/* =========================================================
   OUTER PORTAL
========================================================= */

.portal-ring-outer{
    width:420px;
    height:112px;

    border:
        1px solid
        rgba(111,255,242,.31);

    transform:
        translate(-50%,-50%)
        rotateX(66deg);

    box-shadow:
        0 0 10px rgba(111,255,242,.20),
        0 0 28px rgba(69,193,183,.10),
        0 0 55px rgba(69,193,183,.04),
        inset 0 0 22px rgba(69,193,183,.09);

    animation:
        cosmicOuter
        6s
        linear
        infinite;
}


.portal-ring-outer::before{
    content:"";
    position:absolute;
    inset:-11px;
    border-radius:50%;

    border:
        1px solid
        rgba(69,193,183,.12);

    box-shadow:
        0 0 22px
        rgba(69,193,183,.07);

    animation:
        portalSatelliteRing
        7.5s
        linear
        infinite
        reverse;
}


.portal-ring-outer::after{
    content:"";
    position:absolute;
    left:50%;
    top:-4px;

    width:7px;
    height:7px;

    border-radius:50%;

    background:#b9fff8;

    box-shadow:
        0 0 5px #ffffff,
        0 0 12px rgba(111,255,242,.9),
        0 0 24px rgba(69,193,183,.55);
}


/* =========================================================
   INNER PORTAL
========================================================= */

.portal-ring-inner{
    width:315px;
    height:78px;

    border:
        1px solid
        rgba(253,81,28,.24);

    transform:
        translate(-50%,-50%)
        rotateX(66deg);

    box-shadow:
        0 0 14px rgba(253,81,28,.10),
        inset 0 0 18px rgba(253,81,28,.06);

    animation:
        cosmicInner
        3.8s
        linear
        infinite
        reverse;
}


.portal-ring-inner::before{
    content:"";
    position:absolute;
    inset:9px;

    border-radius:50%;

    border:
        1px solid
        rgba(111,255,242,.13);

    animation:
        portalSatelliteRing
        4.7s
        linear
        infinite;
}


.portal-ring-inner::after{
    content:"";
    position:absolute;
    right:12%;
    top:8%;

    width:5px;
    height:5px;

    border-radius:50%;

    background:#fd511c;

    box-shadow:
        0 0 5px #fd511c,
        0 0 13px rgba(253,81,28,.75);
}


/* =========================================================
   EVENT HORIZON
========================================================= */

.portal-energy{
    width:300px;
    height:62px;

    border-radius:50%;

    background:
        radial-gradient(
            ellipse,
            rgba(255,255,255,.28),
            rgba(111,255,242,.22) 11%,
            rgba(69,193,183,.13) 26%,
            rgba(8,38,42,.08) 42%,
            rgba(253,81,28,.055) 59%,
            transparent 76%
        );

    filter:blur(7px);

    box-shadow:
        inset 0 0 28px
        rgba(69,193,183,.08);

    animation:
        portalEnergyBreath
        2.5s
        ease-in-out
        infinite;
}


/* =========================================================
   YOUR PORTAL TO
   ACCESS EMBLEM COLOR FLOW
========================================================= */

.portal-text{
    position:relative;
    z-index:8;

    font-family:"Inter",sans-serif;
    font-size:30px;
    font-weight:700;

    letter-spacing:.22em;
    padding-left:.22em;

    white-space:nowrap;

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

    background-image:
        linear-gradient(
            90deg,

            #45c1b7 0%,
            #298e92 14%,
            #45c1b7 27%,
            #fd511c 42%,
            #f6191a 56%,
            #fd511c 70%,
            #298e92 84%,
            #45c1b7 100%
        )!important;

    background-size:
        500% 100%!important;

    background-repeat:
        no-repeat!important;

    background-position:
        0% 50%;

    -webkit-background-clip:
        text!important;

    background-clip:
        text!important;

    filter:
        drop-shadow(
            0 0 7px
            rgba(69,193,183,.42)
        );

    animation:
        portalTextEnter
        1.35s
        .3s
        ease-out
        both,

        portalBrandCycle
        8s
        1.5s
        linear
        infinite!important;
}


/* =========================================================
   COSMIC WHITE SWEEP
========================================================= */

.portal-text::after{
    content:attr(data-text);

    position:absolute;
    inset:0;

    padding-left:.22em;

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

    background-image:
        linear-gradient(
            105deg,

            transparent 0%,
            transparent 43%,

            rgba(255,255,255,.18) 47%,

            rgba(255,255,255,.92) 50%,

            rgba(190,255,249,.65) 53%,

            transparent 58%,
            transparent 100%
        );

    background-size:
        350% 100%;

    background-position:
        180% 0;

    background-repeat:
        no-repeat;

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

    opacity:0;

    pointer-events:none;

    filter:
        drop-shadow(
            0 0 8px
            rgba(111,255,242,.6)
        );

    animation:
        portalLetterSweep
        4.8s
        2s
        ease-in-out
        infinite;
}


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

.portal-wrap:hover
.portal-ring-outer{

    border-color:
        rgba(111,255,242,.68);

    box-shadow:
        0 0 18px rgba(111,255,242,.35),
        0 0 40px rgba(69,193,183,.18),
        0 0 70px rgba(69,193,183,.08);
}


.portal-wrap:hover
.portal-ring-inner{

    border-color:
        rgba(255,112,61,.52);

    box-shadow:
        0 0 19px
        rgba(253,81,28,.18);
}


.portal-wrap:hover
.portal-text{

    filter:
        drop-shadow(
            0 0 9px
            rgba(255,255,255,.50)
        )

        drop-shadow(
            0 0 28px
            rgba(69,193,183,.45)
        );
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes cosmicOuter{

    from{
        transform:
            translate(-50%,-50%)
            rotateX(66deg)
            rotateZ(0deg);
    }

    to{
        transform:
            translate(-50%,-50%)
            rotateX(66deg)
            rotateZ(360deg);
    }
}


@keyframes cosmicInner{

    from{
        transform:
            translate(-50%,-50%)
            rotateX(66deg)
            rotateZ(0deg);
    }

    to{
        transform:
            translate(-50%,-50%)
            rotateX(66deg)
            rotateZ(360deg);
    }
}


@keyframes portalSatelliteRing{

    to{
        transform:
            rotate(360deg);
    }
}


@keyframes portalCoreBreath{

    0%,
    100%{

        opacity:.45;

        transform:
            translate(-50%,-50%)
            scale(.82);
    }

    50%{

        opacity:1;

        transform:
            translate(-50%,-50%)
            scale(1.08);
    }
}


@keyframes portalEnergyBreath{

    0%,
    100%{

        opacity:.42;

        transform:
            translate(-50%,-50%)
            scale(.82);
    }

    50%{

        opacity:.95;

        transform:
            translate(-50%,-50%)
            scale(1.12);
    }
}


@keyframes portalTextEnter{

    0%{

        opacity:0;

        transform:
            scale(.25)
            translateZ(-180px);

        filter:
            blur(14px);
    }

    65%{

        opacity:1;

        transform:
            scale(1.06)
            translateZ(12px);

        filter:
            blur(0);
    }

    100%{

        opacity:1;

        transform:
            scale(1)
            translateZ(0);

        filter:
            blur(0);
    }
}


/* SLOWER BRAND COLOR FLOW */

@keyframes portalBrandCycle{

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

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

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


@keyframes portalLetterSweep{

    0%,
    30%{

        background-position:
            180% 0;

        opacity:0;
    }

    40%{

        opacity:.9;
    }

    60%{

        opacity:.9;
    }

    72%,
    100%{

        background-position:
            -100% 0;

        opacity:0;
    }
}


@keyframes portalEnergyPass{

    0%,
    66%{

        left:9%;
        opacity:0;
    }

    72%{

        opacity:.75;
    }

    88%{

        opacity:.75;
    }

    95%,
    100%{

        left:91%;
        opacity:0;
    }
}


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

@media(max-width:640px){

    .portal-wrap{
        width:320px;
        min-width:320px;
        height:94px;
    }

    .portal-wrap::before{
        width:295px;
        height:68px;
    }

    .portal-ring-outer{
        width:310px;
        height:82px;
    }

    .portal-ring-inner{
        width:230px;
        height:58px;
    }

    .portal-energy{
        width:225px;
        height:46px;
    }

    .portal-text{
        font-size:22px;
        letter-spacing:.16em;
        padding-left:.16em;
    }

    .portal-text::after{
        padding-left:.16em;
    }
}