.portfolio-entrance {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: auto;
  background: #11110f;
  color: #f0ede6;
  color-scheme: dark;
  overscroll-behavior: contain;
}
.portfolio-entrance::backdrop { background: #11110f; }
.entrance-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  isolation: isolate;
  overflow: hidden;
}
.entrance-media,
.entrance-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.entrance-media {
  z-index: -2;
  background: #c5c3b4 url('/assets/entrance-reel-poster.webp') center 42% / cover no-repeat;
  filter: saturate(.78) contrast(1.06);
}
.entrance-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.entrance-shade {
  z-index: -1;
  background:
    radial-gradient(ellipse 56% 45% at 50% 50%, rgba(0,0,0,.83) 0%, rgba(0,0,0,.64) 55%, rgba(0,0,0,.06) 100%),
    linear-gradient(180deg, rgba(0,0,0,.12), transparent 25%, transparent 70%, rgba(0,0,0,.24));
}
.entrance-content {
  width: 100%;
  min-width: 0;
  padding: 32px 24px;
  text-align: center;
}
.entrance-name {
  margin: 0;
  font-family: 'Syne', sans-serif;
  font-size: 88px;
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: 0 2px 20px rgba(0,0,0,.4);
}
.entrance-languages {
  display: flex;
  justify-content: center;
  gap: 64px;
  margin-top: 34px;
}
.entrance-languages a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 4px 12px;
  color: #f0ede6;
  border-bottom: 1px solid rgba(240,237,230,.65);
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: 0;
  text-decoration: none;
  touch-action: manipulation;
  transition: color .2s, border-color .2s;
}
.entrance-languages a:hover { color: #c79257; border-color: #c79257; }
.entrance-languages a:focus-visible,
.entrance-socials a:focus-visible,
.entrance-studio:focus-visible,
.entrance-motion:focus-visible {
  outline: 2px solid #c79257;
  outline-offset: 5px;
}
.entrance-socials {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}
.entrance-socials a,
.entrance-studio,
.entrance-motion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  border-radius: 0;
}
.entrance-socials img,
.entrance-studio img,
.entrance-motion img { filter: invert(1); }
.entrance-socials img { width: 22px; height: 22px; }
.entrance-socials a:hover img,
.entrance-studio:hover img { opacity: .68; }
.entrance-studio,
.entrance-motion { position: absolute; bottom: max(14px, env(safe-area-inset-bottom)); }
.entrance-studio { left: max(18px, env(safe-area-inset-left)); }
.entrance-studio { width: 76px; height: 76px; }
.entrance-studio img { width: 56px; height: 56px; }
.entrance-motion {
  right: max(18px, env(safe-area-inset-right));
  cursor: pointer;
}
.entrance-motion img { width: 18px; height: 18px; }
.entrance-motion:hover { background: rgba(0,0,0,.3); }
.entrance-motion[hidden] { display: none; }
html.entrance-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .entrance-video { display: none; }
}
@media (max-width: 1100px) {
  .entrance-name { font-size: 64px; }
}
@media (max-width: 700px) {
  .entrance-name { font-size: 48px; max-width: 460px; margin-inline: auto; }
  .entrance-name span { display: block; }
  .entrance-content { padding: 28px 20px; }
  .entrance-languages { flex-direction: column; align-items: center; gap: 8px; margin-top: 24px; }
  .entrance-languages a { font-size: 24px; }
  .entrance-socials { gap: 6px; margin-top: 16px; }
  .entrance-video { object-position: 25% 42%; }
  .entrance-media { background-position: 25% 42%; }
  .entrance-shade {
    background: radial-gradient(ellipse 90% 38% at 50% 50%, rgba(0,0,0,.86), rgba(0,0,0,.5) 66%, rgba(0,0,0,.12));
  }
}
@media (max-width: 400px) {
  .entrance-name { font-size: 38px; }
}
@media (max-height: 500px) and (min-width: 701px) {
  .entrance-name { font-size: 48px; }
  .entrance-languages { margin-top: 14px; }
}