/* =============================================================
   template-parts/case-study/case-sections/case-sections.css
   Scoped styles for: .rev-case-section, .rev-bg-word,
   .rev-case-head, .rev-marquee, .rev-marquee-track,
   .rev-flash-section keyframe.
   Global reset + body bg live in assets/css/global.css.
   ============================================================= */

/* ── CASE SECTION WRAPPER ── */
.rev-case-section {
	position:          relative;
	padding:           60px 0 50px;
	border-top:        1px solid rgba(255, 255, 255, .08);
	scroll-margin-top: 100px;
}

/* ── FLASH ANIMATION (triggered from case-hero.js) ── */
.rev-flash-section {
	animation: revSectionGlow 1.2s ease;
}

@keyframes revSectionGlow {
	0% {
		transform: translateY(20px);
		opacity:   .5;
	}
	50% {
		transform: translateY(0);
		opacity:   1;
	}
	100% {
		transform: translateY(0);
		opacity:   1;
	}
}

/* ── BIG BACKGROUND WORD ── */
.rev-bg-word {
	font-family: var(--font-primary);
	font-size:      14vw;
	font-weight:    900;
	line-height:    1;
	color:          var(--ink);
	opacity:        .05;
	text-transform: uppercase;
	pointer-events: none;
	user-select:    none;
	letter-spacing: -0.06em;
	position:       absolute;
	top:            0;
	left:           0;
	z-index:        0;
}

/* ── CASE HEAD ── */
.rev-case-head {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   60px;
	margin-bottom:         90px;
	position:              relative;
	z-index:               2;
}

.rev-case-head h2 {
	font-family: var(--font-primary);
	font-size:   3rem;
	font-weight: 700;
	color:       var(--ink);
}

.rev-case-head p,
.rev-case-body {
	font-size:   1.1rem;
	max-width:   700px;
	color:       rgba(255, 255, 255, .65);
	line-height: 1.8;
}

/* ── MARQUEE ── */
.rev-marquee {
	width:     100%;
	overflow:  hidden;
	margin-top: 40px;
	position:  relative;
	z-index:   2;
}

.rev-marquee-track {
	display: flex;
	width:   max-content;
	gap:     20px;
}

.rev-marquee-track--left  {
	animation: revScrollLeft  40s linear infinite;
}
.rev-marquee-track--right {
	animation: revScrollRight 40s linear infinite;
}
.rev-marquee-track:hover {
	animation-play-state: paused;
}

.rev-marquee-track img,
.rev-marquee-track .rev-video-embed {
	width:         380px;
	height:        500px;
	border-radius: 22px;
	flex-shrink:   0;
	transition:    .4s;
	filter:        grayscale(20%);
	overflow:      hidden;
	background:    #0b0b0b;
}

.rev-marquee-track img {
	object-fit: cover;
}

.rev-marquee-track img:hover,
.rev-marquee-track .rev-video-embed:hover {
	transform:  scale(1.04) translateY(-6px);
	filter:     grayscale(0);
	box-shadow: 0 25px 60px rgba(0, 0, 0, .4);
}

.rev-video-marquee .rev-marquee-track {
	align-items: stretch;
}

.rev-video-embed iframe,
.rev-video-embed video {
	width:   100%;
	height:  100%;
	border:  0;
	display: block;
	background: #0b0b0b;
}

.rev-video-thumb {
	position:        relative;
	display:         block;
	text-decoration: none;
}

.rev-video-thumb img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
}

.rev-video-thumb__play {
	position:        absolute;
	left:            50%;
	top:             50%;
	width:           58px;
	height:          58px;
	border-radius:   50%;
	background:      rgba(0, 0, 0, .68);
	transform:       translate(-50%, -50%);
	display:         flex;
	align-items:     center;
	justify-content: center;
	pointer-events:  none;
}

.rev-video-thumb__play::before {
	content: "";
	width:   20px;
	height:  22px;
	margin-left: 5px;
	background: var(--ink);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.rev-video-embed--instagram {
	display:         flex;
	align-items:     center;
	justify-content: center;
}

.rev-video-embed--instagram .instagram-media {
	min-width: 0 !important;
	width:     100% !important;
	height:    100% !important;
	margin:    0 !important;
}

.rev-case-section .rev-video-embed--link {
	color:           var(--ink);
	text-decoration: none;
	display:         flex;
	align-items:     center;
	justify-content: center;
	border:          1px solid var(--line);
}

@keyframes revScrollLeft {
	from { transform: translateX(0);    }
	to   { transform: translateX(-50%); }
}

@keyframes revScrollRight {
	from { transform: translateX(-50%); }
	to   { transform: translateX(0);    }
}

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
	.rev-case-head {
		grid-template-columns: 1fr;
		gap:                   20px;
	}
}

@media (max-width: 768px) {
	.rev-case-head h2 {
		font-size: clamp(1.8rem, 6vw, 2.4rem);
	}

	.rev-marquee-track img,
	.rev-marquee-track .rev-video-embed {
		width:  260px;
		height: 340px;
	}
}