.hero {
    background: radial-gradient(circle at 82% 24%, #17769d 0, rgba(23, 118, 157, .5) 11%, transparent 31%), linear-gradient(125deg, #021d38 0%, #06335c 51%, #075b8f 100%);
    overflow: hidden
}

.hero::before,
.hero::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: -1
}

.hero::before {
    width: min(50vw, 720px);
    height: min(50vw, 720px);
    border: 1px solid rgba(80, 212, 218, .25);
    right: -15vw;
    top: -12vw;
    transform: rotate(45deg)
}

.hero::after {
    inset: 0;
    opacity: .25;
    background-image: linear-gradient(rgba(80, 212, 218, .17) 1px, transparent 1px), linear-gradient(90deg, rgba(80, 212, 218, .17) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(90deg, transparent, black 55%, transparent)
}

.hero-overlay {
    background: linear-gradient(90deg, rgba(2, 24, 49, .12), transparent)
}

/* =========================================================
   VIDALEN — PREMIUM MOTION SYSTEM
   HOME PAGE
   ========================================================= */


/* =========================================================
   01. PAGE ENTER / EXIT
   ========================================================= */

body {
    opacity: 0;
    transition:
        opacity .7s cubic-bezier(.22, 1, .36, 1);
}

body.page-ready {
    opacity: 1;
}

body.page-leaving {
    opacity: 0;
    pointer-events: none;
    transition:
        opacity .45s cubic-bezier(.55, 0, 1, .45);
}


/* =========================================================
   02. HERO INTRO
   ========================================================= */

.hero-content > * {
    opacity: 0;
    transform: translateY(35px);

    transition:
        opacity .8s cubic-bezier(.22, 1, .36, 1),
        transform .9s cubic-bezier(.22, 1, .36, 1);
}


/* sequência */

.hero-slide.is-active .hero-content .eyebrow {
    opacity: 1;
    transform: translateY(0);

    transition-delay: .15s;
}

.hero-slide.is-active .hero-kicker {
    opacity: 1;
    transform: translateY(0);

    transition-delay: .25s;
}

.hero-slide.is-active h1 {
    opacity: 1;
    transform: translateY(0);

    transition-delay: .35s;
}

.hero-slide.is-active .hero-copy {
    opacity: 1;
    transform: translateY(0);

    transition-delay: .48s;
}

.hero-slide.is-active .hero-actions {
    opacity: 1;
    transform: translateY(0);

    transition-delay: .60s;
}


/* =========================================================
   03. HERO TITLE
   ========================================================= */

.hero-slide.is-active h1 em {
    display: inline-block;

    opacity: 0;
    transform: translateY(20px);

    animation:
        heroEmphasisIn .9s cubic-bezier(.22, 1, .36, 1) .55s forwards;
        color: #fce116;
}

@keyframes heroEmphasisIn {

    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

}


/* =========================================================
   04. HERO ORBITS
   ========================================================= */

.hero-orbit {
    opacity: 0;

    animation:
        orbitEntrance 1.6s cubic-bezier(.22, 1, .36, 1) .2s forwards;
}

@keyframes orbitEntrance {

    from {
        opacity: 0;
        transform: scale(.82) rotate(-15deg);
    }

    to {
        opacity: 1;
        transform: scale(1) rotate(0);
    }

}

.orbit-one {
    animation:
        orbitEntrance 1.6s cubic-bezier(.22, 1, .36, 1) .2s forwards,
        orbitFloatOne 18s ease-in-out 1.8s infinite;
}

.orbit-two {
    animation:
        orbitEntrance 1.6s cubic-bezier(.22, 1, .36, 1) .35s forwards,
        orbitFloatTwo 14s ease-in-out 2s infinite;
}

@keyframes orbitFloatOne {

    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -18px;
    }

}

@keyframes orbitFloatTwo {

    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 10px 14px;
    }

}


/* =========================================================
   05. HERO FOOTER
   ========================================================= */

.hero-controls,
.hero-footer {
    opacity: 0;
    transform: translateY(20px);

    transition:
        opacity .8s ease 1s,
        transform .9s cubic-bezier(.22, 1, .36, 1) 1s;
}

body.page-ready .hero-controls,
body.page-ready .hero-footer {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   06. SCROLL REVEAL
   ========================================================= */

.motion-reveal {
    opacity: 0;
    transform: translateY(55px);

    transition:
        opacity .85s cubic-bezier(.22, 1, .36, 1),
        transform 1s cubic-bezier(.22, 1, .36, 1);

    will-change: opacity, transform;
}

.motion-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   07. REVEAL LATERAL
   ========================================================= */

.motion-left {
    opacity: 0;
    transform: translateX(-55px);

    transition:
        opacity .85s cubic-bezier(.22, 1, .36, 1),
        transform 1s cubic-bezier(.22, 1, .36, 1);
}

.motion-right {
    opacity: 0;
    transform: translateX(55px);

    transition:
        opacity .85s cubic-bezier(.22, 1, .36, 1),
        transform 1s cubic-bezier(.22, 1, .36, 1);
}

.motion-left.is-visible,
.motion-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}


/* =========================================================
   08. INTRO
   ========================================================= */

.intro .split,
.intro .metrics {
    opacity: 0;
    transform: translateY(45px);

    transition:
        opacity .8s cubic-bezier(.22, 1, .36, 1),
        transform .9s cubic-bezier(.22, 1, .36, 1);
}

.intro.is-visible .split,
.intro.is-visible .metrics {
    opacity: 1;
    transform: translateY(0);
}

.intro.is-visible .metrics {
    transition-delay: .15s;
}


/* =========================================================
   09. METRICS
   ========================================================= */

.metrics > div {
    opacity: 0;
    transform: translateY(25px);

    transition:
        opacity .65s ease,
        transform .7s cubic-bezier(.22, 1, .36, 1);
}

.intro.is-visible .metrics > div {
    opacity: 1;
    transform: translateY(0);
}

.intro.is-visible .metrics > div:nth-child(1) {
    transition-delay: .15s;
}

.intro.is-visible .metrics > div:nth-child(2) {
    transition-delay: .25s;
}

.intro.is-visible .metrics > div:nth-child(3) {
    transition-delay: .35s;
}

.intro.is-visible .metrics > div:nth-child(4) {
    transition-delay: .45s;
}


/* =========================================================
   10. SOLUTION CARDS
   ========================================================= */

.solution-card {
    opacity: 0;
    transform: translateY(45px);

    transition:
        opacity .7s ease,
        transform .8s cubic-bezier(.22, 1, .36, 1),
        background-color .4s ease,
        border-color .4s ease;
}

.solutions.is-visible .solution-card {
    opacity: 1;
    transform: translateY(0);
}

.solutions.is-visible .solution-card:nth-child(1) {
    transition-delay: .05s;
}

.solutions.is-visible .solution-card:nth-child(2) {
    transition-delay: .12s;
}

.solutions.is-visible .solution-card:nth-child(3) {
    transition-delay: .19s;
}

.solutions.is-visible .solution-card:nth-child(4) {
    transition-delay: .26s;
}

.solutions.is-visible .solution-card:nth-child(5) {
    transition-delay: .33s;
}

.solutions.is-visible .solution-card:nth-child(6) {
    transition-delay: .40s;
}


/* hover */

.solution-card:hover {
    transform: translateY(-8px);
}

.solution-card i {
    transition:
        transform .35s cubic-bezier(.22, 1, .36, 1);
}

.solution-card:hover i {
    transform: translate(5px, -5px);
}


/* =========================================================
   11. PROCESS
   ========================================================= */

.process-top {
    opacity: 0;
    transform: translateY(40px);

    transition:
        opacity .8s ease,
        transform .9s cubic-bezier(.22, 1, .36, 1);
}

.process.is-visible .process-top {
    opacity: 1;
    transform: translateY(0);
}


.process-steps li {
    opacity: 0;
    transform: translateX(-35px);

    transition:
        opacity .65s ease,
        transform .75s cubic-bezier(.22, 1, .36, 1);
}

.process.is-visible .process-steps li {
    opacity: 1;
    transform: translateX(0);
}

.process.is-visible .process-steps li:nth-child(1) {
    transition-delay: .15s;
}

.process.is-visible .process-steps li:nth-child(2) {
    transition-delay: .25s;
}

.process.is-visible .process-steps li:nth-child(3) {
    transition-delay: .35s;
}

.process.is-visible .process-steps li:nth-child(4) {
    transition-delay: .45s;
}


/* =========================================================
   12. PROCUREMENT
   ========================================================= */

.procurement-copy {
    opacity: 0;
    transform: translateX(-55px);

    transition:
        opacity .9s cubic-bezier(.22, 1, .36, 1),
        transform 1s cubic-bezier(.22, 1, .36, 1);
}

.procurement-flow {
    opacity: 0;
    transform: translateX(55px);

    transition:
        opacity .9s cubic-bezier(.22, 1, .36, 1) .15s,
        transform 1s cubic-bezier(.22, 1, .36, 1) .15s;
}

.procurement.is-visible .procurement-copy,
.procurement.is-visible .procurement-flow {
    opacity: 1;
    transform: translateX(0);
}


/* procurement flow */

.procurement-flow span,
.procurement-flow i {
    opacity: 0;
    transform: translateX(-12px);

    transition:
        opacity .5s ease,
        transform .5s ease;
}

.procurement.is-visible .procurement-flow span,
.procurement.is-visible .procurement-flow i {
    opacity: 1;
    transform: translateX(0);
}


/* =========================================================
   13. MARKETS
   ========================================================= */

.market-layout > div:first-child {
    opacity: 0;
    transform: translateX(-45px);

    transition:
        opacity .8s ease,
        transform .9s cubic-bezier(.22, 1, .36, 1);
}

.market-list {
    opacity: 0;
    transform: translateX(45px);

    transition:
        opacity .8s ease .15s,
        transform .9s cubic-bezier(.22, 1, .36, 1) .15s;
}

.markets.is-visible .market-layout > div:first-child,
.markets.is-visible .market-list {
    opacity: 1;
    transform: translateX(0);
}


.market-list > div {
    opacity: 0;
    transform: translateY(20px);

    transition:
        opacity .6s ease,
        transform .7s cubic-bezier(.22, 1, .36, 1);
}

.markets.is-visible .market-list > div {
    opacity: 1;
    transform: translateY(0);
}

.markets.is-visible .market-list > div:nth-child(1) {
    transition-delay: .25s;
}

.markets.is-visible .market-list > div:nth-child(2) {
    transition-delay: .35s;
}

.markets.is-visible .market-list > div:nth-child(3) {
    transition-delay: .45s;
}


/* =========================================================
   14. QUALITY
   ========================================================= */

.quality-grid > div {
    opacity: 0;
    transform: translateX(-45px);

    transition:
        opacity .8s ease,
        transform .9s cubic-bezier(.22, 1, .36, 1);
}

.quality-grid > ul {
    opacity: 0;
    transform: translateX(45px);

    transition:
        opacity .8s ease .15s,
        transform .9s cubic-bezier(.22, 1, .36, 1) .15s;
}

.quality.is-visible .quality-grid > div,
.quality.is-visible .quality-grid > ul {
    opacity: 1;
    transform: translateX(0);
}

.quality li {
    transition:
        transform .3s ease,
        padding-left .3s ease;
}

.quality li:hover {
    transform: translateX(6px);
}


/* =========================================================
   15. INSIGHTS
   ========================================================= */

.insights .section-heading {
    opacity: 0;
    transform: translateY(40px);

    transition:
        opacity .8s ease,
        transform .9s cubic-bezier(.22, 1, .36, 1);
}

.insights.is-visible .section-heading {
    opacity: 1;
    transform: translateY(0);
}


.insight-grid article {
    opacity: 0;
    transform: translateY(45px);

    transition:
        opacity .7s ease,
        transform .8s cubic-bezier(.22, 1, .36, 1),
        transform .35s ease;
}

.insights.is-visible .insight-grid article {
    opacity: 1;
    transform: translateY(0);
}

.insights.is-visible .insight-grid article:nth-child(1) {
    transition-delay: .10s;
}

.insights.is-visible .insight-grid article:nth-child(2) {
    transition-delay: .20s;
}

.insights.is-visible .insight-grid article:nth-child(3) {
    transition-delay: .30s;
}

.insight-grid article:hover {
    transform: translateY(-7px);
}


/* =========================================================
   16. RFQ / PROPOSTA
   ========================================================= */

.rfq-copy {
    opacity: 0;
    transform: translateX(-55px);

    transition:
        opacity .85s ease,
        transform .95s cubic-bezier(.22, 1, .36, 1);
}

.rfq-form {
    opacity: 0;
    transform: translateX(55px);

    transition:
        opacity .85s ease .15s,
        transform .95s cubic-bezier(.22, 1, .36, 1) .15s;
}

.rfq.is-visible .rfq-copy,
.rfq.is-visible .rfq-form {
    opacity: 1;
    transform: translateX(0);
}


/* =========================================================
   17. FORM FIELDS
   ========================================================= */

.rfq-form .form-field,
.rfq-form .check,
.rfq-form > .button {
    opacity: 0;
    transform: translateY(18px);

    transition:
        opacity .5s ease,
        transform .6s cubic-bezier(.22, 1, .36, 1);
}

.rfq.is-visible .rfq-form .form-field,
.rfq.is-visible .rfq-form .check,
.rfq.is-visible .rfq-form > .button {
    opacity: 1;
    transform: translateY(0);
}

.rfq.is-visible .form-field:nth-child(1) {
    transition-delay: .20s;
}

.rfq.is-visible .form-field:nth-child(2) {
    transition-delay: .26s;
}

.rfq.is-visible .form-field:nth-child(3) {
    transition-delay: .32s;
}

.rfq.is-visible .form-field:nth-child(4) {
    transition-delay: .38s;
}

.rfq.is-visible .check {
    transition-delay: .44s;
}

.rfq.is-visible .button {
    transition-delay: .50s;
}


/* =========================================================
   18. BUTTON MICRO INTERACTION
   ========================================================= */

.button {
    transition:
        transform .35s cubic-bezier(.22, 1, .36, 1),
        background-color .35s ease,
        color .35s ease;
}

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

.button span {
    display: inline-block;

    transition:
        transform .35s cubic-bezier(.22, 1, .36, 1);
}

.button:hover span {
    transform: translate(4px, -3px);
}


/* =========================================================
   19. TEXT LINKS
   ========================================================= */

.text-link span {
    display: inline-block;

    transition:
        transform .3s cubic-bezier(.22, 1, .36, 1);
}

.text-link:hover span {
    transform: translateX(6px);
}


/* =========================================================
   20. FOOTER
   ========================================================= */

footer .footer-main,
footer .footer-bottom {
    opacity: 0;
    transform: translateY(25px);

    transition:
        opacity .7s ease,
        transform .8s cubic-bezier(.22, 1, .36, 1);
}

footer.is-visible .footer-main,
footer.is-visible .footer-bottom {
    opacity: 1;
    transform: translateY(0);
}

footer.is-visible .footer-bottom {
    transition-delay: .15s;
}


/* =========================================================
   21. REDUCED 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;
    }

    body {
        opacity: 1 !important;
    }

    .hero-content > *,
    .hero-controls,
    .hero-footer,
    .motion-reveal,
    .motion-left,
    .motion-right,
    .solution-card,
    .process-top,
    .process-steps li,
    .procurement-copy,
    .procurement-flow,
    .market-layout > div,
    .market-list,
    .market-list > div,
    .quality-grid > div,
    .quality-grid > ul,
    .insights .section-heading,
    .insight-grid article,
    .rfq-copy,
    .rfq-form,
    .rfq-form .form-field,
    .rfq-form .check,
    .rfq-form > .button,
    footer .footer-main,
    footer .footer-bottom {
        opacity: 1 !important;
        transform: none !important;
    }

}