/* =====================================================================
   DKS Banner Styles
   ===================================================================== */
:root {
  --dks-banner-line: 2px;
  --dks-banner-lineclr: rgba(255,255,255,.92);
  --dks-banner-accent: #f3b94a;
  --dks-banner-dur: 6500ms;
  --dks-banner-deco: 1;
}

#main { margin: 0; padding: 0; }
.dks-banner-band {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  height: calc(100vh - var(--dks-header-h, 88px));
  height: calc(100svh - var(--dks-header-h, 88px));
  min-height: 460px;
  overflow: hidden;
  background: #111;
  touch-action: pan-y;
  user-select: none;
}
.dks-banner-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--dks-banner-n, 4), 1fr);
  grid-template-rows: 1fr;
  gap: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s .55s, visibility 0s 1.05s;
}
.dks-banner-slide.dks-banner-on {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s, visibility 0s;
  z-index: 1;
}
.dks-banner-tile {
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  background: #1d1d1d;
  margin: 0;
  border-left: var(--dks-banner-line) solid var(--dks-banner-lineclr);
}
.dks-banner-tile:first-child { border-left: 0; }
.dks-banner-tile:only-child { grid-column: 1 / -1; }
.dks-banner-tile img, .dks-banner-tile video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dks-banner-tile .dks-banner-video-poster { z-index: 0; }
.dks-banner-tile video { z-index: 1; opacity: 0; }
.dks-banner-tile.dks-banner-video-playing video { opacity: 1; }

/* entrance: columns wipe in, alternating up / down */
.dks-banner-slide.dks-banner-on .dks-banner-tile {
  animation: dks-banner-wipeUp 1.15s cubic-bezier(.76,0,.18,1) calc(var(--dks-banner-i)*120ms) both;
}
.dks-banner-slide.dks-banner-on .dks-banner-tile:nth-child(even) {
  animation-name: dks-banner-wipeDown;
}
@keyframes dks-banner-wipeUp { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes dks-banner-wipeDown { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

.dks-banner-slide.dks-banner-on .dks-banner-tile img,
.dks-banner-slide.dks-banner-on .dks-banner-tile video {
  animation: dks-banner-settle 12s cubic-bezier(.2,.6,.2,1) calc(var(--dks-banner-i)*120ms) both;
}
@keyframes dks-banner-settle { from { transform: scale(1.18); } to { transform: scale(1); } }

/* soft depth + corner circle accents */
.dks-banner-tile::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.28), transparent 40%);
}
.dks-banner-tile::before {
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  width: 38%; aspect-ratio: 1; border-radius: 50%;
  opacity: calc(var(--dks-banner-deco)*.55);
  background: linear-gradient(160deg, rgba(255,255,255,.55), rgba(0,0,0,.28));
  top: -9%; right: -9%;
}
.dks-banner-tile:nth-child(even)::before { top: auto; right: auto; bottom: -9%; left: -9%; }
.dks-banner-tile a.dks-banner-fill { position: absolute; inset: 0; z-index: 3; }
.dks-banner-snd {
  position: absolute; left: 14px; top: 14px; z-index: 5; border: 0; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.8); backdrop-filter: blur(8px); cursor: pointer; font-size: 16px;
}

/* floating controls */
.dks-banner-ctl {
  position: absolute; z-index: 10; left: 50%; bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 8px 12px;
  border-radius: 999px; background: rgba(20,20,20,.38); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #fff;
}
.dks-banner-dots { display: flex; gap: 6px; }
.dks-banner-dot {
  width: clamp(18px, 4vw, 44px); height: 4px; border: 0; padding: 0; border-radius: 4px;
  background: rgba(255,255,255,.3); position: relative; overflow: hidden; cursor: pointer;
}
.dks-banner-dot i {
  position: absolute; inset: 0; background: var(--dks-banner-accent); transform: scaleX(0); transform-origin: left;
}
.dks-banner-dot.dks-banner-done i { transform: scaleX(1); }
.dks-banner-dot.dks-banner-now i { animation: dks-banner-fill var(--dks-banner-dur) linear forwards; }
.dks-banner-band.dks-banner-paused .dks-banner-dot.dks-banner-now i { animation-play-state: paused; }
@keyframes dks-banner-fill { to { transform: scaleX(1); } }

.dks-banner-nav {
  width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.18);
  color: #fff; font-size: 15px; cursor: pointer; transition: .25s;
  display: flex; align-items: center; justify-content: center;
}
.dks-banner-nav:hover { background: var(--dks-banner-accent); color: #111; }
.dks-banner-nav:focus-visible, .dks-banner-dot:focus-visible, .dks-banner-snd:focus-visible {
  outline: 2px solid var(--dks-banner-accent); outline-offset: 2px;
}

/* mobile: 2 x 2 */
@media (max-width: 767.98px) {
  .dks-banner-slide { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, 1fr); }
  .dks-banner-tile { border-left: 0; }
  .dks-banner-tile:only-child { grid-row: 1 / -1; }
  .dks-banner-tile:nth-child(even) { border-left: var(--dks-banner-line) solid var(--dks-banner-lineclr); }
  .dks-banner-tile:nth-child(n+3) { border-top: var(--dks-banner-line) solid var(--dks-banner-lineclr); }
  .dks-banner-tile:last-child:nth-child(odd) { grid-column: span 2; }
  .dks-banner-tile:nth-child(odd):last-child { border-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dks-banner-slide.dks-banner-on .dks-banner-tile,
  .dks-banner-slide.dks-banner-on .dks-banner-tile img,
  .dks-banner-slide.dks-banner-on .dks-banner-tile video { animation: none; }
  .dks-banner-dot.dks-banner-now i { animation-duration: 0s; }
}