/* ============================================================
   Bigwave Timeline V2 — Modern Animated  v2.0.0
   ============================================================ */

/* ── Keyframe Animations ─────────────────────────────────── */

/* Animated drawing line: left → right */
@keyframes bw2LineGrow {
	from { clip-path: inset(0 100% 0 0); }
	to   { clip-path: inset(0 0%   0 0); }
}

/* Dot pulse ring radiates outward */
@keyframes bw2DotPulse {
	0%   { transform: scale(0.8); opacity: 0.9; }
	70%  { transform: scale(2.2); opacity: 0;   }
	100% { transform: scale(2.2); opacity: 0;   }
}

/* ── Card entry animation keyframes ─────────────────────── */
@keyframes bw2SlideUp {
	from { opacity: 0; transform: translateY(36px); }
	to   { opacity: 1; transform: translateY(0);    }
}
@keyframes bw2SlideDown {
	from { opacity: 0; transform: translateY(-36px); }
	to   { opacity: 1; transform: translateY(0);     }
}
@keyframes bw2FadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes bw2ScaleIn {
	from { opacity: 0; transform: scale(0.88); }
	to   { opacity: 1; transform: scale(1);    }
}

/* ── Wrapper ─────────────────────────────────────────────── */
.bw2-timeline-wrapper {
	width: 100%;
	position: relative;
}

/* Scroll mode */
.bw2-timeline-wrapper.bw2-nav-scroll {
	overflow-x: auto;
	overflow-y: visible;
	-webkit-overflow-scrolling: touch;
	padding: 20px 0 34px;
}

/* Arrow mode: stacked column [controls row] then [scroll area] */
.bw2-timeline-wrapper.bw2-nav-arrows {
	display: flex;
	flex-direction: column;
	gap: 0;
	overflow: visible;
	padding: 0;
}

/* ── Nav controls bar (arrow mode) ───────────────────────── */
.bw2-nav-controls {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	padding: 16px 0 12px;
}

.bw2-arrow-row {
	display: flex;
	gap: 10px;
}

/* ── Arrow buttons ───────────────────────────────────────── */
.bw2-nav-btn {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	cursor: pointer;
	padding: 0;
	line-height: 1;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
	transition: background-color 0.2s ease,
	            box-shadow      0.2s ease,
	            transform       0.15s ease;
}

.bw2-nav-btn:hover:not(:disabled) {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
	transform: translateY(-2px);
}

.bw2-nav-btn:active:not(:disabled) {
	transform: translateY(0);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.bw2-nav-btn:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

.bw2-nav-btn:disabled {
	opacity: 0.3;
	cursor: not-allowed;
	pointer-events: none;
	transform: none;
	box-shadow: none;
}

.bw2-nav-btn svg {
	width: 52%;
	height: 52%;
	fill: currentColor;
	display: block;
	pointer-events: none;
}

/* ── Progress bar ────────────────────────────────────────── */
.bw2-progress-track {
	width: 100%;
	height: 4px;
	background: rgba(0, 0, 0, 0.08);
	border-radius: 4px;
	overflow: hidden;
}

.bw2-progress-bar {
	height: 100%;
	width: 0%;
	border-radius: 4px;
	transition: width 0.15s ease;
	background: #1b6a7a; /* overridden inline by PHP */
}

/* ── Scroll area ─────────────────────────────────────────── */
.bw2-timeline-scroll-area {
	flex: 1;
	min-width: 0;
	overflow-x: scroll;
	overflow-y: hidden;
}

.bw2-nav-arrows .bw2-timeline-scroll-area {
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.bw2-nav-arrows .bw2-timeline-scroll-area::-webkit-scrollbar { display: none; }

.bw2-nav-scroll .bw2-timeline-scroll-area::-webkit-scrollbar        { height: 5px; }
.bw2-nav-scroll .bw2-timeline-scroll-area::-webkit-scrollbar-track  { background: rgba(0,0,0,0.06); border-radius: 4px; }
.bw2-nav-scroll .bw2-timeline-scroll-area::-webkit-scrollbar-thumb  { background: rgba(0,0,0,0.2); border-radius: 4px; }
.bw2-nav-scroll .bw2-timeline-scroll-area::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.35); }

/* ── Track ───────────────────────────────────────────────── */
.bw2-timeline-track {
	display: flex;
	align-items: stretch;
	height: var(--bw2-track-height, 480px);
	position: relative;
	min-width: max-content;
	column-gap: var(--bw2-item-gap, 0px);
	padding: 24px 0;
	box-sizing: border-box;
}

/*
 * CENTRE LINE — two layers when line-anim is on:
 *
 * ::before = ghost line (full width, low opacity) — visible immediately
 *            so the user sees the complete path from the start
 * ::after  = bright animated line that draws left → right
 *            this is what visually "connects" each dot
 *
 * When line-anim is OFF: only ::before is used at full opacity.
 */

/* Base line (shared style for both layers) */
.bw2-timeline-track::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: var(--bw2-line-thickness, 3px);
	background-color: var(--bw2-line-color, #1b6a7a);
	transform: translateY(-50%);
	z-index: 0;
	pointer-events: none;
	border-radius: 2px;
}

/* No line-anim: full-opacity static line */
.bw2-timeline-track::before {
	opacity: 1;
}

/* Line-anim ON: ghost line at low opacity */
.bw2-line-anim .bw2-timeline-track::before {
	opacity: 0.15;
}

/* Line-anim ON: bright drawing line via ::after */
.bw2-line-anim .bw2-timeline-track::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: var(--bw2-line-thickness, 3px);
	background-color: var(--bw2-line-color, #1b6a7a);
	transform: translateY(-50%);
	z-index: 1;               /* sits above the ghost */
	pointer-events: none;
	border-radius: 2px;
	/* Start fully clipped, JS triggers the animation */
	clip-path: inset(0 100% 0 0);
}

/*
 * When JS adds .bw2-line-running to the track, the line starts drawing.
 * Timing/duration are set via CSS custom properties written by JS
 * so they match the item-activation timeouts exactly.
 */
.bw2-line-anim .bw2-timeline-track.bw2-line-running::after {
	animation: bw2LineGrow var(--bw2-line-duration, 1200ms)
	           cubic-bezier(0.4, 0, 0.2, 1) forwards
	           var(--bw2-line-delay, 0ms);
}

/* ── Logo / start image ──────────────────────────────────── */
.bw2-timeline-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 0 24px;
	z-index: 1;
}

.bw2-logo-box {
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.bw2-logo-box:hover {
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
	transform: translateY(-2px);
}

.bw2-logo-box img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* ── Timeline item column ────────────────────────────────── */
/*
 * The dot MUST always sit on the horizontal centre line,
 * regardless of how tall a card with an image gets.
 *
 * Solution: take the dot (bw2-center-point) completely out of
 * the normal flow with position:absolute; top:50%.  The two
 * card halves are also absolutely positioned — top half covers
 * 0→50%, bottom half covers 50→100%.  Cards overflow visually
 * (overflow:visible) without touching the dot position at all.
 */
.bw2-timeline-item {
	position: relative;
	flex: 1 0 220px;   /* width in the parent flex track */
	                   /* height = track height via parent align-items:stretch */
	z-index: 1;
}

.bw2-item-top {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	overflow: visible;
	padding: 0 12px;
	box-sizing: border-box;
}

/* Dot is pinned to the line — completely outside the card flow */
.bw2-center-point {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
}

.bw2-item-bottom {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	overflow: visible;
	padding: 0 12px;
	box-sizing: border-box;
}

/* ── Dot wrapper (holds pulse rings) ─────────────────────── */
.bw2-dot-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* Pulse ring 1 */
.bw2-dot-pulse .bw2-animate-in .bw2-dot-wrap::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2.5px solid var(--bw2-dot-color, #1b6a7a);
	animation: bw2DotPulse 2.4s ease-out infinite;
	pointer-events: none;
}

/* Pulse ring 2 (offset) */
.bw2-dot-pulse .bw2-animate-in .bw2-dot-wrap::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid var(--bw2-dot-color, #1b6a7a);
	animation: bw2DotPulse 2.4s ease-out infinite 0.8s;
	pointer-events: none;
}

/* ── Dot ─────────────────────────────────────────────────── */
.bw2-dot {
	border-radius: 50%;
	flex-shrink: 0;
	position: relative;
	z-index: 1;
	box-shadow: 0 0 0 3px rgba(255,255,255,0.85), 0 4px 12px rgba(0,0,0,0.2);
	transition: transform  0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
	            box-shadow 0.25s ease;
}

.bw2-timeline-item.bw2-animate-in:hover .bw2-dot {
	transform: scale(1.22);
	box-shadow: 0 0 0 4px rgba(255,255,255,0.9), 0 6px 20px rgba(0,0,0,0.3);
}

/* ── Connector ────────────────────────────────────────────── */
.bw2-connector {
	width: 2px;
	flex-shrink: 0;
	height: var(--bw2-conn-height, 32px);
	border-radius: 1px;
}

.bw2-position-below .bw2-connector { transform-origin: top center; }
.bw2-position-above .bw2-connector { transform-origin: bottom center; }

/* ── Card — base styles ───────────────────────────────────── */
.bw2-card {
	width: 100%;
	padding: 20px 22px 18px;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
	transition: transform  0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
	            box-shadow 0.3s ease;
}

.bw2-card:hover {
	transform:  translateY(-5px);
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.2);
}

/* Subtle inner gloss overlay */
.bw2-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		145deg,
		rgba(255, 255, 255, 0.12) 0%,
		rgba(255, 255, 255, 0.04) 40%,
		transparent 60%
	);
	pointer-events: none;
	border-radius: inherit;
}

.bw2-card-title {
	margin: 0 0 6px;
	padding: 0;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.3;
	color: inherit;
	letter-spacing: -0.01em;
}

.bw2-card-date {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	color: inherit;
	opacity: 0.85;
	margin-top: 6px;
	letter-spacing: 0.02em;
}

.bw2-card-image {
	margin: 10px 0 8px;
}

.bw2-card-image img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 6px;
}

/* ═══════════════════════════════════════════════════════════
   CARD ENTRY ANIMATIONS
   All three modes share the same initial-hidden + animate-in
   pattern. Timing (animation-delay / transition-delay) is set
   per-item by JS so the reveal is synced to the line travel.
   ═══════════════════════════════════════════════════════════ */

/* ── Shared: dot starts scaled to zero, pops in ─────────── */
.bw2-anim-slide-fade .bw2-dot,
.bw2-anim-fade       .bw2-dot,
.bw2-anim-scale-fade .bw2-dot {
	transform: scale(0);
	/* transition-delay is set inline by JS */
	transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bw2-anim-slide-fade .bw2-animate-in .bw2-dot,
.bw2-anim-fade       .bw2-animate-in .bw2-dot,
.bw2-anim-scale-fade .bw2-animate-in .bw2-dot {
	transform: scale(1);
}

/* Hover still works after pop-in */
.bw2-anim-slide-fade .bw2-animate-in:hover .bw2-dot,
.bw2-anim-fade       .bw2-animate-in:hover .bw2-dot,
.bw2-anim-scale-fade .bw2-animate-in:hover .bw2-dot {
	transform: scale(1.22) !important;
}

/* ── Shared: connector grows from dot ───────────────────── */
.bw2-anim-slide-fade .bw2-connector,
.bw2-anim-fade       .bw2-connector,
.bw2-anim-scale-fade .bw2-connector {
	transform: scaleY(0);
	/* transition-delay is set inline by JS */
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.bw2-anim-slide-fade .bw2-animate-in .bw2-connector,
.bw2-anim-fade       .bw2-animate-in .bw2-connector,
.bw2-anim-scale-fade .bw2-animate-in .bw2-connector {
	transform: scaleY(1);
}

/* ── slide-fade ──────────────────────────────────────────── */

/* Below: card hidden, slides up on animate-in */
.bw2-anim-slide-fade .bw2-position-below .bw2-card { opacity: 0; }
.bw2-anim-slide-fade .bw2-position-below.bw2-animate-in .bw2-card {
	/* animation-delay set inline by JS */
	animation: bw2SlideUp var(--bw2-anim-duration, 600ms)
	           cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Above: card hidden, slides down on animate-in */
.bw2-anim-slide-fade .bw2-position-above .bw2-card { opacity: 0; }
.bw2-anim-slide-fade .bw2-position-above.bw2-animate-in .bw2-card {
	animation: bw2SlideDown var(--bw2-anim-duration, 600ms)
	           cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ── fade ────────────────────────────────────────────────── */
.bw2-anim-fade .bw2-card { opacity: 0; }
.bw2-anim-fade .bw2-animate-in .bw2-card {
	animation: bw2FadeIn var(--bw2-anim-duration, 600ms) ease forwards;
}

/* ── scale-fade ──────────────────────────────────────────── */
.bw2-anim-scale-fade .bw2-card { opacity: 0; }
.bw2-anim-scale-fade .bw2-animate-in .bw2-card {
	animation: bw2ScaleIn var(--bw2-anim-duration, 600ms)
	           cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}