/* ==========================================================================
   Atelierul 3D (homepage) — scena, HUD-ul de arhitect, stațiile de sticlă
   ========================================================================== */

.s3d { position: relative; background: #0b0b0d; color: #F4F3EF; }
.s3d__stage { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; }
.s3d__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.s3d--pick .s3d__canvas { cursor: pointer; }
.s3d__vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, .55)); }
.s3d__flat-grid { display: none; }

/* ---------------------------------------------------------------- încărcarea: logo-ul desenat ca o planșă */
.s3d__loader {
	position: absolute;
	inset: 0;
	z-index: 20;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 22px;
	background: #0b0b0d;
	color: rgba(244, 243, 239, .7);
	transition: opacity 1.1s var(--ease), visibility 1.1s;
}
.s3d--ready .s3d__loader { opacity: 0; visibility: hidden; }
.s3d__loader svg { width: 120px; height: 120px; fill: none; stroke-width: 1.4; overflow: visible; }
.s3d__loader .d1 { stroke: #F4F3EF; stroke-dasharray: 300; stroke-dashoffset: 300; animation: s3d-draw 2.2s var(--ease-io) infinite alternate; }
.s3d__loader .d2 { stroke: var(--signal); fill: var(--signal); fill-opacity: 0; stroke-dasharray: 90; stroke-dashoffset: 90; animation: s3d-draw 2.2s .4s var(--ease-io) infinite alternate; }
.s3d__loader .grid { stroke: rgba(244, 243, 239, .14); stroke-dasharray: 3 5; }
@keyframes s3d-draw { to { stroke-dashoffset: 0; fill-opacity: .9; } }

/* ---------------------------------------------------------------- HUD */
.s3d__hud {
	position: absolute;
	z-index: 5;
	top: 68px;
	left: var(--gutter);
	display: grid;
	gap: 6px;
	color: rgba(244, 243, 239, .78);
	pointer-events: none;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .6);
}
.s3d__xyz { color: rgba(244, 243, 239, .45); font-variant-numeric: tabular-nums; }
.s3d__dots {
	position: absolute;
	z-index: 5;
	right: calc(var(--gutter) - 6px);
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	gap: 4px;
}
.s3d__dots button {
	all: unset;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	padding: 5px 6px;
	color: rgba(244, 243, 239, .45);
	transition: color .3s;
}
.s3d__dots button::after { content: ""; width: 7px; height: 7px; border: 1px solid currentColor; transform: rotate(45deg); transition: background-color .3s, transform .4s var(--ease); }
.s3d__dots button em { font-style: normal; font-size: .82rem; opacity: 0; transform: translateX(6px); transition: opacity .3s, transform .4s var(--ease); white-space: nowrap; }
.s3d__dots button span { font-size: .62rem; }
.s3d__dots button:hover, .s3d__dots button.is-on { color: #F4F3EF; }
.s3d__dots button:hover em, .s3d__dots button.is-on em { opacity: 1; transform: none; }
.s3d__dots button.is-on::after { background: var(--signal); border-color: var(--signal); transform: rotate(45deg) scale(1.25); }
.s3d__dots button:focus-visible { outline: 2px solid var(--signal); border-radius: 8px; }

.s3d__sound { position: absolute; z-index: 5; top: 62px; right: var(--gutter); color: #f5f5f7; --glass-bg-hi: rgba(29, 29, 31, .6); --h: 32px !important; font-size: .8125rem !important; }
.s3d__sound .eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.s3d__sound .eq i { width: 2px; height: 3px; background: currentColor; border-radius: 1px; }
.s3d__sound.is-on .eq i { animation: s3d-eq 1s ease-in-out infinite alternate; }
.s3d__sound.is-on .eq i:nth-child(2) { animation-delay: .25s; }
.s3d__sound.is-on .eq i:nth-child(3) { animation-delay: .5s; }
@keyframes s3d-eq { to { height: 12px; } }

.s3d__tip {
	position: fixed;
	z-index: 30;
	left: 0;
	top: 0;
	display: none;
	gap: 2px;
	max-width: 280px;
	padding: 10px 14px;
	border-radius: 14px;
	background: rgba(14, 14, 18, .6);
	-webkit-backdrop-filter: blur(18px) saturate(160%);
	backdrop-filter: blur(18px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, .16);
	pointer-events: none;
	text-transform: none;
	letter-spacing: 0;
}
.s3d--pick .s3d__tip { display: grid; }
.s3d__tip b { font-family: var(--sans); font-weight: 600; font-size: .98rem; letter-spacing: -0.01em; }
.s3d__tip span { color: rgba(244, 243, 239, .6); text-transform: uppercase; letter-spacing: .08em; font-size: .64rem; }

/* ---------------------------------------------------------------- stațiile */
.s3d__stations { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.stn {
	position: absolute;
	left: var(--gutter);
	bottom: clamp(22px, 6vh, 64px);
	width: min(500px, calc(100% - 2 * var(--gutter)));
	padding: clamp(24px, 2.6vw, 36px);
	border-radius: 28px;
	display: grid;
	gap: 14px;
	opacity: 0;
	pointer-events: none;
	--glass-bg: rgba(22, 22, 23, .7);
	--glass-line: rgba(255, 255, 255, .08);
	color: #F4F3EF;
	will-change: opacity, transform;
}
.stn.is-on { pointer-events: auto; }
.stn .h2 { font-size: clamp(1.75rem, 2.6vw, 2.5rem); line-height: 1.08; }
.stn p:not(.eyebrow):not(.mono) { font-size: 1.0625rem; line-height: 1.47; }
.stn .muted, .stn .h2 em { color: #a1a1a6; }
.stn .eyebrow { color: #a1a1a6; }
.stn .btn { color: #F4F3EF; --glass-bg: rgba(255, 255, 255, .1); --glass-line: rgba(255, 255, 255, .2); justify-self: start; }
.stn .btn--solid { background: #f5f5f7; color: #1d1d1f; }
.stn[data-stn="desk"], .stn[data-stn="board"], .stn[data-stn="project"] { left: auto; right: calc(var(--gutter) + 34px); }

.stn--intro {
	width: min(960px, calc(100% - 2 * var(--gutter)));
	padding: 0;
	gap: 22px;
	bottom: clamp(36px, 9vh, 96px);
	text-shadow: 0 2px 30px rgba(0, 0, 0, .55);
}
.stn--intro .display { font-size: clamp(3rem, 7vw, 7rem); line-height: 1; letter-spacing: -0.03em; }
.stn--intro .display em { color: rgba(245, 245, 247, .55); }
.stn--intro .lead { color: rgba(244, 243, 239, .78); max-width: 46ch; }
.stn__row { display: flex; flex-wrap: wrap; gap: 10px; }
.stn__quote { font-family: var(--sans); font-weight: 600; letter-spacing: -0.02em; font-size: clamp(1.2rem, 1.7vw, 1.5rem); line-height: 1.25; display: grid; gap: 10px; color: #a1a1a6; }
.stn__quote cite { font-style: normal; color: rgba(244, 243, 239, .55); }
.stn__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.stn__chips span { padding: 7px 11px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); }
.stn__list { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 2px; }
.stn__list li { counter-increment: s; display: flex; gap: 14px; padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: 1rem; }
.stn__list li::before { content: counter(s, decimal-leading-zero); font-family: var(--mono); font-size: .7rem; color: var(--signal); padding-top: 4px; }
.stn__metrics { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 28px; margin: 0; }
.stn__metrics dd { margin: 4px 0 0; font-family: var(--sans); font-weight: 600; font-size: clamp(2rem, 3.4vw, 3rem); letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stn__people { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.stn__people li { display: grid; gap: 2px; }
.stn__people b { font-weight: 500; font-size: 1.05rem; }
.stn__addr { font-style: normal; line-height: 1.6; color: rgba(244, 243, 239, .8); }
.stn__addr a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(244, 243, 239, .35); }
.stn--beyond { --glass-bg: rgba(8, 7, 6, .5); --glass-line: rgba(242, 201, 139, .22); }
.stn--beyond .h2 { color: #f5e6cf; }
.stn--beyond p[data-b="line"] { color: rgba(244, 243, 239, .8); font-size: .98rem; line-height: 1.55; }
.stn__hint { color: rgba(242, 201, 139, .75); }
@media (hover: none) { .stn__hint { display: none; } }
.stn--project p[data-p="line"] { color: rgba(244, 243, 239, .8); font-size: .98rem; line-height: 1.55; }

@media (max-width: 820px) {
	.stn, .stn[data-stn] { left: 12px; right: 12px; width: auto; bottom: 12px; padding: 18px 18px 20px; gap: 12px; }
	.stn .h2 { font-size: 1.55rem; }
	.stn--intro { padding: 0 4px; bottom: 28px; }
	.stn--intro .display { font-size: clamp(2.8rem, 13vw, 4.4rem); }
	.stn__list li { padding: 4px 0; font-size: .92rem; }
	.stn__people span { display: none; }
	.s3d__dots { display: none; }
	.s3d__xyz { display: none; }
	.s3d__sound { top: 58px; }
	.s3d__hud { top: 62px; }
}
@media (max-height: 700px) and (min-width: 821px) {
	.stn { gap: 12px; padding: 20px 22px; }
	.stn .h2 { font-size: 1.8rem; }
}

/* ---------------------------------------------------------------- fără WebGL / fără JS: pagină obișnuită */
.no-js .s3d__stage, .s3d--flat .s3d__stage { position: static; height: auto; overflow: visible; padding-top: 120px; }
.no-js .s3d__canvas, .no-js .s3d__vignette, .no-js .s3d__loader, .no-js .s3d__hud, .no-js .s3d__dots, .no-js .s3d__sound, .no-js .s3d__track,
.s3d--flat .s3d__canvas, .s3d--flat .s3d__vignette, .s3d--flat .s3d__hud, .s3d--flat .s3d__dots, .s3d--flat .s3d__sound, .s3d--flat .s3d__track,
.no-js .stn--project, .s3d--flat .stn--project, .no-js .stn--beyond, .s3d--flat .stn--beyond, .no-js .s3d__tip, .s3d--flat .s3d__tip { display: none; }
.no-js .s3d__stations, .s3d--flat .s3d__stations { position: static; display: grid; gap: 16px; width: min(100% - 2 * var(--gutter), 900px); margin: 0 auto 60px; }
.no-js .stn, .s3d--flat .stn { position: static; opacity: 1; pointer-events: auto; width: auto; transform: none; }
.no-js .s3d__flat-grid, .s3d--flat .s3d__flat-grid { display: block; }