/* =============== Reset & Vars =============== */
*,
*::before,
*::after { box-sizing: border-box; }

:root{
  --ui-gap: 24px;
  --rail-width: 3px;
  --rail-height: 165px;
  --thumb-height: 45px;
  --thumb-width: 2px;
  --thumb-size: 20px;
  --counter-font: 8px;
  --counter-track-gap: 32px;

  --dot-size: 16px;
  --dot-gap: 22px;
  --dot-active-scale: 1.2;    /* Active dot will be 20% larger */
  --dot-gap-between: 6px;     /* Gap between outer ring & inner dot */
  --dot-ring-thickness: 2px;  /* Ring stroke thickness */
  --dot-inner-size: 4.5px;      /* Inner dot size */

  --tint: 0, 25, 21;           /* greenish tone */
  --tint-alpha: 0.15;            /* subtle overlay */
  --page-bg: #0b0f0e;
  --dot-off: #4c605e;
  --dot-on: #85a6a6;
  --glass: rgba(255,255,255,0.08);
  --rail-bg: #526664;
  --rail-fill: #526664;

  /* Reveal grid */
  --grid-cols: 16;
  --grid-rows: 12;
  --tile-overscan: 0.8px;        /* tiny overlap to avoid hairline gaps */
}

html, body {
  height: 100%;
  background: var(--page-bg);
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

/* =============== Slider Base =============== */
.fx-slider {
  position: relative;
  width: 100vw;
  height: 100dvh; /* Use device viewport height for mobile correctness */
  overflow: hidden;
  color: #fff;
}

/* Slides stack */
.fx-slides {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Each slide takes full area */
.fx-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .4s linear; /* fallback */
  z-index: 2;
}
.fx-slide.is-active { opacity: 1; }

.fx-slide-content {
  position: absolute;
  top: 27%;          /* slightly above center */
  left: 12%;          /* more to the left */
  width: min(1200px, 90vw);
  padding: clamp(16px, 4vw, 48px);
  display: grid;
  gap: 12px;
  z-index: 4;        /* above tint */
  color: #fff;
  pointer-events: none; /* prevent accidental clicks if needed */
}

/* Headings & button styling remains same */
.fx-slide-content h1{color:#fff !important; font-size: 72px; line-height: 1.15;}

.fx-slide-content h5,
.fx-slide-content .fx-button {
  font-size: 18px;
  color:#ffffffa5 !important;
  opacity: 0;
  transform: translateY(20px); /* initial hidden state */
}
.fx-slide .fx-content{
    display: none;
    margin-left: 10px;
}

/* h5 sliding from top */
.fx-content h5 {
  transform: translateY(-30px);
  transition: none;
}

/* h2 fade/slide from left */
.fx-content h2 {
  transform: translateX(-50px);
  transition: none;
}

/* Button initial: square + text bigger */
.fx-content .fx-button {
  display: inline-block;
  padding: 0.75em 1.5em;
  background: #85a6a6;
  border: none;
  border-radius: 0px;  /* starts square */
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  transform: scale(1.2);
  width: 200px;
  font-weight: 600;
  letter-spacing: 2;
  text-transform: uppercase;
  margin-top: 20px;
}


/* Background image (cover) */
.fx-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  transform: translateZ(0);
  will-change: transform;
}

/* Subtle green overlay */
.fx-tint {
  position: absolute;
  inset: 0;
  background: rgba(var(--tint), var(--tint-alpha));
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 3; /* stays above slides */
}

/* Content container (optional per-slide text) */
.fx-content {
  position: relative;
  z-index: 5; /* above the fx-tint (which is z-index:3) */
  height: 100%;
  width: min(1200px, 90vw);
  margin: 0 auto;
  padding: clamp(16px, 4vw, 48px);
  display: grid;
  align-content: center;
}

.fx-ui { z-index: 5; }

/* =============== Left Dots =============== */
.fx-dots {
  position: absolute;
  left: clamp(16px, 13vw, 195px);
  top: 54.5%;
  transform: translateY(-50%);
  display: grid;
  gap: var(--dot-gap);
  z-index: 5;
}
/* Individual Dot Styling */
.fx-dot {
  position: relative;
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  border: 0;
  background: var(--dot-off);
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease;
}


/* Outer ring */
.fx-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: var(--dot-ring-thickness) solid var(--dot-on);
  opacity: 0;

  /* Formula for scale:
     (inner size + gap*2 + ring thickness*2) / dot size */
  transform: scale(
    calc(
      (var(--dot-inner-size) + (var(--dot-gap-between) * 2) + (var(--dot-ring-thickness) * 2))
      / var(--dot-size)
    )
  );
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Inner dot */
.fx-dot::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: var(--dot-inner-size);
  height: var(--dot-inner-size);
  background: var(--dot-on);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.25s ease;
}

/* HOVER — morph into inner dot + ring */
.fx-dot:hover {
  background: transparent;
}
.fx-dot:hover::before {
  transform: translate(-50%, -50%) scale(1);
}
.fx-dot:hover::after {
  opacity: 1;
  transform: scale(1);
}

/* ACTIVE — always show ring + small dot */
.fx-dot.is-active {
  background: transparent;
  transform: scale(var(--dot-active-scale));
}

.fx-dot.is-active::before {
  transform: translate(-50%, -50%) scale(1);
}
.fx-dot.is-active::after {
  opacity: 1;
  transform: scale(1);
}


/* =============== Right Counter + Rail =============== */
.fx-rail {
  position: absolute;
  right: clamp(18px, 19vw, 204px);
  top: 53%;
  transform: translateY(-50%);
  z-index: 6;
  display: grid;
  justify-items: center;
  gap: var(--counter-track-gap);
}

/* Counter number like "01", "02" */
.fx-counter-num {
  display: block;
  font-size: clamp(24px, 4vw, var(--counter-font));
  line-height: 0;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.fx-counter-total {
  color: #9cb1af;
  font-size: clamp(24px, 4vw, var(--counter-font));
  font-weight: 500;
  opacity: 0.65;
  letter-spacing: 0.04em;
    font-weight: 600;
}

/* Vertical track with fill and thumb */
.fx-track {
  position: relative;
  width: var(--rail-width);
  height: var(--rail-height);
  background: var(--rail-bg);
  border-radius: 999px;
  outline: none;
}

.fx-track-fill {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: calc(100% / 3); /* starts at slide 1 */
  background: var(--rail-fill);
  border-radius: 999px;
  transition: height .5s cubic-bezier(.22,.61,.36,1);
}

.fx-thumb {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: var(--thumb-width);
  height: var(--thumb-height);
  border-radius: 0px;
  background: #85a6a6;
  border: 0;
  cursor: grab;
  top: 0; /* JS will control top exactly */
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
  transition: background 0.35s ease, top 0.45s ease;
}
.fx-thumb:active { cursor: grabbing; }
.fx-thumb:hover {
  background: #ffffff;
}

/* ------------ HOTSPOT: robust, attribute-based mapping ------------- */
/* make hotspots obvious / easy to click */
.fx-rail .fx-rail-hotspot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;                  /* bigger hit area so users don't miss mid */
  background: transparent;
  border: 0;
  cursor: pointer;              /* always show hand */
  pointer-events: auto;
  z-index: 60;                  /* above thumb & fill */
  -webkit-tap-highlight-color: transparent;
}

/* Top hotspot -> slide 1 (visual top). Your markup used data-to="2" for top. */
.fx-rail .fx-rail-hotspot[data-to="0"] {
  top: 0;
  height: calc(100% / 3);
}

/* Middle hotspot -> slide 2 */
.fx-rail .fx-rail-hotspot[data-to="1"] {
  top: calc(100% / 3);
  height: calc(100% / 3);
}

/* Bottom hotspot -> slide 3 */
.fx-rail .fx-rail-hotspot[data-to="2"] {
  bottom: 0;
  height: calc(100% / 3);
}

/* Visual feedback on hover so user sees the area */
.fx-rail .fx-rail-hotspot:hover {
  background: rgba(255,255,255,0.06);
  border-radius: 0px;
}


/* =============== Reveal Layer (Square Ripple) =============== */
.fx-reveal {
  position: absolute;
  inset: 0;              /* fill parent */
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;            /* stays above slides, under UI */
  display: block;
  overflow: hidden;
}
.fx-cell {
  position: absolute;
  background-size: cover;  /* replaced in JS anyway */
  background-position: center;
}

.fx-reveal-layer {
  position: absolute;
  inset: 0;
  z-index: 4;     /* over slides, under UI */
  pointer-events: none;
  contain: layout paint;
  z-index: 2;
}

/* The dynamic grid we inject on each transition */
.fx-grid {
  position: absolute;
  inset: -1px; /* tiny overscan for crispness */
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  grid-template-rows: repeat(var(--grid-rows), 1fr);
  overflow: hidden;
}

/* Individual tiles */
.fx-tile {
  position: relative;
  will-change: transform;
  transform: scale(0.001); /* not 0 to avoid alias seams when scaling up */
  backface-visibility: hidden;
  /* Slight overlap on both axes to hide hairlines */
  width: calc(100% + var(--tile-overscan));
  height: calc(100% + var(--tile-overscan));
  margin: calc(var(--tile-overscan) * -0.5);
  background-repeat: no-repeat;
  background-size: calc(100% * var(--grid-cols)) calc(100% * var(--grid-rows));
  filter: saturate(1.02); /* tiny polish */
}

/* Responsive tuning for smaller screens */
@media (max-width: 900px) {
  :root { --grid-cols: 10; --grid-rows: 7; }
  .fx-dots { left: clamp(12px, 5vw, 40px); }
  .fx-rail { right: clamp(12px, 5vw, 40px); }
  .fx-track { height: 220px; }
}

@media (max-width: 600px) {
  :root { --grid-cols: 8; --grid-rows: 6; }
  .fx-track { height: 180px; }
  .fx-thumb { width: 16px; height: 16px; }
  .fx-counter-num { font-size: 34px; }
}


/* Improve slide fade fallback (we still use ripple for main transition) */
.fx-slide {
  transition: opacity .35s ease;
}

/* Hover hints */
.fx-rail .fx-rail-hotspot { outline: none; }
.fx-track:focus-visible { box-shadow: 0 0 0 4px rgba(255,255,255,.25); }


.fx-gtb-btn {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(133, 166, 166, 0.9);
  color: #fff;
  border: none;
  border-top-left-radius: 9px;
  font-weight: 400;
  cursor: pointer;
  height: 120px;
  width: 250px;
  font-size: 16px;
  z-index: 10; /* above everything */
  transition: transform 0.3s ease, all 0.3s ease;
}

.fx-gtb-btn:hover, .fx-gtb-btn:active, .fx-gtb-btn:focus {
  background: rgba(133, 166, 166, 0.9)!important;
  color: #ffffffa5;
}