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

:root {
  --bg: #f5f4f0;
  --fg: #0b0b0b;
  --perspective: 1800px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --header-h: 90px;
  --footer-h: 80px;
}

.stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: var(--bg);
  color: var(--fg);
  overflow: hidden;
  perspective: var(--perspective);
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
}

.loader {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--bg);
  transition: opacity 0.5s var(--ease), visibility 0.5s linear;
}
.loader--hide {
  opacity: 0;
  visibility: hidden;
}
.loader__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.loader__ring {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2.5px solid rgba(0,0,0,0.1);
  border-top-color: var(--accent, #c5a059);
  animation: spin 0.9s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

#bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  filter: blur(28px) saturate(1.1);
  pointer-events: none;
}

.stage.carousel-mode { touch-action: none; cursor: grab; }
.stage.carousel-mode.dragging { cursor: grabbing; }

.cards {
  position: absolute;
  inset: 0;
  z-index: 10;
  transform-style: preserve-3d;
}

.card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(24vw, 340px);
  aspect-ratio: 3/4;
  isolation: isolate;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, filter;
  transform-origin: 90% center;
  contain: layout paint;
}

.card__img {
  border-radius: 16px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: translateZ(0);
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.04),
    0 8px 24px rgba(0,0,0,0.10),
    0 24px 64px rgba(0,0,0,0.14);
}

@media (max-width: 768px) {
  :root {
    --perspective: 1100px;
    --header-h: 70px;
    --footer-h: 70px;
  }
  .card {
    width: min(56vw, 240px);
    top: calc(50% - 0px);
  }
  .card__img {
    border-radius: 14px;
  }
}

@media (max-width: 430px) {
  .card { width: min(62vw, 220px); }
}

.event-words {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.ew {
  position: absolute;
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  white-space: nowrap;
  animation: ew-float 8s ease-in-out infinite;
}

@keyframes ew-float {
  0%   { opacity: var(--op-lo); transform: translateY(0); }
  50%  { opacity: var(--op-hi); transform: translateY(-5px); }
  100% { opacity: var(--op-lo); transform: translateY(0); }
}

.ew--1  { --op-lo:.08; --op-hi:.18; top: 7%;  left: 3%;  font-size:1.1rem;  animation-delay:0s;    animation-duration:7s;   color:#000; }
.ew--2  { --op-lo:.06; --op-hi:.14; top:11%;  left:61%;  font-size:0.75rem; animation-delay:1.2s;  animation-duration:9s;   color:#000; }
.ew--3  { --op-lo:.08; --op-hi:.16; top:71%;  left: 3%;  font-size:0.85rem; animation-delay:0.5s;  animation-duration:6.5s; color:#c5a059; }
.ew--4  { --op-lo:.10; --op-hi:.20; top:31%;  left:77%;  font-size:1.3rem;  animation-delay:2s;    animation-duration:8s;   color:#000; }
.ew--5  { --op-lo:.07; --op-hi:.15; top:53%;  left:47%;  font-size:0.9rem;  animation-delay:0.8s;  animation-duration:7.5s; color:#000; }
.ew--6  { --op-lo:.08; --op-hi:.17; top:80%;  left:64%;  font-size:0.8rem;  animation-delay:3s;    animation-duration:8.5s; color:#c5a059; }
.ew--7  { --op-lo:.06; --op-hi:.13; top:21%;  left:28%;  font-size:0.7rem;  animation-delay:1.5s;  animation-duration:6s;   color:#000; }
.ew--8  { --op-lo:.09; --op-hi:.18; top:61%;  left:20%;  font-size:1.05rem; animation-delay:2.5s;  animation-duration:7s;   color:#000; }
.ew--9  { --op-lo:.07; --op-hi:.14; top: 4%;  left:37%;  font-size:0.72rem; animation-delay:0.3s;  animation-duration:9.5s; color:#c5a059; }
.ew--10 { --op-lo:.09; --op-hi:.18; top:85%;  left:37%;  font-size:1.2rem;  animation-delay:1.8s;  animation-duration:7s;   color:#000; }
.ew--11 { --op-lo:.07; --op-hi:.14; top:41%;  left: 1%;  font-size:0.82rem; animation-delay:0.9s;  animation-duration:8s;   color:#000; }
.ew--12 { --op-lo:.08; --op-hi:.17; top: 9%;  left:82%;  font-size:0.9rem;  animation-delay:2.2s;  animation-duration:6s;   color:#c5a059; }
.ew--13 { --op-lo:.06; --op-hi:.13; top:76%;  left:82%;  font-size:0.75rem; animation-delay:1.1s;  animation-duration:8.5s; color:#000; }
.ew--14 { --op-lo:.08; --op-hi:.16; top:47%;  left:63%;  font-size:1.0rem;  animation-delay:3.5s;  animation-duration:7.5s; color:#000; }

@media (max-width: 768px) {
  .ew--1  { font-size:0.75rem; }
  .ew--2  { font-size:0.6rem;  }
  .ew--3  { font-size:0.65rem; }
  .ew--4  { font-size:0.9rem;  }
  .ew--5  { font-size:0.7rem;  }
  .ew--6  { font-size:0.62rem; }
  .ew--7  { font-size:0.58rem; }
  .ew--8  { font-size:0.78rem; }
  .ew--9  { font-size:0.6rem;  }
  .ew--10 { font-size:0.85rem; }
  .ew--11 { font-size:0.65rem; }
  .ew--12 { font-size:0.7rem;  }
  .ew--13 { font-size:0.6rem;  }
  .ew--14 { font-size:0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .card { transition: none !important; animation: none !important; }
  .ew   { animation: none !important; opacity: var(--op-lo) !important; }
}