.moment {
	position: fixed;
	inset: 0;
	z-index: 9999;
	overflow: hidden;

	background:
		radial-gradient(120% 80% at 50% 4%, #d21a56 0%, #b81d2a 46%, #8e0f34 100%);
	isolation: isolate;
	cursor: pointer;
}

.moment[hidden] { display: none; }

html.moment-holding,
html.moment-holding body {

	overscroll-behavior-y: auto;
}

.moment-faces {
	position: absolute;
	inset: 0;
	z-index: 0;
	perspective: 1400px;
	filter: saturate(1.05) contrast(1.02);
}

.moment-faces .turn { display: contents; }

@media (max-width: 759px) {

}

.moment-faces { opacity: 1; }
.moment.is-held .moment-faces { opacity: 1; }

.moment-faces .her {
	position: absolute;
	left: var(--nx, 50%);
	top: var(--ny, 50%);

	width: calc(clamp(50px, 16vw, 78px) * var(--big, 1) * var(--field-size, 1));
	aspect-ratio: 3 / 4;
	transform: translate(-50%, -50%);

}

.moment-faces img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 28%;
	pointer-events: none;

	-webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 42%, #000 0%, rgba(0,0,0,.94) 16%, rgba(0,0,0,.62) 38%, rgba(0,0,0,.24) 58%, transparent 76%);
	mask-image: radial-gradient(ellipse 62% 62% at 50% 42%, #000 0%, rgba(0,0,0,.94) 16%, rgba(0,0,0,.62) 38%, rgba(0,0,0,.24) 58%, transparent 76%);

	animation: moment-held var(--journey, 28s) linear infinite;
	animation-delay: var(--already, 0s);
}

@media (max-width: 759px) {

}

@media (max-width: 759px) {

	.moment-faces .turn--laptop img { display: none; }

	.moment-faces img {
		animation-name: moment-held-phone;

		animation-duration: calc(var(--journey, 15s) * 1.35 * var(--field-pace, 1));
		animation-delay: calc(var(--already, 0s) * 1.35 * var(--field-pace, 1));
	}
}

@keyframes moment-held-phone {

	0%   { opacity: 0;   transform: scale(0.920); }
	7%   { opacity: calc(var(--field-lift, .30) * 1.5); transform: scale(0.990); }
	20%  { opacity: 1;   transform: scale(1.120); }
	58%  { opacity: 1;   transform: scale(1.620); }
	76%  { opacity: .55; transform: scale(1.850); }

	94%  { opacity: 0;   transform: scale(2.000); }
	100% { opacity: 0;   transform: scale(2.000); }
}

@keyframes moment-held-of2 {
	0%     { opacity: 0;   transform: scale(.380); }
	6.25%  { opacity: var(--field-lift, .30); transform: scale(.450); }
	22.5%  { opacity: .70; transform: scale(.660); }
	32.5%  { opacity: 1;   transform: scale(.820); }
	46.25% { opacity: 1;   transform: scale(1.040); }
	55%    { opacity: .66; transform: scale(1.280); }
	62.5%  { opacity: 0;   transform: scale(1.540); }
	100%   { opacity: 0;   transform: scale(1.540); }
}

@keyframes moment-held {

	0%   { opacity: 0;   transform: scale(.380); }
	10%  { opacity: var(--field-lift, .30); transform: scale(.450); }
	36%  { opacity: .70; transform: scale(.660); }
	52%  { opacity: 1;   transform: scale(.820); }

	74%  { opacity: 1;   transform: scale(1.040); }

	88%  { opacity: .66; transform: scale(1.280); }
	100% { opacity: 0;   transform: scale(1.540); }
}

@media (min-width: 760px) {
	.moment-faces .her {
		left: var(--x, 50%);
		top: var(--y, 50%);
		width: calc(clamp(210px, 18vw, 400px) * var(--field-size, 1));
	}

	.moment-faces .her--phone-only { display: none; }

	.moment.field-count--nineteen .moment-faces .her--corner { display: none; }
	.moment.field-count--all .moment-faces .her--phone-only { display: block; }

	.moment-faces img {
		animation-duration: calc(var(--journey, 15s) * 1.5 * var(--field-pace, 1));
		animation-delay: calc(var(--already, 0s) * 1.5 * var(--field-pace, 1));
	}

	.moment-faces .her--two img {
		animation-name: moment-held-of2;

		animation-duration: calc(var(--journey, 15s) * 2.4 * var(--field-pace, 1));
	}
	.moment-faces .her--two .turn--1 img {
		animation-delay: calc((var(--already, 0s) * 1.5 + var(--journey, 15s) * 1.2) * var(--field-pace, 1));

		animation-fill-mode: backwards;
	}

	.moment-faces { perspective: 1800px; }
}

@media (prefers-reduced-motion: reduce) {
	.moment-faces img { animation: none; opacity: 1; transform: scale(1); }

	.moment-faces .turn--1 img { display: none; }
}

.moment-veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	mix-blend-mode: multiply;
	background:
		radial-gradient(120% 76% at 50% 6%, rgba(255, 236, 242, .34) 0%, rgba(255, 236, 242, 0) 60%),
		linear-gradient(to bottom,
			rgba(240, 84, 235, .20) 0%,
			rgba(226, 47, 87, .34) 32%,
			rgba(214, 32, 84, .44) 66%,
			rgba(190, 22, 72, .60) 100%);
}

.moment-doors {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0;
	transition: opacity 1.5s ease;
}

.moment.is-doors .moment-doors {
	z-index: 4;
	opacity: 1;
}

.moment-doors .leaf {
	position: absolute;
	top: 0; bottom: 0;
	width: 50%;
	overflow: hidden;
	transition: transform 2.6s cubic-bezier(.65, 0, .2, 1);
}

.moment-doors .leaf--l { left: 0; }
.moment-doors .leaf--r { right: 0; }

.moment-doors .leaf img {
	position: absolute;
	top: 0;
	width: 200%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

.moment-doors .leaf--l img { left: 0; }
.moment-doors .leaf--r img { right: 0; }

.moment.is-opening .leaf--l { transform: translate3d(-100%, 0, 0); }
.moment.is-opening .leaf--r { transform: translate3d(100%, 0, 0); }

.moment-flood {
	position: absolute;
	left: 50%; top: 0; bottom: 0;
	width: 0;
	transform: translateX(-50%);
	background: radial-gradient(60% 100% at 50% 50%, #fff 0%, #fff4f7 44%, #ffd9e4 78%, rgba(255, 217, 228, 0) 100%);
	opacity: 0;
	transition: width 2.6s cubic-bezier(.65, 0, .2, 1), opacity 1.1s ease;
}

.moment.is-doors .moment-flood {
	width: clamp(70px, 9vw, 150px);
	opacity: 1;
	background:
		radial-gradient(closest-side at 50% 50%, rgba(255,255,255,.95) 0%, rgba(255,238,246,.55) 34%, rgba(255,196,220,.22) 62%, rgba(255,196,220,0) 100%),
		linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.4) 22%, rgba(255,255,255,.55) 50%, rgba(255,255,255,.4) 78%, rgba(255,255,255,0) 100%);
	filter: blur(9px);
	box-shadow: none;
	animation: moment-shimmer 3.4s ease-in-out infinite;
}

@keyframes moment-shimmer {
	0%, 100% { opacity: .78; filter: blur(9px)  brightness(1);    scale: 1 1; }
	50%      { opacity: 1;   filter: blur(13px) brightness(1.35); scale: 1.5 1; }
}

.moment.is-opening .moment-flood {
	width: 300%;
	opacity: 1;
	animation: none;
	background: radial-gradient(60% 100% at 50% 50%, #fff 0%, #fff2f7 40%, #ffd9e6 74%, rgba(255,217,230,0) 100%);
	box-shadow: none;
}

.moment {
	opacity: 1;
	transition: opacity 1.5s ease;
}

.moment.is-leaving { opacity: 0; }

.moment-skip {
	position: absolute;
	left: 50%; bottom: clamp(16px, 4vw, 28px);
	transform: translateX(-50%);
	z-index: 6;
	padding: 12px 22px;
	min-height: 44px;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 999px;
	background: rgba(255, 255, 255, .12);
	font: 700 9px/1 var(--font-util);
	letter-spacing: .22em; text-transform: uppercase;
	color: #fff;
	cursor: pointer;
	opacity: 0;
	transition: opacity .9s ease .9s, background .3s ease;
}

.moment.is-open .moment-skip { opacity: .85; }
.moment-skip:hover, .moment-skip:focus-visible { background: rgba(255, 255, 255, .26); opacity: 1; }
.moment.is-doors .moment-skip { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
	.moment { display: none; }
	html.moment-holding, html.moment-holding body { overflow: auto; }
}

.moment-edge {
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
}

.moment-edge .edge-her {
	position: absolute;
	width: calc(clamp(160px, 32vmin, 400px) * var(--big, 1));
	aspect-ratio: 3 / 4;

	opacity: 0;
	animation:
		moment-edge-in 1.6s cubic-bezier(.2, .7, .3, 1) forwards,
		moment-edge-breathe calc(42s + var(--place) * 1.7s) ease-in-out infinite;
	animation-delay: calc(var(--place) * 70ms), calc(var(--place) * -3.4s);
}

@keyframes moment-edge-in {
	to { opacity: 1; }
}

@keyframes moment-edge-breathe {
	0%   { scale: 1;    }
	34%  { scale: 1.07; }
	68%  { scale: .97;  }
	100% { scale: 1;    }
}

.moment-edge .edge--top    { left: var(--along); top: 0;    transform: translate(-50%, calc(-1 * var(--over))) scale(.86); }
.moment-edge .edge--bottom { left: var(--along); bottom: 0; transform: translate(-50%, var(--over)) scale(.86); }
.moment-edge .edge--left   { top: var(--along);  left: 0;   transform: translate(calc(-1 * var(--over)), -50%) scale(.86); }
.moment-edge .edge--right  { top: var(--along);  right: 0;  transform: translate(var(--over), -50%) scale(.86); }

.moment.is-open .moment-edge .edge--top    { opacity: 1; transform: translate(-50%, calc(-1 * var(--over))) scale(1); }
.moment.is-open .moment-edge .edge--left   { opacity: 1; transform: translate(calc(-1 * var(--over)), -50%) scale(1); }
.moment.is-open .moment-edge .edge--right  { opacity: 1; transform: translate(var(--over), -50%) scale(1); }

.moment-edge .edge-her img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;

	-webkit-mask-image: radial-gradient(ellipse 64% 64% at 50% 44%, #000 0%, rgba(0,0,0,.92) 18%, rgba(0,0,0,.56) 42%, rgba(0,0,0,.2) 62%, transparent 80%);
	mask-image: radial-gradient(ellipse 64% 64% at 50% 44%, #000 0%, rgba(0,0,0,.92) 18%, rgba(0,0,0,.56) 42%, rgba(0,0,0,.2) 62%, transparent 80%);
}

.moment-edge { z-index: 6; }
.moment.is-doors .moment-edge .edge-her { opacity: 1; }
.moment.is-leaving .moment-edge .edge-her { opacity: 0; transition: opacity 1.1s ease; }

.moment-word {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 6;
	margin: 0;

	width: min(88vw, 980px);
	transform: translate(-50%, -50%);
	text-align: center;
	pointer-events: none;
}

.moment > .its-time {
	position: absolute;

	--wx: var(--pwx, 50%);
	--wy: var(--pwy, 50%);
	left: var(--wx);
	top: var(--wy);
	transform: translate(-50%, -54%);
	z-index: 7;
	margin: 0;
	width: min(92vw, 1100px);
	text-align: center;

	font-family: 'Lora', Georgia, serif;
	color: #fff;
	text-shadow:
		0 3px 42px rgba(120, 8, 32, .62),
		0 0 120px rgba(150, 12, 44, .5);
}

.moment > .its-time .say {
	display: block;
	opacity: 0;

	transform: translateY(.9em);
	animation: moment-word-in 2.4s cubic-bezier(.16, .72, .24, 1) forwards;
	animation-delay: calc(3.4s + var(--w) * 1100ms);
}

.moment > .its-time .say--lead {
	margin-bottom: clamp(14px, 2.4svh, 30px);
	font-weight: 600;
	font-size: clamp(22px, 3.2vw, 44px);
	letter-spacing: .34em;
	text-transform: uppercase;
	opacity: 0;
}

.moment > .its-time .say--big {
	font-weight: 700;
	-webkit-text-stroke: 0;
	font-size: clamp(26px, 4.2vw, 58px);
	line-height: 1.16;
	letter-spacing: -.004em;
	text-transform: uppercase;
}

@keyframes moment-word-in {
	to { opacity: 1; transform: none; }
}

.moment.is-doors > .its-time { opacity: 0; transition: opacity .7s ease; }

.moment-word .the-line {
	display: block;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: clamp(32px, 8.8vw, 84px);
	line-height: 1.06;
	text-transform: uppercase;
	color: #a8143a;
	-webkit-text-stroke: .012em #a8143a;
	paint-order: stroke fill;
	text-shadow: 0 2px 40px rgba(255, 255, 255, .8);
}

.moment-word span {
	display: inline-block;
	opacity: 0;
	transform: translateY(.28em);
	transition: opacity 1s ease, transform 1.2s cubic-bezier(.2, .7, .3, 1);
	transition-delay: calc(var(--w) * 300ms);
}

.moment.is-opening .moment-word span { opacity: 1; transform: none; }

.moment.is-leaving .moment-word span { opacity: 0; transition-delay: 0s; transition-duration: .6s; }

.moment-in {

	position: absolute;
	left: 50%;
	bottom: clamp(38px, 11svh, 110px);
	z-index: 7;
	transform: translateX(-50%);
	padding: 0;
	border: 0;
	text-decoration: none;
	border-radius: 0;
	background: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: clamp(11px, 1.3vw, 15px);
	letter-spacing: .38em;
	text-transform: uppercase;
	color: #fff;
	cursor: pointer;
	opacity: 0;
	animation: moment-in-arrive 1.2s ease forwards 6.4s;
	text-shadow: 0 2px 30px rgba(120, 8, 32, .6);
}

.moment-in:hover,
.moment-in:focus-visible { text-shadow: 0 2px 30px rgba(120, 8, 32, .6), 0 0 18px rgba(255, 255, 255, .55); }

@keyframes moment-in-arrive {
	to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.moment.is-doors .moment-in { opacity: 0; pointer-events: none; transition-delay: 0s; }

.moment-world {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 8;
	margin: 0;
	width: min(88vw, 17ch);
	transform: translate(-50%, -46%) scale(.985);
	text-align: center;
	font-family: 'Lora', Georgia, serif;
	font-weight: 600;

	font-size: clamp(24px, 3.6vw, 52px);
	line-height: 1.26;
	letter-spacing: -.008em;

	color: #e22f57;
	text-shadow: 0 2px 44px rgba(255, 255, 255, .95);
	opacity: 0;
	pointer-events: none;
	transition: opacity 1.6s ease 1.1s, transform 2.2s cubic-bezier(.16, .72, .24, 1) 1.1s;
}

.moment.is-opening .moment-world {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

.moment.is-leaving .moment-world {
	opacity: 0;
	transform: translate(-50%, -54%) scale(1.02);
	transition-delay: 0s;
	transition-duration: .8s;
}

.moment-world em {
	display: block;
	margin: .06em 0 .02em;
	font-style: normal;
	font-weight: 700;

	font-family: 'Cinzel', Palatino, Georgia, serif;
	-webkit-text-stroke: 0;
	font-size: 1.44em;
	line-height: 1.04;
	letter-spacing: .01em;
	color: #e22f57;
}

@media (max-width: 620px) {
	.moment-world { width: min(86vw, 13ch); }
	.moment-world em { font-size: 1.6em; }
}

.field-dials {
	position: fixed;
	left: 14px;
	bottom: 14px;
	z-index: 60;
	font-family: "Cormorant Garamond", Georgia, serif;
	color: #fff;
}
.field-dials__open {
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .5);
	color: #fff;
	font: inherit;
	font-size: 15px;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 8px 14px;
	border-radius: 999px;
	cursor: pointer;
	backdrop-filter: blur(6px);
}
.field-dials__sheet {
	margin-top: 10px;
	background: rgba(60, 4, 18, .82);
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 14px;
	padding: 14px 16px 10px;
	max-width: min(92vw, 420px);
	backdrop-filter: blur(10px);
}
.field-dials__row { margin: 0 0 12px; }
.field-dials__say {
	display: block;
	font-size: 13px;
	letter-spacing: .16em;
	text-transform: uppercase;
	opacity: .8;
	margin-bottom: 4px;
}
.field-dials__presses { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.field-dials__press {
	background: none;
	border: 0;
	border-bottom: 1px solid transparent;
	color: #fff;
	font: inherit;
	font-size: 17px;
	padding: 2px 0;
	cursor: pointer;
	opacity: .75;
}
.field-dials__press.is-on { opacity: 1; border-bottom-color: #fff; }
.field-dials__kept { font-size: 14px; min-height: 1.2em; margin: 4px 0 0; opacity: .85; font-style: italic; }

.moment.is-moving .moment-faces { z-index: 40; }
.moment.is-moving .moment-faces .her { pointer-events: auto; cursor: grab; touch-action: none; }
.moment.is-moving .moment-faces .her.is-held-by-her { cursor: grabbing; z-index: 2; }
.moment.is-moving .moment-faces img { animation: none; opacity: 1; transform: scale(.5); }

.moment.is-moving .moment-veil { pointer-events: none; }

.moment.is-moving > .its-time { z-index: 30; opacity: .45; pointer-events: auto; cursor: grab; touch-action: none; user-select: none; }
.moment.is-moving > .its-time.is-held-by-her { cursor: grabbing; opacity: .7; }
.moment.is-moving > .its-time .say { opacity: 1; transform: none; animation: none; }
@media (min-width: 760px) {
	.moment > .its-time { --wx: var(--lwx, 50%); --wy: var(--lwy, 50%); }
}

.moment.field-screens--two .moment-faces img,
.moment.field-screens--two .moment-faces .her--two img {
	animation-name: moment-two-screens;
	animation-duration: calc(26s * var(--field-pace, 1));
	animation-delay: 0s;
	animation-fill-mode: none;
}
.moment.field-screens--two .moment-faces .her[data-screen="2"] .turn--0 img,
.moment.field-screens--two .moment-faces .her[data-screen="1"] .turn--1 img {
	animation-delay: calc(-13s * var(--field-pace, 1));
}
@keyframes moment-two-screens {
	0%   { opacity: 0;   transform: scale(.86); }
	8%   { opacity: 1;   transform: scale(.90); }
	46%  { opacity: 1;   transform: scale(1.02); }
	54%  { opacity: 0;   transform: scale(1.06); }
	100% { opacity: 0;   transform: scale(1.06); }
}

.moment.is-moving.is-arranging-1.field-screens--two .moment-faces .her[data-screen="2"] .turn--0 img,
.moment.is-moving.is-arranging-1.field-screens--two .moment-faces .her[data-screen="1"] .turn--1 img,
.moment.is-moving.is-arranging-2.field-screens--two .moment-faces .her[data-screen="1"] .turn--0 img,
.moment.is-moving.is-arranging-2.field-screens--two .moment-faces .her[data-screen="2"] .turn--1 img { opacity: .22; }

.moment.is-moving .field-dials { left: auto; right: 14px; top: 14px; bottom: auto; }
.moment.is-moving .field-dials__open { display: none; }
.moment.is-moving .field-dials__sheet { margin-top: 0; padding: 10px 14px 8px; max-width: min(92vw, 300px); }
.moment.is-moving .field-dials__row:not([data-moving-row]):not([data-arranging]) { display: none; }
.moment.is-moving .field-dials__row[data-moving-row] .field-dials__say,
.moment.is-moving .field-dials__row[data-moving-row] [data-move-back] { display: none; }
.moment.is-moving .field-dials__row { margin-bottom: 6px; }

.moment.is-moving .moment-faces .her { pointer-events: none; }
.moment.is-moving .moment-faces .her img { pointer-events: auto; cursor: grab; touch-action: none; }
.moment.is-moving .moment-faces .her.is-held-by-her img { cursor: grabbing; }