/* Samaneh Coming Soon — front-end styles */

.scs-root{
	--scs-bg:#000000;
	--scs-fg:#ffffff;
	--scs-muted:rgba(255,255,255,.62);
	--scs-accent:#ffffff;
	--scs-pad:clamp(20px,4vw,72px);
	position:relative;
	display:flex;
	width:100%;
	min-height:100svh;
	min-height:100dvh;
	background:var(--scs-bg);
	color:var(--scs-fg);
	font-family:var(--scs-font,"Inter","Helvetica Neue",Helvetica,Arial,sans-serif);
	-webkit-font-smoothing:antialiased;
	overflow:hidden;
	isolation:isolate;
}
.scs-root *,
.scs-root *::before,
.scs-root *::after{box-sizing:border-box;}

/* full-screen takeover */
html.scs-lock,
html.scs-lock body{margin:0;padding:0;background:#000;}
html.scs-lock body{display:block;}
html.scs-lock #wpadminbar{display:none;}
/* the page is frozen to the viewport on desktop only; on phones and tablets it
   may scroll, otherwise the lower part of the page would be unreachable */
@media (min-width:1025px){
	html.scs-lock,
	html.scs-lock body{height:100%;overflow:hidden;}
}
/* a tablet held sideways is wide but short, so it keeps the freedom to scroll */
@media (pointer:coarse){
	html.scs-lock,
	html.scs-lock body{height:auto;overflow:visible;}
}

/* ---------- layout ---------- */
.scs-media{
	position:relative;
	flex:0 0 var(--scs-media-w,40%);
	max-width:var(--scs-media-w,40%);
	height:100svh;
	height:100dvh;
	background:var(--scs-bg);
}
.scs-media__inner{position:absolute;inset:0;}
.scs-media video,
.scs-media img.scs-poster{
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:var(--scs-focal,50% 28%);
	display:block;
	background:var(--scs-bg);
}
/* the figure is lit against pure black, so a soft edge mask hides any crop line */
.scs-media__fade{
	position:absolute;inset:0;pointer-events:none;
	background:
		linear-gradient(to right,transparent 55%,var(--scs-bg) 100%),
		linear-gradient(to bottom,var(--scs-bg) 0%,transparent 14%,transparent 84%,var(--scs-bg) 100%);
}

.scs-copy{
	position:relative;
	flex:1 1 auto;
	min-width:0;
	display:flex;
	flex-direction:column;
	justify-content:center;
	gap:clamp(18px,2.4vh,34px);
	padding:var(--scs-pad);
	height:100svh;
	height:100dvh;
}
.scs-root--right .scs-media{order:2;}
.scs-root--right .scs-copy{order:1;}
.scs-root--right .scs-media__fade{background:
	linear-gradient(to left,transparent 55%,var(--scs-bg) 100%),
	linear-gradient(to bottom,var(--scs-bg) 0%,transparent 14%,transparent 84%,var(--scs-bg) 100%);}

/* ---------- eyebrow ---------- */
.scs-eyebrow{
	margin:0;
	font-size:clamp(10px,.78vw,13px);
	font-weight:600;
	letter-spacing:.34em;
	text-transform:uppercase;
	color:var(--scs-muted);
	opacity:0;
	transform:translateY(8px);
	animation:scs-in .9s cubic-bezier(.22,.7,.2,1) .15s forwards;
}
.scs-eyebrow .scs-dot{
	display:inline-block;width:6px;height:6px;border-radius:50%;
	background:var(--scs-accent);margin-inline-end:.9em;vertical-align:middle;
	animation:scs-pulse 2.6s ease-in-out infinite;
}
@keyframes scs-pulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}

/* ---------- the name line (slots) ---------- */
.scs-line{
	display:flex;
	width:max-content;   /* hug the words, so the fitter can measure the real line width */
	max-width:none;
	align-items:center;
	flex-wrap:nowrap;
	white-space:nowrap;
	gap:var(--scs-gap,.34em);
	font-size:var(--scs-size,44px);
	font-weight:var(--scs-weight,800);
	letter-spacing:var(--scs-tracking,-.02em);
	line-height:var(--scs-lh,1.06);
	text-transform:uppercase;
	will-change:font-size;
}
/* several rows: each row needs less air than a single wide line */
.scs-line--wrap{flex-wrap:wrap;white-space:normal;row-gap:0;width:100%;}
.scs-line--wrap .scs-slot{height:var(--scs-window-wrap,1.95em);}
.scs-line-box{overflow:hidden;}

/* the window is taller than one word, so the words above and below stay
   visible at the edges and fade out: that is what reads as a slot reel */
.scs-slot{
	position:relative;
	display:inline-block;
	flex:0 0 auto;
	height:var(--scs-window,2.3em);
	overflow:hidden;
	vertical-align:middle;
	transition:none;
	-webkit-mask-image:linear-gradient(to bottom,transparent 2%,rgba(0,0,0,.14) 18%,#000 34%,#000 66%,rgba(0,0,0,.14) 82%,transparent 98%);
	mask-image:linear-gradient(to bottom,transparent 2%,rgba(0,0,0,.14) 18%,#000 34%,#000 66%,rgba(0,0,0,.14) 82%,transparent 98%);
}
/* once a reel has landed, its neighbours fade away and only the final word is left */
.scs-slot::before,
.scs-slot::after{
	content:"";
	position:absolute;left:-4%;right:-4%;
	/* exactly the empty band above and below the word, whatever the window height */
	height:calc((100% - var(--scs-step,1.06em)) / 2 + 1px);
	background:var(--scs-bg,#000);
	/* the reel is transformed, so the covering bands need to be lifted above it */
	z-index:2;
	opacity:0;
	transition:opacity .45s ease .05s;
	pointer-events:none;
}
.scs-slot::before{top:0;}
.scs-slot::after{bottom:0;}
.scs-slot--locked::before,
.scs-slot--locked::after{opacity:1;}
/* the mask would fade those covering bands too, so a landed word drops it and
   stands alone on the background */
.scs-slot--locked{
	-webkit-mask-image:none;
	mask-image:none;
}
.scs-slot__reel{
	display:block;
	will-change:transform,filter;
	transform:translate3d(0,0,0);
	transition:filter .45s ease;
}
.scs-slot--fixed .scs-slot__reel{width:100%;}
.scs-slot--fixed .scs-slot__word{width:100%;text-align:center;}
.scs-slot--static.scs-slot--fixed .scs-slot__word{text-align:left;}
.scs-slot__word{
	display:block;
	width:max-content;
	height:var(--scs-step,1.06em);
	line-height:var(--scs-step,1.06em);
	white-space:nowrap;
}
/* blur while the reel is travelling: the passing words read as motion, the landed one is sharp */
.scs-slot--spinning .scs-slot__reel{filter:blur(var(--scs-blur,.055em));}
.scs-slot--moving .scs-slot__reel{filter:blur(calc(var(--scs-blur,.055em) * .55));}
/* the fixed word never moves, so it needs no window and no mask */
.scs-slot--static{
	overflow:visible;
	-webkit-mask-image:none;
	mask-image:none;
}

/* measuring clone, never visible */
.scs-ghost{
	position:absolute!important;
	visibility:hidden!important;
	pointer-events:none!important;
	white-space:nowrap!important;
	left:-9999px;top:0;
}

/* ---------- body copy ---------- */
.scs-body{
	max-width:52ch;
	margin:0;
	font-size:clamp(14px,1.02vw,17px);
	line-height:1.65;
	color:var(--scs-muted);
	opacity:0;
	transform:translateY(10px);
	animation:scs-in 1s cubic-bezier(.22,.7,.2,1) 1.9s forwards;
}
.scs-body p{margin:0 0 .85em;}
.scs-body p:last-child{margin-bottom:0;}
.scs-body a{color:var(--scs-fg);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:1px;transition:border-color .25s ease;}
.scs-body a:hover{border-color:var(--scs-fg);}

.scs-actions{
	display:flex;flex-wrap:wrap;align-items:center;gap:14px;
	opacity:0;transform:translateY(10px);
	animation:scs-in 1s cubic-bezier(.22,.7,.2,1) 2.15s forwards;
}
.scs-btn{
	display:inline-flex;align-items:center;gap:.6em;
	padding:13px 22px;border-radius:999px;
	font-size:14px;font-weight:600;letter-spacing:.01em;
	text-decoration:none;
	border:1px solid rgba(255,255,255,.28);
	color:var(--scs-fg);
	background:transparent;
	transition:background-color .25s ease,border-color .25s ease,transform .25s ease;
}
.scs-btn:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.55);transform:translateY(-1px);}
.scs-btn--solid{background:var(--scs-fg);color:#000;border-color:var(--scs-fg);}
.scs-btn--solid:hover{background:rgba(255,255,255,.88);color:#000;}

.scs-foot{
	position:absolute;
	left:var(--scs-pad);right:var(--scs-pad);bottom:calc(var(--scs-pad) * .55);
	display:flex;justify-content:space-between;gap:16px;
	font-size:11px;letter-spacing:.18em;text-transform:uppercase;
	color:rgba(255,255,255,.32);
	opacity:0;animation:scs-in 1s ease 2.4s forwards;
}

@keyframes scs-in{to{opacity:1;transform:none;}}

/* ---------- tablet / phone: the video on top, the words underneath ---------- */
@media (max-width:1024px){
	.scs-root{flex-direction:column;overflow:visible;min-height:100svh;min-height:100dvh;}
	.scs-root--right .scs-media{order:0;}
	.scs-root--right .scs-copy{order:1;}
	.scs-media,
	.scs-root--right .scs-media{
		flex:0 0 auto;max-width:100%;width:100%;
		height:clamp(240px,42svh,460px);
		height:clamp(240px,42dvh,460px);
	}
	.scs-media video,.scs-media img.scs-poster{object-position:var(--scs-focal-m,50% 22%);}
	.scs-media__fade,
	.scs-root--right .scs-media__fade{background:linear-gradient(to bottom,var(--scs-bg) 0%,transparent 12%,transparent 66%,var(--scs-bg) 100%);}
	.scs-copy{
		height:auto;min-height:0;
		flex:1 1 auto;                 /* take the space the video leaves ... */
		justify-content:center;        /* ... and sit in the middle of it */
		padding:clamp(10px,2vh,26px) var(--scs-pad) calc(var(--scs-pad) * .9);
		gap:clamp(12px,2.2vh,22px);
	}
	/* stacked under the video, the whole block reads better centred */
	.scs-copy{align-items:center;text-align:center;}
	.scs-line-box{width:100%;}
	.scs-line--wrap{justify-content:center;}
	.scs-slot--static.scs-slot--fixed .scs-slot__word{text-align:center;}
	.scs-body{max-width:46ch;margin-inline:auto;font-size:15px;}
	.scs-actions{justify-content:center;}
	.scs-foot{position:static;margin-top:6px;justify-content:center;gap:22px;}
}

@media (max-width:640px){
	.scs-root{--scs-pad:clamp(18px,5.2vw,28px);}
	.scs-media{height:clamp(210px,38svh,380px);height:clamp(210px,38dvh,380px);}
	.scs-eyebrow{font-size:10px;letter-spacing:.3em;}
	.scs-body{font-size:14.5px;line-height:1.6;}
	.scs-btn{padding:12px 18px;font-size:13.5px;}
	.scs-actions{gap:10px;}
	.scs-foot{font-size:10px;letter-spacing:.14em;}
}

/* ---------- phone / tablet held sideways: back to two columns ----------
   a short landscape screen has no room for a stacked layout, so the video
   goes back beside the words and everything is scaled down. */
@media (max-width:1024px) and (orientation:landscape) and (max-height:600px){
	.scs-root{flex-direction:row;min-height:100svh;min-height:100dvh;}
	.scs-root--right .scs-media{order:2;}
	.scs-root--right .scs-copy{order:1;}
	.scs-media,
	.scs-root--right .scs-media{
		flex:0 0 clamp(30%,34vw,40%);
		max-width:clamp(30%,34vw,40%);
		width:auto;
		height:100svh;height:100dvh;
	}
	.scs-media video,.scs-media img.scs-poster{object-position:var(--scs-focal,50% 22%);}
	.scs-media__fade{background:
		linear-gradient(to right,transparent 55%,var(--scs-bg) 100%),
		linear-gradient(to bottom,var(--scs-bg) 0%,transparent 16%,transparent 84%,var(--scs-bg) 100%);}
	.scs-root--right .scs-media__fade{background:
		linear-gradient(to left,transparent 55%,var(--scs-bg) 100%),
		linear-gradient(to bottom,var(--scs-bg) 0%,transparent 16%,transparent 84%,var(--scs-bg) 100%);}
	/* beside the video the column is narrow, so the text goes back to the left edge */
	.scs-copy{
		min-height:100svh;min-height:100dvh;
		justify-content:center;
		align-items:flex-start;text-align:left;
		padding:calc(var(--scs-pad) * .7) var(--scs-pad);
		gap:clamp(8px,1.8vh,16px);
	}
	.scs-line--wrap{justify-content:flex-start;}
	.scs-slot--static.scs-slot--fixed .scs-slot__word{text-align:left;}
	.scs-body{margin-inline:0;}
	.scs-actions{justify-content:flex-start;}
	.scs-foot{justify-content:flex-start;}
	.scs-body{font-size:13.5px;line-height:1.55;max-width:46ch;}
	.scs-btn{padding:10px 16px;font-size:13px;}
	.scs-foot{position:static;margin-top:4px;}
}

/* reduced motion: no spin, no blur, words simply land */
@media (prefers-reduced-motion:reduce){
	.scs-root *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
	.scs-slot--spinning .scs-slot__reel{filter:none;}
	.scs-eyebrow,.scs-body,.scs-actions,.scs-foot{opacity:1;transform:none;}
}