/*
 * Pullassu — el que theme.json no pot expressar: atmosfera (gra, boira, bosc),
 * estils de bloc ("is-style-…"), capçalera fixa i animacions.
 * Es carrega a la web i dins de l'editor.
 */

:root {
	--pullassu-linia: rgba(195, 204, 202, .14);
	--pullassu-capcalera: var(--wp--custom--capcalera, 72px);
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--pullassu-capcalera) + 8px); }
body { -webkit-font-smoothing: antialiased; overflow-x: clip; }
::selection { background: var(--wp--preset--color--boira); color: var(--wp--preset--color--nit); }

/* Gra de pel·lícula antiga per sobre de tot. */
body:not(.wp-admin)::after {
	content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .13; mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Als títols, la cursiva és el to boirós. */
:is(h1, h2, h3, h4) em { color: var(--wp--preset--color--boira); }

/* ---------- Logo al costat del nom (web: títol del lloc; botiga: "Botiga") ---------- */
.pullassu-marca { margin: 0; font-family: var(--wp--preset--font-family--fell-versaletes); font-size: 22px; letter-spacing: .3em; text-transform: uppercase; }
:is(.pullassu-marca, .pullassu-amb-logo) a { display: flex; align-items: center; gap: 14px; color: var(--wp--preset--color--os); text-decoration: none; transition: color .4s; }
:is(.pullassu-marca, .pullassu-amb-logo) a::before {
	content: ""; width: 42px; height: 38px; flex: none; background: currentColor;
	mask: url("../icons/logo.svg") center / contain no-repeat;
}
:is(.pullassu-marca, .pullassu-amb-logo) a:hover { color: var(--wp--preset--color--espelma); }
@media (max-width: 600px) {
	.pullassu-marca, .pullassu-amb-logo { font-size: 18px !important; letter-spacing: .2em !important; }
	:is(.pullassu-marca, .pullassu-amb-logo) a::before { width: 34px; height: 30px; }
}

/* ---------- Capçalera fixa ---------- */
.pullassu-capcalera {
	position: fixed; inset: 0 0 auto; z-index: 40; min-height: var(--pullassu-capcalera);
	border-bottom: 1px solid transparent;
	background: rgba(11, 14, 15, .82); backdrop-filter: blur(10px); border-color: var(--pullassu-linia);
}
.admin-bar .pullassu-capcalera { top: 32px; }
@media (max-width: 782px) { .admin-bar .pullassu-capcalera { top: 46px; } }
/* El contingut comença sota la capçalera, tret que la primera secció sigui el bosc. */
.wp-site-blocks > main { padding-top: var(--pullassu-capcalera); }
.wp-site-blocks > main:has(.is-style-bosc:first-child) { padding-top: 0; }
/* Sobre el bosc, la capçalera és transparent i s'enfosqueix en baixar. */
@supports (animation-timeline: scroll()) {
	body:has(main .is-style-bosc:first-child) .pullassu-capcalera {
		animation: pullassu-capcalera linear both; animation-timeline: scroll(root); animation-range: 0 120px;
	}
	@keyframes pullassu-capcalera {
		from { background: transparent; backdrop-filter: none; border-color: transparent; }
		to { background: rgba(11, 14, 15, .82); backdrop-filter: blur(10px); border-color: var(--pullassu-linia); }
	}
}
.pullassu-capcalera .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--nit); color: var(--wp--preset--color--os);
	font-size: 20px;
}

/* ---------- Estils de grup ---------- */

/* Bosc amb boira: la portada. */
.wp-block-group.is-style-bosc {
	position: relative; isolation: isolate; overflow: hidden;
	min-height: max(100svh, 640px);
	padding-inline: max(16px, 5vw);
	background: var(--wp--preset--color--nit) url("../img/bosc.svg") center bottom / cover no-repeat;
}
.wp-block-group.is-style-bosc::before,
.wp-block-group.is-style-bosc::after { content: ""; position: absolute; pointer-events: none; z-index: -1; }
/* Dues capes de boira que deriven. */
.wp-block-group.is-style-bosc::before {
	left: -20%; width: 140%; bottom: 8%; height: 40%; filter: blur(30px);
	background:
		radial-gradient(ellipse 30% 50% at 25% 50%, rgba(170, 184, 184, .32), transparent 70%),
		radial-gradient(ellipse 35% 45% at 75% 60%, rgba(170, 184, 184, .26), transparent 70%),
		radial-gradient(ellipse 40% 40% at 60% 110%, rgba(140, 156, 158, .32), transparent 70%);
	animation: pullassu-deriva 38s ease-in-out infinite alternate;
}
/* Vinyeta i fosa cap a la nit de sota. */
.wp-block-group.is-style-bosc::after {
	inset: 0;
	background:
		radial-gradient(ellipse 90% 80% at 50% 45%, transparent 50%, rgba(5, 7, 7, .75)),
		linear-gradient(180deg, rgba(5, 7, 7, .55), transparent 18%, transparent 82%, var(--wp--preset--color--nit));
}
.is-style-bosc :is(h1, p) { text-shadow: 0 2px 24px rgba(0, 0, 0, .8); }
.is-style-bosc h1 {
	font-family: var(--wp--preset--font-family--fell-versaletes); line-height: .9; letter-spacing: .06em;
	text-shadow: 0 0 50px rgba(200, 212, 210, .35), 0 4px 30px rgba(0, 0, 0, .55);
	animation: pullassu-emergeix 3.2s ease-out both;
}

/* Boira: un halo suau a dalt de la secció. */
.wp-block-group.is-style-boira {
	background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(138, 154, 156, .08), transparent 70%), var(--wp--preset--color--nit);
}

/* Llum d'espelma: un halo càlid. */
.wp-block-group.is-style-espelma {
	background: radial-gradient(ellipse 40% 45% at 50% 22%, rgba(227, 168, 87, .12), transparent 70%), var(--wp--preset--color--nit);
}

/* Línia d'arbres a dalt (el peu). */
.wp-block-group.is-style-arbres {
	position: relative;
	padding-top: clamp(140px, 18vw, 240px) !important;
	background:
		url("../img/arbres.svg") center top / 100% clamp(120px, 16vw, 220px) no-repeat,
		linear-gradient(180deg, transparent clamp(80px, 10vw, 140px), #0f1415 clamp(120px, 16vw, 220px));
}

/* ---------- Estils de paràgraf ---------- */
p.is-style-avantitol {
	font-family: var(--wp--preset--font-family--fell-versaletes); font-size: 15px; line-height: 1.4;
	letter-spacing: .2em; color: var(--wp--preset--color--boira);
}
.is-style-bosc p.is-style-avantitol { color: var(--wp--preset--color--os); }
p.is-style-entradeta {
	font-family: var(--wp--preset--font-family--fell); font-style: italic;
	font-size: var(--wp--preset--font-size--gran); line-height: 1.5; color: var(--wp--preset--color--fum);
}
p.is-style-nota {
	font-style: italic; font-size: 15px; line-height: 1.5; color: var(--wp--preset--color--boira); opacity: .85;
}
p.is-style-xifra {
	font-family: var(--wp--preset--font-family--fell); font-size: clamp(130px, 17vw, 250px); line-height: .95; letter-spacing: -.02em;
	background: linear-gradient(180deg, var(--wp--preset--color--fum), rgba(138, 154, 156, .05) 90%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Cinta en moviment (el filtre de PHP duplica el text). */
p.is-style-cinta {
	display: flex; overflow: hidden; white-space: nowrap;
	padding-block: 20px; border-block: 1px solid var(--pullassu-linia);
	font-family: var(--wp--preset--font-family--fell); font-style: italic;
	font-size: clamp(30px, 4vw, 54px); line-height: 1; color: var(--wp--preset--color--boira);
}
p.is-style-cinta .cinta__pista { display: flex; flex: none; animation: pullassu-cinta 70s linear infinite; }
p.is-style-cinta .cinta__pista > span { opacity: .55; padding-right: .3em; }
p.is-style-cinta .cinta__pista > span::after { content: " ·"; }

/* ---------- Botons ---------- */
.wp-block-button.is-style-enllac .wp-block-button__link {
	background: none; border: 0; border-bottom: 1px solid var(--pullassu-linia); padding: 0 0 5px;
	font-size: 15px; letter-spacing: .18em; color: var(--wp--preset--color--fum); box-shadow: none;
}
.wp-block-button.is-style-enllac .wp-block-button__link:hover { color: var(--wp--preset--color--espelma); border-color: var(--wp--preset--color--espelma); }
.wp-block-button__link { transition: color .5s, border-color .5s, box-shadow .6s; backdrop-filter: blur(3px); }

/* ---------- Passos del ritual ---------- */
.wp-block-columns.is-style-passos { gap: 0; border-block: 1px solid var(--pullassu-linia); }
.wp-block-columns.is-style-passos > .wp-block-column {
	padding: 52px 36px 48px; text-align: center; transition: background .6s;
}
.wp-block-columns.is-style-passos > .wp-block-column + .wp-block-column { border-left: 1px solid var(--pullassu-linia); }
.wp-block-columns.is-style-passos > .wp-block-column:hover { background: radial-gradient(ellipse at 50% 30%, rgba(227, 168, 87, .07), transparent 70%); }
.wp-block-columns.is-style-passos p { color: var(--wp--preset--color--boira); }
@media (max-width: 781px) {
	.wp-block-columns.is-style-passos > .wp-block-column + .wp-block-column { border-left: 0; border-top: 1px solid var(--pullassu-linia); }
}

/* ---------- Icones ---------- */
/* Als passos, totes les icones ocupen el mateix alt perquè els títols quedin alineats. */
.is-style-passos .wp-block-icon { height: 64px; display: flex; align-items: center; justify-content: center; }
.is-style-passos .wp-block-icon svg { max-height: 100%; }
.wp-block-icon.is-style-resplendor { color: var(--wp--preset--color--espelma); }
.wp-block-icon.is-style-resplendor svg { filter: drop-shadow(0 0 18px rgba(227, 168, 87, .65)); animation: pullassu-flama 2.4s ease-in-out infinite; }

/* ---------- Llistats: cartes (personatges) ---------- */
.wp-block-query.is-style-cartes .wp-block-post {
	position: relative; overflow: hidden; aspect-ratio: 3 / 4; border: 1px solid var(--pullassu-linia);
	background: radial-gradient(ellipse 80% 60% at 50% 25%, #4c5b5e, #1d2527 60%, #0d1112);
	transition: border-color .6s, transform .8s cubic-bezier(.2, .7, .2, 1);
}
/* Sense imatge: les banyes, com un sigil. */
.wp-block-query.is-style-cartes .wp-block-post:not(:has(.wp-block-post-featured-image img))::before {
	content: ""; position: absolute; left: 50%; top: 14%; width: 46%; aspect-ratio: 3 / 2; translate: -50% 0;
	background: #0c1011; mask: url("../icons/banyes.svg") center / contain no-repeat; transition: background .8s;
}
.wp-block-query.is-style-cartes .wp-block-post::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 45%, rgba(8, 10, 11, .92));
}
.wp-block-query.is-style-cartes .wp-block-post-featured-image { position: absolute; inset: 0; margin: 0; }
.wp-block-query.is-style-cartes .wp-block-post-featured-image :is(a, img) { width: 100%; height: 100%; object-fit: cover; }
.wp-block-query.is-style-cartes .wp-block-post-featured-image img { transition: filter .8s, scale 1.2s; }
.wp-block-query.is-style-cartes .wp-block-post > .wp-block-group {
	position: absolute; z-index: 1; inset: auto 28px 26px; gap: 6px;
}
.wp-block-query.is-style-cartes .wp-block-post-title { font-size: clamp(28px, 2.6vw, 38px); margin: 0; }
/* Tota la carta és clicable a través del títol. */
.wp-block-query.is-style-cartes .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.wp-block-query.is-style-cartes .wp-block-post:hover,
.wp-block-query.is-style-cartes .wp-block-post:focus-within { border-color: rgba(227, 168, 87, .5); transform: translateY(-6px); }
.wp-block-query.is-style-cartes .wp-block-post:hover::before { background: var(--wp--preset--color--espelma); }
.wp-block-query.is-style-cartes .wp-block-post:hover img { scale: 1.04; }

/* ---------- Llistats: llista (arxiu) ---------- */
.wp-block-query.is-style-llista .wp-block-post-template { gap: 0; }
.wp-block-query.is-style-llista .wp-block-post {
	padding-block: 30px; border-top: 1px solid var(--pullassu-linia); transition: padding .5s, background .5s;
}
.wp-block-query.is-style-llista .wp-block-post:last-child { border-bottom: 1px solid var(--pullassu-linia); }
.wp-block-query.is-style-llista .wp-block-post:hover { padding-left: 14px; background: linear-gradient(90deg, rgba(138, 154, 156, .06), transparent); }
.wp-block-query.is-style-llista .wp-block-post-title { font-size: clamp(26px, 2.4vw, 34px); margin: 0; }
.wp-block-query.is-style-llista .wp-block-post-title a:hover { color: var(--wp--preset--color--espelma); }
.wp-block-query.is-style-llista .wp-block-post-excerpt__excerpt { margin: 0; }

/* ---------- Contingut ---------- */
.wp-block-post-content a:where(:not(.wp-element-button)) { text-decoration-color: var(--pullassu-linia); text-underline-offset: .2em; }
.wp-block-post-content a:where(:not(.wp-element-button)):hover { text-decoration-color: currentColor; }
.wp-block-image img, .wp-block-post-featured-image img { height: auto; }

/* ---------- Aparició suau de les seccions ---------- */
@supports (animation-timeline: view()) {
	.wp-block-post-content > .wp-block-group:not(.is-style-bosc) > * {
		animation: pullassu-apareix linear both; animation-timeline: view(); animation-range: entry 0% entry 40%;
	}
}

@keyframes pullassu-deriva { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
@keyframes pullassu-emergeix { from { opacity: 0; filter: blur(14px); letter-spacing: .12em; } to { opacity: 1; filter: blur(0); letter-spacing: .06em; } }
@keyframes pullassu-cinta { to { transform: translateX(-100%); } }
@keyframes pullassu-flama { 0%, 100% { opacity: 1; } 20% { opacity: .8; } 45% { opacity: 1; } 70% { opacity: .75; } }
@keyframes pullassu-apareix { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	html { scroll-behavior: auto; }
}

/* Fila de l'arxiu: edició · títol · tipus · resum. */
.pullassu-fila { display: grid; grid-template-columns: 120px 1fr 140px 1.1fr; gap: 28px; align-items: baseline; }
.pullassu-fila > * { margin: 0 !important; }
@media (max-width: 980px) { .pullassu-fila { grid-template-columns: 90px 1fr; row-gap: 6px; } }
@media (max-width: 640px) { .pullassu-fila { grid-template-columns: 1fr; gap: 4px; } }