:root {
  --void: #070612;
  --deep: #120b2a;
  --nebula: #2a1450;
  --mist: #eef0ff;
  --accent: #a78bfa;
  --accent-soft: rgba(167, 139, 250, 0.2);
  --muted: rgba(238, 240, 255, 0.7);
  --line: rgba(238, 240, 255, 0.12);
  --card: rgba(14, 12, 36, 0.72);
  --card-hover: rgba(42, 20, 80, 0.55);
  --thumb: #1a1438;
  --nav-h: 3.75rem;
  --content-w: 880px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
}

body {
  position: relative;
  min-height: 100vh;
  font-family: "Outfit", sans-serif;
  color: var(--mist);
  background: var(--void);
  overflow-x: hidden;
}

.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse 55% 40% at 20% 15%, rgba(88, 28, 135, 0.45), transparent 70%),
    radial-gradient(ellipse 50% 45% at 80% 25%, rgba(37, 99, 235, 0.35), transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 85%, rgba(124, 58, 237, 0.28), transparent 75%),
    radial-gradient(ellipse 40% 30% at 70% 70%, rgba(59, 130, 246, 0.18), transparent 70%),
    linear-gradient(165deg, #05040f 0%, var(--deep) 45%, #1a0b36 100%);
}

.sky__nebula {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(circle at 30% 40%, rgba(147, 51, 234, 0.16), transparent 35%),
    radial-gradient(circle at 65% 55%, rgba(59, 130, 246, 0.12), transparent 40%);
  filter: blur(40px);
}

.sky__stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: transparent;
}

.sky__stars--a {
  box-shadow:
    8vw 12vh #fff, 18vw 28vh #e0e7ff, 27vw 8vh #fff, 36vw 42vh #c7d2fe,
    48vw 18vh #fff, 57vw 55vh #e0e7ff, 66vw 22vh #fff, 74vw 48vh #ddd6fe,
    82vw 14vh #fff, 91vw 36vh #e0e7ff, 12vw 62vh #fff, 22vw 78vh #c7d2fe,
    33vw 68vh #fff, 44vw 88vh #e0e7ff, 55vw 72vh #fff, 68vw 84vh #ddd6fe,
    79vw 66vh #fff, 88vw 92vh #e0e7ff, 5vw 40vh #fff, 95vw 58vh #c7d2fe,
    15vw 48vh #fff, 42vw 6vh #e0e7ff, 61vw 38vh #fff, 86vw 8vh #ddd6fe;
  animation: twinkle 3.6s ease-in-out infinite;
}

.sky__stars--b {
  width: 1px;
  height: 1px;
  box-shadow:
    3vw 22vh #fff, 11vw 35vh #a5b4fc, 19vw 51vh #fff, 29vw 19vh #c4b5fd,
    38vw 63vh #fff, 46vw 31vh #a5b4fc, 54vw 9vh #fff, 63vw 47vh #c4b5fd,
    71vw 73vh #fff, 78vw 29vh #a5b4fc, 85vw 51vh #fff, 93vw 17vh #c4b5fd,
    7vw 81vh #fff, 16vw 94vh #a5b4fc, 25vw 4vh #fff, 34vw 76vh #c4b5fd,
    52vw 91vh #fff, 69vw 5vh #a5b4fc, 76vw 88vh #fff, 97vw 74vh #c4b5fd,
    41vw 52vh #fff, 58vw 64vh #a5b4fc, 84vw 41vh #fff, 2vw 67vh #c4b5fd,
    49vw 44vh #fff, 72vw 59vh #a5b4fc, 90vw 82vh #fff, 24vw 57vh #c4b5fd;
  animation: twinkle 2.8s ease-in-out 0.4s infinite;
}

.sky__stars--c {
  width: 3px;
  height: 3px;
  box-shadow:
    14vw 16vh rgba(255, 255, 255, 0.95),
    31vw 34vh rgba(196, 181, 253, 0.9),
    47vw 11vh rgba(255, 255, 255, 0.95),
    64vw 45vh rgba(165, 180, 252, 0.9),
    81vw 23vh rgba(255, 255, 255, 0.95),
    23vw 71vh rgba(196, 181, 253, 0.9),
    56vw 79vh rgba(255, 255, 255, 0.95),
    89vw 62vh rgba(165, 180, 252, 0.9),
    9vw 53vh rgba(255, 255, 255, 0.9),
    73vw 12vh rgba(196, 181, 253, 0.85);
  animation: twinkle 4.4s ease-in-out 1s infinite;
}

.nav,
main {
  position: relative;
  z-index: 1;
}

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
  background: rgba(7, 6, 18, 0.78);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.nav__brand {
  font-family: "Bodoni Moda", serif;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  color: var(--mist);
  text-decoration: none;
}

.nav__links {
  display: flex;
  gap: 0.35rem;
}

.nav__links a {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 0.55rem 0.9rem;
  cursor: pointer;
  transition: color 0.25s ease, background 0.25s ease;
}

.nav__links a:hover,
.nav__links a:focus-visible {
  color: var(--mist);
  background: var(--accent-soft);
  outline: none;
}

.hero,
.section__inner {
  width: min(92vw, var(--content-w));
  margin: 0 auto;
}

.hero {
  text-align: center;
  padding: 3rem 0 4.5rem;
  animation: rise 1.1s var(--ease) both;
}

.hero h1 {
  font-family: "Bodoni Moda", serif;
  font-weight: 700;
  font-size: clamp(2.6rem, 9vw, 5.2rem);
  letter-spacing: 0.04em;
  line-height: 1.05;
  text-shadow: 0 0 28px rgba(167, 139, 250, 0.35);
  animation: title-in 1.2s var(--ease) 0.15s both;
}

.hero h1::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 1px;
  margin: 1.25rem auto 2rem;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: rule 1s ease 0.55s both;
  transform-origin: center;
}

.hero img {
  display: block;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  height: auto;
  object-fit: cover;
  box-shadow:
    0 0 0 1px var(--line),
    0 24px 48px rgba(0, 0, 0, 0.45);
  transition: transform 0.6s var(--ease), box-shadow 0.6s ease;
  animation: rise 1.15s var(--ease) 0.35s both;
}

.hero img:hover {
  transform: translateY(-3px);
  box-shadow:
    0 0 0 1px rgba(167, 139, 250, 0.35),
    0 28px 56px rgba(0, 0, 0, 0.5);
}

.section {
  padding: 5rem 0 6rem;
  border-top: 1px solid var(--line);
  text-align: center;
}

.section h2 {
  font-family: "Bodoni Moda", serif;
  font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  letter-spacing: 0.03em;
  margin-bottom: 1.15rem;
}

.lede {
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--mist);
  margin: 0 auto 1rem;
  max-width: 36rem;
}

.section p {
  color: var(--muted);
  line-height: 1.65;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

.player {
  margin: 2rem auto 2.25rem;
  max-width: 100%;
  animation: rise 0.7s var(--ease) both;
  text-align: left;
}

.player video {
  display: block;
  width: 100%;
  max-height: min(70vh, 540px);
  background: #000;
  box-shadow:
    0 0 0 1px var(--line),
    0 20px 40px rgba(0, 0, 0, 0.45);
}

.player__title {
  margin-top: 0.85rem;
  color: var(--mist);
  font-size: 1.05rem;
  text-align: center;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1.75rem;
  text-align: left;
}

.gallery__status,
.gallery__empty,
.gallery__error {
  grid-column: 1 / -1;
  color: var(--muted);
  padding: 1rem 0;
  text-align: center;
}

.gallery__error {
  color: #f0a8c0;
}

.gallery__card {
  border: 1px solid var(--line);
  background: var(--card);
  color: inherit;
  text-align: left;
  padding: 0;
  overflow: hidden;
  transition:
    border-color 0.25s ease,
    transform 0.35s var(--ease),
    background 0.25s ease,
    grid-column 0.35s var(--ease);
}

.gallery__card:hover {
  border-color: rgba(167, 139, 250, 0.5);
  background: var(--card-hover);
}

.gallery__card.is-active,
.gallery__card.is-expanded {
  border-color: var(--accent);
  background: rgba(42, 20, 80, 0.72);
}

.gallery__card.is-expanded {
  grid-column: 1 / -1;
  transform: none;
}

.gallery__thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--thumb);
  overflow: hidden;
  transition: aspect-ratio 0.35s var(--ease);
}

.gallery__card.is-expanded .gallery__thumb {
  aspect-ratio: 16 / 9;
  max-height: min(70vh, 540px);
}

.gallery__preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

.gallery__preview.is-ready {
  opacity: 1;
}

.gallery__preview.is-fallback {
  opacity: 0;
}

.gallery__card.is-expanded .gallery__preview {
  opacity: 0;
}

.gallery__inline-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  border: 0;
}

.gallery__inline-video[hidden] {
  display: none;
}

.gallery__open {
  appearance: none;
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.gallery__card.is-expanded .gallery__open {
  display: none;
}

.gallery__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: rgba(7, 6, 18, 0.62);
  border: 1px solid rgba(167, 139, 250, 0.55);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  transition: transform 0.35s var(--ease), background 0.25s ease;
  pointer-events: none;
}

.gallery__play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 0.45rem 0 0.45rem 0.75rem;
  border-color: transparent transparent transparent var(--mist);
}

.gallery__open:hover .gallery__play,
.gallery__open:focus-visible .gallery__play {
  transform: scale(1.06);
  background: rgba(167, 139, 250, 0.28);
}

.gallery__open:focus-visible {
  outline: none;
}

.gallery__open:focus-visible .gallery__play {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.gallery__close {
  appearance: none;
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  border: 1px solid rgba(167, 139, 250, 0.45);
  background: rgba(7, 6, 18, 0.78);
  color: var(--mist);
  font: inherit;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.gallery__close:hover,
.gallery__close:focus-visible {
  background: rgba(167, 139, 250, 0.28);
  outline: none;
}

.gallery__meta {
  display: block;
  padding: 0.95rem 1.05rem 1.1rem;
}

.gallery__card-label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.35rem;
}

.gallery__card-title {
  font-family: "Bodoni Moda", serif;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: var(--mist);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes title-in {
  from { opacity: 0; letter-spacing: 0.18em; filter: blur(6px); }
  to { opacity: 1; letter-spacing: 0.04em; filter: blur(0); }
}

@keyframes rule {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}

@keyframes twinkle {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .sky__stars {
    animation: none;
    opacity: 0.75;
  }
}

@media (max-width: 560px) {
  .nav__brand { font-size: 1rem; }
  .nav__links a { padding: 0.45rem 0.65rem; }
}