/*
	Theme Name: Hello StudioBlanch
	Theme URI: https://www.studioblanch.com/
	Description: Tema fill de Hello Elementor per a Studio Blanch. Tota la personalització del lloc va aquí, de manera que el tema pare es pugui actualitzar sense perdre res.
	Author: Studio Blanch
	Author URI: https://www.studioblanch.com/
	Template: hello-elementor
	Version: 1.0.0
	Requires PHP: 7.4
	License: GNU General Public License v3 or later.
	License URI: https://www.gnu.org/licenses/gpl-3.0.html
	Text Domain: hello_studioblanch
*/

/*
 * Els estils del tema pare (reset.css, theme.css, header-footer.css) es carreguen
 * abans que aquest fitxer; aquí només hi van les sobreescriptures del lloc.
 *
 * Nota: la major part del disseny es gestiona des del kit global d'Elementor
 * (Elementor > Configuració del lloc). Fes servir aquest fitxer només per al que
 * el kit no cobreix.
 */

.sb-door{
	position: relative;
	overflow: hidden;
    isolation: isolate;
}

.sb-door::before{
	content: ""; 
	position: absolute;
	inset: 0;
	z-index: -1; 
	background-image: inherit;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transition: transform .7s cubic-bezier(.22,.61,.36,1);                                                           
}

.sb-door:hover::before,
.sb-door:focus-within::before{                                                                                         
    transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
	.sb-door::before{ transition: none; }
	.sb-door:hover::before,
	.sb-door:focus-within::before{ transform: none; }
}
/* ------------------------------------------------------------------
   Cortina d'entrada de la portada.

   Va per damunt de tot (9999): durant el negre només s'hi han de veure el
   logotip gran, la reixa i «Interior / Architecture». La capçalera, la
   hamburguesa i l'ES/EN són de la pàgina de sota i han d'anar apareixent a
   mesura que la persiana es retira.

   Els temps surten de mesurar fotograma a fotograma el vídeo de la Linda.
   Contrasta'ls amb els comentaris del Figma abans de donar-los per bons.
   ------------------------------------------------------------------ */
.sb-cortina{
	/* Ritme de tota la seqüència. Els temps de sota són els mesurats al vídeo
	   de la Linda; aquest multiplicador els estira tots alhora. A 1 dura els
	   1,69 s de l'original; a 2.37, els 4 s que volem. Toca només això. */
	--sb-tempo: 2.37;

	position: fixed;
	inset: 0;
	z-index: 9999;
	background: #1A1A1A;
	overflow: hidden;
	clip-path: inset(0 0 0 0);
}

/* El logotip s'ancora a dalt a l'esquerra perquè és el punt fix de l'escalat. */
.sb-cortina__marca{
	position: absolute;
	left: 6vw;
	top: 12vh;
	width: clamp(280px, 42vw, 900px);
	height: auto;
	transform-origin: top left;
}

/* A l'escriptori omple la finestra; al mòbil s'escurça i queda centrada,
   perquè estirada a tota l'alçada d'un telèfon el rectangle es desproporciona.
   L'alçada és l'únic que canvia: la resta de la composició la segueix. */
.sb-cortina__reixa{
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: var(--sb-reixa-alt, 100%);
	transform: translateY(-50%);
}

.sb-cortina__reixa svg{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.sb-cortina__reixa path{
	fill: none;
	stroke: #F2F1F4;
	stroke-width: 1;
	opacity: .45;
}

/* Dues variants de la reixa: l'osca de baix a l'esquerra ha de ser prou ampla
   per encabir-hi «Architecture». Al 20% de l'amplada això només es compleix en
   pantalles grans; al mòbil cal obrir-la fins al 41%. */
.sb-reixa--estret{ display: none; }

/* Seu dins de l'osca que la reixa deixa a baix a l'esquerra. */
.sb-cortina__peu{
	position: absolute;
	left: 3.3%;
	bottom: 4.5%;
	color: #F2F1F4;
	font-size: .75rem;
	line-height: 1.35;
}

/* Sense JS o amb moviment reduït, la cortina no arrenca i el JS la retira. */
.sb-cortina.is-animada{
	animation: sb-persiana calc(770ms * var(--sb-tempo)) cubic-bezier(.76, 0, .24, 1)
		calc(920ms * var(--sb-tempo)) forwards;
}

.sb-cortina.is-animada .sb-cortina__marca{
	opacity: 0;
	transform: translateY(40px);
	animation:
		sb-marca-entra calc(620ms * var(--sb-tempo)) cubic-bezier(.22, .61, .36, 1)
			calc( 80ms * var(--sb-tempo)) forwards,
		sb-marca-surt  calc(540ms * var(--sb-tempo)) cubic-bezier(.55, 0, .55, .2)
			calc(830ms * var(--sb-tempo)) forwards;
}

.sb-cortina.is-animada .sb-cortina__reixa{
	opacity: 0;
	animation:
		sb-reixa-entra calc(620ms * var(--sb-tempo)) ease-out
			calc( 80ms * var(--sb-tempo)) forwards,
		sb-reixa-surt  calc(120ms * var(--sb-tempo)) ease-in
			calc(720ms * var(--sb-tempo)) forwards;
}

/* El costat dret avança cap a l'esquerra: la imatge entra pel cantó dret. */
@keyframes sb-persiana{
	to{ clip-path: inset(0 100% 0 0); }
}

/* Entra pujant 40 px, sense canviar de mida. */
@keyframes sb-marca-entra{
	to{ opacity: 1; transform: translateY(0) scale(1); }
}

/* Surt esvaint-se i encongint fins a 0,35, ancorada a dalt a l'esquerra. */
@keyframes sb-marca-surt{
	from{ opacity: 1; transform: translateY(0) scale(1); }
	to{   opacity: 0; transform: translateY(0) scale(.35); }
}

@keyframes sb-reixa-entra{ to{ opacity: 1; } }
@keyframes sb-reixa-surt{ from{ opacity: 1; } to{ opacity: 0; } }

/* ---- Mòbil ---------------------------------------------------------- */
@media (max-width: 767px){
	.sb-cortina{ --sb-reixa-alt: 60vh; }

	.sb-reixa--ample{ display: none; }
	.sb-reixa--estret{ display: block; }

	.sb-cortina__peu{ font-size: .7rem; }

	/* El logotip baixa per quedar dins de la reixa, no per sobre. */
	.sb-cortina__marca{
		top: 24vh;
		left: 8vw;
		width: min(78vw, 420px);
	}
}

/* ---- Transició entre el llistat i la fitxa -------------------------
   La imatge clicada conserva el nom «sb-hero» a les dues pàgines, i el
   navegador la manté a lloc mentre canvia de document. On no hi hagi suport,
   és una navegació normal. El nom el posa el JS en clicar, perquè només un
   element pot dur-lo alhora. */
@view-transition{ navigation: auto; }

/* La classe pot anar a la imatge mateixa o a un contenidor: Elementor la
   posa on li diguis i les dues formes han de valdre. */
img.sb-hero,
.sb-hero img{ view-transition-name: sb-hero; }

::view-transition-old(sb-hero),
::view-transition-new(sb-hero){
	animation-duration: .5s;
	animation-timing-function: cubic-bezier(.22, .61, .36, 1);
}

/* Etiqueta de la taxonomia a la fitxa de projecte.
   Va al camp «Abans» del camp dinàmic de termes, i per això només apareix quan
   el projecte en té algun. */
.sb-etiqueta{
	display: block;
	margin-bottom: 5px;
}

/* Imatge que ha d'ocupar tota l'amplada del seu contenidor.
   Elementor embolica les imatges enllaçades en un <a> que s'ajusta al
   contingut, i el 100% de la imatge es mesura contra aquell <a>, que al seu
   torn fa el que faci la imatge: és circular i no s'eixampla mai. Cal
   eixamplar també l'embolcall. */
.sb-plena{
	width: 100%;
	height: auto;
	min-width: 0;
}

.e-image-link-base:has( > .sb-plena ){ width: 100%; }

/* ==================================================================
   Capçalera amb el logotip que es replega
   ================================================================== */
.sb-capcalera-gran{
	/* Els dos números de l'efecte. Tocar-los aquí.
	   El petit és la mida natural del logotip, la mateixa que a la resta de
	   capçaleres; el recorregut, els píxels de scroll que triga a plegar-se. */
	--sb-logo-petit: 146px;
	--sb-logo-recorregut: 240px;

	/* Progrés de 0 a 1. El publica el JS; sense ell, es queda gran. */
	--sb-p: 0;

	position: sticky;
	top: 0;
	z-index: 9500;

	/* L'ancoratge de scroll compensa els canvis d'alçada del que hi ha a dalt.
	   Amb una capçalera que encongeix mentre es baixa, això es pot realimentar:
	   el navegador reajusta la posició, la posició canvia la mida, i tornem-hi. */
	overflow-anchor: none;
}

.sb-capcalera-gran .e-image-link-base{ width: 100%; }

/* La classe es repeteix a propòsit: Elementor treu els seus estils amb
   «.elementor .e-xxxxx», que pesa més que una classe i un element, i sense
   això la seva amplada guanyaria i el logotip no es mouria. */
.sb-capcalera-gran.sb-capcalera-gran img{
	width: calc(
		var(--sb-logo-petit) + (100% - var(--sb-logo-petit)) * (1 - var(--sb-p))
	);
	height: auto;
	min-width: 0;
	max-width: 100%;
}