@font-face {
  font-family: "Unna"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/unna/unna-v25-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Unna"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/unna/unna-v25-latin-700.woff2") format("woff2");
}
@font-face {
  font-family: "Oswald"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/oswald/oswald-v57-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: "Courier Prime"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/courier-prime/courier-prime-v11-latin-regular.woff2") format("woff2");
}


@font-face {
  font-family: "Unna Fallback";
  src: local("Times New Roman"), local("Times");
  size-adjust: 87%;
  ascent-override: 101%;
  descent-override: 31%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Oswald Fallback";
  src: local("Arial");
  size-adjust: 84%;
  ascent-override: 142%;
  descent-override: 34%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Courier Prime Fallback";
  src: local("Courier New");
  size-adjust: 100%;
  ascent-override: 78%;
  descent-override: 34%;
  line-gap-override: 0%;
}

:root {
  --vvh: 1vh;               
  --vv-bottom: 0px;         
  --content-bleed: 20px;    

  --label-scale: 1.80;      

  --panel-font-mobile: clamp(35px, 7vw, 54px);
  --panel-font-desktop: clamp(30px, 4vw, 64px);

  --legal-offset: 6px;
}

html, body { height: 100%; margin: 0; background: #000; }
body { overflow: hidden; font-family: "Unna", "Unna Fallback", serif; }

.split {
  height: calc((var(--vvh) * 100) + var(--vv-bottom) + var(--content-bleed));
  display: flex;
}

@media (max-width: 800px) {
  .split { flex-direction: column; }
  .panel { flex: 1 1 0; }
}

.panel {
  flex: 1;
  position: relative;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
  color: #fff;
  font-weight: 700;
  font-size: var(--panel-font-desktop);
  letter-spacing: 0.02em;

  
  transition: flex .45s ease;
}

@media (max-width: 800px) {
  .panel { font-size: var(--panel-font-mobile); }
}

.panel::before {
  content: "";
  position: absolute;
  inset: 0;

  background-size: cover;
  background-position: center;

  transform: scale(1.10);
  filter: blur(12px) saturate(.90);
  transition: filter .35s ease, transform .35s ease;
  will-change: filter, transform;
}

@media (max-width: 800px) {
  .panel::before { filter: blur(8px) saturate(.95); }
}

.panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
  transition: background .35s ease;
}

.label { position: relative; z-index: 1; text-align: center; }

.label__text {
  display: inline-block;
  transform: scale(1);
  transition: transform .35s ease;
  text-shadow: 0 2px 14px rgba(0,0,0,.45);
}

.panel--stage .label__text {
  font-family: "Oswald", "Oswald Fallback", sans-serif;
  font-weight: 600;
  letter-spacing: 0.03em;
}

@media (max-width: 800px) {
  .panel--wedding .label { transform: translateY(-18px); }
}


@media (hover: hover) and (pointer: fine) {
  .split:hover .panel:not(.panel--soon) { flex: 1; transition: flex .45s ease; }
  .split:hover .panel:not(.panel--soon):hover { flex: 1.25; }

  .split:hover .panel:not(.panel--soon):hover::before {
    filter: blur(5px) saturate(1.15);
    transform: scale(1.16);
  }
  .split:hover .panel:not(.panel--soon):hover::after { background: rgba(0,0,0,.18); }

  .split:hover .panel:not(.panel--soon):hover .label__text { transform: scale(var(--label-scale)); }
}


@media (hover: none) and (pointer: coarse) {
  .split.touching .panel { transition: flex .35s ease; }

  .split.touching.touch-stage .panel--stage:not(.panel--soon)     { flex: 1.2; }
  .split.touching.touch-wedding .panel--wedding:not(.panel--soon) { flex: 1.2; }

  
  .split.touching.touch-stage:has(.panel--stage:not(.panel--soon)) .panel--wedding   { flex: 0.8; }
  .split.touching.touch-wedding:has(.panel--wedding:not(.panel--soon)) .panel--stage { flex: 0.8; }

  .split.touching.touch-stage   .panel--stage:not(.panel--soon)::before,
  .split.touching.touch-wedding .panel--wedding:not(.panel--soon)::before {
    filter: blur(2.5px) saturate(1.15);
    transform: scale(1.20);
  }

  .split.touching.touch-stage   .panel--stage:not(.panel--soon)::after,
  .split.touching.touch-wedding .panel--wedding:not(.panel--soon)::after {
    background: rgba(0,0,0,.18);
  }

  .split.touching.touch-stage   .panel--stage:not(.panel--soon)   .label__text,
  .split.touching.touch-wedding .panel--wedding:not(.panel--soon) .label__text {
    transform: scale(var(--label-scale));
  }
}


.panel.panel--activated {
  flex: 250 !important;
  transition: flex .5s ease-in !important;
  z-index: 2;
}
.panel.panel--activated::before {
  filter: blur(3px) saturate(1.1) !important;
  transform: scale(1.25) !important;
  transition: filter .64s ease-in, transform .64s ease-in !important;
}
.panel.panel--activated::after {
  background: rgba(0,0,0,.08) !important;
  transition: background .64s ease-in !important;
}
.panel.panel--activated .label__text {
  transform: scale(2.0) !important;
  transition: transform .64s ease-in !important;
}


.panel--soon { cursor: default; }

.panel--soon::before {
  
  filter: grayscale(1) blur(10px) saturate(0.4) brightness(0.55);
}

.panel--soon::after {
  background: rgba(0, 0, 0, .55);
}

.panel--soon .label__sub {
  display: block;
  font-family: "Courier Prime", "Courier Prime Fallback", monospace;
  font-weight: 400;
  font-size: clamp(11px, 1.1vw, 14px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-top: 12px;
  opacity: 0.72;
}

.panel:focus-visible {
  outline: 3px solid rgba(255,255,255,.9);
  outline-offset: -6px;
}

.legal {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--legal-offset) + max(env(safe-area-inset-bottom), 0px) + var(--vv-bottom));

  
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;

  z-index: 1000;

  font-family: "Courier Prime", "Courier Prime Fallback", monospace;
  font-size: 12px;
  letter-spacing: 0.02em;

  opacity: .70;
  padding: 4px 14px;
  box-sizing: border-box;

  background: rgba(0,0,0,.10);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 999px;
}

.legal > a:first-of-type { justify-self: end; }
.legal > a:last-of-type { justify-self: start; }

.legal a {
  color: rgba(255,255,255,.85);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(255,255,255,.35);
  text-underline-offset: 3px;
}

.legal a:focus-visible {
  outline: 2px solid rgba(255,255,255,.70);
  outline-offset: 2px;
  color: rgba(255,255,255,1);
  text-decoration-color: rgba(255,255,255,.60);
}

@media (hover: hover) and (pointer: fine) {
  .legal a:hover {
    color: rgba(255,255,255,1);
    text-decoration-color: rgba(255,255,255,.60);
  }
}

.legal .dot {
  opacity: 1;
  color: rgba(255,255,255,.85);
}


.panel--stage::before {
  background-image: url('../img/landing/landing-stage-001.jpg');
}
.panel--wedding::before {
  background-image: url('../img/landing/landing-wedding-001.jpg');
}