@font-face {
    font-family: 'BMWGroupTN Condensed TT Bold';
    src: url('../assets/fonts/BMWGroupTNCondensedTT-Bold.eot');
    src: url('../assets/fonts/BMWGroupTNCondensedTT-Bold.eot?#iefix') format('embedded-opentype'),
        url('../assets/fonts/BMWGroupTNCondensedTT-Bold.woff2') format('woff2'),
        url('../assets/fonts/BMWGroupTNCondensedTT-Bold.woff') format('woff'),
        url('../assets/fonts/BMWGroupTNCondensedTT-Bold.ttf') format('truetype'),
        url('../assets/fonts/BMWGroupTNCondensedTT-Bold.svg#BMWGroupTNCondensedTT-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BMWGroupTN Condensed TT Light';
    src: url('../assets/fonts/BMWGroupTNCondensedTT-Light.eot');
    src: url('../assets/fonts/BMWGroupTNCondensedTT-Light.eot?#iefix') format('embedded-opentype'),
        url('../assets/fonts/BMWGroupTNCondensedTT-Light.woff2') format('woff2'),
        url('../assets/fonts/BMWGroupTNCondensedTT-Light.woff') format('woff'),
        url('../assets/fonts/BMWGroupTNCondensedTT-Light.ttf') format('truetype'),
        url('../assets/fonts/BMWGroupTNCondensedTT-Light.svg#BMWGroupTNCondensedTT-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BMWGroupTN Condensed TT Medium';
    src: url('../assets/fonts/BMWGroupTNCondensedTT-Medium.eot');
    src: url('../assets/fonts/BMWGroupTNCondensedTT-Medium.eot?#iefix') format('embedded-opentype'),
        url('../assets/fonts/BMWGroupTNCondensedTT-Medium.woff2') format('woff2'),
        url('../assets/fonts/BMWGroupTNCondensedTT-Medium.woff') format('woff'),
        url('../assets/fonts/BMWGroupTNCondensedTT-Medium.ttf') format('truetype'),
        url('../assets/fonts/BMWGroupTNCondensedTT-Medium.svg#BMWGroupTNCondensedTT-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BMWGroupTN Condensed TT';
    src: url('../assets/fonts/BMWGroupTNCondensedTT-Regular.eot');
    src: url('../assets/fonts/BMWGroupTNCondensedTT-Regular.eot?#iefix') format('embedded-opentype'),
        url('../assets/fonts/BMWGroupTNCondensedTT-Regular.woff2') format('woff2'),
        url('../assets/fonts/BMWGroupTNCondensedTT-Regular.woff') format('woff'),
        url('../assets/fonts/BMWGroupTNCondensedTT-Regular.ttf') format('truetype'),
        url('../assets/fonts/BMWGroupTNCondensedTT-Regular.svg#BMWGroupTNCondensedTT-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BMWGroupTN Condensed TT Thin';
    src: url('../assets/fonts/BMWGroupTNCondensedTT-Thin.eot');
    src: url('../assets/fonts/BMWGroupTNCondensedTT-Thin.eot?#iefix') format('embedded-opentype'),
        url('../assets/fonts/BMWGroupTNCondensedTT-Thin.woff2') format('woff2'),
        url('../assets/fonts/BMWGroupTNCondensedTT-Thin.woff') format('woff'),
        url('../assets/fonts/BMWGroupTNCondensedTT-Thin.ttf') format('truetype'),
        url('../assets/fonts/BMWGroupTNCondensedTT-Thin.svg#BMWGroupTNCondensedTT-Thin') format('svg');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

.font-BMW {
  font-family: "BMWGroupTN Condensed TT";
}
.font-BMWBold {
  font-family: "BMWGroupTN Condensed TT Bold";
}
.font-BMWMedium {
  font-family: "BMWGroupTN Condensed TT Medium";
}
.font-BMWLight {
  font-family: "BMWGroupTN Condensed TT Light";
}
.font-BMWThin {
  font-family: "BMWGroupTN Condensed TT Thin";
}

html {
  scroll-behavior: smooth;
}

html {
  overflow-x: hidden !important;
}

body {
  font-family: "BMWGroupTN Condensed TT";
}

[type='email']{
    background-color: transparent;
}
.\[\&\:not\(\[data-te-collapse-collapsed\]\)\]\:text-primary:not([data-te-collapse-collapsed]){
    color: #000 !important;
}

[type='text']{
    background-color: transparent;
    height: 50px;
    color: black;
}

input, select, textarea{
    color: black !important;
    font-family: 'BMWGroupTN Condensed TT';
    font-weight: 400;
    border-top: none;
    border-left: none;
    border-right: none;
}

input:focus, select:focus
input:focus-visible, select:focus-visible{
    box-shadow: none !important;
    border-color:black!important;
    outline: 0;
    border-top: none;
    border-left: none;
    border-right: none;
}
textarea:focus-visible, textarea:focus{
    box-shadow: none !important;
    border-color:black!important;
    outline: 0;
}
input::placeholder, textarea::placeholder{
    color: #888 !important;
    font-family: 'BMWGroupTN Condensed TT';
    font-weight: 400;
}

.error-message{display: none;}
.error-message{font-family: 'BMWGroupTN Condensed TT';font-weight: 100;color: #ef4444;}

/* Form */
.form-control {
    display: block;
    width: 100%;
    padding: 0.5625rem 1.2em;
    font-size: 0.875rem;
    line-height: 1.57143;
    color: #74708d;
    background-color: #fff;
    background-image: none;
    background-clip: padding-box;
    border: 1px solid #e4e9f0;
    border-radius: 0.25rem;
    box-shadow: none;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
.form-control::-ms-expand {
    background-color: transparent;
    border: 0;
}
.form-control:focus {
    color: #74708d;
    background-color: #fff;
    border-color: #1976d2;
    outline: none;
    box-shadow: none, 0 0 0 3px rgba(25, 118, 210, 0.2);
}
.form-control::placeholder {
    color: #bbb;
    opacity: 1;
}
.form-control:disabled,
.form-control[readonly] {
    background-color: #ddd;
    opacity: 1;
}

select.form-control:not([size]):not([multiple]) {
    height: calc(2.5rem + 2px);
}

select.form-control:focus::-ms-value {
    color: #74708d;
    background-color: #fff;
}

.form-control-file,
.form-control-range {
    display: block;
}

.col-form-label {
    padding-top: calc(0.5625rem - 1px * 2);
    padding-bottom: calc(0.5625rem - 1px * 2);
    margin-bottom: 0;
}

.col-form-label-lg {
    padding-top: calc(0.3125rem - 1px * 2);
    padding-bottom: calc(0.3125rem - 1px * 2);
    font-size: 1rem;
}

.col-form-label-sm {
    padding-top: calc(0.1875rem - 1px * 2);
    padding-bottom: calc(0.1875rem - 1px * 2);
    font-size: 0.75rem;
}

.col-form-legend {
    padding-top: 0.5625rem;
    padding-bottom: 0.5625rem;
    margin-bottom: 0;
    font-size: 0.875rem;
}

.form-control-plaintext {
    padding-top: 0.5625rem;
    padding-bottom: 0.5625rem;
    margin-bottom: 0;
    line-height: 1.57143;
    border: solid transparent;
    border-width: 1px 0;
}
.form-control-plaintext.form-control-sm,
.input-group-sm > .form-control-plaintext.form-control,
.input-group-sm > .form-control-plaintext.input-group-addon,
.input-group-sm > .input-group-btn > .form-control-plaintext.btn,
.form-control-plaintext.form-control-lg,
.input-group-lg > .form-control-plaintext.form-control,
.input-group-lg > .form-control-plaintext.input-group-addon,
.input-group-lg > .input-group-btn > .form-control-plaintext.btn {
    padding-right: 0;
    padding-left: 0;
}

.form-control-sm,
.input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn {
    padding: 0.1875rem 0.5rem;
    font-size: 0.75rem;
    line-height: 2;
    border-radius: 0.2rem;
}

select.form-control-sm:not([size]):not([multiple]),
.input-group-sm > select.form-control:not([size]):not([multiple]),
.input-group-sm > select.input-group-addon:not([size]):not([multiple]),
.input-group-sm > .input-group-btn > select.btn:not([size]):not([multiple]) {
    height: calc(1.875rem + 2px);
}

.form-control-lg,
.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn {
    padding: 0.3125rem 1.5rem;
    font-size: 1rem;
    line-height: 3;
    border-radius: 0.3rem;
}

select.form-control-lg:not([size]):not([multiple]),
.input-group-lg > select.form-control:not([size]):not([multiple]),
.input-group-lg > select.input-group-addon:not([size]):not([multiple]),
.input-group-lg > .input-group-btn > select.btn:not([size]):not([multiple]) {
    height: calc(2.875rem + 2px);
}

.form-group {
    margin-bottom: 1.5625rem;
}

.form-text {
    display: block;
    margin-top: 0.25rem;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -5px;
    margin-left: -5px;
}
.form-row > .col,
.form-row > [class*="col-"] {
    padding-right: 5px;
    padding-left: 5px;
}

.form-check {
    position: relative;
    display: block;
    margin-bottom: 0.5rem;
}
.form-check.disabled .form-check-label {
    color: #bbb;
}

.form-check-label {
    padding-left: 1.25rem;
    margin-bottom: 0;
}

.form-check-input {
    position: absolute;
    margin-top: 0.25rem;
    margin-left: -1.25rem;
}
.form-check-input:only-child {
    position: static;
}

.form-check-inline {
    display: inline-block;
}
.form-check-inline .form-check-label {
    vertical-align: middle;
}
.form-check-inline + .form-check-inline {
    margin-left: 0.75rem;
}

.invalid-feedback {
    display: none;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #ff3333;
}

.invalid-tooltip {
    position: absolute;
    top: 100%;
    z-index: 5;
    display: none;
    width: 250px;
    padding: 0.5rem;
    margin-top: 0.1rem;
    font-size: 0.875rem;
    line-height: 1;
    color: #fff;
    background-color: rgba(255, 51, 51, 0.8);
    border-radius: 0.2rem;
}

.was-validated .form-control:valid,
.form-control.is-valid,
.was-validated .custom-select:valid,
.custom-select.is-valid {
    border-color: #38d57a;
}
.was-validated .form-control:valid:focus,
.form-control.is-valid:focus,
.was-validated .custom-select:valid:focus,
.custom-select.is-valid:focus {
    box-shadow: 0 0 0 0.2rem rgba(56, 213, 122, 0.25);
}
.was-validated .form-control:valid ~ .invalid-feedback,
.was-validated .form-control:valid ~ .invalid-tooltip,
.form-control.is-valid ~ .invalid-feedback,
.form-control.is-valid ~ .invalid-tooltip,
.was-validated .custom-select:valid ~ .invalid-feedback,
.was-validated .custom-select:valid ~ .invalid-tooltip,
.custom-select.is-valid ~ .invalid-feedback,
.custom-select.is-valid ~ .invalid-tooltip {
    display: block;
}

.was-validated .form-check-input:valid + .form-check-label,
.form-check-input.is-valid + .form-check-label {
    color: #38d57a;
}

.was-validated .custom-control-input:valid ~ .custom-control-indicator,
.custom-control-input.is-valid ~ .custom-control-indicator {
    background-color: rgba(56, 213, 122, 0.25);
}

.was-validated .custom-control-input:valid ~ .custom-control-description,
.custom-control-input.is-valid ~ .custom-control-description {
    color: #38d57a;
}

.was-validated .custom-file-input:valid ~ .custom-file-control,
.custom-file-input.is-valid ~ .custom-file-control {
    border-color: #38d57a;
}
.was-validated .custom-file-input:valid ~ .custom-file-control::before,
.custom-file-input.is-valid ~ .custom-file-control::before {
    border-color: inherit;
}

.was-validated .custom-file-input:valid:focus,
.custom-file-input.is-valid:focus {
    box-shadow: 0 0 0 0.2rem rgba(56, 213, 122, 0.25);
}

.was-validated .form-control:invalid,
.form-control.is-invalid,
.was-validated .custom-select:invalid,
.custom-select.is-invalid {
    border-color: #ff3333;
}
.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus,
.was-validated .custom-select:invalid:focus,
.custom-select.is-invalid:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 51, 51, 0.25);
}
.was-validated .form-control:invalid ~ .invalid-feedback,
.was-validated .form-control:invalid ~ .invalid-tooltip,
.form-control.is-invalid ~ .invalid-feedback,
.form-control.is-invalid ~ .invalid-tooltip,
.was-validated .custom-select:invalid ~ .invalid-feedback,
.was-validated .custom-select:invalid ~ .invalid-tooltip,
.custom-select.is-invalid ~ .invalid-feedback,
.custom-select.is-invalid ~ .invalid-tooltip {
    display: block;
}

.was-validated .form-check-input:invalid + .form-check-label,
.form-check-input.is-invalid + .form-check-label {
    color: #ff3333;
}

.was-validated .custom-control-input:invalid ~ .custom-control-indicator,
.custom-control-input.is-invalid ~ .custom-control-indicator {
    background-color: rgba(255, 51, 51, 0.25);
}

.was-validated .custom-control-input:invalid ~ .custom-control-description,
.custom-control-input.is-invalid ~ .custom-control-description {
    color: #ff3333;
}

.was-validated .custom-file-input:invalid ~ .custom-file-control,
.custom-file-input.is-invalid ~ .custom-file-control {
    border-color: #ff3333;
}
.was-validated .custom-file-input:invalid ~ .custom-file-control::before,
.custom-file-input.is-invalid ~ .custom-file-control::before {
    border-color: inherit;
}

.was-validated .custom-file-input:invalid:focus,
.custom-file-input.is-invalid:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 51, 51, 0.25);
}

.form-inline {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}
.form-inline .form-check {
    width: 100%;
}
@media (min-width: 576px) {
    .form-inline label {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0;
    }
    .form-inline .form-group {
        display: flex;
        flex: 0 0 auto;
        flex-flow: row wrap;
        align-items: center;
        margin-bottom: 0;
    }
    .form-inline .form-control {
        display: inline-block;
        width: auto;
        vertical-align: middle;
    }
    .form-inline .form-control-plaintext {
        display: inline-block;
    }
    .form-inline .input-group {
        width: auto;
    }
    .form-inline .form-control-label {
        margin-bottom: 0;
        vertical-align: middle;
    }
    .form-inline .form-check {
        display: flex;
        align-items: center;
        justify-content: center;
        width: auto;
        margin-top: 0;
        margin-bottom: 0;
    }
    .form-inline .form-check-label {
        padding-left: 0;
    }
    .form-inline .form-check-input {
        position: relative;
        margin-top: 0;
        margin-right: 0.25rem;
        margin-left: 0;
    }
    .form-inline .custom-control {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 0;
    }
    .form-inline .custom-control-indicator {
        position: static;
        display: inline-block;
        margin-right: 0.25rem;
        vertical-align: text-bottom;
    }
    .form-inline .has-feedback .form-control-feedback {
        top: 0;
    }
}

.title-gradient {
  background: linear-gradient(
    90deg,
    #5A99DE 0%,
    #3873F1 21%,
    #4153BB 35%,
    #946A8F 46%,
    #C56F80 55%,
    #E27177 64%,
    #EE7D71 72%,
    #F09473 78%,
    #F1A074 85%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* Firefox */
  background-clip: text;
  color: transparent;

  display: inline-block;
}

.gradient-btn {
  background: linear-gradient(
    90deg,
    #FE677A 0%,
    #F2B898 43%,
    #E1A5AE 69%,
    #4E82F5 100%
  );
  
}

.gradient-btn:hover {
  background-size: 300% 100%;
  background-position: 100% 0;
  moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

/* ==== BrandTitle responsive targets (explored state) ==== */
@media (max-width: 640px){   /* sm */
  :root{
    --brand-top: 24px;
    --brand-left: 24px;
    --brand-width: 180px;
    --brand-ms: 500ms;
  }
}
@media (min-width: 768px){   /* md */
  :root{
    --brand-top: 24px;
    --brand-left: 40px;
    --brand-width: 180px;
    --brand-ms: 500ms;
  }
}
@media (min-width: 1024px){  /* lg */
  :root{
    --brand-top: 24px;
    --brand-left: 40px;
    --brand-width: 180px;
    --brand-ms: 500ms;
  }
}
@media (min-width: 1280px){  /* xl */
  :root{
    --brand-top: 24px;
    --brand-left: 40px;
    --brand-width: 180px;
    --brand-ms: 500ms;
  }
}

/* When explored, we *don’t* juggle Tailwind classes in JS;
   we just flip a root class and let CSS handle responsiveness. */
.is-explored #brandTitle{
  position: absolute; /* your element already seems absolutely placed */
  top: var(--brand-top);
  left: calc(var(--brand-left) + env(safe-area-inset-left, 0px));
  width: var(--brand-width);
}

/* Smooth resize/move (respects reduced motion) */
@media (prefers-reduced-motion: no-preference){
  #brandTitle{
    transition:
      top var(--brand-ms) ease,
      left var(--brand-ms) ease,
      width var(--brand-ms) ease,
      opacity 300ms ease;
  }
}

/* base state: center via translate (variable-driven) */
#brandTitle{
  /* NEW: translate uses vars so we can animate it */
  --brand-tx: -50%;
  --brand-ty: -50%;
  transform: translate(var(--brand-tx), var(--brand-ty));
  will-change: transform, top, left, width; /* optional perf hint */
}

/* explored state: position by vars AND zero out the translate */
.is-explored #brandTitle{
  position: absolute;
  top: var(--brand-top);
  left: calc(var(--brand-left) + env(safe-area-inset-left, 0px));
  width: var(--brand-width);

  /* NEW: cancel the centering translate (this will animate) */
  --brand-tx: 0;
  --brand-ty: 0;
}

/* add transform to the transition so the translate animates */
@media (prefers-reduced-motion: no-preference){
  #brandTitle{
    transition:
      top var(--brand-ms) ease,
      left var(--brand-ms) ease,
      width var(--brand-ms) ease,
      transform var(--brand-ms) ease,
      opacity 300ms ease;
  }
}

.text-mask {
  /* plug anything into --text-bg per use */
  --text-bg: none;
  background: var(--text-bg) top / cover no-repeat;
  -webkit-background-clip: text; /* Safari/iOS */
  background-clip: text;
  /* background-size: 300px auto; */
  background-position: 190px 15px;
  color: transparent;
  -webkit-text-fill-color: transparent; /* Safari/iOS */
}

.text-mask2 {
  /* plug anything into --text-bg per use */
  --text-bg: none;
  background: var(--text-bg) center / cover no-repeat;
  -webkit-background-clip: text; /* Safari/iOS */
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent; /* Safari/iOS */
}

.text-mask-title {
  /* plug anything into --text-bg per use */
  --text-bg: none;
  background: var(--text-bg) top / cover no-repeat;
  -webkit-background-clip: text; /* Safari/iOS */
  background-clip: text;
  /* background-size: 300px auto; */
  background-position: 620px 0px;
  color: transparent;
  -webkit-text-fill-color: transparent; /* Safari/iOS */
}

.text-mask2-title {
  /* plug anything into --text-bg per use */
  --text-bg: none;
  background: var(--text-bg) center / cover no-repeat;
  -webkit-background-clip: text; /* Safari/iOS */
  background-position: -45px 0px;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent; /* Safari/iOS */
}

.text-mask-judges {
  /* plug anything into --text-bg per use */
  --text-bg: none;
  background: var(--text-bg) top / cover no-repeat;
  -webkit-background-clip: text; /* Safari/iOS */
  background-clip: text;
  /* background-size: 300px auto; */
  background-position: 560px 0px;
  color: transparent;
  -webkit-text-fill-color: transparent; /* Safari/iOS */
}

.text-mask-news {
  /* plug anything into --text-bg per use */
  --text-bg: none;
  background: var(--text-bg) top / cover no-repeat;
  -webkit-background-clip: text; /* Safari/iOS */
  background-clip: text;
  /* background-size: 300px auto; */
  background-position: 8px 0px;
  color: transparent;
  -webkit-text-fill-color: transparent; /* Safari/iOS */
}

.text-mask-pca {
  /* plug anything into --text-bg per use */
  --text-bg: none;
  background: var(--text-bg) top / cover no-repeat;
  -webkit-background-clip: text; /* Safari/iOS */
  background-clip: text;
  /* background-size: 300px auto; */
  background-position: 8px 0px;
  color: transparent;
  -webkit-text-fill-color: transparent; /* Safari/iOS */
}

/* Optional named presets you can reuse anywhere */
.text-bg-aurora { --text-bg: url('/assets/images/text-gradient.png'); }
.text-bg-aurora2 { --text-bg: url('/assets/images/gradient.png'); }

.swiper-pagination {
  position: relative !important; /* Override default absolute positioning */
  bottom: -30px; /* Moves it further below the slider */
  text-align: center;
  margin-top: 30px !important;
}

.swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.5);
  opacity: 0.5;
  width: 15px !important; 
  height: 15px !important; 
  margin: 0 5px;
  transition: opacity 0.3s ease;
}

.swiper-pagination-bullet-active {
  background: #003D99 !important;
  opacity: 1 !important;
}

#cards {
  list-style: none;
  padding-left: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(var(--cards), var(--cardHeight));
  gap: var(--cardMargin);
  padding-bottom: calc(var(--cards) * var(--cardTopPadding));
  margin-bottom: var(--cardMargin);
}

#card1 {
  --index: 1;
}
#card2 {
  --index: 2;
}
#card3 {
  --index: 3;
}
#card4 {
  --index: 4;
}

.card {
  position: sticky;
  top: 0;
  padding-top: calc(var(--index) * var(--cardTopPadding));
}

.top-left-invert {
    width: 14rem;
    height: 5.5rem;
    background-color: #E7E8EB;
    border-bottom-right-radius: 2.5rem;
    position: absolute;
    top: 0%;
    bottom: auto;
    left: 0%;
    right: auto;
    z-index: 1;
}

.top-right-invert {
    width: 11rem;
    height: 4rem;
    background-color: #E7E8EB;
    border-top-left-radius: 2.5rem;
    position: absolute;
    top: auto;
    bottom: 0%;
    left: auto;
    right: -1%;
    z-index: 1;
}

.bottom-right-of-cutout-radius {
    width: 2.5rem;
    height: 2.5rem;
    background-color: #E7E8EB;
    position: absolute;
    top: 7rem;
    bottom: 0%;
    left: auto;
    right: 0%;
}

.top-right-radius {
    width: 100%;
    height: 100%;
    background-color: #8fafff;
    border-top-right-radius: 2.5rem;
}

.top-left-of-cutout-radius {
    width: 2.5rem;
    height: 2.5rem;
    background-color: #E7E8EB;
    position: absolute;
    top: 0%;
    bottom: auto;
    left: auto;
    right: 15rem;
}

.top-right-radius {
    width: 100%;
    height: 100%;
    background-color: #8fafff;
    border-top-right-radius: 2.5rem;
}

.wedge{
  width: 54px;
  height: 40px;
  /* transparent inside the quarter-circle, white outside it */
  background: radial-gradient(circle farthest-side at 100% 100%,
              transparent 2.5rem, #E7E8EB 2.5rem);
  z-index: 1;
}

.wedge-mobile{
  width: 40px;
  height: 40px;
  /* transparent inside the quarter-circle, white outside it */
  background: radial-gradient(circle farthest-side at 0 0,
              transparent 2.5rem, #E7E8EB 2.5rem);
  z-index: 1;
}


/* =========================
   Variables & Timing
   ========================= */
   :root {
  /* Slower, smoother pre-outro movement */
  --vt-outro-ms: 1000ms;                    /* was 420ms */
  --vt-outro-ease: cubic-bezier(.22,1,.36,1); /* smooth ease-out (quint-ish) */
}

/* Pre-outro movement uses the slower duration + smoother easing */
.vt-hero {
  transition: transform var(--vt-outro-ms) var(--vt-outro-ease);
  will-change: transform;
}

/* If you also want the inner wrapper to glide with the text */
#newDimension #newDimensionInner {
  transition: transform var(--vt-outro-ms) var(--vt-outro-ease);
  will-change: transform;
}

/* The amount of lift (keep subtle; the longer timing makes it feel smoother) */
.vt-hero[data-state="outro"] {
  transform: translate3d(0, -26px, 0);    /* was -20px, tweak to taste */
}
#newDimension[data-state="outro"] #newDimensionInner {
  transform: translate3d(0, -20px, 0);    /* keep this slightly less than the hero */
}

.vt-hero h1 {
  transition:
    font-size var(--vt-outro-ms) var(--vt-outro-ease),
    line-height var(--vt-outro-ms) var(--vt-outro-ease);
}

/* If you animate a mask on just the first line: */
.vt-hero h1.text-mask {
  transition:
    font-size var(--vt-outro-ms) var(--vt-outro-ease),
    line-height var(--vt-outro-ms) var(--vt-outro-ease),
    background-position var(--vt-outro-ms) var(--vt-outro-ease);
}

@media (prefers-reduced-motion: reduce) {
  :root { --vt-outro-ms: 1ms; }
  .vt-hero, #newDimension #newDimensionInner {
    transition: none !important;
  }
}

/* Scope the VT to just your main content (smoother than fading the whole root) */
.vt-scope { view-transition-name: page; contain: paint; }

/* Cross-fade & gentle lift */
@keyframes vt-page-out { to { opacity: 0; transform: translateY(-10px); filter: blur(2px); } }
@keyframes vt-page-in  { from { opacity: 0; transform: translateY(8px); } }

::view-transition-old(page) { animation: vt-page-out var(--vt-dur, 900ms) cubic-bezier(.2,.7,0,1) both; }
::view-transition-new(page) { animation: vt-page-in  var(--vt-dur, 900ms) cubic-bezier(.2,.7,0,1) both; }

/* Subtle hero lift on outro (tune to taste; your CSS may already set this) */
.vt-hero[data-state="outro"] { transform: translate3d(0, -20px, 0); }

/* Optional overlay effect toggle (if you want a vignette during exit) */
#pageOverlay { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--vt-outro-ms, 420ms) cubic-bezier(.2,.7,0,1); }
html.is-exiting #pageOverlay { opacity: 1; }

/* =========================
   Background Zoom Layer
   ========================= */
.bg-zoom-layer {
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(1);
  transition: transform 1.6s ease-out;
  will-change: transform;
  z-index: 0;
  pointer-events: none;
}
.bg-zoom-layer.zoomed { transform: scale(1.12); }

/* =========================
   Utilities / Animations
   ========================= */
@keyframes slide-down {
  from { transform: translateY(0); }
  to   { transform: translateY(100px); }
}
.animate-slide-down { animation: slide-down 0.7s ease forwards; }

@keyframes fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
.animate-fade-out { animation: fade-out 0.5s ease forwards; }

/* Single, deduped slide+fade out */
@keyframes slide-fade-out {
  from { transform: translateY(0); opacity: 1; }
  to   { transform: translateY(100px); opacity: 0; }
}
.animate-slide-fade-out { animation: slide-fade-out .7s ease forwards; }

@keyframes floatY {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -16px, 0); }
}
@keyframes floatY2 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, 14px, 0); }
}
.animate-float   { animation: floatY 8s ease-in-out infinite; }
.animate-float-2 { animation: floatY2 7s ease-in-out infinite; animation-delay: .8s; }

/* Diagonal ring translations */
@keyframes diagToTRRotate {
  from { transform: translate3d(0,0,0) rotate(0deg); }
  to   { transform: translate3d(120vw,-200vh,0) rotate(90deg); }
}
.slide-to-tr-rot { animation: diagToTRRotate 3s cubic-bezier(.4,0,.2,1) forwards; }

@keyframes diagToBL {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-120vw,200vh,0); }
}
.slide-to-bl { animation: diagToBL 3s cubic-bezier(.4,0,.2,1) forwards; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .animate-float, .animate-float-2,
  .slide-to-tr-rot, .slide-to-bl,
  .animate-slide-fade-out { animation: none; }
  .bg-zoom-layer { transition: none; transform: none; }
}

#newDimension { transition: opacity 2s ease-out; }
#newDimensionInner { transition: transform 4s ease-out 120ms; }

/* =========================
   New Dimension – Outro State
   ========================= */
/* Smoothly move + shrink hero before VT snapshot */
.vt-hero {
  transition: transform var(--vt-outro-ms) ease;
  will-change: transform;
}
.vt-hero h1 {
  transition: font-size var(--vt-outro-ms) ease, line-height var(--vt-outro-ms) ease;
  will-change: font-size, line-height;
}

/* JS sets --vt-outro-dy so the hero ends ~var(--vt-outro-top) from the top */
.vt-hero[data-state="outro"] {
  transform: translate3d(0, calc(-1 * var(--vt-outro-dy, 140px)), 0);
}

/* Only .text-mask headings animate their mask position */
.vt-hero h1.text-mask {
  /* your existing bg/clip setup assumed */
  background-position: 190px 15px; /* start */
  transition:
    font-size var(--vt-outro-ms) ease,
    line-height var(--vt-outro-ms) ease,
    background-position var(--vt-outro-ms) ease; /* <- animate mask pos only here */
  will-change: font-size, line-height, background-position;
}

/* OUTRO: change only .text-mask */
.vt-hero[data-state="outro"] h1.text-mask {
  font-size: 85px !important;
  line-height: 1.1;
  background-position: 130px 15px;
}

/* If .text-mask2 should also resize text but NOT move the mask: */
.vt-hero[data-state="outro"] h1.text-mask2 {
  font-size: 85px !important;
  line-height: 1.1;
  /* no background-position here */
}

/* Optional coordinated lift for wrapper block */
#newDimension #newDimensionInner {
  transition: transform var(--vt-outro-ms) ease;
  will-change: transform;
}
#newDimension[data-state="outro"] #newDimensionInner {
  transform: translate3d(0, -80px, 0);
}


.bubble-enter { animation: bubble-in 2.8s cubic-bezier(0.22,1,0.36,1) both; }
  @keyframes bubble-in {
    from { transform: translate(100vw,-100vh); opacity: 0; }
    to   { transform: translate(0,0);          opacity: 1; }
  }
  .float { animation: float 6s ease-in-out .8s infinite alternate; }
  @keyframes float {
    from { transform: translateY(0); }
    to   { transform: translateY(-16px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .bubble-enter, .float { animation: none !important; }
  }

  /* CSS */
.blur-bubble {
  position: absolute;
  right: -13%;
  top: 7%;
  width: 400px;
  z-index: 50;
  will-change: transform;
  /* one-time entrance from slightly below */
  animation: rise-in 2800ms cubic-bezier(0.22,1,0.36,1) both;
}

.blur-bubble > img {
  display: block;
  width: 100%;
  /* gentle float starts after the entrance finishes */
  animation: float-2 6s ease-in-out 0.7s infinite alternate;
}

/* Keyframes */
@keyframes rise-in {
  from { transform: translateY(200px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes float-2 {
  from { transform: translateY(0); }
  to   { transform: translateY(-6px); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .blur-bubble, .blur-bubble > img { animation: none !important; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Apply on reveal; each <p> gets a staggered delay */
.bmw-revealed p {
  opacity: 0;
  animation: fadeInUp 600ms ease-out forwards;
  will-change: opacity, transform;
}
.bmw-revealed p:nth-child(1) { animation-delay: 50ms; }
.bmw-revealed p:nth-child(2) { animation-delay: 200ms; }

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .bmw-revealed p { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* Active state = same as your hover */
  .year-btn[aria-pressed="true"] p {
    color: #FF9D5B;
  }

/* Base look */
ol.num, ol.alpha {
  list-style: none;
  /* padding-left: 1.5rem; */
  margin: 0.35rem 0;
}

/* Level 1 & 2 use numbers (1, 1.1, ...) */
ol.num { counter-reset: sec; }                /* start a numbering chain */
ol.num > li { counter-increment: sec; }
ol.num > li::before {
  content: counter(sec) ". ";
  font-weight: 600;
}

/* Nesting numeric lists creates 1.1, 1.2, ... */
ol.num ol.num { counter-reset: sec; }
ol.num ol.num > li::before {
  content: counters(sec, ".") " ";
}

/* Level 3 uses letters, prefixed by ancestor numbers (1.1 a, 1.1 b, ...) */
ol.alpha { counter-reset: alpha; }
ol.alpha > li { counter-increment: alpha;  padding-left: 1.5rem; padding-top: 20px; padding-bottom: 0;}
ol.alpha > li::before {
  content: counters(sec, ".") " " counter(alpha, lower-alpha) " ";
  font-weight: 600;
}

li{
  padding-bottom: 20px;
}


/*----------------
   Navigation
------------------*/

nav {
  z-index: 99;
}

.desc-text p{
  text-align: justify;
  padding-bottom: 20px;
}

.desc-text p:last-child {
  padding-bottom: 0;
}

.showcase-desc p{
  text-align: justify;
  padding-bottom: 20px;
}

.showcase-desc p:last-child {
  padding-bottom: 0;
}

@media (max-width: 640px) {
  .vt-hero[data-state="outro"] h1.text-mask {
    font-size: 48px !important;
    line-height: 1.1;
    background-position: -20px 0px;
  }
  .vt-hero[data-state="outro"] h1.text-mask2 {
    font-size: 48px !important;
    line-height: 1.1;
    /* no background-position here */
  }
  .vt-hero h1.text-mask {
  /* your existing bg/clip setup assumed */
  background-position: 80px 0px; /* start */
  transition:
    font-size var(--vt-outro-ms) ease,
    line-height var(--vt-outro-ms) ease,
    background-position var(--vt-outro-ms) ease; /* <- animate mask pos only here */
  will-change: font-size, line-height, background-position;
  }
  .text-mask-title {
  /* your existing bg/clip setup assumed */
  background-position: 137px 0px; /* start */
  }
  .text-mask-judges {
  background-position: 120px 0px;
  }
  .text-mask-news {
    background-position: 2px 25px;
  }
  .text-mask-pca {
    background-position: 2px 10px;
  }
}

@media (min-width: 768px){
  .text-mask-title {
  /* your existing bg/clip setup assumed */
  background-position: 310px 0px; /* start */
  }
  .text-mask-judges {
  background-position: 280px 0px;
  }
  .text-mask-news {
    background-position: 0px 0px;
  }
  .desc-text p{
    font-size: 22px;
  }
  .showcase-desc p{
    font-size: 22px;
  }
  .text-mask-pca {
    background-position: 0px 0px;
  }
}

@media (min-width: 1024px){
  .text-mask-title {
  /* your existing bg/clip setup assumed */
  background-position: 410px 0px; /* start */
  }
  .text-mask-judges {
  background-position: 340px 0px;
  }
  .desc-text p{
    font-size: 22px;
  }
  .showcase-desc p{
    font-size: 22px;
  }
}

@media (min-width: 1280px){
  .text-mask-title {
  /* your existing bg/clip setup assumed */
  background-position: 510px 0px; /* start */
  }
  .text-mask-judges {
  background-position: 440px 0px;
  }
}

@media (min-width: 1440px){
  .text-mask-title {
  /* your existing bg/clip setup assumed */
  background-position: 580px 0px; /* start */
  }
  .text-mask-judges {
  background-position: 520px 0px;
  }
}

@media (min-width: 1536px){
  .text-mask-title {
  /* your existing bg/clip setup assumed */
  background-position: 625px 0px; /* start */
  }
  .text-mask-judges {
  background-position: 560px 0px;
  }
}

@media (min-width: 1800px){
  .text-mask-title {
  /* your existing bg/clip setup assumed */
  background-position: 780px 0px; /* start */
  }
  .text-mask-judges {
  background-position: 720px 0px;
  }
}

/* Loader  */

@-webkit-keyframes loader {
  0% {
    width: 0;
  }
  20% {
    width: 10%;
  }
  25% {
    width: 24%;
  }
  43% {
    width: 41%;
  }
  56% {
    width: 50%;
  }
  66% {
    width: 52%;
  }
  71% {
    width: 60%;
  }
  75% {
    width: 76%;
  }
  94% {
    width: 86%;
  }
  100% {
    width: 100%;
  }
}

@keyframes loader {
  0% {
    width: 0;
  }
  20% {
    width: 10%;
  }
  25% {
    width: 24%;
  }
  43% {
    width: 41%;
  }
  56% {
    width: 50%;
  }
  66% {
    width: 52%;
  }
  71% {
    width: 60%;
  }
  75% {
    width: 76%;
  }
  94% {
    width: 86%;
  }
  100% {
    width: 100%;
  }
}

.progress-bar {
  width: 95%;
  max-width: 95%;
  left: 50%;
  width: 100%;
  max-width: 100%;
  border-radius: 0;
  margin-top: 30px;
}
.progress {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}
.bar {
  margin-top: 25px !important;
  margin-bottom: 0 !important;
}
.progress-bar {
  border-radius: 0;
  overflow: hidden;
  width: 100%;
  padding: 0;
  display: none;
}
.progress-bar span {
  display: block;
}
.bar {
  background: 0 0;
}
.progress {
  -webkit-animation: loader 8s ease infinite;
  animation: loader 8s ease infinite;
  background: linear-gradient(
    90deg,
    #5A99DE 0%,
    #3873F1 21%,
    #4153BB 35%,
    #946A8F 46%,
    #C56F80 55%,
    #E27177 64%,
    #EE7D71 72%,
    #F09473 78%,
    #F1A074 85%
  );
  color: #fff;
  padding: 5px;
  width: 0;
  border-radius: 28px;
  margin-top: 25px;
  margin-bottom: 25px;
}
.progress-bar {
  position: relative;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  background-color: transparent;
}

/* Use per-line shared elements, not the wrapper */
.vt-hero { view-transition-name: none; }

/* Map each line to its own shared element */
.vt-hero-line1 { view-transition-name: hero-line-1; }
.vt-hero-line2 { view-transition-name: hero-line-2; }

/* Minimal pre-lift + tiny settle */
:root {
  --vt-lift: 6px;                    /* tiny upward nudge (reduce if you want even less) */
  --vt-scale: 0.99;                  /* barely shrink; set 1 to disable */
  --vt-outro-ms: 1000ms;
  --vt-outro-ease: cubic-bezier(.22,1,.36,1);
}

/* Pivot from the top edge so the settle looks natural */
.vt-title { transform-origin: 50% 0%; }

/* Apply tiny move+scale only during outro (before snapshot) */
.vt-hero[data-state="outro"] .vt-title {
  transform: translate3d(0, calc(-1 * var(--vt-lift)), 0) scale(var(--vt-scale));
  transition: transform var(--vt-outro-ms) var(--vt-outro-ease);
  will-change: transform;
}

/* Optional: if you also nudge the wrapper, keep it even smaller or zero */
#newDimension[data-state="outro"] #newDimensionInner {
  transform: translate3d(0, -2px, 0);
  transition: transform var(--vt-outro-ms) var(--vt-outro-ease);
}

/* Remove extra translate from page-level VT so motions don't stack */
@keyframes vt-page-out { to { opacity: 0; transform: none; filter: blur(2px); } }
@keyframes vt-page-in  { from { opacity: 0; transform: none; } }
::view-transition-old(page) { animation: vt-page-out var(--vt-dur, 900ms) cubic-bezier(.2,.7,0,1) both; }
::view-transition-new(page) { animation: vt-page-in  var(--vt-dur, 900ms) cubic-bezier(.2,.7,0,1) both; }

/* Hero lines: fade/size morph only — no added vertical travel */
@keyframes hero-line-out { from { opacity: 1; filter: none; } to { opacity: 0; filter: blur(4px); } }
::view-transition-old(hero-line-1) { animation: hero-line-out var(--vt-dur, 900ms) cubic-bezier(.2,.7,0,1) both; }
::view-transition-old(hero-line-2) { animation: hero-line-out var(--vt-dur, 900ms) cubic-bezier(.2,.7,0,1) both; }

/* If your gradient text uses background-clip:text, make sure both pages agree on the class so the cross-fade is clean */
.vt-title {
  /* example: ensure consistent clip; adjust to your project’s classes */
  /* -webkit-text-fill-color: transparent; */
  /* background-clip: text; -webkit-background-clip: text; */
}

@media (prefers-reduced-motion: reduce) {
  :root { --vt-outro-ms: 1ms; --vt-lift: 0px; --vt-scale: 1; }
  ::view-transition-old(page), ::view-transition-new(page),
  ::view-transition-old(hero-line-1), ::view-transition-old(hero-line-2) { animation: none !important; }
  .vt-hero[data-state="outro"] .vt-title,
  #newDimension[data-state="outro"] #newDimensionInner { transition: none !important; transform: none !important; }
}