/* ============================================================
   Twitter Landing v8
   - Caption + rail + button always visible (no scroll required)
   - Posters first, videos lazy-loaded on intersection
   - Instructional modal w/ arrow replaces the top banner
   ============================================================ */

:root {
	--twlp-bg:        #000;
	--twlp-text:      #fff;
	--twlp-text-mute: rgba(255, 255, 255, 0.6);
	--twlp-accent:    #ff4d4d;

	--twlp-radius:    18px;
	--twlp-ease-out:  cubic-bezier(.23, 1, .32, 1);

	--twlp-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Helvetica Neue", sans-serif;
}

.twlp,
.twlp *,
.twlp *::before,
.twlp *::after { box-sizing: border-box; }

body.twlp-active,
body.twlp-standalone {
	margin: 0;
	padding: 0;
	background: var(--twlp-bg);
	color: var(--twlp-text);
	overflow-x: hidden;
}

/* ---- Page wrapper (tight, fits viewport) ---- */

.twlp {
	background: var(--twlp-bg);
	color: var(--twlp-text);
	font-family: var(--twlp-stack);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	width: 100%;
	min-height: 100svh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(14px, 2.4vh, 28px);
	padding:
		max(env(safe-area-inset-top),  16px)
		0
		max(env(safe-area-inset-bottom), 16px);
	overflow: hidden;
}

/* ---- Caption ---- */

.twlp-caption {
	margin: 0;
	padding: 0 24px;
	max-width: 720px;
	text-align: center;
	font-size: clamp(18px, 3.6vw, 26px);
	line-height: 1.2;
	letter-spacing: -0.02em;
	font-weight: 500;
	text-wrap: balance;
}

/* ---- Horizontal rail ---- */

.twlp-rail {
	width: 100%;
	display: flex;
	gap: 10px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
	padding: 0 max(16px, 6vw);
	cursor: grab;
	touch-action: pan-x;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
	        mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
}

.twlp-rail:active { cursor: grabbing; }
.twlp-rail.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.twlp-rail.is-dragging .twlp-tile { pointer-events: none; }
.twlp-rail::-webkit-scrollbar { display: none; }

/* ---- Tiles — height-capped so layout always fits ---- */

.twlp-tile {
	flex: 0 0 auto;
	height: min(56svh, 480px);
	height: min(56dvh, 480px);
	aspect-ratio: 9 / 16;
	scroll-snap-align: center;
	border-radius: var(--twlp-radius);
	overflow: hidden;
	position: relative;
	user-select: none;
	-webkit-user-select: none;
	isolation: isolate;
	background:
		radial-gradient(120% 70% at 30% 20%, rgba(255, 255, 255, 0.06) 0%, transparent 55%),
		linear-gradient(160deg, #1c1c1c 0%, #0a0a0a 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.05),
		0 14px 30px -14px rgba(0, 0, 0, 0.7);
}

@media (min-width: 720px) {
	.twlp-rail { gap: 14px; padding: 0 24px; }
	.twlp-tile { height: min(62dvh, 540px); }
}

/* Poster image — instant placeholder before video bytes arrive */
.twlp-tile__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;            /* match the video's native ratio */
	background: transparent;        /* let fallback show through if poster missing */
	z-index: 2;                     /* above fallback */
	transition: opacity 480ms var(--twlp-ease-out);
}

/* CSS-only fallback shown when WP couldn't extract a video poster
   (EasyWP / hosts without FFmpeg). Tiles vary by nth-child for visual life. */

.twlp-tile__fallback {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	color: rgba(255, 255, 255, 0.55);
}

.twlp-tile__fallback svg {
	filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45));
	transform: translateX(2px);
}

.twlp-tile__fallback-label {
	font: 700 11px/1 var(--twlp-stack);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.4);
}

/* Color-cycle the background so the rail doesn't feel uniform */
.twlp-tile:nth-child(5n+1) { background: linear-gradient(155deg, #2b1f3d 0%, #15101f 100%); }
.twlp-tile:nth-child(5n+2) { background: linear-gradient(155deg, #1f3d3a 0%, #101e1d 100%); }
.twlp-tile:nth-child(5n+3) { background: linear-gradient(155deg, #3d2a1f 0%, #1f1610 100%); }
.twlp-tile:nth-child(5n+4) { background: linear-gradient(155deg, #1f2a3d 0%, #10161f 100%); }
.twlp-tile:nth-child(5n+5) { background: linear-gradient(155deg, #3d1f33 0%, #1f1019 100%); }

/* Skeleton shimmer + ghost play icon */
.twlp-tile__skeleton {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.22);
	transition: opacity 600ms var(--twlp-ease-out);
	pointer-events: none;
}

.twlp-tile__skeleton::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg,
		transparent 25%,
		rgba(255, 255, 255, 0.07) 50%,
		transparent 75%);
	background-size: 220% 100%;
	animation: twlp-shimmer 2.4s linear infinite;
}

/* If a poster loaded, we don't need the shimmer/ghost on top of it */
.twlp-tile.has-poster .twlp-tile__skeleton { opacity: 0; }

@keyframes twlp-shimmer {
	0%   { background-position:  220% 0; }
	100% { background-position: -120% 0; }
}

.twlp-tile__ghost {
	position: relative;
	z-index: 1;
	filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}

.twlp-video {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #000;
	z-index: 3;
	opacity: 0;
	transition: opacity 480ms var(--twlp-ease-out);
}

.twlp-tile.is-playing .twlp-video { opacity: 1; }

/* In-app browsers: no video element rendered at all */
.is-inapp .twlp-video { display: none !important; }

/* --- "FULL VIDEO" overlay — only shown in in-app browsers --- */

.twlp-tile {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	transition: transform 240ms var(--twlp-ease-out);
}

.twlp-tile:active { transform: scale(0.98); }

.twlp-tile__overlay {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 4;
	display: none;          /* hidden in real browsers (video plays inline) */
	align-items: center;
	gap: 10px;
	padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
	background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.85) 100%);
	color: #fff;
	pointer-events: none;
}

.is-inapp .twlp-tile__overlay { display: flex; }

.twlp-tile__overlay-play {
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.95);
	color: #0a0a0a;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.twlp-tile__overlay-play svg { transform: translateX(1px); }

.twlp-tile__overlay-text {
	font: 800 13px/1 var(--twlp-stack);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.twlp-tile.is-playing .twlp-video       { opacity: 1; }
.twlp-tile.is-playing .twlp-tile__poster { opacity: 0; }
.twlp-tile.is-playing .twlp-tile__skeleton { opacity: 0; }

/* --- "Full" badge — shown only in in-app mode, top-right of each tile --- */

.twlp-tile__badge {
	display: none;
}

.is-inapp .twlp-tile__badge {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 6;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 9px 5px 8px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font: 700 10px/1 var(--twlp-stack);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
	pointer-events: none;
}

.twlp-tile__badge svg { transform: translateX(1px); }

/* --- In-app: hide the <video> element entirely, posters carry the show --- */

.is-inapp .twlp-video {
	display: none !important;
}

/* Posters show always (not just while video loads) in in-app mode */
.is-inapp .twlp-tile__poster {
	opacity: 1 !important;
}

.is-inapp .twlp-tile__skeleton {
	opacity: 0;
}

/* Subtle Ken Burns motion on every poster so the rail doesn't feel static */
.is-inapp .twlp-tile__poster {
	animation: twlp-kenburns 11s ease-in-out infinite alternate;
	transform-origin: 50% 50%;
	will-change: transform;
}

/* Stagger so they don't all move in unison */
.is-inapp .twlp-tile:nth-child(3n)   .twlp-tile__poster { animation-delay: -3s; }
.is-inapp .twlp-tile:nth-child(3n+1) .twlp-tile__poster { animation-delay: -6s; }
.is-inapp .twlp-tile:nth-child(3n+2) .twlp-tile__poster { animation-delay: -9s; }

@keyframes twlp-kenburns {
	0%   { transform: scale(1.04) translate(-1%, -0.5%); }
	100% { transform: scale(1.10) translate( 1%,  0.5%); }
}

@media (prefers-reduced-motion: reduce) {
	.is-inapp .twlp-tile__poster { animation: none; transform: none; }
}

/* --- Scroll hint --- */

.twlp-scroll-hint {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: -8px;
	padding: 7px 16px 7px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.7);
	font: 500 12px/1 var(--twlp-stack);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	user-select: none;
	transition: opacity 400ms var(--twlp-ease-out), transform 400ms var(--twlp-ease-out);
}

.twlp-scroll-hint__arrow {
	display: inline-block;
	font-size: 14px;
	color: var(--twlp-accent);
}

.twlp-scroll-hint__arrow:first-child {
	animation: twlp-arrow-left  2.2s ease-in-out infinite;
}
.twlp-scroll-hint__arrow:last-child {
	animation: twlp-arrow-right 2.2s ease-in-out infinite;
}

@keyframes twlp-arrow-left {
	0%, 100% { transform: translateX(0); opacity: 0.6; }
	50%      { transform: translateX(-4px); opacity: 1; }
}
@keyframes twlp-arrow-right {
	0%, 100% { transform: translateX(0); opacity: 0.6; }
	50%      { transform: translateX(4px); opacity: 1; }
}

.twlp-scroll-hint.is-gone {
	opacity: 0;
	transform: translateY(-4px);
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.twlp-scroll-hint__arrow { animation: none; }
}

/* --- Big CTA hint: "Tap below for the full video" (in-app only) --- */

.twlp-cta-hint {
	display: none;
}

.is-inapp .twlp-cta-hint {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--twlp-accent);
	font: 800 13px/1 var(--twlp-stack);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	margin-top: -6px;
}

.twlp-cta-hint__chev {
	display: inline-block;
	font-size: 18px;
	line-height: 1;
	color: var(--twlp-accent);
	animation: twlp-cta-bounce 1.1s ease-in-out infinite;
	filter: drop-shadow(0 2px 6px rgba(255, 77, 77, 0.6));
}

.twlp-cta-hint__chev:last-child { animation-delay: 0.18s; }

@keyframes twlp-cta-bounce {
	0%, 100% { transform: translateY(-2px); opacity: 0.7; }
	50%      { transform: translateY( 5px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.twlp-cta-hint__chev { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
	.twlp-tile__skeleton::before { animation: none; }
	.twlp-video, .twlp-tile__poster, .twlp-tile__skeleton { transition: none; }
}

.twlp-empty {
	padding: 40px 24px;
	text-align: center;
	color: var(--twlp-text-mute);
	font-size: 15px;
}

/* ============================================================
   Premium button
   ============================================================ */

.twlp-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	height: 54px;
	padding: 0 24px 0 30px;
	border-radius: 999px;
	font: 600 15px/1 var(--twlp-stack);
	letter-spacing: 0.005em;
	color: #0a0a0a;
	background: linear-gradient(180deg, #ffffff 0%, #e8e8e8 100%);
	border: 0;
	text-decoration: none;
	cursor: pointer;
	user-select: none;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 1),
		inset 0 -1px 0 rgba(0, 0, 0, 0.06),
		inset 0 0 0 1px rgba(255, 255, 255, 0.4),
		0 12px 30px -10px rgba(255, 255, 255, 0.22),
		0 4px 12px rgba(0, 0, 0, 0.45);
	transition:
		transform 260ms var(--twlp-ease-out),
		box-shadow 260ms var(--twlp-ease-out),
		background 260ms var(--twlp-ease-out);
}

.twlp-btn:hover {
	transform: translateY(-2px);
	background: linear-gradient(180deg, #ffffff 0%, #f0f0f0 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 1),
		inset 0 -1px 0 rgba(0, 0, 0, 0.06),
		inset 0 0 0 1px rgba(255, 255, 255, 0.5),
		0 22px 50px -12px rgba(255, 255, 255, 0.32),
		0 8px 22px rgba(0, 0, 0, 0.55);
}

.twlp-btn:active {
	transform: translateY(0);
	transition-duration: 120ms;
}

.twlp-btn__label { position: relative; z-index: 1; }

.twlp-btn__arrow {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	background: #0a0a0a;
	color: #fff;
	transition: transform 260ms var(--twlp-ease-out);
}

.twlp-btn:hover .twlp-btn__arrow { transform: translateX(3px); }

.twlp a:focus-visible,
.twlp button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
	border-radius: 4px;
}

/* ============================================================
   In-app mode — page renders, rail STILL SCROLLS,
   only clicks on the CTA / links are intercepted by JS to open the modal.
   ============================================================ */

.is-inapp .twlp-video::-webkit-media-controls { display: none !important; }

/* Videos and posters don't intercept rail swipes */
.is-inapp .twlp-video,
.is-inapp .twlp-tile__poster {
	pointer-events: none;
}

/* Tile itself can receive touch (so rail scroll works), but no text selection on tap-hold */
.is-inapp .twlp {
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}

/* ============================================================
   Instructional MODAL with animated arrow
   Replaces v7 banner.
   ============================================================ */

.twlp-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	padding-top:    calc(env(safe-area-inset-top)    + 20px);
	padding-bottom: calc(env(safe-area-inset-bottom) + 20px);
	pointer-events: auto;
	opacity: 0;
	transition: opacity 240ms var(--twlp-ease-out);
}

.twlp-modal[data-open="true"] { opacity: 1; }
.twlp-modal[hidden] { display: none; }

.twlp-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(8px) saturate(140%);
	-webkit-backdrop-filter: blur(8px) saturate(140%);
}

.twlp-modal__card {
	position: relative;
	width: 100%;
	max-width: 380px;
	background: #111;
	color: #fff;
	border-radius: 22px;
	padding: 26px 22px 22px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.06),
		0 30px 80px rgba(0, 0, 0, 0.6);
	transform: translateY(12px) scale(0.98);
	transition: transform 320ms var(--twlp-ease-out);
}

.twlp-modal[data-open="true"] .twlp-modal__card {
	transform: translateY(0) scale(1);
}

.twlp-modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	border: 0;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 160ms var(--twlp-ease-out);
}

.twlp-modal__close:hover  { background: rgba(255, 255, 255, 0.14); }
.twlp-modal__close:active { transform: scale(0.94); }

.twlp-modal__title {
	margin: 0 0 8px;
	padding-right: 40px;
	font: 700 19px/1.2 var(--twlp-stack);
	letter-spacing: -0.01em;
}

.twlp-modal__sub {
	margin: 0 0 18px;
	color: rgba(255, 255, 255, 0.7);
	font-size: 14px;
	line-height: 1.45;
}

.twlp-modal__steps {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.twlp-modal__steps li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 15px;
	line-height: 1.35;
}

.twlp-modal__num {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	background: var(--twlp-accent);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font: 700 13px/1 var(--twlp-stack);
	margin-top: 1px;
}

.twlp-modal__text { flex: 1 1 auto; min-width: 0; }
.twlp-modal__text strong { font-weight: 600; }

.twlp-modal__cta {
	width: 100%;
	height: 48px;
	border: 0;
	border-radius: 999px;
	background: #fff;
	color: #000;
	font: 600 15px/1 var(--twlp-stack);
	cursor: pointer;
	transition: opacity 160ms var(--twlp-ease-out), transform 160ms var(--twlp-ease-out);
}

.twlp-modal__cta:hover  { opacity: 0.9; }
.twlp-modal__cta:active { transform: scale(0.97); }

/* ============================================================
   Big arrow + circled ⋮ target with pulse
   ============================================================ */

.twlp-modal__arrow {
	position: fixed;
	z-index: 10001;
	color: var(--twlp-accent);
	pointer-events: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.twlp-modal__arrow svg { display: block; }

.twlp-modal__arrow-line {
	filter: drop-shadow(0 4px 14px rgba(255, 77, 77, 0.45));
}

.twlp-modal__arrow-label {
	font: 800 11px/1 var(--twlp-stack);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
	background: var(--twlp-accent);
	padding: 6px 10px;
	border-radius: 8px;
	box-shadow: 0 6px 18px rgba(255, 77, 77, 0.5);
}

.twlp-modal__arrow-target {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	color: var(--twlp-accent);
}

.twlp-modal__arrow-target::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--twlp-accent);
	opacity: 0.55;
	animation: twlp-target-pulse 1.4s ease-out infinite;
	z-index: 0;
}

.twlp-modal__arrow-target svg {
	position: relative;
	z-index: 1;
	background: #fff;
	border-radius: 50%;
}

@keyframes twlp-target-pulse {
	0%   { transform: scale(0.7); opacity: 0.55; }
	100% { transform: scale(1.6); opacity: 0; }
}

/* iOS — URL chip with ⋮ sits at the bottom. Arrow at center-bottom, points down. */
.twlp-modal__arrow[data-position="ios"] {
	left: 50%;
	bottom: calc(env(safe-area-inset-bottom) + 10px);
	transform: translateX(-50%);
	animation: twlp-arrow-ios 1.2s var(--twlp-ease-out) infinite;
	/* visual order top → bottom: LABEL · ↓ · ⋮  */
}

/* Android — ⋮ menu sits at top-right. Mirror: target on top, then ↑, then label. */
.twlp-modal__arrow[data-position="android"] {
	top: calc(env(safe-area-inset-top) + 10px);
	right: 16px;
	flex-direction: column-reverse;
	animation: twlp-arrow-android 1.2s var(--twlp-ease-out) infinite;
}

.twlp-modal__arrow[data-position="android"] .twlp-modal__arrow-line {
	transform: rotate(180deg); /* line now points up */
}

@keyframes twlp-arrow-ios {
	0%, 100% { transform: translateX(-50%) translateY(0); }
	50%      { transform: translateX(-50%) translateY(8px); }
}

@keyframes twlp-arrow-android {
	0%, 100% { transform: translate(0, 0); }
	50%      { transform: translate(0, -8px); }
}

@media (prefers-reduced-motion: reduce) {
	.twlp-modal__arrow,
	.twlp-modal__arrow-target::before { animation: none; }
}