:root {
  --luxury-gold: #d8b45f;
  --luxury-ink: #050505;
  --luxury-red: #ff2a5f;
  --luxury-cyan: #00ffcc;
}

html {
  scroll-behavior: auto;
}

body {
  cursor: none;
  background:
    radial-gradient(circle at 18% 12%, rgba(216, 180, 95, 0.08), transparent 34rem),
    radial-gradient(circle at 82% 8%, rgba(0, 255, 204, 0.06), transparent 34rem),
    var(--luxury-ink);
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

body::before {
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.035), transparent 22%, transparent 72%, rgba(216, 180, 95, 0.04)),
    radial-gradient(circle at var(--cursor-x, 50%) var(--cursor-y, 50%), rgba(255, 255, 255, 0.055), transparent 18rem);
  mix-blend-mode: screen;
}

body::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 12.5vw 100%;
  opacity: 0.18;
}

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

main > section:first-child,
main > div:first-child > section:first-of-type {
  min-height: 100vh;
}

h1,
h2,
h3,
.hero-title,
.section-title {
  text-wrap: balance;
}

a,
button,
.group,
video,
iframe,
.gallery-item {
  transition:
    border-color 650ms ease,
    color 650ms ease,
    background-color 650ms ease,
    opacity 650ms ease,
    transform 650ms ease,
    box-shadow 650ms ease;
}

a:hover,
button:hover,
.gallery-item:hover {
  transform: translateY(-2px);
}

.cinematic-layer {
  position: fixed;
  pointer-events: none;
  z-index: 0;
}

.ambient-glass,
.grid-current-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.ambient-glass {
  z-index: 1;
  overflow: hidden;
  opacity: 0.5;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  mix-blend-mode: screen;
}

.ambient-glass::before,
.ambient-glass::after {
  content: "";
  position: absolute;
  inset: -18%;
  opacity: 0.26;
  transition:
    background 2200ms ease,
    opacity 2200ms ease,
    transform 4200ms ease;
}

.ambient-glass::before {
  background:
    radial-gradient(circle at 20% 18%, var(--noise-color-a, rgba(255, 42, 95, 0.16)), transparent 24rem),
    radial-gradient(circle at 80% 28%, var(--noise-color-b, rgba(0, 255, 204, 0.12)), transparent 26rem),
    radial-gradient(circle at 50% 82%, var(--noise-color-c, rgba(216, 180, 95, 0.12)), transparent 30rem);
  filter: blur(28px);
  animation: ambientDrift 18s ease-in-out infinite alternate;
}

.ambient-glass::after {
  background:
    repeating-radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.1) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 7px);
  opacity: 0.07;
  filter: blur(0.4px);
}

.grid-current-canvas {
  z-index: 1;
  opacity: 0.62;
  mix-blend-mode: screen;
}

@keyframes ambientDrift {
  0% {
    transform: translate3d(-2%, -1%, 0) scale(1);
  }
  100% {
    transform: translate3d(2%, 1.5%, 0) scale(1.06);
  }
}

.cinematic-layer.layer-one {
  top: -24rem;
  right: -18rem;
  width: 48rem;
  height: 48rem;
  border-radius: 999px;
  background: rgba(216, 180, 95, 0.08);
  filter: blur(80px);
}

.cinematic-layer.layer-two {
  bottom: -22rem;
  left: -18rem;
  width: 44rem;
  height: 44rem;
  border-radius: 999px;
  background: rgba(255, 42, 95, 0.08);
  filter: blur(90px);
}

.cinematic-cursor,
.cinematic-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  z-index: 2000;
}

.cinematic-cursor {
  width: 6px;
  height: 6px;
  background: rgba(255, 255, 255, 0.9);
}

.cinematic-cursor-ring {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(216, 180, 95, 0.55);
  transition:
    width 450ms ease,
    height 450ms ease,
    border-color 450ms ease,
    background 450ms ease;
}

.cursor-active .cinematic-cursor-ring {
  width: 62px;
  height: 62px;
  border-color: rgba(0, 255, 204, 0.7);
  background: rgba(0, 255, 204, 0.04);
}

.cinematic-expand {
  transform-origin: center;
  will-change: transform, opacity;
}

.aspect-video {
  aspect-ratio: 16 / 9;
}

.aspect-\[16\/10\] {
  aspect-ratio: 16 / 10;
}

.aspect-\[4\/5\] {
  aspect-ratio: 4 / 5;
}

.aspect-video iframe,
.aspect-video video {
  width: 100%;
  height: 100%;
}

.youtube-embed {
  position: relative;
  overflow: hidden;
}

.youtube-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
}

.youtube-fallback-card {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #151515;
  color: white;
  text-align: center;
  text-decoration: none;
}

.youtube-fallback-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
  filter: grayscale(1);
}

.youtube-fallback-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.72));
}

.youtube-fallback-content {
  position: relative;
  z-index: 1;
  max-width: 24rem;
  padding: 2rem;
}

.youtube-play-mark {
  display: inline-flex;
  width: 4.5rem;
  height: 4.5rem;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  background: rgba(255, 42, 95, 0.16);
  color: white;
  font-size: 1.8rem;
  line-height: 1;
  margin-bottom: 1.25rem;
}

#works-film,
#works-shooting,
#works-ai,
#works-graphic {
  width: 100%;
  min-width: 0;
}

#works-film > .grid:first-child,
#works-shooting > .grid:first-child,
#works-ai > .grid:first-of-type,
#works-graphic > .grid:first-child {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 3rem;
}

#works-film > .grid:first-child > :first-child,
#works-shooting > .grid:first-child > :first-child,
#works-graphic > .grid:first-child > :first-child {
  grid-column: span 4 / span 4;
}

#works-film > .grid:first-child > :nth-child(2),
#works-shooting > .grid:first-child > :nth-child(2),
#works-graphic > .grid:first-child > :nth-child(2) {
  grid-column: span 8 / span 8;
}

#works-ai > .grid:first-of-type > :first-child {
  grid-column: span 7 / span 7;
}

#works-ai > .grid:first-of-type > :nth-child(2) {
  grid-column: span 5 / span 5;
}

#works-film > .grid:nth-of-type(2) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

#works-shooting > .grid:nth-of-type(2) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

#works-shooting > .grid:nth-of-type(3) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

#works-shooting > .grid:nth-of-type(3) > article {
  grid-column: 1 / -1;
}

#works-film article,
#works-shooting article,
#works-ai a,
#works-graphic button {
  min-width: 0;
}

#works-film p,
#works-shooting p,
#works-ai p,
#works-graphic p {
  overflow-wrap: normal;
  word-break: normal;
}

@media (max-width: 1023px) {
  #works-film > .grid:first-child,
  #works-shooting > .grid:first-child,
  #works-ai > .grid:first-of-type,
  #works-graphic > .grid:first-child,
  #works-film > .grid:nth-of-type(2),
  #works-shooting > .grid:nth-of-type(2),
  #works-shooting > .grid:nth-of-type(3) {
    grid-template-columns: 1fr;
  }

  #works-film > .grid:first-child > *,
  #works-shooting > .grid:first-child > *,
  #works-ai > .grid:first-of-type > *,
  #works-graphic > .grid:first-child > * {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}

@media (hover: none), (pointer: coarse) {
  body {
    cursor: auto;
  }

  .cinematic-cursor,
  .cinematic-cursor-ring {
    display: none;
  }
}