/* Full-viewport selected-work composition. */

.cinematic-preview {
  --cinematic-bev: var(--bev);
  --cinematic-storm: var(--storm);
  --cinematic-ygg: var(--ygr);
  height: 100svh;
  overflow: hidden;
}

.cinematic-preview__stage {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  height: 100svh;
  min-height: 600px;
  margin: 0;
  perspective: 1400px;
  transition: opacity 320ms var(--ease), filter 320ms var(--ease);
}

.cinematic-project {
  --cinematic-accent: var(--text);
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  text-decoration: none;
  background: var(--surface-lo);
  border: 0;
  box-shadow: none;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

.cinematic-project--bev {
  --accent: var(--cinematic-bev);
  --cinematic-accent: var(--cinematic-bev);
  border-radius: 0;
}

.cinematic-project--storm {
  --accent: var(--cinematic-storm);
  --cinematic-accent: var(--cinematic-storm);
  border-radius: 0;
}

.cinematic-project__art,
.cinematic-project__shade {
  position: absolute;
  inset: 0;
  display: block;
}

.cinematic-project__art {
  z-index: -2;
  overflow: hidden;
  transition: transform 800ms var(--ease-out), filter 420ms var(--ease);
}

.cinematic-project__shade {
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(5, 5, 8, .88) 0%, rgba(5, 5, 8, .28) 44%, rgba(5, 5, 8, .08) 72%),
    radial-gradient(circle at 50% 82%, color-mix(in srgb, var(--cinematic-accent) 18%, transparent), transparent 48%);
}

.cinematic-project:hover .cinematic-project__art,
.cinematic-project:focus-visible .cinematic-project__art {
  transform: scale(1.04);
  filter: brightness(.88) saturate(1.08);
}

.cinematic-project__art--storm > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% center;
}

.cinematic-project__art--storm {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 18%, #000 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 18%, #000 100%);
}

.cinematic-project__art--bev {
  background:
    radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--cinematic-bev) 22%, transparent), transparent 48%),
    linear-gradient(145deg, #17100D, #09090B 72%);
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 82%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 82%, transparent 100%);
}

.cinematic-project__art--bev::before {
  content: '';
  position: absolute;
  inset: -6% -12% -6% 20%;
  background: url('img/bev-m-earnings.webp') 88% 50% / auto 108% no-repeat;
  opacity: 0;
  filter: blur(2px) saturate(.85);
  -webkit-mask-image: linear-gradient(90deg, transparent 4%, #000 48%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 4%, #000 48%, transparent 100%);
  transition: opacity 500ms var(--ease);
  pointer-events: none;
}

.cinematic-project__art--bev .deck {
  inset: 0;
  transform: scale(1.08);
  transform-origin: center;
}

.cinematic-project__art--bev .deck:has(.deck__shot:hover),
.cinematic-project__art--bev .deck.is-lifted {
  transform: translateY(-12px) scale(1.12);
}

.cinematic-project__art--bev .deck__shot--hero {
  top: 50%;
  transform: translate(-50%, -50%);
}

.cinematic-project__art--bev .deck__shot--left,
.cinematic-project__art--bev .deck__shot--right {
  top: 50%;
  transform: translateY(-50%) rotate(var(--tilt));
}

.cinematic-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 6;
  display: grid;
  justify-items: center;
  align-content: center;
  width: max-content;
  max-width: 76%;
  min-height: 0;
  padding: .3rem .55rem .45rem;
  overflow: visible;
  transform: translate(-50%, -50%);
  transition:
    transform 300ms var(--ease-out),
    filter 300ms var(--ease);
}

.cinematic-project--bev .cinematic-logo { top: calc(50% - 12px); }

.cinematic-logo:hover,
.cinematic-project:focus-visible .cinematic-logo {
  transform: translate(-50%, calc(-50% - 6px)) scale(1.025);
  filter: brightness(1.08);
}

.cinematic-logo__image {
  width: 100%;
  max-width: 100%;
  height: 78px;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .72));
  transition: transform 300ms var(--ease-out), filter 300ms var(--ease);
}

.cinematic-logo__image--bev {
  width: clamp(200px, 19vw, 310px);
  height: auto;
}

.cinematic-logo__image--storm {
  width: clamp(360px, 36vw, 620px);
  height: auto;
}

.cinematic-logo:hover .cinematic-logo__image,
.cinematic-project:focus-visible .cinematic-logo__image {
  transform: scale(1.045);
  filter:
    brightness(1.15)
    drop-shadow(0 12px 22px rgba(0, 0, 0, .78))
    drop-shadow(0 0 18px color-mix(in srgb, var(--cinematic-accent) 72%, transparent));
}

.cinematic-logo__info {
  display: grid;
  grid-template-rows: 0fr 0fr;
  justify-items: center;
  gap: 0;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-5px);
  color: #fff;
  font-size: .78rem;
  line-height: 1.3;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .95);
  transition:
    grid-template-rows 280ms var(--ease-out),
    gap 280ms var(--ease-out),
    margin-top 280ms var(--ease-out),
    opacity 180ms var(--ease),
    transform 280ms var(--ease-out);
}

.cinematic-project--storm .cinematic-logo__info b { color: var(--storm-gold); }

.cinematic-project:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--cinematic-accent) 88%, white);
  outline-offset: -4px;
}

.cinematic-logo__info > * { overflow: hidden; }

.cinematic-logo__info > span {
  color: #fff;
  font-size: .86rem;
}

.cinematic-logo__info b {
  color: var(--cinematic-accent);
  font-size: .61rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.cinematic-logo:hover .cinematic-logo__info,
.cinematic-project:focus-visible .cinematic-logo__info {
  grid-template-rows: 1fr 1fr;
  gap: .18rem;
  margin-top: .35rem;
  opacity: 1;
  transform: none;
}

.cinematic-project--ygg {
  --cinematic-accent: #D889FF;
  position: absolute;
  left: 50%;
  bottom: clamp(5.6rem, 13svh, 7rem);
  z-index: 10;
  width: 160px;
  min-height: 160px;
  overflow: visible;
  border: 2px solid transparent;
  border-radius: 50%;
  background:
    linear-gradient(#08080B, #08080B) padding-box,
    conic-gradient(from 210deg, #FF5FA2, #A56CFF, #53C7FF, #7FDBB6, #F4D35E, #FF8A3D, #FF5FA2) border-box;
  transform: translateX(-50%);
  box-shadow:
    0 22px 54px -18px rgba(0, 0, 0, .9),
    -16px 2px 34px -12px rgba(83, 199, 255, .72),
    14px -5px 34px -12px rgba(255, 95, 162, .72),
    4px 14px 38px -13px rgba(244, 211, 94, .7);
  transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease);
}

.cinematic-project--ygg:hover,
.cinematic-project--ygg:focus-visible {
  transform: translateX(-50%);
  box-shadow:
    0 28px 64px -18px rgba(0, 0, 0, .94),
    -20px 3px 46px -10px rgba(83, 199, 255, .84),
    18px -7px 46px -10px rgba(255, 95, 162, .84),
    5px 17px 50px -11px rgba(244, 211, 94, .82);
}

.cinematic-project--ygg__logo {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: inherit;
}

.cinematic-logo__info--ygg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 0;
  margin-top: 0;
  overflow: visible;
  opacity: 0;
  transform: none;
  pointer-events: none;
  font-family: var(--display);
  font-weight: 400;
}

.cinematic-logo__info--ygg > * {
  position: absolute;
  top: 50%;
  overflow: visible;
  white-space: nowrap;
  transition: transform 300ms var(--ease-out);
}

.cinematic-logo__info--ygg > span {
  right: calc(100% + .85rem);
  transform: translate(8px, -50%);
}

.cinematic-logo__info--ygg > b {
  left: calc(100% + .85rem);
  color: var(--cinematic-ygg);
  transform: translate(-8px, -50%);
}

.cinematic-project--ygg:hover .cinematic-logo__info--ygg,
.cinematic-project--ygg:focus-visible .cinematic-logo__info--ygg {
  opacity: 1;
  transform: none;
}

.cinematic-project--ygg:hover .cinematic-logo__info--ygg > *,
.cinematic-project--ygg:focus-visible .cinematic-logo__info--ygg > * {
  transform: translate(0, -50%);
}

.cinematic-preview__foot {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  padding: 0 0 1rem;
}

.me-open .cinematic-preview__stage {
  pointer-events: none;
  opacity: .18;
  filter: blur(7px);
}

.me-open:hover:not(:has(.me__panel:hover)):not(:has(.me__dot:hover)) .cinematic-preview__stage {
  opacity: .82;
  filter: blur(1px);
}

@media (min-width: 821px) and (min-height: 900px) {
  .cinematic-project__art--bev::before { opacity: .14; }
}

@media (max-width: 820px) {
  .cinematic-preview__stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 0;
    width: 100%;
    height: 100svh;
    min-height: 0;
    margin: 0;
  }

  .cinematic-project--bev,
  .cinematic-project--storm {
    height: 50svh;
    min-height: 0;
    border: 0;
    border-radius: 0;
  }

  .cinematic-project__art--bev {
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%);
  }

  .cinematic-project__art--storm {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 100%);
  }

  .cinematic-project__art--bev .deck { inset: 0; }

  .cinematic-project__art--bev .deck__shot--hero { width: 40%; }

  .cinematic-project__art--bev .deck__shot--left,
  .cinematic-project__art--bev .deck__shot--right { width: 36%; }

  .cinematic-project__art--bev .deck__shot--left { left: -4%; }
  .cinematic-project__art--bev .deck__shot--right { right: -4%; }

  .cinematic-logo { max-width: 88%; }

  .cinematic-logo__image--bev {
    width: clamp(168px, 48vw, 210px);
    height: auto;
  }

  .cinematic-logo__image--storm {
    width: min(78vw, 360px);
    height: auto;
  }

  .cinematic-project--ygg {
    position: absolute;
    left: 50%;
    bottom: calc(50svh - 56px);
    width: 112px;
    min-height: 112px;
    margin: 0;
    transform: translateX(-50%);
  }

  .cinematic-project--ygg:hover,
  .cinematic-project--ygg:focus-visible { transform: translateX(-50%); }

  .cinematic-preview__foot { padding: 0 0 .75rem; }
}

@media (hover: none), (max-width: 600px) {
  .cinematic-logo {
    min-height: 0;
    width: min(88%, 340px);
    max-width: 88%;
  }

  .cinematic-logo__info {
    grid-template-rows: 1fr 1fr;
    gap: .18rem;
    margin-top: .35rem;
    opacity: 1;
    transform: none;
  }

  .cinematic-logo__info--ygg { opacity: 1; }

  .cinematic-logo__info--ygg > * { transform: translate(0, -50%); }
}

@media (max-width: 820px) {
  .cinematic-logo__info:not(.cinematic-logo__info--ygg) {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .35rem;
    width: max-content;
    max-width: 100%;
    white-space: nowrap;
  }

  .cinematic-logo__info:not(.cinematic-logo__info--ygg) b::before { content: '('; }
  .cinematic-logo__info:not(.cinematic-logo__info--ygg) b::after { content: ')'; }

  .cinematic-logo__info--ygg { display: none; }
}

@media (max-width: 420px) {
  .cinematic-logo {
    width: min(82%, 310px);
    padding-inline: .9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cinematic-project__art,
  .cinematic-project:hover .cinematic-project__art,
  .cinematic-project:focus-visible .cinematic-project__art {
    transform: none;
    filter: none;
  }

  .cinematic-logo,
  .cinematic-logo:hover,
  .cinematic-project:focus-visible .cinematic-logo {
    transform: translate(-50%, -50%);
    filter: none;
  }

  .cinematic-logo__image,
  .cinematic-logo:hover .cinematic-logo__image,
  .cinematic-project:focus-visible .cinematic-logo__image {
    transform: none;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .72));
  }

  .cinematic-logo__info {
    grid-template-rows: 1fr 1fr;
    gap: .18rem;
    margin-top: .35rem;
    opacity: 1;
    transform: none;
  }

  .cinematic-project--ygg,
  .cinematic-project--ygg:hover,
  .cinematic-project--ygg:focus-visible {
    transform: translateX(-50%);
  }

  .cinematic-logo__info--ygg { opacity: 1; }

  .cinematic-logo__info--ygg > * { transform: translate(0, -50%); }
}