/* =========================================================================
   The Dragon Gate — full-screen video intro
   ========================================================================= */

.df-gate {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: #000;
	overflow: hidden;
	display: block;
}

/* Already seen this session, or reduced motion — straight into the site. */
html.df-gate-done .df-gate { display: none; }
html.df-gate-done body.df-body { overflow: auto; }

body.df-gate-active { overflow: hidden !important; }

.df-gate.is-done {
	animation: dfGateOut .7s cubic-bezier(.4, 0, .2, 1) forwards;
	pointer-events: none;
}

@keyframes dfGateOut {
	to { opacity: 0; visibility: hidden; transform: scale(1.06); }
}

/* ---------- the video ---------- */

.df-gate-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;      /* edge to edge */
	object-position: center;
	background: #000;
	opacity: 0;
	transition: opacity .6s ease;
}

.df-gate.is-playing .df-gate-video { opacity: 1; }

/*
 * On portrait screens "cover" would crop most of the frame away, so show the
 * whole animation there instead.
 */
@media (max-aspect-ratio: 1 / 1) {
	.df-gate-video { object-fit: contain; }
}

.df-gate-vignette {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(ellipse at 50% 50%, transparent 52%, rgba(0, 0, 0, .55) 100%);
}

/* ---------- controls ---------- */

.df-gate-controls {
	position: absolute;
	right: clamp(16px, 3vw, 40px);
	bottom: clamp(16px, 3vw, 40px);
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 10px;
	opacity: 0;
	transform: translateY(10px);
	animation: dfGateControlsIn .5s ease 1.2s forwards;
}

@keyframes dfGateControlsIn {
	to { opacity: 1; transform: none; }
}

.df-gate-skip,
.df-gate-sound {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	border: 1px solid rgba(197, 160, 89, .45);
	background: rgba(11, 12, 16, .62);
	backdrop-filter: blur(8px);
	color: #f2dfb3;
	font-family: var(--font-tech);
	font-size: .68rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	cursor: pointer;
	border-radius: 999px;
	transition: border-color .25s ease, background .25s ease, color .25s ease, transform .25s ease;
}

.df-gate-skip { padding: 12px 20px; }
.df-gate-sound { width: 44px; height: 44px; padding: 0; font-size: .95rem; }

.df-gate-skip:hover,
.df-gate-sound:hover {
	border-color: var(--crimson);
	background: rgba(255, 0, 60, .22);
	color: #fff;
	transform: translateY(-2px);
}

.df-gate-skip svg { width: 15px; height: 15px; }

/* Show one speaker glyph at a time. */
.df-gate-sound .df-gate-sound-on { display: none; }
.df-gate.is-unmuted .df-gate-sound .df-gate-sound-off { display: none; }
.df-gate.is-unmuted .df-gate-sound .df-gate-sound-on { display: inline; }

/* ---------- playback progress ---------- */

.df-gate-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	height: 3px;
	background: rgba(255, 255, 255, .09);
}

.df-gate-progress i {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--gold), var(--crimson));
	box-shadow: 0 0 12px rgba(255, 0, 60, .55);
	transition: width .2s linear;
}

@media (max-width: 520px) {
	.df-gate-skip { padding: 10px 16px; font-size: .62rem; }
	.df-gate-sound { width: 40px; height: 40px; }
}

/* ---------- content entrance ---------- */

.df-site {
	opacity: 0;
	transform: scale(1.03);
	transition: opacity .7s ease, transform .9s cubic-bezier(.2, .8, .3, 1);
}

.df-site.is-revealed,
html.df-gate-done .df-site { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.df-gate { display: none !important; }
	.df-site { opacity: 1 !important; transform: none !important; }
	body.df-gate-active { overflow: auto !important; }
}