:root {
  --portal-primary: #ffffff;
  --portal-accent: #72d5ff;
  --portal-bg: #0b0e13;
}

html, body {
  height: 100%;
  /* background: var(--portal-bg); */
  /* font-family: 'Manrope', 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; */
  font-family: 'GT Eesti', 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;

}

.fw-800 { font-weight: 800; }
.letter-spacing-2 { letter-spacing: .2em; }

.portal-hero {
  height: 100vh;
  overflow: hidden;
}

.portal-hero .viewport {
  position: relative;
  width: 100%;
  height: 100%;
}

.slides {
  position: absolute;
  inset: 0;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .6s ease, transform .6s ease;
}

.slide.active { opacity: 1; }

/* Layering to allow next slide to reveal above current */
.slide { z-index: 1; }
.slide.active { z-index: 2; }
.slide.next-reveal { z-index: 3; will-change: clip-path; opacity: 1; }

/* Default media/text transform so we can animate scale-on-exit */
.slide .bg-video,
.slide .bg-image { transform: scale(1); transition: transform 1.8s cubic-bezier(.4,0,.2,1), filter 1.8s ease; }
.slide .overlay { transform: scale(1); transition: transform 1.8s cubic-bezier(.4,0,.2,1), opacity 1.6s ease; }

/* When leaving, subtly zoom out text/media */
.slide.active.exiting .bg-video,
.slide.active.exiting .bg-image { transform: scale(1.12); filter: blur(1px); }
.slide.active.exiting .overlay { transform: scale(1.12); opacity: 0; }

/* Circular portal reveal on next slide from gate center */
.slide.next-reveal { clip-path: circle(0px at var(--cx) var(--cy)); }
.slide.next-reveal.revealing { clip-path: circle(150vmax at var(--cx) var(--cy)); transition: clip-path 1.6s cubic-bezier(.4,0,.2,1); }

/* Incoming slide subtle zoom during reveal */
.slide.next-reveal .bg-video,
.slide.next-reveal .bg-image { transform: scale(0.98); }
.slide.next-reveal.revealing .bg-video,
.slide.next-reveal.revealing .bg-image { transform: scale(1.08); }
.slide.next-reveal .overlay { opacity: 0; transform: scale(0.98); }
.slide.next-reveal.revealing .overlay { opacity: 1; transform: scale(1.08); }

.slide .media {
  position: absolute;
  inset: 0;
}

.bg-video,
.bg-image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  inset: 0;
}

.overlay {
  position: relative;
  z-index: 2;
}

/* Ensure text overlays sit above the gate when gate is inside the active slide */
.slide .overlay { z-index: 6; }
.slide .gate { z-index: 5; }

.reveal-layer {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(114,213,255,0.35) 0%, rgba(114,213,255,0.15) 25%, rgba(11,14,19,0.98) 55%, rgba(11,14,19,1) 60%);
  opacity: 0;
  pointer-events: none;
  transform: scale(0.6);
  transition: opacity .3s ease, transform .3s ease;
  z-index: 10;
  transform-origin: 50% 50%;
  clip-path: circle(0% at 50% 50%);
}

.reveal-layer.active { animation: teleportPulse .45s ease-out forwards; }

@keyframes teleportPulse {
  0%   { opacity: .85; clip-path: circle(0%   at 50% 50%); }
  60%  { opacity: .55; clip-path: circle(120% at 50% 50%); }
  100% { opacity: 0;   clip-path: circle(0%   at 50% 50%); }
}

/* Simple teleport effect: brief global brightness/blur while flashing layer */
/* Remove global flash pulse as we're using circular reveal */

.gate {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(360px, 63vmin, 756px);
  height: clamp(360px, 63vmin, 756px);
  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 3;
}

.gate .ring {
  position: absolute;
  inset: 0;
  background-image: url('https://www.sliderrevolution.com/wp-content/uploads/revslider/travel-portal/gate.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1);
  transition: transform 1.8s cubic-bezier(.4,0,.2,1);
  box-shadow: none;
  animation: none;
}

.gate:focus, .gate:focus-visible { outline: none; box-shadow: none; }

.gate.zooming .ring { transform: scale(var(--gate-scale, 1.25)); }

.gate .hint {
  position: absolute;
  width: max-content;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 1rem);
  color: #cfefff;
  font-size: .875rem;
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}

@keyframes pulse {
  0%,100% { filter: drop-shadow(0 0 0 rgba(114,213,255,0.0)); }
  50% { filter: drop-shadow(0 0 20px rgba(114,213,255,0.55)); }
}

.controls {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  display: flex;
  gap: .5rem;
  z-index: 4;
}

.ctrl {
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  border-radius: 50px;
  padding: .5rem .9rem;
}

.eyebrow { color: var(--portal-accent); font-weight: 600; }

.counter { letter-spacing: .15em; opacity: .9; }

@media (max-width: 768px) {
  .display-3 { font-size: 2.25rem; }
  .gate .hint { font-size: .75rem; }
}