html {font-size: 20px;}
@media screen and (max-width: 1030px) {html {font-size: 19px;}}
@media screen and (max-width: 980px)  {html {font-size: 18px;}}
@media screen and (max-width: 930px)  {html {font-size: 17px;}}
@media screen and (max-width: 880px)  {html {font-size: 16px;}}
@media screen and (max-width: 830px)  {html {font-size: 15px;}}
@media screen and (max-width: 780px)  {html {font-size: 14px;}}
@media screen and (max-width: 730px)  {html {font-size: 13px;}}
@media screen and (max-width: 680px)  {html {font-size: 12px;}}
@media screen and (max-width: 630px)  {html {font-size: 11px;}}
@media screen and (max-width: 580px)  {html {font-size: 10px;}}
@media screen and (max-width: 530px)  {html {font-size: 9px;}}
@media screen and (max-width: 480px)  {html {font-size: 8px;}}

body {
    font-family: "微軟正黑體", "Microsoft JhengHei", sans-serif;
}

#main-content{
    /*max-width: 1080px;*/
    max-width: 2160px;
    width:100%;
    margin: 0 auto;
}

/* =========================================== HEADER ================================================ */

#main-logo{
    width: 20%;
    max-width: 202px;
}
@media screen and (max-width: 450px) {#main-logo{width: 28%;}}

header {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    gap: 1rem;
}
@media screen and (max-width: 450px) {header{font-size:6.5px;}}
.hamburger-menu {
    position: relative;
    display: inline-block;
    padding-left: 1.5rem;
}
@media screen and (max-width: 450px) {.hamburger-menu {padding-left: .5rem;}}
.hamburger-icon {
    aspect-ratio: 1.1;
    height: 1.1rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: none;
    border: none;
    padding: 0;
}
.hamburger-icon span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: #1A1919;
    border-radius: 2px;
    transition: all 0.3s ease;
}
.nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    border: 2px solid #bcf4f2;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 280px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 10px;
}
.hamburger-menu:hover .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.nav-dropdown li {
    border-bottom: 1px solid #bcf4f2;
}
.nav-dropdown li:last-child {
    border-bottom: none;
}
.nav-dropdown a {
    display: block;
    padding: 12px 20px;
    color: #1A1919;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background-color 0.2s ease;
}
.nav-dropdown a:hover {
    background-color: #bcf4f2;
    color: #1A1919;
}
.right-align-menu {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.right-align-menu a {
    text-decoration: none;
    color: #1A1919;
    padding: 0.5rem;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}
.right-align-menu a:hover {
    background-color: #bcf4f2;
}
.download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1.1;
    height: 1.5rem;
    border: 2px solid #1A1919;
    border-radius: 6px;
    font-size: 16px;
    font-weight: bold;
    background-color: white;
    transition: all 0.2s ease;
}
.download-btn:hover {
    background-color: #1A1919;
    color: white;
}

.bg-block{
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    position: absolute;
}
.page-section{
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.page-section.visible{
    opacity: 1;
}


/* =========================================== PAGE 1 ================================================ */


#page-1{
    aspect-ratio: 2 ;
    padding-top:1.5rem;
    padding-bottom:3rem;
    max-height:540px;
}
/* @media screen and (max-width: 450px) {#page-1{padding-top:7rem; padding-bottom: 7rem;}} */
#page-1-container{
    width:100%;
    aspect-ratio: 2;
    position: relative;
    max-height:540px;
}
#page-1-bg-front-upper,#page-1-bg-front-lower{
    width:100%;
    height: 100%;
    filter: brightness(120%);
    background-size: 300%;
    background-position: center;
    -webkit-mask: linear-gradient(190deg, #0000 35%, #000, #0000 55%) 300% 300%/ 100% 108%;
}
#page-1-bg-circle-upper,#page-1-bg-circle-lower{
    height: 100%;
    width: 100%;
    object-fit: cover;
}
#page-1-bg{
    background-image: url("../img/P1_bg_new.jpg");
    background-position: center;
    background-size: cover;
    width:100%;
    height: 100%;
}
#page-1-bg-back{
    background-image: url("../img/P1_bg_2_new.jpg");
    background-position: center;
    background-size: cover;
    width:100%;
    height: 100%;
}
#page-1-title{
    background-image: url("../img/P1_title.png");
    width: 18.3rem;
    aspect-ratio: 2.7;
    bottom: 19%;
    left: 28rem;
    right: 0;
    margin: auto;
}
html[lang="zh-Hans"] #page-1-title{
    background-image: url("../img/P1_title_sc.png");
}
@media screen and (max-width: 450px) {#page-1-title{width: 17rem; left: 24rem;}}
#page-1-logo{
    background-image: url("../img/main_logo.png");
    width: 40%;
    aspect-ratio: 4.5;
    max-width: 432px;
    left:0;
    top:0;
    bottom: 0;
    right: 0;
    margin:auto;
}
@media screen and (max-width: 450px) {#page-1-logo{width: 60%;}}


/* =========================================== PAGE 1 ANIMATION ================================================ */


#page-1-logo,
#page-1-bg-front-upper,
#page-1-bg-front-lower,
#page-1-bg,
#page-1-bg-back,
#page-1-title {
    opacity: 0;
    visibility: hidden;
}

#page-1-logo {animation: logoSequence 1.5s ease-in-out forwards;}
#page-1-bg {animation: bgZoomIn 2s ease-out 1.8s forwards;}
#page-1-bg-back {animation: bgBackZoomIn 2s ease-in 1.5s forwards;}
#page-1-bg-front-upper {animation: bgFrontFadeIn 5s forwards, shineRevealUpper 9s ease-in-out 5s infinite;}
#page-1-bg-front-lower {animation: bgFrontFadeIn 5s forwards, shineRevealLower 9s ease-in-out 5s infinite;}
#page-1-bg-circle-upper,#page-1-bg-circle-lower {animation: colorChangeCircle 2s ease-in-out infinite;}
#page-1-title {
    animation: titleSlideIn 3.7s ease-out 1s forwards, colorChangeTitle 12s  ease-in-out infinite;
    transform: translateX(100%);
}

#page-1{opacity: 1 !important;}


/* ===========================================  ================================================ */


@keyframes logoSequence {
    0% {
        opacity: 0;
        visibility: hidden;
        transform: scale(0.7);
    }
    66.67% {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
    }
    80% {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
        }
    100% {
        opacity: 0;
        visibility: hidden;
        transform: scale(1);
    }
}
@keyframes bgZoomIn {
    0% {
        opacity: 0;
        visibility: hidden;
        transform: scale(1.2);
    }
    70% {
        opacity:0;
    }
    100% {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
    }
}
@keyframes bgBackZoomIn {
    0% {
        opacity: 0;
        visibility: hidden;
        transform: scale(1.2);
    }
    100% {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
    }
}
@keyframes bgFrontFadeIn {
    0% {
        opacity: 0;
        visibility: hidden;
      }
    88% {
        opacity: 0;
        visibility: hidden;
        }
    100% {
        opacity: 1;
        visibility: visible;
  }
}
@keyframes shineRevealUpper {
    20% {
      -webkit-mask-position: 0 -5rem;
    }
    50%  {
      -webkit-mask-position: 0 22rem;
    }
    80% {
      -webkit-mask-position: 0 -5rem;
    }
}
@keyframes shineRevealLower {
    10% {
      -webkit-mask-position: 0 0rem;
    }
    40%  {
      -webkit-mask-position: 0 26rem;
    }
    70% {
      -webkit-mask-position: 0 0rem;
    }
}
@keyframes colorChangeCircle {
    0% {
        filter: hue-rotate(0deg);
    }
    50% {
        filter: hue-rotate(360deg);
    }
    100% {
        filter: hue-rotate(0deg);
    }
}
@keyframes titleSlideIn {
    0% {
        opacity: 0;
        visibility: hidden;
        transform: translateX(100%);
    }
    80% {
        opacity: 0;
        visibility: hidden;
        transform: translateX(30%);
    }
    100% {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }
}
@keyframes colorChangeTitle {
    0% {
        filter: hue-rotate(0deg);
    }
    20% {
        filter: hue-rotate(-240deg);
    }
    40% {
        filter: hue-rotate(0deg);
    }
}

@keyframes colorChangePage2 {
    0% {
        filter: hue-rotate(0deg);
    }
    25% {
        filter: hue-rotate(-120deg);
    }
    50% {
        filter: hue-rotate(-120deg);
    }
    75% {
        filter: hue-rotate(0deg);
    }
}
@keyframes infiniteRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes partialRotate {
    0% {
        rotate:0deg;
        scale:1;
    }
    50% {
        rotate:20deg;
        scale:1.1;
    }
    100% {
        rotate:0deg;
        scale:1;
    }
}
@keyframes fadeInZoom {
    0% {
        opacity: 0;
        transform: scale(1.5) translateY(-20%);
    }
    15% {
        opacity:0;
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}
@keyframes infiniteZoom {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes slideInFromLeft {
    0% {
        opacity: 0;
        visibility: hidden;
        transform: translate(-100%);
    }
    100% {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }
}
@keyframes slideInFromLeftLate {
    0% {
        opacity: 0;
        visibility: hidden;
        transform: translate(-100%);
    }
    40% {
        opacity: 0;
        visibility: hidden;
        transform: translate(-100%);
    }
    100% {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fadeInChairman {
    0% {
        opacity: 0;
        visibility: hidden;
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
    }
}
@keyframes fadeInLate {
    0% {
        opacity: 0;
    }
    90% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes infiniteRotateReverse {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}
@keyframes fadeInZoomIn {
    0% {
        opacity: 0;
        transform: scale(1.1);
    }
    15% {
        opacity:0;
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes moveUpDown {
    0% {
        transform: translateY(0%);
    }
    50% {
        transform: translateY(6%);
    }
    100% {
        transform: translateY(0%);
    }
}
@keyframes moveLeftRight {
    0% {
        transform: translateX(0rem);
    }
    50% {
        transform: translateX(-1.2rem);
    }
    100% {
        transform: translateX(0rem);
    }
}

/* ===========================================  ================================================ */

/* Page 2: animation hooks only; layout is handled by Tailwind utilities. */
[data-animated-section] {
    opacity: 0;
    transition: opacity .35s ease-in-out;
}

[data-animated-section].visible {
    opacity: 1;
}

[data-p2-title],
[data-p2-box],
[data-p2-icon] {
    opacity: 0;
}

[data-animated-section].visible [data-p2-title] {
    animation: p2TitleReveal .8s ease-out forwards;
}

[data-animated-section].visible [data-p2-box] {
    animation: p2BoxReveal .8s ease-out forwards;
}

[data-animated-section].visible [data-p2-box]:nth-child(2) { animation-delay: .08s; }
[data-animated-section].visible [data-p2-box]:nth-child(3) { animation-delay: .16s; }
[data-animated-section].visible [data-p2-box]:nth-child(4) { animation-delay: .24s; }
[data-animated-section].visible [data-p2-box]:nth-child(5) { animation-delay: .32s; }
[data-animated-section].visible [data-p2-box]:nth-child(6) { animation-delay: .40s; }
[data-animated-section].visible [data-p2-box]:nth-child(7) { animation-delay: .48s; }
[data-animated-section].visible [data-p2-box]:nth-child(8) { animation-delay: .56s; }

[data-animated-section].visible [data-p2-icon] {
    animation: p2IconReveal .8s ease-out .6s forwards;
}

[data-p2-float] {
    animation: p2Float 3.8s ease-in-out infinite;
}

@keyframes p2TitleReveal {
    from { opacity: 0; transform: translateX(-5%); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes p2BoxReveal {
    from { opacity: 0; transform: scale(1.06); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes p2IconReveal {
    from { opacity: 0; transform: scale(1.25); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes p2Float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6%); }
}

/* Page 3: animation hooks only; layout is handled by Tailwind utilities. */
#page-3[data-p3-section] {
    aspect-ratio: auto;
    max-height: none;
    padding-bottom: clamp(64px, 8vw, 110px);
}

[data-p3-title],
[data-p3-circle],
[data-p3-card],
[data-p3-icon] {
    opacity: 0;
}

[data-animated-section].visible [data-p3-title] {
    animation: p3TitleReveal .8s ease-out forwards;
}

[data-animated-section].visible [data-p3-circle] {
    animation: p3CircleReveal 1s ease-out .15s forwards;
}

[data-animated-section].visible [data-p3-card] {
    animation: p3CardReveal .8s ease-out forwards;
}

[data-animated-section].visible [data-p3-card]:nth-child(2) { animation-delay: .12s; }
[data-animated-section].visible [data-p3-card]:nth-child(3) { animation-delay: .24s; }
[data-animated-section].visible [data-p3-card]:nth-child(4) { animation-delay: .36s; }

[data-animated-section].visible [data-p3-icon] {
    animation: p3IconReveal .8s ease-out forwards;
}

[data-animated-section].visible [data-p3-icon="1"] { animation-delay: .6s; }
[data-animated-section].visible [data-p3-icon="2"] { animation-delay: .8s; }
[data-animated-section].visible [data-p3-icon="3"] { animation-delay: 1s; }
[data-animated-section].visible [data-p3-icon="4"] { animation-delay: 1.2s; }

[data-p3-float="1"] { animation: p3Float 3.8s ease-in-out infinite; }
[data-p3-float="2"] { animation: p3Float 5.2s ease-in-out infinite; }
[data-p3-float="3"] { animation: p3Float 3.2s ease-in-out infinite; }
[data-p3-float="4"] { animation: p3Float 4.3s ease-in-out infinite; }

@keyframes p3TitleReveal {
    from { opacity: 0; transform: translateX(-5%); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes p3CircleReveal {
    from { opacity: 0; transform: scale(.82) rotate(-8deg); }
    to { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes p3CardReveal {
    from { opacity: 0; transform: translateY(24px) scale(.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes p3IconReveal {
    from { opacity: 0; transform: scale(1.25); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes p3Float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6%); }
}

/* Page 4: animation hooks only; layout is handled by Tailwind utilities. */
#page-4[data-p4-section] {
    aspect-ratio: auto;
    max-height: none;
    padding-bottom: 0;
}

[data-p4-bg],
[data-p4-person],
[data-p4-icon],
[data-p4-title],
[data-p4-content],
[data-p4-footer] {
    opacity: 0;
}

[data-animated-section].visible [data-p4-bg] {
    animation: p4FadeIn .6s ease-out forwards;
}

[data-animated-section].visible [data-p4-person] {
    animation: p4PersonReveal .8s ease-out .8s forwards;
}

[data-animated-section].visible [data-p4-icon] {
    animation: p4IconReveal .8s ease-out 1.2s forwards;
}

[data-p4-float] {
    animation: p4Float 4.3s ease-in-out infinite;
}

[data-animated-section].visible [data-p4-title] {
    animation: p4FadeIn .6s ease-out 1.4s forwards;
}

[data-animated-section].visible [data-p4-content] {
    animation: p4FadeIn .6s ease-out 1.7s forwards;
}

[data-animated-section].visible [data-p4-footer] {
    animation: p4FadeIn .6s ease-out 2s forwards;
}

@keyframes p4FadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes p4PersonReveal {
    from { opacity: 0; transform: scale(1.1); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes p4IconReveal {
    from { opacity: 0; transform: scale(1.5) translateY(-20%); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes p4Float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6%); }
}

/* Pages 5 and 6: animation hooks only; layout is handled by Tailwind utilities. */
#page-5[data-p5-section],
#page-6[data-p6-section] {
    aspect-ratio: auto;
    max-height: none;
    padding-bottom: 0;
}

[data-p5-bg],
[data-p5-title],
[data-p5-content],
[data-p5-arrow-front],
[data-p5-arrow-back],
[data-p6-bg],
[data-p6-title],
[data-p6-visual],
[data-p6-card],
[data-p6-more] {
    opacity: 0;
}

[data-animated-section].visible [data-p5-bg] {
    animation: p56FadeIn .6s ease-out forwards;
}

[data-animated-section].visible [data-p5-title] {
    animation: p56FadeIn .6s ease-out .3s forwards;
}

[data-animated-section].visible [data-p5-content] {
    animation: p56FadeIn .6s ease-out .6s forwards;
}

[data-animated-section].visible [data-p5-arrow-front] {
    animation: p5ArrowFrontReveal 2s ease-out .8s forwards;
}

[data-animated-section].visible [data-p5-arrow-back] {
    animation: p5ArrowBackReveal 1.5s ease-out 1s forwards;
}

[data-p5-arrow-front-float] { animation: p5ArrowFloat 8s ease-in-out infinite; }
[data-p5-arrow-back-float] { animation: p5ArrowFloat 9.8s ease-in-out infinite; }

[data-animated-section].visible [data-p6-bg] {
    animation: p56FadeIn .6s ease-out forwards;
}

[data-animated-section].visible [data-p6-visual] {
    animation: p56FadeIn .6s ease-out .3s forwards;
}

[data-animated-section].visible [data-p6-title] {
    animation: p56FadeIn .6s ease-out .6s forwards;
}

[data-animated-section].visible [data-p6-card] {
    animation: p6CardReveal .4s ease-out forwards;
}

[data-animated-section].visible [data-p6-card]:nth-child(1) { animation-delay: .9s; }
[data-animated-section].visible [data-p6-card]:nth-child(2) { animation-delay: 1s; }
[data-animated-section].visible [data-p6-card]:nth-child(3) { animation-delay: 1.1s; }
[data-animated-section].visible [data-p6-card]:nth-child(4) { animation-delay: 1.2s; }
[data-animated-section].visible [data-p6-card]:nth-child(5) { animation-delay: 1.3s; }
[data-animated-section].visible [data-p6-card]:nth-child(6) { animation-delay: 1.4s; }
[data-animated-section].visible [data-p6-card]:nth-child(7) { animation-delay: 1.5s; }
[data-animated-section].visible [data-p6-card]:nth-child(8) { animation-delay: 1.6s; }
[data-animated-section].visible [data-p6-card]:nth-child(9) { animation-delay: 1.7s; }

[data-animated-section].visible [data-p6-more] {
    animation: p56FadeIn .6s ease-out 2.1s forwards;
}

@keyframes p56FadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes p5ArrowFrontReveal {
    0%, 40% { opacity: 0; transform: translateX(-100%); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes p5ArrowBackReveal {
    from { opacity: 0; transform: translateX(-100%); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes p5ArrowFloat {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(1rem); }
}

@keyframes p6CardReveal {
    from { opacity: 0; transform: scale(.8); }
    to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-delay: 0s !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }

    [data-animated-section],
    [data-p2-title],
    [data-p2-box],
    [data-p2-icon],
    [data-p3-title],
    [data-p3-circle],
    [data-p3-card],
    [data-p3-icon],
    [data-p4-bg],
    [data-p4-person],
    [data-p4-icon],
    [data-p4-title],
    [data-p4-content],
    [data-p4-footer],
    [data-p5-bg],
    [data-p5-title],
    [data-p5-content],
    [data-p5-arrow-front],
    [data-p5-arrow-back],
    [data-p6-bg],
    [data-p6-title],
    [data-p6-visual],
    [data-p6-card],
    [data-p6-more] {
        opacity: 1;
    }

    [data-animated-section].visible [data-p2-title],
    [data-animated-section].visible [data-p2-box],
    [data-animated-section].visible [data-p2-icon],
    [data-p2-float],
    [data-animated-section].visible [data-p3-title],
    [data-animated-section].visible [data-p3-circle],
    [data-animated-section].visible [data-p3-card],
    [data-animated-section].visible [data-p3-icon],
    [data-p3-float],
    [data-animated-section].visible [data-p4-bg],
    [data-animated-section].visible [data-p4-person],
    [data-animated-section].visible [data-p4-icon],
    [data-p4-float],
    [data-animated-section].visible [data-p4-title],
    [data-animated-section].visible [data-p4-content],
    [data-animated-section].visible [data-p4-footer],
    [data-animated-section].visible [data-p5-bg],
    [data-animated-section].visible [data-p5-title],
    [data-animated-section].visible [data-p5-content],
    [data-animated-section].visible [data-p5-arrow-front],
    [data-animated-section].visible [data-p5-arrow-back],
    [data-p5-arrow-front-float],
    [data-p5-arrow-back-float],
    [data-animated-section].visible [data-p6-bg],
    [data-animated-section].visible [data-p6-title],
    [data-animated-section].visible [data-p6-visual],
    [data-animated-section].visible [data-p6-card],
    [data-animated-section].visible [data-p6-more] {
        animation: none;
    }
}

/* Header menu state only; header layout and appearance use Tailwind utilities. */
[data-header-menu] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
}

[data-header-menu][data-open="true"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

@media (max-width: 639px) {
    [data-header-menu] {
        position: absolute;
        top: 100%;
        right: auto;
        left: calc(-1 * (clamp(108px, 20vw, 202px) + clamp(10px, 2vw, 28px)));
        width: calc(100vw - 24px);
        margin-top: 10px;
    }
}

@media (hover: hover) {
    [data-header-nav]::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        width: 280px;
        height: 12px;
    }

    [data-header-nav]:not([data-hover-dismissed="true"]):hover [data-header-menu] {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }
}

[data-motion-paused="true"] *,
[data-motion-paused="true"] *::before,
[data-motion-paused="true"] *::after {
    animation: none !important;
    transition: none !important;
}

[data-motion-paused="true"] [data-animated-section],
[data-motion-paused="true"] [data-p2-title],
[data-motion-paused="true"] [data-p2-box],
[data-motion-paused="true"] [data-p2-icon],
[data-motion-paused="true"] [data-p3-title],
[data-motion-paused="true"] [data-p3-circle],
[data-motion-paused="true"] [data-p3-card],
[data-motion-paused="true"] [data-p3-icon],
[data-motion-paused="true"] [data-p4-bg],
[data-motion-paused="true"] [data-p4-person],
[data-motion-paused="true"] [data-p4-icon],
[data-motion-paused="true"] [data-p4-title],
[data-motion-paused="true"] [data-p4-content],
[data-motion-paused="true"] [data-p4-footer],
[data-motion-paused="true"] [data-p5-bg],
[data-motion-paused="true"] [data-p5-title],
[data-motion-paused="true"] [data-p5-content],
[data-motion-paused="true"] [data-p5-arrow-front],
[data-motion-paused="true"] [data-p5-arrow-back],
[data-motion-paused="true"] [data-p6-bg],
[data-motion-paused="true"] [data-p6-title],
[data-motion-paused="true"] [data-p6-visual],
[data-motion-paused="true"] [data-p6-card],
[data-motion-paused="true"] [data-p6-more] {
    opacity: 1 !important;
}

[data-motion-paused="true"] #page-1-logo,
[data-motion-paused="true"] #page-1-bg-front-upper,
[data-motion-paused="true"] #page-1-bg-front-lower,
[data-motion-paused="true"] #page-1-bg,
[data-motion-paused="true"] #page-1-bg-back,
[data-motion-paused="true"] #page-1-title {
    opacity: 1 !important;
    visibility: visible !important;
}

[data-motion-paused="true"] #page-1-title {
    transform: none !important;
}