/* ===== Scope to #sSMain ===== */
#sSMain {
  display: grid;
  place-items: center;
  height: 85vh;
  min-height: fit-content;
  margin-top: 10rem;
  background: black;
  font: 14px / 1.45 system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans", Arial;
  color: #f5f7fb;
}
#sSMain *{box-sizing:border-box;}

/* Stage */
#sSMain .sSMain-stage{
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  max-height: 85vh;
  position: relative;
  background: #000;
  isolation: isolate;
  overflow: hidden;
  --accent:#8ee6a4; /* default leaf accent */
  --hold-ratio:.75; --per-slide-s:4.5; --move-ms:600ms;
  --glass:rgba(18,18,18,.55); --glass-strong:rgba(18,18,18,.75);
  /* Nature palette */
  --leaf-1:#0c3320;
  --leaf-2:#144d30;
  --leaf-3:#1f6a41;
  --leaf-4:#2f8f55;
  --leaf-5:#8ee6a4;
  --dew:#eafff0;
  --bark:#241a12;
}

/* Track & slides */
#sSMain .sSMain-track{position:absolute; inset:0; z-index:0}
#sSMain .sSMain-slide{position:absolute; inset:0; overflow:hidden; opacity:0; background: linear-gradient(to bottom, #03042f, #2f032e);}
#sSMain .sSMain-slide.sSMain-is-active{opacity:1}

/* Media */
#sSMain .sSMain-slide img,
#sSMain .sSMain-slide video{
  width:100%; height:100%; display:block; object-fit: var(--sSMain-fit, cover); object-position: var(--sSMain-pos, center center);
  user-select:none; pointer-events:none; transform-origin:center center;
}
#sSMain .sSMain-slide video{
  filter:saturate(1.03) contrast(1.03); /* no huge drop-shadow */
}

/* Ken Burns for images only */
#sSMain .sSMain-slide img{
  animation:sSMain-kb var(--per-slide-s)s linear infinite;
  will-change:auto;
  filter: saturate(1.03) contrast(1.03);
}
#sSMain .sSMain-slide.sSMain-is-active img{
  will-change:transform;
  filter: saturate(1.03) contrast(1.03) drop-shadow(0 0 3em rgba(222,222,222,.16));
}
#sSMain .sSMain-slide:nth-child(odd) img{animation-name:sSMain-kb-alt}
@keyframes sSMain-kb{0%{transform:scale(1) translate3d(0,0,0)}100%{transform:scale(1.08) translate3d(2%,1%,0)}}
@keyframes sSMain-kb-alt{0%{transform:scale(1.02) translate3d(0,0,0)}100%{transform:scale(1.1) translate3d(-2%,-1%,0)}}

/* Effects */
#sSMain.sSMain-effect-fade .sSMain-slide{transition:opacity var(--move-ms) ease}
#sSMain.sSMain-effect-zoom .sSMain-slide{transform:scale(1.02); transition:opacity var(--move-ms) ease, transform var(--move-ms) ease}
#sSMain.sSMain-effect-zoom .sSMain-slide.sSMain-is-active{transform:scale(1)}
#sSMain .sSMain-slide:not(.sSMain-is-active) img{animation-play-state:paused}
#sSMain .sSMain-stage:hover .sSMain-slide img{animation-play-state:paused}

/* Overlay (centered) */
#sSMain .sSMain-overlay{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:clamp(12px,3vw,24px);
  text-align:center;
  z-index:2;
  opacity:0;
  transform:translateY(5em);
  transition:opacity var(--move-ms) ease, transform var(--move-ms) ease;
}
#sSMain .sSMain-slide.sSMain-is-active .sSMain-overlay {opacity:1; transform:translateY(0);}

#sSMain .sSMain-card {
  display:grid;
  gap:.6rem;
  max-width:min(90%, 80vw);
  position: relative;
  font-size:200%;
  top: 0;
  transform: translate3d(0,-8em,0);
  will-change: transform;
}
@media (max-width: 991px) {
  #sSMain .sSMain-card{ transform: translate3d(0,-4em,0); }
}

#sSMain .sSMain-title {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: fit-content;
  margin: 0 auto;
  padding: 0.1em 0.25em;
  font-family: 'playfair_displayregular';
  font-size: clamp(20px, 4.6vw, 44px);
  font-weight: 800;
  color: #ffffe5;
  letter-spacing: 0.05em;
  -webkit-filter: drop-shadow(0 0 0.1em black);
  filter: drop-shadow(0 0 0.1em black);
}
#sSMain .sSMain-title::after {
  content: '';
  position: relative;
  top: 0;
  left: 0;
  width: 70%;
  height: 0.05em;
  background: linear-gradient(to left, #ffffe500, #ffffe5, #ffffe500);
}
#sSMain .sSMain-subtitle {
  margin-bottom: 2rem;
  font-family:'aileronregular';
  font-size:clamp(0.55em, 2vw, 1.05em);
  font-style: italic;
  letter-spacing:0.02em;
  opacity:.92;
  text-shadow: 0 0.1em 0.3em black, 0 0.1em 0.25em #000000;
}
#sSMain .sSMain-cta {
  display:flex;
  justify-content:center;
  justify-self:center;
  align-items:center;
  position:relative;
  padding:0.5em 1em;
  font-family:'aileronregular';
  font-size:70%;
  text-align:center;
  letter-spacing:0.03em;
  -webkit-text-stroke:0.05em;
  -webkit-font-smoothing:antialiased;
  color:#0b1a12;
  background: #ffffff9e;
  box-shadow:0 0.1em 1em -0.3em #00000073, 0 1.2em 0.5em -1em #00000036;
  border-radius:0.35em;
  cursor:pointer;
  user-select: none;
  overflow:hidden;
  -webkit-backdrop-filter: blur(0.2em) saturate(200%);
  backdrop-filter: blur(0.2em) saturate(200%);
  transition:all .3s ease-in-out;
}
#sSMain .sSMain-cta:hover{transform: translateY(-5px) scale3d(1.1,1.1,1.1);}

#sSMain .sSMain-overlay-ALLCover{
  inset: 0;
  position: absolute;
}
#sSMain .sSMain-overlay-ALLCover > a{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: auto;
}

/* Fixes the DEPTH BUG */
#sSMain .sSMain-slide{ z-index:0; }
#sSMain .sSMain-slide.sSMain-is-active{ z-index:1; }
#sSMain .sSMain-overlay{ z-index:2; }

/* Arrows */
#sSMain .sSMain-nav{
  position:absolute; inset:auto auto 50% auto; transform:translateY(50%);
  width:clamp(36px,7vw,88px); height:100%; border:0; cursor:pointer; z-index:3; color:#fff; background:transparent;
  display:grid; place-items:center; transition:background .2s, transform .2s, opacity .25s;
}
#sSMain .sSMain-nav:hover{background:var(--glass-strong); transform:translateY(50%) scale(1.06)}
#sSMain .sSMain-nav:active{transform:translateY(50%) scale(.98)}
#sSMain .sSMain-nav svg{width:70%; height:70%; opacity:.96}
#sSMain .sSMain-nav--prev{left:0}
#sSMain .sSMain-nav--next{right:0}

/* HUD — Nature progress bar */
#sSMain .sSMain-hud{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding:.7rem .85rem .9rem;
  background:linear-gradient(to top, rgba(10,20,14,.7), rgba(10,20,14,.45), transparent);
}
#sSMain .sSMain-hud-top{display:flex; justify-content:flex-end; align-items:center; gap:.75rem; margin-bottom:.5rem; text-shadow:0 1px 2px rgba(0,0,0,.6)}
#sSMain .sSMain-counter{font-weight:800; letter-spacing:.2px; opacity: .92; transition:all .3s ease-in-out;}

/* ===== NATURE "ACRYLIC" PROGRESS BAR ===== */
#sSMain .sSMain-progress{
  position:relative;
  width:100%;
  height: 0.25em;
  border-radius:999px;
  overflow:hidden;
  background:linear-gradient(to bottom, rgba(22,34,27,.35), rgba(12,20,16,.24));
  outline: 1px solid rgba(255,255,255,.08);
  box-shadow:
	inset 0 1px 2px rgba(0,0,0,.55),
	0 1px 0 rgba(255,255,255,.05);
  opacity:1;
  transition:opacity .25s ease;
}
#sSMain.sSMain-paused .sSMain-progress{ opacity:.2; }

@supports ((-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px))){
  #sSMain .sSMain-progress{
	-webkit-backdrop-filter: blur(8px) saturate(1.1);
	backdrop-filter: blur(8px) saturate(1.1);
	background:linear-gradient(to bottom, rgba(22,34,27,.28), rgba(12,20,16,.18));
  }
}

#sSMain .sSMain-progress::before{
  content:"";
  position:absolute; inset:0;
  background:
	linear-gradient(to bottom, rgba(255,255,255,.10), rgba(255,255,255,0) 55%),
	radial-gradient(3px 3px at 15% 80%, rgba(255,255,255,.04), transparent 60%),
	radial-gradient(2px 2px at 70% 25%, rgba(255,255,255,.03), transparent 60%);
  pointer-events:none;
  filter:blur(.2px);
}

#sSMain .sSMain-bar{
  position:relative;
  width:100%;
  height:100%;
  border-radius:inherit;
  overflow:visible;
  transform:translateZ(0);
}

#sSMain .sSMain-barFill{
  position:absolute;
  inset:0;
  border-radius:inherit;
  transform-origin:left center;
  transform:scaleX(0);
  will-change:transform;
  backface-visibility:hidden;
  background:
	radial-gradient(64px 64px at 100% 50%, rgba(255,255,255,.62), rgba(255,255,255,0) 62%),
	linear-gradient(90deg, color-mix(in oklab, var(--accent) 90%, #fff) 0%, #f2fff6 100%),
	repeating-linear-gradient(35deg, rgba(255,255,255,.14) 0 10px, rgba(255,255,255,0) 10px 20px);
  background-size:auto, 200% 100%, 28px 28px;
  filter:saturate(1.18) contrast(1.08);
  box-shadow:
	0 0 26px color-mix(in oklab, var(--accent) 60%, #fff),
	0 0 42px rgba(208,255,227,.55),
	inset 0 0 10px rgba(255,255,255,.32);
  opacity:0;
  transition:opacity .12s linear;
  animation:sSMain-leafStripes 2.3s linear infinite;
}

#sSMain .sSMain-barFill::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to bottom,
	rgba(255,255,255,.35),
	rgba(255,255,255,0) 46%,
	rgba(0,0,0,0) 66%,
	rgba(0,0,0,.22));
  pointer-events:none;
}

#sSMain .sSMain-comet{
  position:absolute;
  left:0;
  top:50%;
  width:18px; height:18px;
  border-radius:50%;
  transform:translate3d(0,-50%,0);
  will-change:transform;
  pointer-events:none;
  background:
	radial-gradient(circle at 35% 35%, #ffffff 0 40%,
	  color-mix(in oklab, var(--accent) 85%, #fff) 70%,
	  color-mix(in oklab, var(--accent) 90%, #000) 100%);
  box-shadow:
	0 0 34px rgba(220,255,234,.95),
	0 0 18px color-mix(in oklab, var(--accent) 75%, #fff),
	inset 0 0 2px rgba(255,255,255,.95);
  filter:saturate(1.1);
  opacity:0;
  transition:opacity .12s linear;
}

@keyframes sSMain-leafStripes{
  from { background-position: 0 0, 0 0, 0 0; }
  to   { background-position: 0 0, 0 0, 28px 0; }
}

/* Loader overlay */
#sSMain .sSMain-loader{
  display: grid;
  place-items: center;
  padding: 1rem;
  position:absolute;
  inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,.65), rgba(0,0,0,.4));
  gap: 1rem;
  text-align: center;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 260ms ease;
  z-index:4;
}
#sSMain .sSMain-loader.sSMain-loader--hiding, .hideHUDTXT {
  opacity: 0 !important;
  pointer-events: none;
}
#sSMain .sSMain-loader[hidden]{display:none}
#sSMain .sSMain-spinner{width:56px; height:56px; border-radius:50%; border:6px solid rgba(255,255,255,.25); border-top-color:#fff; animation:sSMain-spin 1s linear infinite}
@keyframes sSMain-spin{to{transform:rotate(360deg)}}

/* Auto-hide UI */
#sSMain [data-ui]{opacity:1}
#sSMain .sSMain-ui-idle [data-ui]{opacity:0; pointer-events:none}
#sSMain .sSMain-stage{transition:opacity .25s ease}

@media (prefers-reduced-motion: reduce){
  #sSMain .sSMain-slide img{animation:none !important}
  #sSMain .sSMain-bar{animation:none}
}

/* === sSMain layered media patch === */
.sSMain-mediaWrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* apply to BOTH direct media and wrapped media safely */
.sSMain-slide :is(img, video),
.sSMain-mediaWrap :is(img, video) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: var(--sSMain-fit, cover);
  object-position: var(--sSMain-pos, 50% 50%);
}
/* default hidden */
.sSMain-mediaWrap .sSMain-media--alt,
.sSMain-mediaWrap .sSMain-media--vid {
  opacity: 0;
  transition: opacity 180ms linear;
}
/* state controls visibility */
.sSMain-slide.is-show-alt .sSMain-mediaWrap .sSMain-media--alt { opacity: 1; }
.sSMain-slide.is-show-vid .sSMain-mediaWrap .sSMain-media--vid { opacity: 1; }

/* Mobile */
@media (max-width: 991px) {
  #sSMain {height:  fit-content;}
  #sSMain .sSMain-stage {height: fit-content;}
  #sSMain .sSMain-progress {height: 0.15em;}
  #sSMain .sSMain-card{
	top: 0;
	transform: translate3d(0,-4em,0);
	font-size: 110%;
  }
  #sSMain .sSMain-title {font-size: clamp(0.1em,4vw,44px);}
  #sSMain .sSMain-subtitle {
	margin-bottom: 0.25rem;
	font-size: clamp(0.55em, 2.5vw, 0.70em);
	line-height: 1.35;
	letter-spacing: 0.15em;
	-webkit-text-stroke: 0.005em;
  }
}

/* ================================
   MOBILE TAP + HOVER EMULATION FIX
   ================================ */
@media (hover: hover) and (pointer: fine) {
  #sSMain .sSMain-stage:hover .sSMain-slide img {
	animation-play-state: paused;
  }
}
@media (hover: none) and (pointer: coarse) {
  #sSMain .sSMain-stage:hover .sSMain-slide img {
	animation-play-state: running;
  }
}

#sSMain .sSMain-slide .sSMain-overlay { pointer-events: none; }
#sSMain .sSMain-slide.sSMain-is-active .sSMain-overlay { pointer-events: auto; }
#sSMain .sSMain-overlay-ALLCover > a { pointer-events: auto; }

#sSMain .sSMain-overlay-coverLink,
#sSMain .sSMain-cta {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#sSMain .sSMain-overlay-coverLink,
#sSMain .sSMain-cta,
#sSMain .sSMain-nav {
  -webkit-user-select: none;
  user-select: none;
}