/* ============================================================================
   AUTISMMODE :: "THE GALLERY"
   ---------------------------------------------------------------------------
   ok so the brief said 2016 sliding image gallery so i literally just
   ported the vibe of every jquery carousel plugin from 2016 and dropped it
   into the middle of a glassmorphic emerald cathedral. the buttons are square.
   they are supposed to be square. do not fix the buttons.
   ========================================================================= */

.gallery-wrap { position: relative; margin-top: 46px; }
/* the big outer aura. lives on the WRAP, not the cage, because the cage has a
   backdrop-filter and therefore its own stacking context, and a z-index:-1
   pseudo inside a stacking context paints on top of the background, not behind
   it. this cost me a genuinely embarrassing amount of time. */
.gallery-wrap::before {
  content: ""; position: absolute; inset: -22px; border-radius: 58px; z-index: -1;
  background: conic-gradient(from var(--vibe-hue), var(--em-500), var(--yl-400), var(--em-700), var(--em-300), var(--em-500));
  filter: blur(46px); opacity: .42; animation: ring-spin 9s linear infinite;
}

/* the outer glow cage — this part is Modern™ */
.gallery-cage {
  position: relative; padding: 22px; border-radius: var(--r-xl);
  background: var(--glass-bg-hi);
  backdrop-filter: blur(26px) saturate(170%); -webkit-backdrop-filter: blur(26px) saturate(170%);
  border: 1px solid var(--glass-stroke-hi);
  box-shadow:
    0 40px 120px -40px rgba(0,0,0,.95),
    0 0 90px -30px rgba(18,245,160,.55),
    inset 0 1px 0 rgba(182,255,228,.22);
}
.gallery-cage::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
  pointer-events: none; z-index: 6;
  background: conic-gradient(from var(--vibe-hue), var(--em-400), var(--yl-300), var(--em-700), var(--em-200), var(--em-400));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .8; animation: ring-spin 8s linear infinite;
}

.slider-frame { position: relative; }

/* the stage */
.slider {
  position: relative; overflow: hidden; border-radius: 4px; /* <- 2016 radius */
  border: 2px solid #cccccc;                                /* <- 2016 border */
  background: #1a1a1a;
  aspect-ratio: 16 / 9;
  box-shadow: inset 0 0 0 1px #555, 0 0 60px -20px rgba(18,245,160,.9);
}
@media (max-width: 700px) { .slider { aspect-ratio: 4 / 3; } }

.slide {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity .55s ease-in-out, transform .55s ease-in-out, visibility .55s;
  transform: translateX(38%) scale(.96);
  display: grid; place-items: center; background: #101010;
}
.slide.active   { opacity: 1; visibility: visible; transform: none; z-index: 2; }
.slide.leaving  { opacity: 0; visibility: visible; transform: translateX(-38%) scale(.96); z-index: 1; }
.slide.from-left          { transform: translateX(-38%) scale(.96); }
.slide.leaving.to-right   { transform: translateX(38%) scale(.96); }

.slide img {
  width: 100%; height: 100%; object-fit: contain;
  image-rendering: auto; filter: saturate(1.08) contrast(1.03);
}
/* blurred cover fill behind the contained image, because black bars are sad */
.slide .fill {
  position: absolute; inset: 0; z-index: -1;
  background-size: cover; background-position: center;
  filter: blur(38px) saturate(180%) brightness(.5); transform: scale(1.2);
}

/* the caption bar. yes it is a gradient. yes it has a text-shadow. it's 2016. */
.slide-caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 10px 14px; font-family: var(--font-cursed); font-size: 13px; color: #ffffff;
  text-shadow: 1px 1px 2px #000000;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.78));
  border-top: 1px solid rgba(255,255,255,.18);
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.slide-caption b { font-weight: bold; }
.slide-caption em { font-style: italic; color: #ffe45e; font-size: 11px; }

/* ken burns, because every 2016 slider had ken burns */
.slide.active img { animation: ken-burns 9s ease-out forwards; }
@keyframes ken-burns { from { transform: scale(1); } to { transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) { .slide.active img { animation: none; } }

/* ---------------------------------------------------------- ARROW BUTTONS */
/* deliberately, aggressively square. windows-xp-ass buttons. */
.slider-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 44px; height: 62px; padding: 0; border-radius: 0 !important;
  font-family: var(--font-cursed); font-size: 22px; font-weight: bold; color: #333333;
  background: linear-gradient(to bottom, #fefefe 0%, #e9e9e9 48%, #d4d4d4 52%, #bcbcbc 100%);
  border: 1px solid #7a7a7a;
  box-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 #a9a9a9, 1px 1px 3px rgba(0,0,0,.55);
  cursor: none; line-height: 60px; text-align: center; text-shadow: 0 1px 0 #ffffff;
  transition: none; /* no fancy easing. 2016 did not have easing. */
}
.slider-arrow:hover { background: linear-gradient(to bottom, #ffffff 0%, #f2f2f2 48%, #e0e0e0 52%, #cacaca 100%); color: #000; }
.slider-arrow:active { background: linear-gradient(to bottom, #bcbcbc, #e9e9e9); box-shadow: inset 1px 1px 3px rgba(0,0,0,.5); padding-top: 2px; }
.slider-arrow--prev { left: 8px; }
.slider-arrow--next { right: 8px; }

/* --------------------------------------------------------- THE BUTTON ROW */
.slider-controls {
  margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 10px; background: #ededed; border: 1px solid #999999; border-radius: 3px;
  box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(0,0,0,.5);
  font-family: var(--font-cursed);
}
.slider-controls .lbl { font-size: 11px; color: #444; margin-right: 4px; font-weight: bold; }
.sq {
  flex: 0 0 auto;
  width: 30px; height: 30px; padding: 0; border-radius: 0 !important;
  font-family: var(--font-cursed); font-size: 12px; color: #222; cursor: none;
  background: linear-gradient(to bottom, #ffffff, #e2e2e2 50%, #cfcfcf 51%, #b8b8b8);
  border: 1px solid #808080;
  box-shadow: inset 0 1px 0 #fff, 1px 1px 2px rgba(0,0,0,.35);
  transition: none;
}
.sq:hover { background: linear-gradient(to bottom, #ffffff, #eeeeee 50%, #dddddd 51%, #c9c9c9); }
.sq:active { box-shadow: inset 1px 1px 3px rgba(0,0,0,.45); }
.sq.on {
  background: linear-gradient(to bottom, #12f5a0, #00b871 51%, #009159);
  color: #002a1b; border-color: #00e08c; font-weight: bold;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 14px rgba(18,245,160,.95);
}
.sq--wide { width: auto; padding: 0 12px; }
.sq--yl.on { background: linear-gradient(to bottom, #ffe45e, #ffd60a 51%, #c99e00); color: #2a2000; border-color: #ffd60a; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 14px rgba(255,214,10,.95); }
.slider-controls .spacer { flex: 1 1 auto; }
.slider-controls .counter { font-size: 11px; color: #333; background: #fff; border: 1px inset #999; padding: 4px 8px; min-width: 62px; text-align: center; }

/* the 2016 progress bar, striped and animated obviously */
.slider-progress { height: 12px; margin-top: 8px; background: #d9d9d9; border: 1px solid #8f8f8f; border-radius: 2px; overflow: hidden; box-shadow: inset 0 1px 3px rgba(0,0,0,.4); }
.slider-progress i {
  display: block; height: 100%; width: 0%;
  background-image: linear-gradient(45deg, rgba(255,255,255,.28) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.28) 50%, rgba(255,255,255,.28) 75%, transparent 75%, transparent);
  background-size: 18px 18px; background-color: #00b871;
  animation: stripes 700ms linear infinite; box-shadow: 0 0 12px rgba(18,245,160,.9);
}
@keyframes stripes { to { background-position: 18px 0; } }

/* -------------------------------------------------------------- THUMBNAILS */
.thumbs { margin-top: 12px; display: flex; gap: 6px; overflow-x: auto; padding: 8px; background: #e4e4e4; border: 1px solid #999; border-radius: 3px; }
.thumb { flex: 0 0 auto; width: 78px; height: 50px; padding: 2px; border-radius: 0 !important; background: #fff; border: 1px solid #808080; cursor: none; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb.on { border: 2px solid #00e08c; padding: 1px; box-shadow: 0 0 12px rgba(18,245,160,.95); }
.thumbs::-webkit-scrollbar { height: 10px; }
.thumbs::-webkit-scrollbar-track { background: #cfcfcf; }
.thumbs::-webkit-scrollbar-thumb { background: linear-gradient(#bdbdbd, #909090); border: 1px solid #777; border-radius: 0; box-shadow: none; }

/* the disclaimer, in the most 2016 way possible */
.gallery-disclaimer {
  margin-top: 12px; font-family: var(--font-cursed); font-size: 11px; color: #cfe9dd;
  text-align: center; opacity: .8;
}
.gallery-disclaimer marquee { color: var(--yl-300); }
.blink-tag { animation: blink 1s steps(1) infinite; color: #ff4d4d; font-weight: bold; }

/* --------------------------------------------------------- small screens */
@media (max-width: 760px) {
  .gallery-cage { padding: 12px; border-radius: 24px; }
  .gallery-wrap::before { inset: -12px; border-radius: 34px; }
  .slider-arrow { width: 34px; height: 50px; font-size: 17px; line-height: 48px; }
  .slider-controls { gap: 5px; padding: 8px; }
  .slider-controls .lbl { width: 100%; margin: 0 0 2px; }
  .slider-controls .spacer { display: none; }
  .sq { width: 26px; height: 26px; font-size: 11px; }
  .sq--wide { padding: 0 8px; }
  .slide-caption { font-size: 11px; padding: 8px 10px; flex-direction: column; gap: 2px; }
  .thumb { width: 60px; height: 40px; }
}