/* Seven Gates hero slider — dependency-free replacement for Slider Revolution "slider-01-1".
   Mirrors the original: 3 slides, 1s crossfade, slow Ken Burns zoom (100% → 115% over 20s),
   dark-purple top gradient, sliding subtitle, fading title + text, rising orange button,
   round "zeus" arrows with image preview, "hesperiden" bullets on mobile. */

@font-face { font-family: "Kumbh Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/kumbh-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Kumbh Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/kumbh-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Kumbh Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/kumbh-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Kumbh Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/kumbh-sans-latin-700-normal.woff2") format("woff2"); }

.sg-slider {
  --sg-orange: #eb8a00;
  --sg-pink: #e74576;
  --sg-in-out-3: cubic-bezier(0.645, 0.045, 0.355, 1);   /* power3.inOut */
  --sg-in-out-4: cubic-bezier(0.77, 0, 0.175, 1);        /* power4.inOut */
  --sg-out-3: cubic-bezier(0.215, 0.61, 0.355, 1);       /* power3.out */
  --sg-in-out-2: cubic-bezier(0.455, 0.03, 0.515, 0.955); /* power2.inOut */
  position: relative;
  width: 100%;
  height: 760px;
  overflow: hidden;
  background: #191140;
  font-family: "Kumbh Sans", sans-serif;
  color: #fff;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}
@media (max-width: 777px) { .sg-slider { height: 560px; } }
@media (max-width: 479px) { .sg-slider { height: 460px; } }
.sg-slider * { box-sizing: border-box; }

/* ---------- slides ---------- */
.sg-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  transition: opacity 1000ms var(--sg-in-out-2), visibility 0s linear 1000ms;
}
.sg-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 3;
  transition: opacity 1000ms var(--sg-in-out-2), visibility 0s;
}
.sg-slide.is-leaving { opacity: 1; visibility: visible; z-index: 2; transition: none; }
/* before the script starts: show the first image, keep the text hidden */
.sg-slider:not(.sg-init) .sg-slide:first-of-type { opacity: 1; visibility: visible; z-index: 3; transition: none; }

.sg-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transform: scale(1);
  transform-origin: 50% 50%;
  will-change: transform;
}
/* Ken Burns: 100% → 115% over 20s, starting 0.3s into the slide */
.sg-slide.is-active .sg-bg { transform: scale(1.15); transition: transform 20000ms linear 300ms; }

.sg-cover {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(25, 17, 64, 1) 0%, rgba(25, 17, 64, 0.25) 60%, rgba(25, 17, 64, 0) 100%);
  pointer-events: none;
}

/* ---------- layer grid (1290px like the original) ---------- */
.sg-grid {
  position: relative;
  z-index: 2;
  height: 100%;
  max-width: 1290px;
  margin: 0 auto;
  padding: 268px 15px 0;           /* matches the original vertical placement */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
@media (max-width: 1023px) { .sg-grid { padding-top: 0; justify-content: center; padding-left: 25px; padding-right: 25px; } }

.sg-mask { overflow: hidden; display: block; }
.sg-layer { display: block; opacity: 0; transition: none; }

/* subtitle: slides in from the left inside its mask */
.sg-sub-wrap { margin-left: -7px; }
.sg-sub {
  padding: 0 20px;
  font-size: 18px;
  font-weight: 500;
  line-height: 40px;
  white-space: nowrap;
  transform: translate3d(-175%, 0, 0);
}
.sg-sub span { color: var(--sg-pink); }
.sg-slide.is-active .sg-sub {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: transform 1000ms var(--sg-out-3) 60ms, opacity 1ms linear 60ms;
}

/* title */
.sg-title {
  margin: 0;
  font-family: inherit;
  font-size: 75px;
  font-weight: 600;
  line-height: 80px;
  letter-spacing: 0;
  color: #fff;
  text-transform: none;
}
.sg-slide.is-active .sg-title { opacity: 1; transition: opacity 1500ms var(--sg-in-out-4) 950ms; }

/* description */
.sg-text {
  margin: 18px 0 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: #e8e8e8;
}
.sg-slide.is-active .sg-text { opacity: 1; transition: opacity 1500ms var(--sg-in-out-4) 2330ms; }

/* button: rises up inside its mask */
.sg-btn-wrap { margin-top: 33px; border-radius: 6px; }
.sg-btn {
  display: inline-flex;
  align-items: center;
  padding: 0 40px;
  border-radius: 6px;
  background: var(--sg-orange);
  color: #fff !important;
  font-size: 18px;
  font-weight: 700;
  line-height: 58px;
  white-space: nowrap;
  text-decoration: none !important;
  transform: translate3d(0, 100%, 0);
}
.sg-btn i { padding-left: 8px; font-size: 0.85em; }
.sg-slide.is-active .sg-btn {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    transform 1200ms var(--sg-in-out-3) 3630ms,
    opacity 1200ms var(--sg-in-out-3) 3630ms,
    background-color 100ms ease-in-out,
    color 100ms ease-in-out,
    border-radius 100ms ease-in-out;
}
.sg-slide.is-active .sg-btn:hover,
.sg-slide.is-active .sg-btn:focus-visible { background: #fff; color: var(--sg-orange) !important; border-radius: 3px; }

/* leaving: everything fades out in 0.3s */
.sg-slide.is-leaving .sg-layer { opacity: 0; transition: opacity 300ms var(--sg-in-out-3); }

/* ---------- responsive sizes (original: 75/80 → 66/66 → 40/42) ---------- */
@media (max-width: 1023px) {
  .sg-title { font-size: 66px; line-height: 66px; }
  .sg-text { line-height: 30px; }
  .sg-btn { line-height: 50px; }
}
@media (max-width: 777px) {
  .sg-title { font-size: 48px; line-height: 52px; }
  .sg-text br { display: none; }
  .sg-text { max-width: 560px; }
}
@media (max-width: 479px) {
  .sg-sub { font-size: 15px; line-height: 30px; }
  .sg-title { font-size: 34px; line-height: 38px; }
  .sg-title br { display: none; }
  .sg-text { font-size: 15px; line-height: 23px; margin-top: 12px; }
  .sg-btn-wrap { margin-top: 20px; }
  .sg-btn { font-size: 15px; line-height: 44px; padding: 0 28px; }
}

/* ---------- "zeus" arrows ---------- */
.sg-arrow {
  position: absolute;
  top: 50%;
  z-index: 10;
  width: 70px;
  height: 70px;
  margin-top: -35px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.1);
  color: #fff;
  cursor: pointer;
}
.sg-arrow--prev { left: 50px; }
.sg-arrow--next { right: 50px; }
.sg-arrow svg {
  position: relative; z-index: 2;
  display: block; width: 20px; height: 20px; margin: 0 auto;
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.sg-arrow__wrap {
  position: absolute; inset: 0; z-index: 1;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0; transform: scale(0);
  transition: all 0.3s;
}
.sg-arrow__img {
  position: absolute; inset: 0; z-index: 0;
  border-radius: 50%;
  background-size: cover; background-position: center;
  transform: translateX(-100%);
  transition: all 0.3s;
}
.sg-arrow--next .sg-arrow__img { transform: translateX(100%); }
.sg-arrow:hover .sg-arrow__img, .sg-arrow:focus-visible .sg-arrow__img { transform: translateX(0); }
.sg-arrow:hover .sg-arrow__wrap, .sg-arrow:focus-visible .sg-arrow__wrap { opacity: 1; transform: scale(1); }
.sg-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* tablet: move the arrows to the bottom-right corner so they never cover the text */
@media (max-width: 1023px) {
  .sg-arrow { top: auto; bottom: 25px; margin-top: 0; width: 54px; height: 54px; background: rgba(0, 0, 0, 0.25); }
  .sg-arrow--prev { left: auto; right: 89px; }
  .sg-arrow--next { right: 25px; }
}
@media (max-width: 479px) { .sg-arrow { display: none; } }   /* original: no arrows on mobile */

/* ---------- "hesperiden" bullets (mobile only, like the original) ---------- */
.sg-bullets {
  position: absolute; left: 50%; bottom: 15px; z-index: 10;
  display: none; gap: 10px;
  transform: translateX(-50%);
}
@media (max-width: 479px) { .sg-bullets { display: flex; } }
.sg-bullet {
  width: 12px; height: 12px; padding: 0;
  border: 3px solid #e5e5e5; border-radius: 50%;
  background: linear-gradient(180deg, #999 0%, #e1e1e1 100%);
  cursor: pointer;
  transition: background 0.3s;
}
.sg-bullet:hover, .sg-bullet.is-selected { background: #666; }

/* ---------- accessibility ---------- */
.sg-sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .sg-slide, .sg-slide.is-active { transition-duration: 1ms; }
  .sg-slide.is-active .sg-bg { transform: none; transition: none; }
  .sg-layer, .sg-slide.is-active .sg-layer { transform: none !important; transition: opacity 300ms ease !important; }
}