@property --split {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 50%;
}

:root {
  --ink: #fffaf1;
  --gold: #dcb778;
  --gold-bright: #ffe7b2;
  --deep: #030608;
  --ease-cinema: cubic-bezier(.72, 0, .18, 1);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background: var(--deep);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
}

a { color: inherit; text-decoration: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.portal-header {
  position: fixed;
  z-index: 30;
  inset: 0 0 auto;
  height: 142px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(24px, 3.5vw, 70px);
  background: linear-gradient(180deg, rgba(2,5,7,.88), rgba(2,5,7,.18) 72%, transparent);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-16px);
  transition: opacity .8s .55s ease, transform .9s .5s var(--ease-cinema);
}

body.is-ready .portal-header { opacity: 1; transform: none; }

.brand {
  pointer-events: auto;
  display: block;
  width: 470px;
  height: 130px;
  overflow: hidden;
}

.brand img {
  display: block;
  width: 500px;
  transform: translate(-3px, -72px);
  filter: drop-shadow(0 10px 25px rgba(0,177,236,.26));
}

.edition {
  margin: 0;
  color: rgba(255,255,255,.78);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .25em;
  text-transform: uppercase;
}

.edition span { margin: 0 13px; color: var(--gold-bright); }

.portal-tools { display:flex; align-items:center; gap:24px; pointer-events:auto; }
.portal-languages { display:flex; align-items:center; gap:6px; padding:5px; border:1px solid rgba(255,231,178,.22); border-radius:999px; background:rgba(3,8,11,.64); backdrop-filter:blur(14px); }
.portal-languages button { display:grid; grid-template-columns:22px auto; place-items:center; gap:6px; min-width:52px; height:34px; padding:0 9px; border:1px solid transparent; border-radius:999px; background:transparent; color:rgba(255,255,255,.72); font:800 9px/1 Arial,Helvetica,sans-serif; letter-spacing:.1em; cursor:pointer; }
.portal-languages button:hover,.portal-languages button.active { border-color:rgba(255,231,178,.62); background:rgba(220,183,120,.16); color:var(--gold-bright); }
.portal-languages img { display:block; width:22px; height:15px; border-radius:2px; object-fit:cover; }

.yacht-stage {
  --split: 50%;
  position: relative;
  isolation: isolate;
  width: 100vw;
  height: 100svh;
  min-height: 650px;
  overflow: hidden;
  background: #061019;
  transition: --split 1.05s var(--ease-cinema);
}

.yacht-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  outline: none;
  opacity: 0;
  transition: opacity .8s ease;
}

body.is-ready .yacht-card { opacity: 1; }

.yacht-card--aurelia {
  z-index: 2;
  clip-path: polygon(0 0, calc(var(--split) + 8%) 0, calc(var(--split) - 8%) 100%, 0 100%);
}

.yacht-card--imperia {
  z-index: 1;
  clip-path: polygon(calc(var(--split) + 8%) 0, 100% 0, 100% 100%, calc(var(--split) - 8%) 100%);
}

.yacht-card img {
  position: absolute;
  z-index: -3;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  filter: saturate(.86) brightness(.75) contrast(1.04);
  transition: transform 1.5s var(--ease-cinema), filter .9s ease;
}

.yacht-card--aurelia img { object-position: center 56%; }
.yacht-card--imperia img { object-position: center 57%; }
body.is-ready .yacht-card img { transform: scale(1.015); }

.shade {
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(1,4,6,.32), transparent 36%, rgba(1,4,6,.76)),
    linear-gradient(90deg, rgba(1,4,6,.55), transparent 46%, rgba(1,4,6,.13));
  transition: opacity .8s ease;
}

.yacht-card--imperia .shade {
  background:
    linear-gradient(180deg, rgba(1,4,6,.29), transparent 34%, rgba(1,4,6,.77)),
    linear-gradient(270deg, rgba(1,4,6,.57), transparent 47%, rgba(1,4,6,.13));
}

.yacht-card::before {
  content: '';
  position: absolute;
  z-index: 3;
  inset: 22px;
  border: 1px solid rgba(255,231,178,0);
  transition: inset .7s ease, border-color .7s ease;
  pointer-events: none;
}

.card-number {
  position: absolute;
  z-index: -1;
  top: 50%;
  color: rgba(255,255,255,.075);
  font: 400 clamp(210px, 27vw, 500px)/.72 Georgia, 'Times New Roman', serif;
  letter-spacing: -.1em;
  transform: translateY(-50%);
  transition: color .8s ease, transform 1s var(--ease-cinema);
}

.yacht-card--aurelia .card-number { left: 3vw; }
.yacht-card--imperia .card-number { right: 3vw; }

.card-copy {
  position: absolute;
  z-index: 5;
  bottom: clamp(54px, 8vh, 95px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: min(760px, 48vw);
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s .52s ease, transform 1s .48s var(--ease-cinema);
}

.yacht-card--aurelia .card-copy { left: clamp(38px, 5.2vw, 100px); }
.yacht-card--imperia .card-copy { right: clamp(38px, 5.2vw, 100px); align-items: flex-end; text-align: right; }
body.is-ready .card-copy { opacity: 1; transform: none; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 15px;
  color: var(--gold-bright);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .27em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: '';
  width: 42px;
  height: 1px;
  background: currentColor;
}

.yacht-card--imperia .eyebrow { flex-direction: row-reverse; }

.card-tier {
  --title-base: #fffaf0;
  --title-glint: #dfbd7d;
  display: block;
  width: max-content;
  margin-top: 20px;
  padding-right: .1em;
  color: var(--title-base);
  font: 400 clamp(32px, 3.6vw, 69px)/.92 Georgia, 'Times New Roman', serif;
  letter-spacing: -.035em;
  white-space: nowrap;
  text-shadow: 0 10px 34px rgba(0,0,0,.58);
}

.yacht-card--imperia .card-tier {
  --title-base: #d9ad61;
  --title-glint: #fff0bc;
}

.card-copy strong {
  --title-base: #fffaf0;
  --title-glint: #dfbd7d;
  display: block;
  width: max-content;
  max-width: none;
  padding-right: .12em;
  margin-top: 9px;
  font: 400 clamp(58px, 7.2vw, 138px)/.82 Georgia, 'Times New Roman', serif;
  letter-spacing: -.07em;
  white-space: nowrap;
  color: var(--title-base);
}

.yacht-card--imperia .card-copy strong {
  --title-base: #d9ad61;
  --title-glint: #fff0bc;
}

.title-letter {
  display: inline-block;
  color: var(--title-base);
  animation: yachtLetterGlint 5.4s ease-in-out infinite;
  animation-delay: calc(var(--letter-index) * .085s - 4.5s);
}

@keyframes yachtLetterGlint {
  0%, 12%, 38%, 100% { color: var(--title-base); }
  23% { color: var(--title-glint); }
}

.enter {
  display: inline-flex;
  align-items: center;
  gap: 40px;
  margin-top: 24px;
  padding: 12px 0 10px;
  border-bottom: 1px solid rgba(255,231,178,.78);
  color: #fff9ef;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.enter i {
  position: relative;
  display: block;
  width: 22px;
  height: 12px;
  color: var(--gold-bright);
  transition: transform .45s ease;
}

.enter i::before { content:''; position:absolute; left:0; top:5px; width:20px; height:1px; background:currentColor; }
.enter i::after { content:''; position:absolute; right:0; top:2px; width:6px; height:6px; border-top:1px solid currentColor; border-right:1px solid currentColor; transform:rotate(45deg); }

.axis {
  position: absolute;
  z-index: 14;
  inset: 0;
  pointer-events: none;
  transition: opacity .45s ease;
}

.axis-line {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 2%, rgba(255,231,178,.9) 16%, rgba(255,231,178,.35) 50%, rgba(255,231,178,.9) 84%, transparent 98%);
  clip-path: polygon(
    calc(var(--split) + 8% - 1px) 0,
    calc(var(--split) + 8% + 1px) 0,
    calc(var(--split) - 8% + 1px) 100%,
    calc(var(--split) - 8% - 1px) 100%
  );
  filter: drop-shadow(0 0 9px rgba(222,183,120,.72));
  opacity: 0;
  transition: opacity .8s .2s ease;
}

body.is-ready .axis-line { opacity: 1; }

.axis-title {
  position: absolute;
  left: var(--split);
  top: 50%;
  padding: 12px 22px;
  border: 1px solid rgba(255,231,178,.66);
  background: rgba(3,7,9,.94);
  color: var(--gold-bright);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .24em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.88);
  transition: opacity .7s .85s ease, transform .8s .8s var(--ease-cinema);
}

body.is-ready .axis-title { opacity: 1; transform: translate(-50%, -50%) scale(1); }

@media (hover: hover) and (pointer: fine) {
  .yacht-stage:has(.yacht-card--aurelia:hover) { --split: 72%; }
  .yacht-stage:has(.yacht-card--imperia:hover) { --split: 28%; }
  .yacht-card:hover img { transform: scale(1.055); filter: saturate(1.08) brightness(.92) contrast(1.02); }
  .yacht-card:hover .shade { opacity: .62; }
  .yacht-card:hover::before { inset: 31px; border-color: rgba(255,231,178,.5); }
  .yacht-card:hover .card-number { color: rgba(255,231,178,.14); }
  .yacht-card--aurelia:hover .card-number { transform: translateY(-50%) translateX(15px); }
  .yacht-card--imperia:hover .card-number { transform: translateY(-50%) translateX(-15px); }
  .yacht-card:hover .enter i { transform: translateX(10px); }
}

.yacht-card:focus-visible::before { inset: 31px; border-color: var(--gold-bright); }
.yacht-card:focus-visible .enter { outline: 2px solid var(--gold-bright); outline-offset: 8px; }

.transition-portal {
  position: fixed;
  z-index: 100;
  inset: 0;
  overflow: hidden;
  background: var(--deep);
  pointer-events: none;
  transition: clip-path .9s var(--ease-cinema);
}

.transition-portal.from-aurelia {
  clip-path: polygon(0 0, 58% 0, 42% 100%, 0 100%);
}

.transition-portal.from-imperia {
  clip-path: polygon(58% 0, 100% 0, 100% 100%, 42% 100%);
}

.transition-portal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--image-position);
  filter: brightness(.82) saturate(1.05);
  transform: scale(1.015);
  transition: transform 1.5s var(--ease-cinema), filter .6s ease;
}

.transition-portal::before {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0;
  background: linear-gradient(180deg, rgba(1,4,6,.48), transparent 33%, rgba(1,4,6,.57));
  border: 1px solid rgba(255,231,178,.68);
  box-shadow: inset 0 0 150px rgba(0,0,0,.28);
  transition: border-color .5s ease;
}

.transition-portal::after {
  content: '';
  position: absolute;
  z-index: 5;
  inset: 0;
  background: #030608;
  opacity: 0;
  transition: opacity .42s ease;
}

.transition-title {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  display: grid;
  justify-items: center;
  width: min(92vw, 1350px);
  opacity: 0;
  transform: translate(-50%, -43%);
  text-align: center;
  transition: opacity .55s .35s ease, transform .8s .28s var(--ease-cinema);
}

.transition-title::before,
.transition-title::after {
  content: '';
  width: min(46vw, 570px);
  height: 1px;
  margin: 19px 0;
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
  transform: scaleX(.12);
  transition: transform .8s .38s var(--ease-cinema);
}

.transition-title small {
  color: var(--gold-bright);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .32em;
  text-transform: uppercase;
}

.transition-title strong {
  color: #fffaf0;
  font: 400 clamp(68px, 10vw, 185px)/.83 Georgia, 'Times New Roman', serif;
  letter-spacing: -.07em;
  text-shadow: 0 14px 58px rgba(0,0,0,.74);
}

.transition-portal.is-active { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.transition-portal.is-active img { transform: scale(1.07); }
.transition-portal.is-active .transition-title { opacity: 1; transform: translate(-50%, -50%); }
.transition-portal.is-active .transition-title::before,
.transition-portal.is-active .transition-title::after { transform: scaleX(1); }
.transition-portal.is-vanishing::before { border-color: transparent; }
.transition-portal.is-vanishing::after { opacity: 1; }
.transition-portal.is-vanishing .transition-title { opacity: 0; transition-delay: 0s; }

body.is-transitioning .portal-header,
body.is-transitioning .axis,
body.is-transitioning .yacht-card:not(.is-selected) {
  opacity: 0;
  transition: opacity .3s ease;
}

@media (max-width: 820px) {
  body { overflow-y: auto; }
  .portal-header { align-items:flex-start; height:132px; padding:10px 16px 0; }
  .brand { width: 225px; height: 84px; }
  .brand img { width: 280px; transform: translate(-18px, -42px); }
  .portal-tools { padding-top:9px; }
  .edition { display:none; }
  .portal-languages button { grid-template-columns:20px; min-width:36px; width:36px; padding:0; }
  .portal-languages button span { display:none; }
  .yacht-stage { height: 100svh; min-height: 620px; }
  .yacht-card--aurelia { clip-path: polygon(0 0, 100% 0, 100% 47%, 0 59%); }
  .yacht-card--imperia { clip-path: polygon(0 59%, 100% 47%, 100% 100%, 0 100%); }
  .yacht-card--aurelia img { object-position: 58% center; }
  .yacht-card--imperia img { object-position: 50% center; }
  .card-copy, .yacht-card--aurelia .card-copy, .yacht-card--imperia .card-copy {
    left: 24px;
    right: 24px;
    width: auto;
    align-items: flex-start;
    text-align: left;
  }
  .yacht-card--aurelia .card-copy { bottom: 56%; }
  .yacht-card--imperia .card-copy { bottom: 38px; }
  .card-copy strong { font-size: clamp(45px, 12vw, 68px); white-space: normal; }
  .card-tier { margin-top: 12px; font-size: clamp(23px, 6vw, 34px); }
  .enter { margin-top: 16px; }
  .card-number { display: none; }
  .axis-line {
    clip-path: polygon(
      0 calc(59% - 1px),
      100% calc(47% - 1px),
      100% calc(47% + 1px),
      0 calc(59% + 1px)
    );
  }
  .axis-title { display: none; }
  .yacht-card::before { display: none; }
  .transition-portal.from-aurelia { clip-path: polygon(0 0, 100% 0, 100% 47%, 0 59%); }
  .transition-portal.from-imperia { clip-path: polygon(0 59%, 100% 47%, 100% 100%, 0 100%); }
}

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