html[data-splash-preview="4"] .splash-html-option[data-splash-option="4"],
html[data-splash-preview="5"] .splash-html-option[data-splash-option="5"],
html[data-splash-preview="6"] .splash-html-option[data-splash-option="6"],
html[data-splash-preview="7"] .splash-html-option[data-splash-option="7"],
html[data-splash-preview="8"] .splash-html-option[data-splash-option="8"] {
  display: block;
}

html:not([data-splash-preview]) .splash-html-option[data-splash-option="3"] { display: none; }
html:not([data-splash-preview]) .splash-html-option[data-splash-option="8"] { display: none; }
html:not([data-splash-preview]) .splash-html-option[data-splash-option="1"] { display: block; }

.splash-v2 {
  --v2-gold: #d8ad55;
  --v2-gold-bright: #f4d98e;
  --v2-ink: #15150f;
  color: var(--v2-ink);
  background: transparent;
}

.splash-v2::before {
  z-index: 8;
  inset: clamp(10px, 1.1vw, 18px);
  border-color: rgba(220, 180, 96, .34);
  transition: opacity .28s ease;
}

.splash-v2::after { display: none; }
.splash-v2.is-vertical-opening::before { opacity: 0; }

.splash-v2-curtain,
.splash-v2-stage {
  position: absolute;
  inset: 0;
}

.splash-v2-curtain {
  z-index: 1;
  display: flex;
  pointer-events: none;
}

.splash-v2-curtain > i {
  position: relative;
  width: 50.1%;
  height: 100%;
  flex: 0 0 50.1%;
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform;
}

.splash-v2-curtain > i:last-child { margin-left: -.1%; }

.splash-v2-stage {
  z-index: 3;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  will-change: transform, opacity;
}

.splash-v2-logo {
  position: relative;
  z-index: 5;
  width: clamp(250px, 25vw, 370px);
  opacity: 0;
  transform-origin: 50% 50%;
  will-change: clip-path, filter, opacity, transform;
}

.splash-v2-logo::before {
  content: none;
}

.splash-v2-logo img {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .16));
}

.splash-v2-caption,
.splash-v2-sequence {
  position: absolute;
  z-index: 5;
  margin: 0;
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  opacity: 0;
  will-change: opacity, transform;
}

.splash-v2-caption {
  left: 50%;
  top: calc(50% + clamp(154px, 16vw, 222px));
  color: rgba(227, 194, 124, .76);
  font-size: 9px;
  letter-spacing: .26em;
  white-space: nowrap;
  transform: translateX(-50%);
}

.splash-v2-sequence {
  right: clamp(29px, 3.5vw, 54px);
  bottom: clamp(27px, 3.2vw, 48px);
  color: rgba(226, 190, 113, .58);
  font-size: 8px;
  letter-spacing: .2em;
}

.splash-v2-axis {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 10%;
  width: 1px;
  height: 80%;
  background: linear-gradient(180deg, transparent, rgba(240, 207, 134, .68) 35%, rgba(240, 207, 134, .68) 65%, transparent);
  opacity: 0;
  transform: scaleY(.08);
  transform-origin: 50% 50%;
  will-change: opacity, transform;
}

.splash-v2-halo,
.splash-v2-architecture {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.splash-v2-halo {
  width: min(64vmin, 620px);
  aspect-ratio: 1;
}

.splash-v2-halo i {
  position: absolute;
  inset: 0;
  display: block;
  border: 1px solid rgba(227, 190, 109, .3);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.58);
  will-change: opacity, transform;
}

.splash-v2-halo i:nth-child(2) { inset: 12%; }
.splash-v2-halo i:nth-child(3) { inset: 27%; }

.splash-v2-architecture {
  width: min(84vw, 1040px);
  height: min(70vh, 660px);
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}

.splash-v2-architecture i {
  display: block;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, transparent, rgba(229, 192, 111, .3) 28%, rgba(229, 192, 111, .3) 72%, transparent);
  opacity: 0;
  transform: scaleY(.16);
  will-change: opacity, transform;
}

/* 02 — black pause, opposing colour fields, then a clean vertical opening. */
.splash-v2-eclipse-reveal { background: #000; }
.splash-v2-eclipse-reveal::before { opacity: 0; }

.splash-v2-eclipse-reveal .splash-v2-curtain > i,
.splash-two-inward > i {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(221, 174, 81, .13), transparent 38%),
    linear-gradient(145deg, #f2e6ce 0%, #fffefa 58%, #f6eedf 100%);
}

.splash-v2-eclipse-reveal .splash-v2-curtain > i { opacity: 0; }

.splash-two-inward {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.splash-two-inward > i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50.1%;
  backface-visibility: hidden;
  transform: scaleY(0) translateZ(0);
  will-change: opacity, transform;
}

.splash-two-inward > i:first-child {
  top: 0;
  transform-origin: 50% 0;
}

.splash-two-inward > i:last-child {
  bottom: 0;
  transform-origin: 50% 100%;
}

.splash-v2-eclipse-reveal .splash-v2-halo i { border-color: rgba(160, 112, 31, .25); }
.splash-v2-eclipse-reveal .splash-v2-halo i:nth-child(1) { border-color: rgba(157, 106, 25, .4); }
.splash-v2-eclipse-reveal .splash-v2-halo i:nth-child(2) { border-style: double; border-width: 3px; }

.splash-v2-eclipse-reveal .splash-v2-architecture i {
  background: linear-gradient(180deg, transparent, rgba(145, 96, 21, .24) 26%, rgba(145, 96, 21, .24) 74%, transparent);
}

.splash-v2-eclipse-reveal .splash-v2-axis {
  background: linear-gradient(180deg, transparent, rgba(164, 111, 26, .46) 34%, rgba(164, 111, 26, .46) 66%, transparent);
}

.splash-two-frame {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  width: min(72vmin, 660px);
  aspect-ratio: 1;
  border: 1px solid rgba(148, 99, 22, .24);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.78);
  will-change: opacity, transform;
}

.splash-two-frame::before,
.splash-two-frame::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(151, 101, 24, .16);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.splash-two-frame::before { width: 78%; height: 78%; }
.splash-two-frame::after { width: 54%; height: 54%; }

.splash-two-logo-swap { opacity: 1; }

.splash-two-logo-swap img {
  display: block;
  width: 100%;
  height: auto;
  will-change: clip-path, opacity, transform, filter;
}

.splash-two-logo-standard {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.splash-v2-eclipse-reveal .splash-v2-caption,
.splash-v2-eclipse-reveal .splash-v2-sequence { color: rgba(111, 73, 15, .68); }

/* 04 — a restrained cinematic eclipse with a luminous central crown. */
.splash-v2-eclipse-crown .splash-v2-curtain > i:first-child {
  background:
    radial-gradient(circle at 100% 50%, rgba(211, 161, 66, .2), transparent 31%),
    linear-gradient(145deg, #171914 0%, #090a08 72%, #16120b 100%);
}

.splash-v2-eclipse-crown .splash-v2-curtain > i:last-child {
  background:
    radial-gradient(circle at 0 50%, rgba(211, 161, 66, .2), transparent 31%),
    linear-gradient(215deg, #171914 0%, #090a08 72%, #16120b 100%);
}

.splash-v2-eclipse-crown .splash-v2-logo::before { background: rgba(202, 150, 54, .22); }
.splash-v2-eclipse-crown .splash-v2-halo i:nth-child(1) { border-color: rgba(244, 213, 140, .48); }
.splash-v2-eclipse-crown .splash-v2-halo i:nth-child(2) { border-color: rgba(218, 169, 76, .24); }
.splash-v2-eclipse-crown .splash-v2-halo i:nth-child(3) { border-color: rgba(249, 226, 171, .16); }

/* 05 — elliptical meridians give the eclipse a sharper architectural rhythm. */
.splash-v2-eclipse-meridian .splash-v2-curtain > i:first-child {
  background:
    linear-gradient(90deg, rgba(193, 143, 48, .05), transparent 38%),
    radial-gradient(ellipse at 100% 48%, rgba(221, 174, 79, .17), transparent 35%),
    #07100f;
}

.splash-v2-eclipse-meridian .splash-v2-curtain > i:last-child {
  background:
    linear-gradient(270deg, rgba(193, 143, 48, .05), transparent 38%),
    radial-gradient(ellipse at 0 48%, rgba(221, 174, 79, .17), transparent 35%),
    #07100f;
}

.splash-v2-eclipse-meridian .splash-v2-logo::before { background: rgba(191, 137, 37, .2); }
.splash-v2-eclipse-meridian .splash-v2-halo { width: min(76vw, 760px); aspect-ratio: 1.65; }
.splash-v2-eclipse-meridian .splash-v2-halo i { border-radius: 50%; transform: rotate(-12deg) scale(.58); }
.splash-v2-eclipse-meridian .splash-v2-halo i:nth-child(2) { transform: rotate(12deg) scale(.58); }
.splash-v2-eclipse-meridian .splash-v2-halo i:nth-child(3) { transform: rotate(90deg) scale(.58); }
.splash-v2-eclipse-meridian .splash-v2-architecture { width: min(68vw, 820px); opacity: .58; }

/* 06 — champagne planes form a quiet, light-filled monumental hall. */
.splash-v2-monument-atelier .splash-v2-curtain > i:first-child {
  background:
    radial-gradient(circle at 100% 48%, rgba(206, 160, 68, .16), transparent 37%),
    linear-gradient(145deg, #ead9b9 0%, #fffdf8 72%);
}

.splash-v2-monument-atelier .splash-v2-curtain > i:last-child {
  background:
    radial-gradient(circle at 0 48%, rgba(206, 160, 68, .16), transparent 37%),
    linear-gradient(215deg, #ead9b9 0%, #fffdf8 72%);
}

.splash-v2-monument-atelier::before { border-color: rgba(150, 103, 27, .28); }
.splash-v2-monument-atelier .splash-v2-logo::before { background: rgba(185, 132, 38, .12); }
.splash-v2-monument-atelier .splash-v2-logo img { filter: drop-shadow(0 18px 34px rgba(89, 57, 8, .12)); }
.splash-v2-monument-atelier .splash-v2-caption,
.splash-v2-monument-atelier .splash-v2-sequence { color: rgba(120, 81, 21, .66); }
.splash-v2-monument-atelier .splash-v2-axis { background: linear-gradient(180deg, transparent, rgba(151, 103, 27, .4) 34%, rgba(151, 103, 27, .4) 66%, transparent); }
.splash-v2-monument-atelier .splash-v2-halo i { border-radius: 5px; border-color: rgba(154, 107, 32, .23); }
.splash-v2-monument-atelier .splash-v2-halo i:nth-child(1) { transform: rotate(45deg) scale(.58); }
.splash-v2-monument-atelier .splash-v2-halo i:nth-child(2) { transform: rotate(45deg) scale(.58); }
.splash-v2-monument-atelier .splash-v2-halo i:nth-child(3) { transform: rotate(45deg) scale(.58); }
.splash-v2-monument-atelier .splash-v2-architecture i { background: linear-gradient(180deg, transparent, rgba(145, 97, 24, .24) 25%, rgba(145, 97, 24, .24) 75%, transparent); }

/* 07 — a pearl seal and stepped plinth make the logo feel carved in place. */
.splash-v2-monument-seal .splash-v2-curtain > i:first-child {
  background:
    linear-gradient(135deg, rgba(151, 104, 27, .045) 0 1px, transparent 1px 72px),
    radial-gradient(circle at 100% 50%, rgba(212, 170, 84, .16), transparent 38%),
    #f5eddf;
  background-size: 72px 72px, auto, auto;
}

.splash-v2-monument-seal .splash-v2-curtain > i:last-child {
  background:
    linear-gradient(45deg, rgba(151, 104, 27, .045) 0 1px, transparent 1px 72px),
    radial-gradient(circle at 0 50%, rgba(212, 170, 84, .16), transparent 38%),
    #f5eddf;
  background-size: 72px 72px, auto, auto;
}

.splash-v2-monument-seal::before { inset: clamp(14px, 1.6vw, 26px); border-color: rgba(141, 96, 25, .3); }
.splash-v2-monument-seal .splash-v2-logo::before { background: rgba(188, 136, 42, .15); }
.splash-v2-monument-seal .splash-v2-logo img { filter: drop-shadow(0 20px 38px rgba(84, 53, 6, .13)); }
.splash-v2-monument-seal .splash-v2-caption,
.splash-v2-monument-seal .splash-v2-sequence { color: rgba(111, 73, 16, .66); }
.splash-v2-monument-seal .splash-v2-halo { width: min(68vmin, 670px); }
.splash-v2-monument-seal .splash-v2-halo i { border-color: rgba(143, 96, 24, .22); }
.splash-v2-monument-seal .splash-v2-halo i:nth-child(1) { border-width: 1px; }
.splash-v2-monument-seal .splash-v2-halo i:nth-child(2) { border-style: double; border-width: 3px; }
.splash-v2-monument-seal .splash-v2-architecture {
  top: 68%;
  width: min(52vw, 620px);
  height: 17vh;
  border-top: 1px solid rgba(137, 91, 22, .26);
  border-bottom: 1px solid rgba(137, 91, 22, .14);
}

/* 08 — the header signature, reduced to one line and one precise reveal. */
.splash-v2-minimal-signature .splash-v2-curtain > i:first-child {
  background:
    radial-gradient(ellipse at 100% 50%, rgba(202, 151, 55, .105), transparent 35%),
    linear-gradient(145deg, #f3e8d3 0%, #fffefa 64%);
}

.splash-v2-minimal-signature .splash-v2-curtain > i:last-child {
  background:
    radial-gradient(ellipse at 0 50%, rgba(202, 151, 55, .105), transparent 35%),
    linear-gradient(215deg, #f3e8d3 0%, #fffefa 64%);
}

.splash-v2-minimal-signature::before {
  top: clamp(3px, .45vw, 7px);
  right: clamp(14px, 1.5vw, 24px);
  bottom: clamp(10px, 1.2vw, 18px);
  left: clamp(14px, 1.5vw, 24px);
  border-color: rgba(151, 104, 29, .2);
}

.splash-v2-minimal-signature .splash-v2-stage {
  height: 100dvh;
  min-height: 100svh;
  place-items: center;
}

.splash-eight-logo {
  width: clamp(270px, 31vw, 440px);
}

.splash-eight-logo img {
  filter: drop-shadow(0 16px 30px rgba(89, 58, 9, .1));
}

.splash-eight-rule {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: calc(50% + clamp(91px, 8.5vw, 126px));
  width: min(460px, 54vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(166, 115, 31, .58) 24%, rgba(166, 115, 31, .58) 76%, transparent);
  opacity: 0;
  transform: translateX(-50%) scaleX(.06);
  transform-origin: 50% 50%;
  will-change: opacity, transform;
}

.splash-eight-caption {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: calc(50% + clamp(112px, 10.6vw, 154px));
  margin: 0;
  color: rgba(109, 76, 23, .62);
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .25em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-50%);
  will-change: opacity, transform;
}

@media (max-width: 620px) {
  .splash-option-one .splash-final-stage {
    height: 100%;
    min-height: 0;
  }

  .splash-option-one .splash-final-stage::before {
    top: 50%;
    height: min(70%, 560px);
    transform-origin: 50% 50%;
  }

  .splash-option-one .splash-final-stage::after {
    top: 50%;
    height: min(76%, 600px);
    transform-origin: 50% 50%;
  }

  .splash-option-one .splash-final-brand { top: 0; }

  .splash-v2::before {
    inset: 10px;
    border-radius: 22px;
  }

  .splash-v2-stage { min-height: 100svh; }
  .splash-v2-logo { width: min(70vw, 278px); }
  .splash-v2-caption { top: calc(50% + min(40vw, 157px)); font-size: 7px; letter-spacing: .2em; }
  .splash-v2-sequence { right: 22px; bottom: 25px; font-size: 7px; }
  .splash-v2-axis { top: 8%; height: 84%; }
  .splash-v2-halo { width: min(88vw, 350px); }
  .splash-v2-architecture { width: 84vw; height: 72svh; }
  .splash-v2-eclipse-meridian .splash-v2-halo { width: 94vw; }
  .splash-v2-monument-atelier .splash-v2-halo { width: min(80vw, 316px); }
  .splash-v2-monument-seal .splash-v2-halo { width: min(86vw, 340px); }
  .splash-v2-monument-seal .splash-v2-architecture { width: 72vw; height: 12svh; }
  .splash-v2-eclipse-reveal .splash-v2-halo,
  .splash-two-frame { width: min(88vw, 350px); }
  .splash-eight-logo { width: min(76vw, 304px); }
  .splash-eight-rule { top: calc(50% + min(20vw, 78px)); width: min(74vw, 286px); }
  .splash-eight-caption { top: calc(50% + min(26vw, 103px)); font-size: 7px; letter-spacing: .18em; }
  .splash-v2-minimal-signature::before { top: 2px; right: 10px; bottom: 8px; left: 10px; }
}

@media (max-width: 350px), (max-height: 620px) and (max-width: 620px) {
  .splash-v2-logo { width: min(62vw, 220px); }
  .splash-v2-caption { top: calc(50% + min(35vw, 123px)); }
  .splash-eight-logo { width: min(74vw, 236px); }
}

@media (prefers-reduced-motion: reduce) {
  .splash-v2-logo,
  .splash-v2-stage,
  .splash-v2-curtain > i,
  .splash-v2-halo i,
  .splash-v2-architecture i,
  .splash-v2-axis { will-change: auto; }
}