/* ============================================================
   Four-second 9:16 crest drawing entrance
   ============================================================ */
.entry-cinema {
  position: fixed;
  inset: 0;
  z-index: 16000;
  display: none;
  overflow: hidden;
  background: #071b15;
  opacity: 0;
  transition: opacity .7s ease;
  pointer-events: auto;
}
.entry-cinema.is-playing { display: block; opacity: 1; }
.entry-cinema.is-leaving { opacity: 0; transition: opacity .62s ease; }
.entry-cinema.is-leaving .entry-video-frame {
  opacity: 0;
  transition: opacity .55s ease;
}

.entry-video-frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}
.entry-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.008);
  filter: saturate(.94) contrast(1.025) sepia(.05);
  animation: entry-video-drift 4.2s ease both;
  background: #f7f4ec url("./entry-portal-v4-poster.jpg") center / cover no-repeat;
}
.entry-video-tint {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 48%, transparent 0 42%, rgba(7, 32, 24, .08) 74%, rgba(7, 32, 24, .22) 100%),
    linear-gradient(180deg, rgba(247, 244, 236, .58) 0%, rgba(247, 244, 236, .04) 18%, transparent 58%, rgba(7, 32, 24, .14) 100%);
}
.entry-video-tint::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .3;
  background-image:
    radial-gradient(1px 1px at 18% 26%, rgba(136, 101, 57, .3), transparent 2px),
    radial-gradient(1px 1px at 76% 64%, rgba(48, 105, 81, .25), transparent 2px),
    radial-gradient(1px 1px at 56% 82%, rgba(180, 140, 82, .25), transparent 2px);
  background-size: 270px 270px, 330px 330px, 300px 300px;
}
.entry-video-brand {
  position: absolute;
  top: max(28px, env(safe-area-inset-top));
  left: 50%;
  z-index: 4;
  transform: translateX(-50%);
  text-align: center;
  opacity: 0;
  animation: entry-brand 4s ease both;
}
.entry-video-brand span {
  display: block;
  color: rgba(138, 101, 54, .78);
  font-size: 6px;
  font-weight: 700;
  letter-spacing: .34em;
  line-height: 1.6;
  text-transform: uppercase;
}
.entry-video-brand strong {
  display: block;
  margin-top: 3px;
  color: rgba(26, 67, 52, .86);
  font-family: var(--serif, Georgia, serif);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
}
.entry-video-copy {
  position: absolute;
  left: 50%;
  bottom: max(8%, calc(env(safe-area-inset-bottom) + 20px));
  z-index: 4;
  width: min(84vw, 380px);
  transform: translateX(-50%);
  text-align: center;
  opacity: 0;
  animation: entry-video-copy 4s ease both;
}
.entry-video-copy h2 {
  margin: 0;
  color: #183f32;
  font-family: var(--serif, Georgia, serif);
  font-size: clamp(18px, 4.4vw, 23px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .1em;
}
.entry-video-copy p {
  margin: 7px 0 0;
  color: rgba(126, 91, 47, .78);
  font-size: 8px;
  letter-spacing: .24em;
  line-height: 1.5;
}
.entry-video-breath {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(circle at 50% 48%, rgba(255, 255, 255, .16), transparent 42%);
  animation: entry-video-breath 2.4s ease-in-out infinite;
}

@keyframes entry-video-drift {
  0% { transform: scale(1.008); }
  100% { transform: scale(1.045); }
}
@keyframes entry-brand {
  0% { opacity: 0; transform: translate(-50%, -6px); }
  12%, 85% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -4px); }
}
@keyframes entry-video-copy {
  0%, 63% { opacity: 0; transform: translate(-50%, 7px); }
  73%, 91% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -3px); }
}
@keyframes entry-video-breath {
  0%, 100% { opacity: .25; }
  50% { opacity: .55; }
}
@media (max-width: 420px) {
  .entry-video-brand { top: max(20px, env(safe-area-inset-top)); }
  .entry-video-copy { bottom: max(6.5%, calc(env(safe-area-inset-bottom) + 16px)); }
}
@media (prefers-reduced-motion: reduce) {
  .entry-cinema { display: none !important; }
  .entry-video, .entry-video-brand, .entry-video-copy, .entry-video-breath { animation: none !important; }
}