:root {
  --background: #07090d;
  --panel-gap: 4px;
  --auto-speed: 0.018;
  --panel-width: clamp(145px, 20vw, 235px);
  --panel-back: 0.6;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

* {
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background: #050609;
  color: #fff;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Gallery */

.gallery {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1750px;
  background: radial-gradient(circle at center, #222832 0%, #0d1118 42%, #050609 100%);
  overflow: hidden;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.gallery.dragging {
  cursor: grabbing;
}

/* Logo */

.logo {
  position: fixed;
  z-index: 50;
  top: calc(18px + var(--safe-top));
  left: calc(20px + var(--safe-left));
  display: flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  pointer-events: none;
}

.logo-mark {
  width: 25px;
  height: 25px;
  position: relative;
  border: 1px solid rgba(255,255,255,0.75);
  transform: rotate(18deg);
  clip-path: polygon(50% 0%, 100% 38%, 81% 100%, 19% 100%, 0% 38%);
}

.icon {
  width: 37.5px;
  height: 37.5px;
  position: relative;
}

.logo-mark::after {
  content: "";
  position: absolute;
  inset: 5px;
  background: rgba(255,255,255,0.9);
  clip-path: inherit;
}

/* Menu */

.menu-button {
  position: fixed;
  z-index: 150;
  top: calc(17px + var(--safe-top));
  right: calc(20px + var(--safe-right));
  width: 42px;
  height: 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  background: rgba(0,0,0,0.18);
  backdrop-filter: blur(10px);
  color: white;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.menu-button:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.4);
  transform: scale(1.05);
}

.menu-button span {
  width: 17px;
  height: 1px;
  background: white;
  display: block;
  transition: transform 0.3s ease, opacity 0.3s ease;
}


.menu-button.active span:nth-child(1) { /* Menu to X */
  transform: translateY(3px) rotate(45deg);
}

.menu-button.active span:nth-child(2) {
    transform: translateY(-3px) rotate(-45deg);
}

/* Copyright, Current */

.copyright {
  position: fixed;
  bottom: var(--safe-bottom);
  z-index: 50;
  color: rgba(255,255,255,0.65);
  padding: calc(25px + var(--safe-top)) calc(25px + var(--safe-right)) calc(25px + var(--safe-bottom)) calc(25px + var(--safe-left));
  font-size: clamp(11px, 1.2vw, 15px);
  letter-spacing: 0.04em;
  pointer-events: none;
}

.current {
  position: fixed;
  right: var(--safe-right);
  bottom: var(--safe-bottom);
  z-index: 50;
  color: rgba(255,255,255,0.65);
  padding: calc(25px + var(--safe-top)) calc(25px + var(--safe-right)) calc(25px + var(--safe-bottom)) calc(25px + var(--safe-left));
  font-size: clamp(11px, 1.2vw, 15px);
  letter-spacing: 0.04em;
  pointer-events: none;
  text-align: right;
}

/* 3D scene */

.scene {
  display: none;
  width: min(82vw, 700px);
  height: min(82vh, 700px);
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-7deg) rotateY(var(--rotation, 0deg));
}

.pentagon {
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform-style: preserve-3d;
}

/* Faces */

.panel {
  position: absolute;
  left: calc(var(--panel-width) / -2);
  top: 0;
  width: var(--panel-width);
  height: var(--height);
  margin-left: var(--panel-gap);
  margin-top: calc(var(--height) / -2);
  transform-style: preserve-3d;
  transform: rotateY(var(--angle)) translateZ(var(--radius));
  cursor: pointer;
  transition: filter 0.4s ease;
}

/* Images */

.panel-back {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  border-radius: 10px;
  background: #141820;
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.035);
  transform: rotateY(180deg);
  backface-visibility: hidden;
  opacity: var(--panel-back);
}

.panel-front {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  border-radius: 10px;
  background: #141820;
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.035);
}

.panel img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  pointer-events: none;
  transition: transform 0.6s ease, filter 0.6s ease;
}

/* Captions */

.panel-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 42px 15px 15px;
  background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.48), transparent);
  pointer-events: none;
}

.panel-title {
  margin: 0 0 4px;
  font-size: clamp(16px, 1.8vw, 23px);
  font-weight: 700;
  line-height: 1.1;
}

.panel-meta {
  margin: 0;
  color: rgba(255,255,255,0.7);
  font-size: clamp(10px, 0.9vw, 13px);
  line-height: 1.4;
}


/* Info */

.info-page {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(90px + var(--safe-top)) calc(8vw + var(--safe-right)) calc(70px + var(--safe-bottom)) calc(8vw + var(--safe-left));
  background: radial-gradient(circle at 70% 35%, #252b35 0%, #10141b 42%, #06080b 100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(18px);
  transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
  overflow-y: auto;
}

.info-page.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.info-content { /* Content not too large, elegant on large screens */
  width: min(900px, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding-right: 10px;
}

.info-kicker {
  margin: 0 0 14px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.info-title {
  margin: 0 0 12px;
  font-size: clamp(30px, 8vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.info-text {
  max-width: 720px;
  margin: 0;
  color: rgba(255,255,255,0.7);
  font-size: clamp(16px, 2vw, 21px);
  line-height: 1.65;
}

.info-text a {
  color: rgba(255,255,255,0.7);
}

.info-text + .info-text {
  margin-top: 24px;
}

.qr {
  height: 150px;
  width: 150px;
  float: left;
  margin: 8px 20px 20px 0;
}

/* Lightbox */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(25px + var(--safe-top)) calc(25px + var(--safe-right)) calc(25px + var(--safe-bottom)) calc(25px + var(--safe-left));
  background: rgba(0,0,0,0.95);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.lightbox.active {
  opacity: 1;
  visibility: visible;
}

.lightbox-content {
  width: min(96vw, 1500px);
  height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.lightbox-image-wrap {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.lightbox img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 3px;
  box-shadow: 0 30px 100px rgba(0,0,0,0.8);
}

.lightbox-info {
  flex-shrink: 0;
  width: min(800px, 90vw);
  text-align: center;
}

.lightbox-title {
  margin: 0 0 5px;
  font-size: clamp(21px, 3vw, 38px);
  line-height: 1.1;
}

.lightbox-meta {
  margin: 0;
  color: rgba(255,255,255,0.65);
  font-size: clamp(11px, 1.2vw, 15px);
}

/* Mobile portrait */

@media (max-width: 700px) and (orientation: portrait) {
  :root {
    --panel-width: 42vw;
  }

  .scene {
    width: 82vw;
    height: 62vh;
  }

  .panel-info {
    padding: 38px 11px 11px;
  }

  .panel-title {
    font-size: 15px;
  }

  .panel-meta {
    font-size: 10px;
  }

  .logo {
    top: calc(13px + var(--safe-top));
    left: calc(14px + var(--safe-left));
    font-size: 12px;
  }

  .logo-mark {
    width: 21px;
    height: 21px;
  }

  .icon {
    width: 31.5px;
    height: 31.5px;
  }

  .menu-button {
    top: calc(11px + var(--safe-top));
    right: calc(14px + var(--safe-right));
    width: 38px;
    height: 38px;
  }

  .copyright {
    font-size: clamp(11px, 1.2vw, 15px);
  }

  .info-page {
    padding: calc(80px + var(--safe-top)) calc(25px + var(--safe-right)) calc(55px + var(--safe-bottom)) calc(25px + var(--safe-left));
  }

  .info-title {
    margin-bottom: 22px;
  }

  .info-text {
    font-size: 15px;
    line-height: 1.55;
  }

  .lightbox {
    padding: calc(15px + var(--safe-top)) calc(12px + var(--safe-right)) calc(15px + var(--safe-bottom)) calc(12px + var(--safe-left));
  }

  .lightbox-content {
    width: 100%;
    height: 92vh;
    gap: 12px;
  }
}


/* Mobile landscape */

@media (max-height: 600px) and (orientation: landscape) {
  :root {
    --panel-width: 20vw;
  }

  .scene {
    width: 78vh;
    height: 78vh;
  }

  .logo {
    top: calc(10px + var(--safe-top));
    left: calc(14px + var(--safe-left));
    font-size: 11px;
  }

  .logo-mark {
    width: 19px;
    height: 19px;
  }

  .icon {
    width: 28.5px;
    height: 28.5px;
  }
  .menu-button {
    top: calc(8px + var(--safe-top));
    right: calc(14px + var(--safe-right));
    width: 36px;
    height: 36px;
  }

  .copyright {
    font-size: clamp(11px, 1.2vw, 15px);
  }

  .panel-info {
    padding: 32px 9px 9px;
  }

  .panel-title {
    font-size: 13px;
  }

  .panel-meta {
    font-size: 9px;
  }

  .info-page {
    padding: calc(55px + var(--safe-top)) calc(10vw + var(--safe-right)) calc(35px + var(--safe-bottom)) calc(10vw + var(--safe-left));
  }

  .info-title {
    margin-bottom: 16px;
    font-size: 45px;
  }

  .info-text {
    font-size: 13px;
    line-height: 1.45;
  }

  .lightbox-content {
    height: 92vh;
    gap: 8px;
  }

  .lightbox-title {
    font-size: 21px;
  }

  .lightbox-meta {
    font-size: 10px;
  }
}


/* Very small mobile */

@media (max-width: 380px) and (orientation: portrait) {
  :root {
    --panel-width: 43vw;
  }

  .panel-title {
    font-size: 13px;
  }

  .panel-meta {
    font-size: 9px;
  }
}


/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .panel,
  .panel img,
  .lightbox,
  .info-page {
    transition: none;
  }
}