/* =================================================================
   Javis Slide — Frontend CSS v3.0  |  digitalzila.com
   ================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=DM+Sans:wght@300;400;500;600&display=swap');

:root {
  --h: 100vh; --hm: 100svh;
  --radius: 0px;
  --shadow: none;
  --gold: #c9a96e;
  --ff-head: 'Playfair Display', Georgia, serif;
  --ff-body: 'DM Sans', system-ui, sans-serif;
  --spring: cubic-bezier(.34,1.56,.64,1);
  --ease:   cubic-bezier(.77,0,.175,1);
  --nav-sz: 52px;
}

/* ── Wrapper ──────────────────────────────────────────────── */
.jsp-wrap {
  position: relative; width: 100%;
  height: var(--h); overflow: hidden;
  font-family: var(--ff-body);
  -webkit-font-smoothing: antialiased;
  isolation: isolate; background: #1a1a2e;

  /* ── Visual Frame ─────────────────────────────────────── */
  border-radius: var(--radius, 0px);
  box-shadow:    var(--shadow, none);

  /* Smooth frame entrance */
  transition: box-shadow .4s ease, border-radius .3s ease;
}
@media (max-width: 768px) { .jsp-wrap { height: var(--hm); } }

/* When rounded, add a subtle inner border glow for depth */
.jsp-wrap[style*="--radius"]:not([style*="--radius: 0px"]) {
  outline: 1px solid rgba(255,255,255,0.06);
}

/* Ensure all child layers also respect border-radius */
.jsp-wrap .swiper,
.jsp-wrap .swiper-wrapper,
.jsp-wrap .swiper-slide,
.jsp-wrap .jsp-slide {
  border-radius: inherit;
}

/* Background layer should also clip */
.jsp-bg {
  border-radius: inherit;
}

.jsp-wrap .jsp-swiper,
.jsp-wrap .swiper-wrapper { width: 100%; height: 100%; }

/* ── Slide ────────────────────────────────────────────────── */
.jsp-slide { position: relative; width: 100%; height: 100%; display: flex; overflow: hidden; }

/* ── Background ───────────────────────────────────────────── */
.jsp-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  z-index: 0; will-change: transform;
}
.swiper-slide-active .jsp-kb { animation: jspKB 10s ease-out forwards; }
.swiper-slide:not(.swiper-slide-active) .jsp-kb { animation: none; transform: scale(1); }
@keyframes jspKB {
  from { transform: scale(1) translate(0,0); }
  to   { transform: scale(1.12) translate(-2%,-1%); }
}

/* ── Video ────────────────────────────────────────────────── */
.jsp-vid-wrap { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.jsp-vid { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translate(-50%,-50%); object-fit: cover; }
.jsp-vid-yt { width: 177.78vh; height: 56.25vw; min-width: 100%; min-height: 100%; pointer-events: none; }

/* ── Overlay ──────────────────────────────────────────────── */
.jsp-ov { position: absolute; inset: 0; z-index: 1; }

/* ── Content ──────────────────────────────────────────────── */
.jsp-cnt {
  position: relative; z-index: 2;
  display: flex; align-items: center;
  width: 100%; height: 100%;
  padding: clamp(24px,5vw,80px);
}
.jsp-l-center .jsp-cnt { justify-content: center; text-align: center; }
.jsp-l-left   .jsp-cnt { justify-content: flex-start; text-align: left; }
.jsp-l-right  .jsp-cnt { justify-content: flex-end;   text-align: right; }

.jsp-cnt-in {
  max-width: clamp(380px, 58vw, 860px);
  padding: clamp(32px,4vw,64px);
}
@media (max-width: 768px) {
  .jsp-cnt { justify-content: center !important; text-align: center !important; align-items: flex-end; padding-bottom: clamp(72px,14vh,130px); padding-left: 20px; padding-right: 20px; }
  .jsp-cnt-in { max-width: 100%; padding: 20px 0; }
}

/* ── Typography ───────────────────────────────────────────── */
.jsp-sub {
  font-size: clamp(10px,1.1vw,13px); font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase; opacity: .72;
  margin: 0 0 16px; display: flex; align-items: center; gap: 12px;
}
.jsp-l-center .jsp-sub { justify-content: center; }
.jsp-l-right  .jsp-sub { justify-content: flex-end; }
.jsp-sub::before, .jsp-sub::after { content:''; display:block; width:32px; height:1px; background:currentColor; opacity:.4; flex-shrink:0; }
.jsp-l-left  .jsp-sub::before,
.jsp-l-right .jsp-sub::after { display: none; }

.jsp-h {
  font-family: var(--ff-head);
  font-size: clamp(34px,6.5vw,100px);
  font-weight: 900; line-height: 1.02; letter-spacing: -.025em;
  margin: 0 0 clamp(12px,1.6vw,24px); color: inherit;
}
@media (max-width: 768px) { .jsp-h { font-size: clamp(28px,9.5vw,52px); } }

.jsp-d {
  font-size: clamp(13px,1.2vw,18px); font-weight: 300;
  line-height: 1.75; opacity: .84; max-width: 520px;
  margin: 0 0 clamp(24px,3vw,48px);
}
.jsp-l-center .jsp-d { margin-left: auto; margin-right: auto; }
.jsp-l-right  .jsp-d { margin-left: auto; }
@media (max-width: 768px) { .jsp-d { margin-left: auto; margin-right: auto; } }

/* ── Buttons ──────────────────────────────────────────────── */
.jsp-btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.jsp-l-center .jsp-btns { justify-content: center; }
.jsp-l-right  .jsp-btns { justify-content: flex-end; }
@media (max-width: 768px) { .jsp-btns { justify-content: center !important; } }

.jsp-cta {
  display: inline-flex; align-items: center;
  padding: clamp(11px,1vw,15px) clamp(22px,2.2vw,38px);
  font-family: var(--ff-body); font-size: clamp(12px,.95vw,14px);
  font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  text-decoration: none; border-radius: 3px; cursor: pointer;
  transition: all .3s var(--spring); white-space: nowrap;
  position: relative; overflow: hidden;
}
.jsp-cta::after { content:''; position:absolute; inset:0; background:rgba(255,255,255,.1); opacity:0; transition:opacity .2s; }
.jsp-cta:hover::after { opacity: 1; }
.jsp-cta:hover { transform: translateY(-2px); }

.jsp-cta-primary { background: var(--gold); color: #0d0d0d; border: 2px solid var(--gold); }
.jsp-cta-primary:hover { background: transparent; color: var(--gold); }
.jsp-cta-outline { background: transparent; color: inherit; border: 2px solid rgba(255,255,255,.65); }
.jsp-cta-outline:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.jsp-cta-ghost   { background: rgba(255,255,255,.08); color: inherit; border: 2px solid rgba(255,255,255,.22); backdrop-filter: blur(6px); }
.jsp-cta-ghost:hover { background: rgba(255,255,255,.18); }
.jsp-cta-light   { background: rgba(255,255,255,.92); color: #1a1a2e; border: 2px solid transparent; }
.jsp-cta-light:hover { background: #fff; }

/* ── Navigation ───────────────────────────────────────────── */
.jsp-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
  width: var(--nav-sz); height: var(--nav-sz);
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08); backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.2); border-radius: 50%;
  color: #fff; cursor: pointer; transition: all .22s ease; outline: none;
}
.jsp-nav:hover { background: rgba(255,255,255,.2); transform: translateY(-50%) scale(1.08); }
.jsp-nav svg { width: 20px; height: 20px; }
.jsp-nav-prev { left:  clamp(12px,2.5vw,40px); }
.jsp-nav-next { right: clamp(12px,2.5vw,40px); }
@media (max-width: 480px) { .jsp-nav { display: none; } }

/* ── Dots ─────────────────────────────────────────────────── */
.jsp-dots {
  position: absolute; bottom: clamp(22px,3.5vw,38px);
  left: 50%; transform: translateX(-50%);
  z-index: 10; display: flex; gap: 7px; align-items: center;
}
.jsp-dots .swiper-pagination-bullet { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.4); opacity: 1; transition: all .3s var(--spring); cursor: pointer; }
.jsp-dots .swiper-pagination-bullet-active { width: 28px; border-radius: 3px; background: #fff; }

/* ── Progress bar ─────────────────────────────────────────── */
.jsp-prog { position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: rgba(255,255,255,.15); z-index: 20; overflow: hidden; }
.jsp-prog-fill { height: 100%; background: var(--gold); width: 0%; }

/* ── Scroll hint ──────────────────────────────────────────── */
.jsp-scroll {
  position: absolute; bottom: clamp(18px,2.5vw,32px); right: clamp(18px,2.5vw,36px);
  z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: rgba(255,255,255,.55); font-size: 9px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; font-family: var(--ff-body);
  animation: jspFU 1s 1.5s ease-out both;
}
.jsp-mouse { width: 22px; height: 34px; border: 1.5px solid rgba(255,255,255,.35); border-radius: 11px; display: flex; justify-content: center; padding-top: 5px; }
.jsp-wheel { width: 3px; height: 7px; background: rgba(255,255,255,.6); border-radius: 2px; animation: jspWh 1.6s ease-in-out infinite; }
@keyframes jspWh { 0%{transform:translateY(0);opacity:1} 80%{transform:translateY(8px);opacity:0} 100%{transform:translateY(0);opacity:0} }

/* ── Text animations ──────────────────────────────────────── */
.jsp-a { opacity: 0; transition: opacity .7s ease, transform .7s ease; }
[data-anim="fade-up"]    .jsp-a { transform: translateY(30px); }
[data-anim="fade-down"]  .jsp-a { transform: translateY(-30px); }
[data-anim="slide-left"] .jsp-a { transform: translateX(-40px); }
[data-anim="slide-right"].jsp-a { transform: translateX(40px); }
[data-anim="zoom-in"]    .jsp-a { transform: scale(.85); }
[data-anim="stagger"]    .jsp-a { transform: translateY(26px); }

.jsp-anim-in .jsp-a { opacity: 1; transform: none; }

.jsp-a[data-d="0"]   { transition-delay: .1s;  }
.jsp-a[data-d="100"] { transition-delay: .24s; }
.jsp-a[data-d="200"] { transition-delay: .4s;  }
.jsp-a[data-d="300"] { transition-delay: .56s; }

[data-anim="stagger"] .jsp-a:nth-child(1) { transition-delay: .06s; }
[data-anim="stagger"] .jsp-a:nth-child(2) { transition-delay: .2s;  }
[data-anim="stagger"] .jsp-a:nth-child(3) { transition-delay: .35s; }
[data-anim="stagger"] .jsp-a:nth-child(4) { transition-delay: .5s;  }

/* ── Split layout ─────────────────────────────────────────── */
.jsp-l-split .jsp-cnt  { justify-content: flex-end; padding-left: 50%; text-align: left; }
.jsp-l-split .jsp-bg   { clip-path: inset(0 50% 0 0); }
@media (max-width: 768px) {
  .jsp-l-split .jsp-cnt { justify-content: center !important; padding-left: 20px !important; text-align: center !important; }
  .jsp-l-split .jsp-bg  { clip-path: none; }
}

@keyframes jspFU { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
@media (prefers-reduced-motion:reduce) {
  .jsp-kb, .jsp-a, .jsp-wheel, .jsp-cta { animation:none!important; transition:none!important; opacity:1!important; transform:none!important; }
}