/* ============================================================
   HENDRIX LABS — core stylesheet
   All-black ice / diamond, max-flash
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Poppins:wght@200;300;400&family=Space+Mono:wght@400;700&display=swap');

:root{
  --black: #030304;
  --black-2: #0a0b0d;
  --ice: #f3fbff;
  --ice-dim: #9fb4c2;
  --chrome-1: #ffffff;
  --chrome-2: #cfe8fb;
  --chrome-3: #6f8fa3;
  --blue: #7fd8ff;
  --blue-deep: #2f8fd6;
  --ease: cubic-bezier(.16,1,.3,1);
}

*{ box-sizing: border-box; margin: 0; padding: 0; }

html,body{
  height: 100%;
  background:
    radial-gradient(1200px 800px at 70% -10%, #12202b 0%, transparent 55%),
    radial-gradient(1000px 700px at 0% 110%, #101a22 0%, transparent 50%),
    #030304;
  background-attachment: fixed;
  color: var(--ice);
  font-family: 'Space Mono', monospace;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* animated ambient aurora behind everything */
.aurora{
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.aurora-blob{
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
  mix-blend-mode: screen;
}
.aurora-blob.b1{
  width: 46vw; height: 46vw;
  left: -8vw; top: -6vw;
  background: radial-gradient(circle, #1c6fae, transparent 68%);
  animation: drift1 18s ease-in-out infinite;
}
.aurora-blob.b2{
  width: 40vw; height: 40vw;
  right: -6vw; top: 20vh;
  background: radial-gradient(circle, #2f9fd6, transparent 66%);
  animation: drift2 22s ease-in-out infinite;
}
.aurora-blob.b3{
  width: 38vw; height: 38vw;
  left: 25vw; bottom: -14vw;
  background: radial-gradient(circle, #155a86, transparent 66%);
  animation: drift3 26s ease-in-out infinite;
}
@keyframes drift1{ 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(6vw,4vh) scale(1.12); } }
@keyframes drift2{ 0%,100%{ transform: translate(0,0) scale(1.05); } 50%{ transform: translate(-5vw,6vh) scale(.92); } }
@keyframes drift3{ 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(4vw,-5vh) scale(1.15); } }

.display{
  font-family: 'Bungee', sans-serif;
  font-weight: 400;
  letter-spacing: .01em;
  text-transform: uppercase;
}

/* iced/chrome shimmer text */
.iced{
  background: linear-gradient(110deg, #7f95a0 10%, #ffffff 25%, #bfe6ff 35%, #ffffff 45%, #7f95a0 60%, #ffffff 75%, #7f95a0 90%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer-sweep 4.5s linear infinite;
}
@keyframes shimmer-sweep{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}

a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; background: none; border: none; color: inherit; cursor: pointer; }

/* film grain, layered over everything */
.noise{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 500;
  opacity: .045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 8s steps(8) infinite;
}
@keyframes grain{
  0%,100%{ transform: translate(0,0); }
  10%{ transform: translate(-2%,-3%); }
  30%{ transform: translate(3%,2%); }
  50%{ transform: translate(-3%,3%); }
  70%{ transform: translate(2%,-2%); }
  90%{ transform: translate(-1%,1%); }
}

/* sparkle / diamond-dust field */
.sparkle-field{
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
}
.sparkle{
  position: absolute;
  width: var(--s, 3px);
  height: var(--s, 3px);
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 6px 1px rgba(255,255,255,.9), 0 0 14px 3px rgba(127,216,255,.5);
  opacity: 0;
  animation: twinkle var(--dur, 3.5s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes twinkle{
  0%, 100%{ opacity: 0; transform: scale(.4); }
  50%{ opacity: 1; transform: scale(1.4); }
}

/* ============================== GATE ============================== */
#gate{
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  /* solid black — the video stays hidden until Enter is clicked */
  background: #030304;
  transition: opacity 1.1s var(--ease), visibility 1.1s var(--ease);
}
#gate.gate-hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.gate-inner{
  text-align: center;
  padding: 3rem 2.4rem;
  position: relative;
  z-index: 10;
}
.gate-inner::before{
  content: '';
  position: absolute;
  left: 50%; top: 40%;
  width: 80vw; max-width: 720px;
  aspect-ratio: 3 / 2;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(47,158,87,.22), transparent 62%);
  filter: blur(30px);
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  animation: glow-in 2.2s var(--ease) .3s forwards;
}
@keyframes glow-in{ to{ opacity: 1; } }

.smoke{
  position: absolute;
  left: 50%;
  top: -60px;
  transform: translateX(-50%);
  width: min(700px, 96vw);
  height: 540px;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  animation: glow-in 2.4s ease .9s forwards;
}

.logo-wrap{
  position: relative;
  z-index: 1;
}
.gate-logo{
  display: block;
  width: min(540px, 84vw);
  margin: 0 auto 2.6rem;
  opacity: 0;
  transform: translateY(18px) scale(.95);
  filter: drop-shadow(0 10px 40px rgba(127,178,63,.35));
  animation:
    logo-in 1.4s var(--ease) .2s both,
    logo-float 6.5s ease-in-out 1.7s infinite;
}
@keyframes logo-in{
  0%{ opacity: 0; transform: translateY(18px) scale(.95); }
  100%{ opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes logo-float{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-9px); }
}

.gate-mark{
  font-family: 'Poppins', sans-serif;
  font-weight: 200;
  font-size: clamp(1.5rem, 6vw, 3.1rem);
  text-transform: uppercase;
  color: #f6fbff;
  letter-spacing: .42em;
  padding-left: .42em;          /* balances trailing letter-spacing */
  margin-bottom: 2.8rem;
  white-space: nowrap;
}
.gate-mark .ltr{
  display: inline-block;
  opacity: 0;
  transform: translateY(.5em) scale(.96);
  filter: blur(9px);
  animation: ltr-in 1s var(--ease) forwards;
}
.gate-mark .sp{ display: inline-block; width: .5em; }
@keyframes ltr-in{
  to{ opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.enter-btn{
  position: relative;
  padding: 1.05rem 3.8rem;
  border: 1px solid rgba(150,240,185,.45);
  border-radius: 12px;
  background: linear-gradient(180deg, #57cf88 0%, #34a85f 52%, #2b8f51 100%);
  color: #04160b;
  letter-spacing: .3em;
  font-size: .82rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow:
    0 10px 28px rgba(24,120,62,.42),
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -2px 6px rgba(0,40,18,.28);
  opacity: 0;
  overflow: hidden;
  isolation: isolate;
  animation: fade-up .5s var(--ease) .4s forwards;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
}
.enter-btn span{ position: relative; z-index: 1; padding-left: .3em; }
/* sheen that sweeps across on hover */
.enter-btn::after{
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-14deg);
  transition: left .55s var(--ease);
  z-index: 0;
}
.enter-btn:hover{
  transform: translateY(-2px);
  box-shadow:
    0 16px 38px rgba(24,120,62,.6),
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -2px 6px rgba(0,40,18,.28);
  filter: brightness(1.06);
}
.enter-btn:hover::after{ left: 130%; }
.enter-btn:active{ transform: translateY(0); }

.logo-img{
  width: 132px;
  height: auto;
  filter: drop-shadow(0 4px 14px rgba(47,158,87,.35));
}

.age-gate{
  margin-top: 2.6rem;
  font-size: .58rem;
  letter-spacing: .22em;
  color: rgba(159,180,194,.5);
  max-width: 340px;
  margin-inline: auto;
  opacity: 0;
  animation: fade-up 1.1s var(--ease) 2.3s forwards;
}

/* light-sweep still used by the CTA boxes after Enter */
@keyframes glint-sweep{
  0%{ left: -75%; }
  35%, 100%{ left: 130%; }
}

@keyframes fade-up{
  from{ opacity: 0; transform: translateY(14px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* ============================== SITE / HERO ============================== */
#site{ position: relative; z-index: 1; min-height: 100vh; overflow: hidden; }
#site.hidden{ display: none; }

#bgVideo{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;               /* sits above the page background, below gate/site */
  filter: saturate(1.02) contrast(1.08) brightness(.95);
}

.overlay-gradient{
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(3,3,4,.8) 0%, rgba(3,3,4,.3) 30%, rgba(3,3,4,.5) 68%, rgba(3,3,4,.94) 100%);
}

.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding: 1.6rem 2rem 0;
}
.logo{
  font-family: 'Bungee', sans-serif;
  letter-spacing: .04em;
  font-size: 1.05rem;
  text-transform: uppercase;
}

.hero{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.6rem;
  padding: 7rem 1.5rem 5rem;
}

.hero-head{
  text-align: center;
  opacity: 0;
  animation: fade-up .9s var(--ease) forwards;
}
.hero-title{
  font-size: clamp(2.4rem, 9vw, 5.2rem);
  line-height: .9;
  filter: drop-shadow(0 0 24px rgba(127,216,255,.28));
}
.hero-title span{ display: inline; }
.hero-rule{
  width: 0;
  height: 2px;
  margin: 1.2rem auto 0;
  background: linear-gradient(90deg, transparent, var(--chrome-2), transparent);
  animation: rule-grow 1.1s var(--ease) .5s forwards;
}
@keyframes rule-grow{ to{ width: min(240px, 60vw); } }

.cta-stack{
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  width: 100%;
  max-width: 420px;
}

.cta-box{
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 1.5rem;
  border: 1.5px solid rgba(207,232,251,.28);
  background: linear-gradient(155deg, rgba(20,24,28,.55), rgba(6,7,8,.55));
  backdrop-filter: blur(8px);
  transform: translateY(24px);
  opacity: 0;
  animation: fade-up .9s var(--ease) forwards;
  transition: border-color .35s var(--ease), background .35s var(--ease), transform .25s var(--ease), box-shadow .35s var(--ease);
  overflow: hidden;
}
.cta-box::after{
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent);
  animation: glint-sweep 4.5s ease-in-out infinite;
}
.cta-box:nth-child(1){ animation-delay: .08s; }
.cta-box:nth-child(1)::after{ animation-delay: .6s; }
.cta-box:nth-child(2){ animation-delay: .18s; }
.cta-box:nth-child(2)::after{ animation-delay: 1.6s; }
.cta-box:nth-child(3){ animation-delay: .28s; }
.cta-box:nth-child(3)::after{ animation-delay: 2.6s; }

.cta-box:hover{
  transform: translateY(-4px) scale(1.015);
  background: linear-gradient(155deg, rgba(28,34,40,.7), rgba(8,9,10,.7));
}
.cta-box[data-cta="telegram"]:hover{ border-color: #6fc4ff; box-shadow: 0 0 34px rgba(111,196,255,.3); }
.cta-box[data-cta="signal"]:hover{ border-color: #8fb3ff; box-shadow: 0 0 34px rgba(143,179,255,.3); }
.cta-box[data-cta="gallery"]:hover{ border-color: var(--chrome-2); box-shadow: 0 0 34px rgba(255,255,255,.28); }

.cta-icon-wrap{
  flex-shrink: 0;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(207,232,251,.22);
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  transition: border-color .35s var(--ease), background .35s var(--ease);
}
.cta-box:hover .cta-icon-wrap{ background: rgba(255,255,255,.08); border-color: rgba(207,232,251,.5); }
.cta-icon{ width: 24px; height: 24px; }
.cta-text{ display: flex; flex-direction: column; gap: .25rem; }
.cta-label{ font-family: 'Bungee', sans-serif; letter-spacing: .03em; font-size: 1rem; text-transform: uppercase; }
.cta-sub{ font-size: .6rem; letter-spacing: .18em; color: var(--ice-dim); text-transform: uppercase; }
.cta-arrow{ margin-left: auto; opacity: .45; font-size: 1.2rem; transition: transform .3s var(--ease), opacity .3s var(--ease); }
.cta-box:hover .cta-arrow{ transform: translateX(4px); opacity: 1; }

/* marquee ticker */
.marquee{
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 40;
  overflow: hidden;
  border-top: 1px solid rgba(207,232,251,.18);
  background: rgba(3,3,4,.6);
  backdrop-filter: blur(4px);
  padding: .6rem 0;
}
.marquee-track{
  display: inline-flex;
  white-space: nowrap;
  animation: scroll-left 20s linear infinite;
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ice-dim);
}
.marquee-track span{ padding: 0 1.2rem; }
.marquee-track span::after{ content: '◆'; margin-left: 1.2rem; color: var(--blue); font-size: .55rem; vertical-align: middle; }
@keyframes scroll-left{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

.sound-toggle{
  position: fixed;
  bottom: 4.3rem;
  right: 1.5rem;
  z-index: 45;
  width: 46px; height: 46px;
  border: 1.5px solid rgba(207,232,251,.35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(3,3,4,.55);
  backdrop-filter: blur(4px);
  transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.sound-toggle:hover{ border-color: var(--chrome-2); transform: scale(1.08); box-shadow: 0 0 20px rgba(207,232,251,.35); }
.sound-toggle svg{ width: 18px; height: 18px; }

/* ============================== GALLERY OVERLAY ============================== */
.gallery-overlay{
  position: fixed;
  inset: 0;
  z-index: 700;
  overflow-y: auto;
  /* translucent so the video keeps living, blurred, behind the menu */
  background:
    radial-gradient(1200px 800px at 75% -10%, rgba(24,44,60,.5) 0%, transparent 55%),
    linear-gradient(180deg, rgba(3,4,6,.72), rgba(3,4,6,.86));
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity .5s var(--ease), visibility .5s var(--ease), transform .5s var(--ease);
}
.gallery-overlay.open{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* while the gallery is open, fade the hero away but keep the video running */
#site.gallery-open .site-header,
#site.gallery-open .hero,
#site.gallery-open .sound-toggle,
#site.gallery-open #heroSparkles{
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--ease);
}

.gallery-body{ background: transparent; min-height: 100vh; }

.gal-header{
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.3rem 1.8rem;
  border-bottom: 1px solid rgba(207,232,251,.15);
  background: rgba(3,3,4,.9);
  backdrop-filter: blur(8px);
}
.back-link{
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ice-dim);
  transition: color .3s var(--ease);
}
.back-link:hover{ color: var(--chrome-2); }

.gal-main{ max-width: 1000px; margin: 0 auto; padding: 4.5rem 1.8rem 6rem; position: relative; z-index: 10; text-align: center; }

.page-title{
  font-size: clamp(2.6rem, 8vw, 4.6rem);
  margin-bottom: .8rem;
  filter: drop-shadow(0 0 24px rgba(127,216,255,.25));
  opacity: 0;
  animation: fade-up .8s var(--ease) forwards;
}
.page-sub{
  font-size: .66rem;
  letter-spacing: .38em;
  color: var(--ice-dim);
  text-transform: uppercase;
  margin-bottom: 3.4rem;
  opacity: 0;
  animation: fade-up .8s var(--ease) .1s forwards;
}
.category-grid, #itemSection{ text-align: left; }
#itemSectionTitle{ text-align: center; }

.category-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 360px));
  justify-content: center;
  gap: 1.6rem;
}

.cat-tile{
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: 14px;
  border: 1.5px solid rgba(207,232,251,.2);
  cursor: pointer;
  opacity: 0;
  transform: translateY(28px);
  animation: fade-up .7s var(--ease) forwards;
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease);
}
.cat-tile::after{
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 55%; height: 100%;
  z-index: 3;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.14), transparent);
  transform: skewX(-12deg);
  transition: left .7s var(--ease);
  pointer-events: none;
}
.cat-tile:hover{
  transform: translateY(-6px);
  border-color: var(--chrome-2);
  box-shadow: 0 18px 50px rgba(0,0,0,.45), 0 0 34px rgba(207,232,251,.28);
}
.cat-tile:hover::after{ left: 130%; }
.cat-tile-media{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: #101315;
  transition: transform .6s var(--ease), filter .6s var(--ease);
  filter: grayscale(.65) brightness(.55) contrast(1.1);
}
.cat-tile:hover .cat-tile-media{
  transform: scale(1.07);
  filter: grayscale(.1) brightness(.7) contrast(1.1);
}
.cat-tile-scrim{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(3,3,4,.1) 30%, rgba(3,3,4,.92) 100%);
}
.cat-tile-info{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.3rem;
}
.cat-tile-name{
  font-size: 1.4rem;
  letter-spacing: .01em;
}
.cat-tile-count{
  font-size: .62rem;
  letter-spacing: .22em;
  color: var(--blue);
  text-transform: uppercase;
  margin-top: .35rem;
  display: block;
}
.cat-tile-noimg-label{
  position: absolute;
  bottom: 3.2rem;
  left: 1.3rem;
  right: 1.3rem;
  font-size: .58rem;
  letter-spacing: .05em;
  color: rgba(207,232,251,.35);
  word-break: break-all;
}

.item-section{ margin-top: 1rem; }
.item-section.hidden{ display: none; }

.section-back{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ice-dim);
  margin-bottom: 1.6rem;
  transition: color .3s var(--ease);
}
.section-back:hover{ color: var(--chrome-2); }

#itemSectionTitle{
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: 2rem;
}

.item-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.item-tile{
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  border: 1.5px solid rgba(207,232,251,.15);
  cursor: pointer;
  background-color: #0c0e10;
  opacity: 0;
  transform: translateY(20px);
  animation: fade-up .6s var(--ease) forwards;
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.item-tile:hover{ border-color: var(--chrome-2); box-shadow: 0 0 26px rgba(207,232,251,.22); }
.item-tile img, .item-tile video{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.item-tile:hover img, .item-tile:hover video{ transform: scale(1.08); }
.item-tile .play-badge{
  position: absolute;
  top: .6rem; right: .6rem;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(3,3,4,.65);
  border: 1px solid rgba(207,232,251,.3);
  display: flex; align-items: center; justify-content: center;
}
.item-tile .play-badge svg{ width: 11px; height: 11px; }
.item-tile.placeholder{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: .8rem;
  font-size: .56rem;
  letter-spacing: .05em;
  color: rgba(207,232,251,.3);
  background:
    repeating-linear-gradient(45deg, rgba(207,232,251,.03) 0 10px, transparent 10px 20px);
}

/* lightbox */
.lightbox{
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(2,2,3,.97);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s var(--ease);
}
.lightbox.open{ opacity: 1; visibility: visible; }
#lightboxContent{ max-width: min(90vw, 900px); max-height: 84vh; }
#lightboxContent img, #lightboxContent video{
  max-width: 100%;
  max-height: 84vh;
  display: block;
  margin: 0 auto;
  box-shadow: 0 0 70px rgba(127,216,255,.15);
}
.lightbox button{
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.4rem;
  color: var(--ice-dim);
  transition: color .3s var(--ease);
}
.lightbox button:hover{ color: var(--chrome-2); }
#lightboxPrev{ left: 1.2rem; }
#lightboxNext{ right: 1.2rem; }
#lightboxClose{
  top: 1.4rem;
  transform: none;
  right: 1.4rem;
  left: auto;
  font-size: 2rem;
}

@media (max-width: 640px){
  .lightbox button{ font-size: 1.8rem; }
  #lightboxPrev{ left: .3rem; }
  #lightboxNext{ right: .3rem; }
}