/* ==========================================================================
   brand-film.css – Brand film section (homepage + About page)
   Dark indigo band with drifting colour glows, text on the left and the
   video in a frame with an animated glowing border on the right.
   ========================================================================== */

.dp-film { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at 70% 40%, #2a2f63 0%, #1e2248 45%, #141733 100%); }

/* ---------- Drifting colour glows ---------- */
.dp-film__aurora { position: absolute; inset: 0; z-index: -1; pointer-events: none; filter: blur(70px); opacity: .55; }
.dp-film__aurora span { position: absolute; border-radius: 50%; animation: dp-aurora 16s ease-in-out infinite alternate; }
.dp-film__aurora span:nth-child(1) { width: 480px; height: 480px; left: -120px; top: -140px; background: #e0922f; opacity: .45; }
.dp-film__aurora span:nth-child(2) { width: 420px; height: 420px; right: -100px; top: 20%; background: #7c6cff; opacity: .4; animation-delay: -5s; }
.dp-film__aurora span:nth-child(3) { width: 380px; height: 380px; left: 35%; bottom: -200px; background: #c0503f; opacity: .35; animation-delay: -10s; }
@keyframes dp-aurora {
	0% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(60px, 40px) scale(1.15); }
	100% { transform: translate(-40px, 20px) scale(.95); }
}

/* ---------- Layout ---------- */
.dp-film__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: center; }
.dp-film__text .dp-lead { color: rgba(255, 255, 255, .74); }

.dp-film__facts { list-style: none; display: flex; gap: 12px; margin: 6px 0 30px; padding: 0; flex-wrap: wrap; }
.dp-film__facts li {
	display: flex; flex-direction: column; padding: 12px 18px; border-radius: 14px;
	background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
}
.dp-film__facts strong { font-family: var(--dp-font-head); font-size: 30px; line-height: 1; color: var(--dp-accent-2); }
.dp-film__facts span { font-size: 12.5px; color: rgba(255, 255, 255, .7); margin-top: 4px; }
.dp-film__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Video frame with animated glowing border ---------- */
.dp-film__frame { position: relative; margin: 0; }
.dp-film__screen {
	position: relative; border-radius: 22px; padding: 3px; isolation: isolate;
	background: conic-gradient(from var(--dp-film-angle, 0deg), #e0922f, #7c6cff, #c0503f, #2a6fa8, #e0922f);
	animation: dp-film-spin 8s linear infinite;
	box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .8), 0 0 60px -20px rgba(224, 146, 47, .5);
}
@property --dp-film-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes dp-film-spin { to { --dp-film-angle: 360deg; } }
.dp-film__video {
	display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
	border-radius: 19px; background: #111430;
}

/* Play / pause button */
.dp-film__play {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	width: 84px; height: 84px; border-radius: 50%; border: 0; cursor: pointer;
	display: grid; place-items: center;
	background: var(--dp-accent); color: #fff;
	box-shadow: 0 16px 40px -12px rgba(224, 146, 47, .8);
	transition: transform .35s var(--dp-ease), opacity .35s, width .35s, height .35s, left .35s, top .35s;
}
.dp-film__play svg { width: 34px; height: 34px; }
.dp-film__icon-pause { display: none; }
.dp-film__play-ring { position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(242, 184, 97, .7); animation: dp-film-pulse 1.8s ease-out infinite; }
@keyframes dp-film-pulse { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.dp-film__play:hover { transform: translate(-50%, -50%) scale(1.08); }

/* While playing: small pause button in the corner */
.dp-film.is-playing .dp-film__play {
	left: auto; top: auto; right: 16px; bottom: 16px; transform: none;
	width: 46px; height: 46px; opacity: .0;
	background: rgba(17, 20, 48, .65); box-shadow: none; backdrop-filter: blur(6px);
}
.dp-film.is-playing .dp-film__screen:hover .dp-film__play,
.dp-film.is-playing .dp-film__play:focus-visible { opacity: 1; }
.dp-film.is-playing .dp-film__play svg { width: 20px; height: 20px; }
.dp-film.is-playing .dp-film__play-ring { display: none; }
.dp-film.is-playing .dp-film__icon-play { display: none; }
.dp-film.is-playing .dp-film__icon-pause { display: block; }

.dp-film__badge {
	position: absolute; left: 18px; top: 18px;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 6px 12px; border-radius: 999px;
	background: rgba(17, 20, 48, .6); backdrop-filter: blur(6px);
	color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .06em;
}
.dp-film__dot { width: 8px; height: 8px; border-radius: 50%; background: #ff5a5a; box-shadow: 0 0 0 0 rgba(255, 90, 90, .6); }
.dp-film.is-playing .dp-film__dot { animation: dp-film-live 1.6s ease-out infinite; }
@keyframes dp-film-live { to { box-shadow: 0 0 0 8px rgba(255, 90, 90, 0); } }
.dp-film__caption { margin-top: 14px; text-align: center; font-size: 13px; color: rgba(255, 255, 255, .55); }

/* ---------- Tablet & phone ---------- */
@media (max-width: 1024px) {
	.dp-film__grid { grid-template-columns: 1fr; gap: 40px; }
	.dp-film__frame { order: -1; }
}
@media (max-width: 600px) {
	.dp-film__play { width: 66px; height: 66px; }
	.dp-film__play svg { width: 28px; height: 28px; }
	.dp-film__actions .dp-btn { width: 100%; }
	.dp-film__screen { border-radius: 16px; }
	.dp-film__video { border-radius: 13px; }
}

@media (prefers-reduced-motion: reduce) {
	.dp-film__aurora span, .dp-film__screen, .dp-film__play-ring { animation: none; }
}