/**
 * Pretpot – Card Split on Scroll
 * File: assets/css/card-split-on-scroll.css
 */

/* ═══════════════════════════════════════════════════════════════
   WIDGET WRAPPER
═══════════════════════════════════════════════════════════════ */
.pcsscroll-widget {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	position: relative;
	overflow: visible;
}

/* ═══════════════════════════════════════════════════════════════
   HEADING  — slow smooth fade-in / fade-out driven by JS class
═══════════════════════════════════════════════════════════════ */
.pcsscroll-heading {
	width: 100%;
	opacity: 0;
	transform: translateY(10px);
	/*
	 * Duration is set per-widget via CSS custom property
	 * --pcsscroll-h-dur injected by the PHP render as an inline style.
	 * Fallback: 1200ms.
	 */
	transition:
		opacity  var(--pcsscroll-h-dur, 1200ms) ease,
		transform var(--pcsscroll-h-dur, 1200ms) ease;
	will-change: opacity, transform;
}

.pcsscroll-heading-above { margin-bottom: 32px; }
.pcsscroll-heading-below { margin-top:    32px; }

/* JS adds this class when split progress > 0 */
.pcsscroll-widget.pcsscroll--heading-in .pcsscroll-heading {
	opacity:   1;
	transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════
   STAGE  — contains both cover and cards-wrap absolutely
═══════════════════════════════════════════════════════════════ */
.pcsscroll-stage {
	position: relative;
	width: 100%;    /* JS overrides with responsive width value */
	/* height is set inline by JS based on responsive breakpoint */
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════
   COVER
   JS drives scale (0 → 1) and opacity (1 → 0) via style.transform
   and style.opacity directly — no CSS transitions needed here for
   the scroll-driven portion.  CSS transition is only for the
   heading fade and the 3-D card flip.
═══════════════════════════════════════════════════════════════ */
.pcsscroll-cover {
	position: absolute;
	inset: 0;
	overflow: hidden;
	transform-origin: center center;
	will-change: transform, opacity;
	/* JS sets style.transition on enter/exit */
}

.pcsscroll-cover img,
.pcsscroll-cover video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/* ═══════════════════════════════════════════════════════════════
   PLAY BUTTON (cover & card)
═══════════════════════════════════════════════════════════════ */
.pcsscroll-play-btn {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	border: 2px solid rgba(255, 255, 255, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 20;
	transition: background 0.2s ease, transform 0.2s ease;
}
.pcsscroll-play-btn:hover { background: rgba(0, 0, 0, 0.8); transform: scale(1.08); }
.pcsscroll-play-btn svg   { width: 22px; height: 22px; fill: #fff; margin-left: 3px; }

/* ═══════════════════════════════════════════════════════════════
   CARDS WRAP  — absolutely fills the stage
   Shown / hidden via JS (opacity + pointer-events)
═══════════════════════════════════════════════════════════════ */
.pcsscroll-cards-wrap {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: stretch;
	justify-content: center;
	pointer-events: none;
	/* gap is set inline from widget setting */
}

/* ═══════════════════════════════════════════════════════════════
   INDIVIDUAL CARD
   The card wrapper itself moves into position via JS inline transform
   (translateY + rotate).  Pointer-events enabled once fully split.
═══════════════════════════════════════════════════════════════ */
.pcsscroll-card {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	/* perspective must be on the parent of the flipper */
	perspective: 1000px;
}

/* ── FLIPPER: the 3-D rotating element ── */
.pcsscroll-card-flipper {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	/* JS sets rotateY via style.transform — no CSS transition here.
	   Smooth motion comes from JS requestAnimationFrame interpolation. */
	will-change: transform;
}

/* ── CARD FACES (front & back) ── */
.pcsscroll-card-face {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	overflow: hidden;
}

/* Front starts showing (rotateY = 0), back is pre-rotated 180° */
.pcsscroll-card-front {
	/* background/image set by JS to mirror the cover slice */
}

.pcsscroll-card-back {
	transform: rotateY(180deg);
}

/* ── Card background layers (image / video) ── */
.pcsscroll-card-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

.pcsscroll-card-bg-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/* ── Card inner content ── */
.pcsscroll-card-inner {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 24px 22px;
	box-sizing: border-box;
}

.pcsscroll-card-icon {
	font-size: 22px;
	line-height: 1;
	flex-shrink: 0;
}
.pcsscroll-card-icon svg,
.pcsscroll-card-icon i   { width: 1em; height: 1em; }

.pcsscroll-card-img {
	width: 100%;
	border-radius: 8px;
	object-fit: cover;
	max-height: 120px;
	flex-shrink: 0;
}

.pcsscroll-card-heading {
	font-size: 1.2em;
	font-weight: 600;
	line-height: 1.25;
	flex-shrink: 0;
}

.pcsscroll-card-desc {
	font-size: 0.82em;
	line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
	.pcsscroll-card-heading { font-size: 0.95em; }
	.pcsscroll-card-desc    { font-size: 0.74em; }
	.pcsscroll-card-icon    { font-size: 16px;   }
	.pcsscroll-card-inner   { padding: 14px 12px; }
}

@media (max-width: 480px) {
	.pcsscroll-card-heading { font-size: 0.82em; }
	.pcsscroll-card-desc    { font-size: 0.70em; }
}