/* ---------------------------------------------------------------
   Swaraw masthead

   The premise: this is a REFLECTION on the inside of a window, not
   a sign on a building. You stand in a dark room, look out at the
   rain, and your own name looks back at you.

   That premise decides the stacking order, which is the whole
   trick:

     sky, lightning, city          what is outside
     rain-far                      rain falling outside
     the word                      the reflection, on the glass
     rain-near                     droplets on the glass, nearer you
     glass sheen, room vignette    you, indoors, in the dark
     frame                         the window

   The droplets crossing in front of the letters is what tells the
   eye the word is on the pane. Without that split it reads as a
   sign floating in mid air.

   Everything is namespaced swrw- so nothing collides with Divi,
   the theme, or any plugin.
   --------------------------------------------------------------- */

.swrw-stage {
	--swrw-h: 82vh;

	--swrw-neon: #E09A3C;
	--swrw-neon-hot: #FFE0A8;
	--swrw-night: #0E1418;
	--swrw-sky-top: #10161C;
	--swrw-sky-bottom: #1C242B;
	--swrw-city: #070A0D;
	--swrw-frame: #241C15;
	--swrw-frame-edge: #3A2E23;

	--swrw-frame-w: 34px;
	--swrw-size: clamp(2.4rem, 11.5vw, 7.8rem);
	--swrw-track: 0.13em;

	position: relative;
	width: 100%;
	height: var(--swrw-h, 86vh);
	min-height: 620px;
	max-height: 1000px;
	overflow: hidden;
	background: var(--swrw-night);
	isolation: isolate;
	box-sizing: border-box;
}

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

/* --- outside ---------------------------------------------------- */

.swrw-sky {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to bottom, var(--swrw-sky-top) 0%, var(--swrw-sky-bottom) 68%, #232C33 100%);
}

.swrw-lightning {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: radial-gradient(ellipse 120% 70% at 62% 8%, rgba(206, 226, 240, 0.62) 0%, rgba(160, 190, 210, 0.22) 38%, rgba(0, 0, 0, 0) 72%);
	opacity: 0;
	pointer-events: none;
	mix-blend-mode: screen;
}

.swrw-city,
.swrw-windows {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 46%;
	clip-path: polygon(
		0% 100%, 0% 46%, 4% 46%, 4% 30%, 9% 30%, 9% 52%, 14% 52%, 14% 38%,
		19% 38%, 19% 62%, 26% 62%, 26% 22%, 33% 22%, 33% 44%, 39% 44%,
		39% 14%, 52% 14%, 52% 40%, 58% 40%, 58% 26%, 64% 26%, 64% 56%,
		71% 56%, 71% 34%, 78% 34%, 78% 48%, 84% 48%, 84% 24%, 91% 24%,
		91% 50%, 96% 50%, 96% 36%, 100% 36%, 100% 100%
	);
}

.swrw-city {
	z-index: 3;
	background: var(--swrw-city);
}

.swrw-windows {
	z-index: 4;
	opacity: 0.42;
	background-image:
		radial-gradient(1.5px 3px at 6% 62%, #C8A66A 50%, transparent 51%),
		radial-gradient(1.5px 3px at 11% 74%, #C8A66A 50%, transparent 51%),
		radial-gradient(1.5px 3px at 21% 78%, #9E8452 50%, transparent 51%),
		radial-gradient(1.5px 3px at 29% 48%, #C8A66A 50%, transparent 51%),
		radial-gradient(1.5px 3px at 35% 66%, #A88C58 50%, transparent 51%),
		radial-gradient(1.5px 3px at 44% 34%, #C8A66A 50%, transparent 51%),
		radial-gradient(1.5px 3px at 47% 58%, #A88C58 50%, transparent 51%),
		radial-gradient(1.5px 3px at 61% 46%, #C8A66A 50%, transparent 51%),
		radial-gradient(1.5px 3px at 68% 72%, #A88C58 50%, transparent 51%),
		radial-gradient(1.5px 3px at 75% 54%, #C8A66A 50%, transparent 51%),
		radial-gradient(1.5px 3px at 87% 44%, #A88C58 50%, transparent 51%),
		radial-gradient(1.5px 3px at 94% 64%, #C8A66A 50%, transparent 51%);
}

.swrw-rain-far {
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
}

/* --- the reflection --------------------------------------------- */

.swrw-signwrap {
	position: absolute;
	left: 50%;
	top: 44%;
	transform: translate(-50%, -50%);
	width: 92%;
	text-align: center;
	z-index: 6;
}

.swrw-word {
	margin: 0;
	padding: 0;
	font-family: 'Newsreader', Georgia, serif;
	font-weight: 600;
	font-size: var(--swrw-size);
	letter-spacing: var(--swrw-track);
	line-height: 1.02;
	display: flex;
	justify-content: center;
	gap: 0.02em;
	/* Light on glass falls away below itself. Chromium and WebKit
	   only; Firefox skips it, which is acceptable for a decorative
	   cue rather than something load bearing. */
	-webkit-box-reflect: below 2px linear-gradient(transparent 62%, rgba(255, 255, 255, 0.16));
}

/* unlit tube: present, dark, waiting */
.swrw-l {
	color: rgba(224, 154, 60, 0.13);
	text-shadow: none;
	transition: color 620ms ease, text-shadow 620ms ease;
	will-change: color, text-shadow;
}

/* A reflection is never as crisp as its source, so the core is held
   back and the bloom carries further than it would on a real sign. */
.swrw-l.is-lit {
	color: #FFEBC4;
	text-shadow:
		0 0 8px var(--swrw-neon),
		0 0 22px var(--swrw-neon),
		0 0 52px rgba(224, 154, 60, 0.62),
		0 0 104px rgba(190, 118, 26, 0.36);
}

.swrw-l.is-striking {
	animation: swrw-strike 520ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

@keyframes swrw-strike {
	0%   { opacity: 0.25; color: #FFEBC4; text-shadow: 0 0 34px var(--swrw-neon-hot), 0 0 68px var(--swrw-neon); }
	24%  { opacity: 1;    color: #FFF6E4; text-shadow: 0 0 14px #FFF6E4, 0 0 50px var(--swrw-neon-hot), 0 0 110px var(--swrw-neon); }
	46%  { opacity: 0.62; }
	70%  { opacity: 1;    text-shadow: 0 0 12px var(--swrw-neon-hot), 0 0 36px var(--swrw-neon), 0 0 84px rgba(224, 154, 60, 0.55); }
	100% { opacity: 1; }
}

/* real neon is never perfectly steady */
.swrw-l.is-unstable {
	animation: swrw-hum 7.5s ease-in-out infinite;
}

@keyframes swrw-hum {
	0%, 93%, 100% { opacity: 1; }
	94.5%         { opacity: 0.8; }
	96%           { opacity: 1; }
	97.5%         { opacity: 0.88; }
}

.swrw-rain-near {
	position: absolute;
	inset: 0;
	z-index: 7;
	pointer-events: none;
}

/* --- the glass and the dark room --------------------------------- */

.swrw-glass {
	position: absolute;
	inset: 0;
	z-index: 8;
	pointer-events: none;
	background: linear-gradient(118deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 26%, rgba(255, 255, 255, 0) 74%, rgba(255, 255, 255, 0.035) 100%);
}

.swrw-room {
	position: absolute;
	inset: 0;
	z-index: 9;
	pointer-events: none;
	box-shadow: inset 0 0 170px 40px rgba(0, 0, 0, 0.82);
}

/* Frame only, no glazing bars. A divided window reads as a picture
   of a window; a single undivided pane reads as a mirror. */
.swrw-frame {
	position: absolute;
	inset: 0;
	z-index: 10;
	pointer-events: none;
	border: var(--swrw-frame-w) solid var(--swrw-frame);
	box-shadow:
		inset 0 0 0 2px var(--swrw-frame-edge),
		inset 0 0 60px rgba(0, 0, 0, 0.7);
}

/* --- captions, quiet, at the foot -------------------------------- */

.swrw-caption {
	position: absolute;
	z-index: 9;
	left: 0;
	right: 0;
	bottom: clamp(34px, 6vh, 68px);
	padding: 0 clamp(30px, 6vw, 70px);
	text-align: center;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 760ms ease, transform 760ms ease;
	pointer-events: none;
}

.swrw-caption.is-shown {
	opacity: 1;
	transform: translateY(0);
}

/* The primary line is the primary line whatever script it is in.
   Steps one to three carry Devanagari here; the closing line
   carries English and switches face accordingly. */
.swrw-caption-primary {
	display: block;
	font-family: 'Noto Serif Devanagari', 'Noto Serif', serif;
	font-weight: 400;
	font-size: clamp(0.95rem, 2.1vw, 1.24rem);
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: rgba(244, 240, 234, 0.62);
	text-shadow: 0 0 16px rgba(0, 0, 0, 0.9);
}

.swrw-caption-primary.is-latin {
	font-family: 'Noto Serif', Georgia, serif;
	font-size: clamp(0.9rem, 1.95vw, 1.12rem);
	letter-spacing: 0.08em;
}

.swrw-caption-second {
	display: block;
	margin-top: 0.42em;
	font-family: 'Noto Serif', Georgia, serif;
	font-size: clamp(0.7rem, 1.35vw, 0.83rem);
	letter-spacing: 0.2em;
	text-transform: lowercase;
	color: rgba(244, 240, 234, 0.38);
	text-shadow: 0 0 14px rgba(0, 0, 0, 0.9);
}

.swrw-caption-second:empty {
	display: none;
}

/* --- controls ---------------------------------------------------- */

.swrw-controls {
	position: absolute;
	z-index: 11;
	right: clamp(22px, 4vw, 52px);
	bottom: clamp(22px, 4vw, 52px);
}

.swrw-btn {
	font-family: 'Noto Serif', Georgia, serif;
	font-size: 11px;
	letter-spacing: 0.14em;
	padding: 6px 12px;
	color: rgba(250, 246, 241, 0.34);
	background: transparent;
	border: 1px solid rgba(250, 246, 241, 0.13);
	border-radius: 0;
	cursor: pointer;
	transition: color 240ms ease, border-color 240ms ease;
}

.swrw-btn:hover {
	color: var(--swrw-neon-hot);
	border-color: rgba(224, 154, 60, 0.5);
}

.swrw-btn:focus-visible {
	outline: 2px solid var(--swrw-neon);
	outline-offset: 3px;
}

/* --- tablet ------------------------------------------------------
   The scene loses height before it loses the word. The sign stays
   the dominant object at every width; that is the whole brief.
   ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.swrw-stage {
		--swrw-h: 68vh;
		--swrw-frame-w: 24px;
		--swrw-size: clamp(3rem, 12.5vw, 6rem);
		min-height: 440px;
	}

	.swrw-signwrap { top: 43%; }
	.swrw-room { box-shadow: inset 0 0 130px 30px rgba(0, 0, 0, 0.8); }
}

/* --- mobile -------------------------------------------------------
   Portrait is the hard case. Three moves keep the impact:
     - the word gets a LARGER share of the viewport, not a smaller
       one, because a timid mobile hero is a wasted one
     - letter tracking tightens so six letters still fit the measure
     - the frame thins, since a thick frame eats a small screen
   ------------------------------------------------------------------ */

@media (max-width: 600px) {
	.swrw-stage {
		--swrw-h: 72svh;
		--swrw-frame-w: 14px;
		--swrw-size: clamp(2.6rem, 15.5vw, 4.4rem);
		--swrw-track: 0.07em;
		min-height: 420px;
		max-height: 680px;
	}

	.swrw-signwrap {
		top: 40%;
		width: 96%;
	}

	.swrw-city,
	.swrw-windows { height: 40%; }

	.swrw-caption {
		bottom: 26px;
		padding: 0 22px;
	}

	.swrw-caption-primary { font-size: 1.02rem; }
	.swrw-caption-second { font-size: 0.72rem; letter-spacing: 0.16em; }

	.swrw-room { box-shadow: inset 0 0 90px 22px rgba(0, 0, 0, 0.78); }

	.swrw-controls {
		right: 18px;
		bottom: 18px;
	}

	.swrw-btn {
		font-size: 10px;
		padding: 5px 10px;
	}
}

/* very small phones: hold the word on one line at all costs */
@media (max-width: 360px) {
	.swrw-stage {
		--swrw-size: clamp(2.2rem, 14vw, 3.4rem);
		--swrw-track: 0.04em;
	}
}

/* landscape phones have almost no height to give */
@media (max-height: 520px) and (orientation: landscape) {
	.swrw-stage {
		--swrw-h: 100svh;
		--swrw-size: clamp(2.2rem, 9vw, 4rem);
		min-height: 300px;
	}

	.swrw-signwrap { top: 41%; }
	.swrw-caption { bottom: 16px; }
}

/* --- reduced motion -----------------------------------------------
   Not a nicety. Rain plus repeated flashing is precisely what this
   media query exists for. Under it there is no rain, no strike
   animation and no lightning wash, but the sequence still runs as
   gentle fades, so the meaning is not withheld from anyone.
   ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.swrw-l.is-striking,
	.swrw-l.is-unstable { animation: none; }

	.swrw-lightning,
	.swrw-rain-far,
	.swrw-rain-near { display: none; }

	.swrw-l,
	.swrw-caption { transition-duration: 900ms; }
}