.greet { position: relative; height: calc(100vh + var(--sheet-r, 0px)); height: calc(100svh + var(--sheet-r, 0px)); background: var(--ink); color: var(--bone);
  isolation: isolate; }   

.greet { margin-top: calc(100lvh - 100svh); }

@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) { .js .greet { margin-top: -100vh; margin-top: -100svh; } }

.greet-stage { position: sticky; top: 0; height: 100vh; height: 100svh; box-sizing: border-box; overflow: hidden;
  --s: min(calc(78svh / 756), calc(88vw / 1310));
  --x: calc(97.5vw - var(--s) * 648); --y: calc(50svh + 16px);
  display: grid; grid-template-columns: minmax(0, calc(86vw - var(--s) * 784)) 1fr; grid-template-rows: auto 1fr auto;
  
  padding: 0 0 calc(100svh - var(--y) - var(--s) * 378) var(--m); }

.greet h2 { grid-column: 1; grid-row: 1; margin-top: calc(var(--y) - var(--s) * 378); position: relative; z-index: 1;
  font: 400 var(--h2)/0.98 var(--display); letter-spacing: -.01em;   
  color: var(--bone); text-box: trim-both cap alphabetic;
  text-shadow: 0 0 .12em var(--ink), 0 0 .3em var(--ink); }   

@media (min-width: 1024px) {
  .greet h2 { font-size: min(var(--h2), max(44px, min(calc((86vw - var(--s) * 784) / 6.2), 10.6svh))); }
}
.greet-end { grid-column: 1; grid-row: 3; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.greet .line { font: 400 clamp(22px, 2vw, 32px)/1.3 var(--body); color: rgba(239, 235, 227, .8); }
.greet .line a { color: var(--bone); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; position: relative; }
.greet .line a::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; translate: 0 -50%; }   
.greet .line a:focus-visible, .watch:focus-visible, .film-close:focus-visible { outline: 3px solid var(--bone); outline-offset: 4px; }
.watch { display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 28px; border: 0; border-radius: 999px;
  background: var(--blue); color: var(--bone); font: 400 22px/1 var(--display); cursor: pointer; }
.watch:hover { background: #2a37f0; }
.greet-btns { display: flex; flex-wrap: wrap; gap: 14px; }
.more { display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 28px; border-radius: 999px; box-sizing: border-box;
  border: 2px solid rgba(239, 235, 227, .55); color: var(--bone); font: 400 22px/1 var(--display); text-decoration: none; }
.more:hover { border-color: var(--bone); background: rgba(239, 235, 227, .08); }
.more i { font-style: normal; transition: transform .3s var(--heavy); }
.more:hover i { transform: translateX(6px); }
.more:focus-visible { outline: 3px solid var(--bone); outline-offset: 4px; }
.watch svg { width: 18px; height: 18px; }

.greet-video { position: absolute; inset: 0; perspective: 1400px; perspective-origin: var(--x) var(--y); pointer-events: none; }
.greet-video .frame { position: absolute; inset: 0; overflow: hidden; transform-origin: var(--x) var(--y);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5%, #000 97.5%, transparent), linear-gradient(to bottom, transparent, #000 40px, #000 calc(100% - 56px), transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s cubic-bezier(.2, .8, .2, 1); will-change: transform; }
.greet-video .frame.tilting { transition-duration: .2s; }   
.greet-video video { position: absolute; display: block; background: var(--ink);
  left: calc(var(--x) - var(--s) * 822); top: calc(var(--y) - var(--s) * 510); width: calc(var(--s) * 1632); height: calc(var(--s) * 1056); }

.greet-video video { opacity: 0; transition: opacity .15s cubic-bezier(.33, 0, .2, 1); }
.greet-video video.under { opacity: 1; z-index: 1; }
.greet-video video.on { opacity: 1; z-index: 2; }

.greet h2 .w { display: inline-block; opacity: 0; transform: translateY(.55em) scale(.96); transform-origin: 0 100%;
  transition: opacity .35s ease, transform .7s cubic-bezier(.2, .9, .25, 1.15); transition-delay: calc(var(--i, 0) * 55ms); }
.greet.t-on h2 .w { opacity: 1; transform: none; }
.greet .line, .greet-btns > * { opacity: 0; transform: translateY(24px);
  transition: opacity .35s ease var(--d, 0s), transform .7s cubic-bezier(.2, .9, .25, 1.15) var(--d, 0s), border-color .2s, background-color .2s; }
.greet-btns > :nth-child(1) { --d: 80ms; }
.greet-btns > :nth-child(2) { --d: 160ms; }
.greet.l-on .line, .greet.l-on .greet-btns > * { opacity: 1; transform: none; }
@media (max-width: 1023px) {
  
  .greet { height: auto; padding: 88px 0 72px; }   
  .greet-stage { position: static; height: auto; overflow: visible; display: block; padding: 0;
    --s: min(calc(60svh / 756), calc(72vw / 395)); }
  .greet h2 { font-size: clamp(40px, min(12.4vw, 15svh), 96px); padding: 0 var(--gutter); margin-top: 0; }   
  .greet-video { position: relative; inset: auto; height: calc(var(--s) * 940); margin: 4px 0; --x: 50%; --y: 50%; }
  .greet-video .frame { transform: none;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 32px, #000 calc(100% - 32px), transparent); }
  .greet-end { padding: 0 var(--gutter); }
}

html:has(dialog.film[open]) { overflow: hidden; }   
.film { position: fixed; inset: 0; width: auto; height: auto; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: transparent; color: var(--bone); overflow: hidden; overscroll-behavior: contain;
  --cw: min(72vw, calc((100svh - 200px) * 16 / 9)); --cr: 22px; }
.film[open] { display: grid; place-content: center; grid-template-columns: var(--cw); gap: 16px; }

.film::backdrop { background: rgba(17, 17, 17, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0);
  transition: background-color .75s cubic-bezier(.25, .6, .3, 1), -webkit-backdrop-filter .75s cubic-bezier(.25, .6, .3, 1), backdrop-filter .75s cubic-bezier(.25, .6, .3, 1); }
.film.lit::backdrop { background: rgba(17, 17, 17, .38); -webkit-backdrop-filter: blur(20px) saturate(1.15); backdrop-filter: blur(20px) saturate(1.15); }
.film.leaving::backdrop { transition-duration: .56s; transition-timing-function: cubic-bezier(.65, 0, .35, 1); }   

.film-card { position: relative; aspect-ratio: 16 / 9; border-radius: var(--cr); overflow: hidden; background: var(--ink);
  transform-origin: 0 0; isolation: isolate;
  box-shadow: 0 0 0 1px rgba(239, 235, 227, .18), 0 2px 6px rgba(0, 0, 0, .22), 0 14px 30px -8px rgba(0, 0, 0, .4),
    0 44px 90px -24px rgba(0, 0, 0, .6), 0 90px 180px -40px rgba(6, 9, 70, .7); }
.film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; background: var(--ink); }

.film-close { justify-self: end; display: inline-flex; align-items: center; height: 48px; min-width: 48px; padding: 0 24px; border: 0; border-radius: 999px;
  background: var(--bone); color: var(--ink); font: 500 20px/1 var(--body); cursor: pointer;
  box-shadow: 0 10px 28px -10px rgba(0, 0, 0, .6);
  opacity: 0; transform: translateY(10px); transition: opacity .2s ease, transform .3s var(--heavy), background-color .2s; }
.film.lit .film-close { opacity: 1; transform: none; transition: opacity .35s ease .42s, transform .6s var(--pop) .42s, background-color .2s; }
.film-close:hover { background: #fff; }
.film .film-close:focus-visible { outline-color: var(--bone); outline-offset: 5px; }

@media (max-width: 1023px) { .film { --cw: min(86vw, calc((100svh - 200px) * 16 / 9)); } }

@media (max-width: 767px) { .film { --cw: min(calc(100vw - 2 * var(--m)), calc((100svh - 160px) * 16 / 9)); --cr: 14px; } .film[open] { gap: 14px; } }
@media (prefers-reduced-motion: reduce) {
  .greet h2 .w, .greet .line, .greet-btns > * { opacity: 1; transform: none; transition: none; }
  .greet-video .frame { transform: none; transition: none; }
  .greet-video .loop { opacity: 1; }
  
  .film::backdrop, .film.leaving::backdrop { transition-duration: .2s; }
  .film-close, .film.lit .film-close { transform: none; transition: opacity .2s ease; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 1024px) {
  .greet { height: auto; }
  .greet-stage { position: relative; }   
}


.greet { scroll-snap-align: none; }
.greet-snap { display: block; position: absolute; left: 0; top: 0; width: 1px; pointer-events: none; scroll-snap-align: start; }
.greet-snap:not(.greet-snap-end) { height: 1px; scroll-snap-stop: always; }
.greet-snap-end { height: calc(100% + 100vh); height: calc(100% + 100svh); scroll-snap-align: end; scroll-snap-stop: always; }
@media (max-width: 1023px) {
  
  .greet { min-height: 160svh; box-sizing: border-box; display: flex; flex-direction: column; }
  .greet-stage { flex: 1 0 auto; display: flex; flex-direction: column; }
  .greet-video { flex: 1 0 auto; }
}
.greet-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }