/*
Theme Name: Fotograma
Theme URI: https://wordpress.org/themes/
Author: Fotograma
Description: Portfolio cinematográfico para creativos publicitarios. Tema de bloques completamente editable desde el Editor del sitio: proyectos con caso completo, un playground para trabajos personales y una sección de contacto. Barra de navegación de vidrio esmerilado, índice de proyectos con fotograma lateral, apertura de proyecto que funde a negro y animaciones suaves al pasar el mouse. Listo para sitios bilingües (español / inglés).
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.2.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fotograma
Domain Path: /languages
Tags: portfolio, one-column, wide-blocks, full-site-editing, block-patterns, block-styles, custom-colors, custom-logo, editor-style, style-variations, translation-ready
*/

/* -------------------------------------------------------------
   Base
------------------------------------------------------------- */
:root {
	--fg-ease: cubic-bezier(.2, .7, .2, 1);
	--fg-header-h: 4.25rem;
	--fg-gutter: var(--wp--style--root--padding-left, clamp(1rem, 4vw, 3rem));

	/* Type roles. They follow Styles → Typography (Text, Headings, Captions); inc/style-roles.php
	   prints the values chosen there. These are only the starting values. */
	--fg-font-text: var(--wp--preset--font-family--body, "Inter", system-ui, sans-serif);
	--fg-font-heading: var(--wp--preset--font-family--display, "Inter Display", "Inter", system-ui, sans-serif);
	--fg-weight-heading: 800;
	--fg-font-caption: var(--wp--preset--font-family--credits, "Lora", Georgia, serif);
	--fg-font-caption-style: italic;

	/* Letter spacing of headlines. One value, set in Styles → Typography → Headings → Letter spacing
	   (inc/style-roles.php prints it here); larger type uses proportionally tighter steps:
	   --fg-track-2 for big titles, --fg-track-3 for poster-size ones (name, email, "Next project"). */
	--fg-tracking: -0.025em;
	--fg-track-2: calc(var(--fg-tracking) * 1.4);
	--fg-track-3: calc(var(--fg-tracking) * 2);

	/* Colours over photos and video. Edit them in Styles → Colors → Palette. */
	--fg-on-media: var(--wp--preset--color--on-media, #EDE6D6);
	--fg-scrim: var(--wp--preset--color--scrim, #000000);
	/* Tint of the frosted glass (navigation bar and cursor): Styles → Colors → Palette → "Vidrio". */
	--fg-glass: var(--wp--preset--color--glass, var(--wp--preset--color--base));
}

/* Sections: every full-width part of a page is a Group you can colour (or give a background image)
   from the editor sidebar. Stacked sections touch, so their backgrounds meet without gaps. */
.alignfull.fg-section { margin-block-start: 0 !important; margin-block-end: 0 !important; }

/* Headlines that still carry the theme's original spacing inside the block (from the patterns, or pages
   built with an earlier version) follow the Letter spacing setting too. Any other value you set on a
   block yourself is left alone. */
:is(h1, h2, h3, h4, p, .wp-block-post-title, .wp-block-query-title, .wp-block-post-navigation-link)[style*="letter-spacing:-0.05em"],
:is(h1, h2, h3, h4, p, .wp-block-post-title, .wp-block-query-title, .wp-block-post-navigation-link)[style*="letter-spacing:-0.045em"],
:is(h1, h2, h3, h4, p, .wp-block-post-title, .wp-block-query-title, .wp-block-post-navigation-link)[style*="letter-spacing:-0.04em"] { letter-spacing: var(--fg-track-3) !important; }
:is(h1, h2, h3, h4, p, .wp-block-post-title, .wp-block-query-title)[style*="letter-spacing:-0.035em"] { letter-spacing: var(--fg-track-2) !important; }

/* "Inverted over image" (Heading or Paragraph → Styles): white text in difference mode, so each letter
   shows the negative of what is behind it: light over dark areas, dark over light ones.
   Works inside a Cover block (image or video background). The text's own colour is ignored. */
.is-style-fg-invert {
	position: relative;
	z-index: 3;
	color: #fff !important;
	mix-blend-mode: difference;
}
.is-style-fg-invert a { color: inherit !important; }
/* Its wrappers must not form their own layer, or the text would have nothing to blend with. */
.wp-block-cover__inner-container:has(.is-style-fg-invert) { z-index: auto; isolation: auto; }
.wp-block-cover__inner-container:has(.is-style-fg-invert) > *,
.wp-block-cover__inner-container:has(.is-style-fg-invert) :is(h1, h2, h3, p, .wp-block-buttons):not(.is-style-fg-invert) { position: relative; z-index: 3; }
.wp-block-cover__inner-container:has(.is-style-fg-invert) > .wp-block-group:has(.is-style-fg-invert) { z-index: auto; }
.wp-block-cover__inner-container:has(.is-style-fg-invert) .wp-block-group:has(.is-style-fg-invert) { z-index: auto; isolation: auto; }

/* Role classes used by the patterns, so text follows the fonts chosen in Styles. */
.fg-font-heading { font-family: var(--fg-font-heading); font-weight: var(--fg-weight-heading); }
.fg-font-caption { font-family: var(--fg-font-caption); font-style: var(--fg-font-caption-style); font-weight: 400; }
.fg-on-media { color: var(--fg-on-media); }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-feature-settings: "ss01", "cv11";
}

::selection { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--base); }

:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

a { text-underline-offset: 0.18em; text-decoration-thickness: 1px; }

/* Film grain: a fixed noise layer over the whole page. Opacity lives in theme.json (custom.grain.opacity). */
body::after {
	content: "";
	position: fixed;
	inset: -50%;
	z-index: 9999;
	pointer-events: none;
	opacity: var(--wp--custom--grain--opacity, 0.07);
	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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	animation: fg-grain 0.9s steps(5) infinite;
}
.editor-styles-wrapper::after, body.wp-admin::after { display: none; }
@keyframes fg-grain {
	0% { transform: translate(0, 0); }
	20% { transform: translate(-3%, 2%); }
	40% { transform: translate(2%, -3%); }
	60% { transform: translate(-2%, -1%); }
	80% { transform: translate(3%, 3%); }
	100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce), (hover: none) { body::after { animation: none; } }
@media (forced-colors: active) { body::after { display: none; } }

/* Underline that grows from the left: menu, footer and any paragraph with the class fg-ulink. */
.fg-header .wp-block-navigation-item__content,
.fg-ulink a,
.fg-details a {
	position: relative;
	text-decoration: none;
}
.fg-header .wp-block-navigation-item__content::after,
.fg-ulink a::after,
.fg-details a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 1px;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 320ms var(--fg-ease);
}
.fg-header .wp-block-navigation-item__content:hover::after,
.fg-header .wp-block-navigation-item__content:focus-visible::after,
.fg-ulink a:hover::after,
.fg-ulink a:focus-visible::after,
.fg-details a:hover::after,
.fg-details a:focus-visible::after { transform: scaleX(1); }
.fg-header .wp-block-navigation-item__content:hover,
.fg-ulink a:hover,
.fg-details a:hover { color: var(--wp--preset--color--accent); }

/* -------------------------------------------------------------
   Header — fixed, frosted glass that fades out at the bottom (no hard edge)
------------------------------------------------------------- */
.wp-site-blocks > header.wp-block-template-part {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	/* WordPress inserts the "skip to content" link before the header, so the header stops being the
	   first block and inherits the 1.5rem gap between blocks. That gap pushed the bar off the top. */
	margin-block-start: 0 !important;
	margin-top: 0 !important;
}
.wp-site-blocks > main { margin-block-start: 0 !important; }
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar .wp-site-blocks > header.wp-block-template-part { top: 0; } }

/* Room for the fixed header. Project pages open with a full-screen still under it instead. */
.wp-site-blocks > main { padding-top: var(--fg-header-h); }
.single-fg_project .wp-site-blocks > main { padding-top: 0; }

.fg-header { position: relative; background: transparent; }
.fg-header::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: calc(100% + 56px);
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(180deg, color-mix(in srgb, var(--fg-glass) 62%, transparent) 0%, color-mix(in srgb, var(--fg-glass) 42%, transparent) 50%, transparent 100%);
	-webkit-backdrop-filter: blur(18px) saturate(1.5);
	backdrop-filter: blur(18px) saturate(1.5);
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.fg-header::before { background: linear-gradient(180deg, color-mix(in srgb, var(--fg-glass) 95%, transparent) 0%, color-mix(in srgb, var(--fg-glass) 85%, transparent) 50%, transparent 100%); }
}
@media (prefers-reduced-transparency: reduce) {
	.fg-header::before { background: linear-gradient(180deg, var(--fg-glass) 0%, var(--fg-glass) 60%, transparent 100%); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Logo next to (or instead of) the site name. Upload it in the header: Site logo block → Add logo.
   The width slider sets its size; it never grows taller than the bar. */
.fg-brand { min-width: 0; }
.fg-brand .wp-block-site-title { white-space: nowrap; }
.fg-header .wp-block-site-logo { line-height: 0; margin: 0; flex: none; }
.fg-header .wp-block-site-logo img {
	height: auto;
	max-height: clamp(2rem, 4.5vw, 3.25rem);
	max-width: min(100%, 45vw);
	object-fit: contain;
	object-position: left center;
	transition: opacity 220ms ease;
}
.fg-header .wp-block-site-logo a:hover img { opacity: .78; }

/* -------------------------------------------------------------
   Scope frame (2.39:1) — block style available on Cover, Image and Featured image
------------------------------------------------------------- */
.is-style-scope,
.is-style-scope img,
.wp-block-post-featured-image.is-style-scope img {
	aspect-ratio: var(--wp--custom--scope--ratio, 2.39 / 1);
}
.wp-block-cover.is-style-scope { min-height: 0 !important; }
.is-style-scope img { width: 100%; height: auto; object-fit: cover; }
@media (max-width: 600px) {
	.is-style-scope,
	.is-style-scope img { aspect-ratio: 16 / 10; }
}

/* -------------------------------------------------------------
   Home: showreel
------------------------------------------------------------- */
.fg-hero { position: relative; }
.fg-hero .wp-block-cover { overflow: hidden; }
.fg-hero .wp-block-cover__image-background,
.fg-hero .wp-block-cover__video-background { transition: transform 1400ms var(--fg-ease), filter 600ms ease; }
.fg-hero .wp-block-cover:hover .wp-block-cover__image-background,
.fg-hero .wp-block-cover:hover .wp-block-cover__video-background { transform: scale(1.045); filter: brightness(1.12); }

/* The reel-change cue mark flashes twice when the page opens. */
.fg-hero .wp-block-cover::after {
	content: "";
	position: absolute;
	top: 7%;
	right: 4.5%;
	width: clamp(14px, 1.6vw, 26px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--fg-on-media) 95%, transparent) 0 38%, color-mix(in srgb, var(--fg-on-media) 35%, transparent) 60%, transparent 72%);
	opacity: 0;
	z-index: 2;
	animation: fg-cue 2.4s 0.9s steps(1, end) 1 both;
}
@keyframes fg-cue {
	0% { opacity: 0; }
	8% { opacity: 1; }
	16% { opacity: 0; }
	40% { opacity: 1; }
	48% { opacity: 0; }
	100% { opacity: 0; }
}

.fg-hero .wp-block-cover video { object-fit: cover; }
.fg-hero__name { margin-top: 0 !important; }
.fg-hero__name.wp-block-heading { line-height: 0.86; letter-spacing: var(--fg-track-3); }
/* Never wider than the screen: the cover's content box may not grow past it, and
   the script shrinks the name to fit when a long word would overflow (phones). */
.wp-block-cover__inner-container:has(.fg-hero__name) { min-width: 0; max-width: 100%; }
.fg-hero__name { max-width: 100%; }

/* Buttons over images: dot + fill with the accent. */
.fg-hero .wp-block-button__link,
.fg-on-media .wp-block-button__link,
.fg-play .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.7em;
	min-height: 44px;
	color: var(--fg-on-media);
	background: color-mix(in srgb, var(--fg-scrim) 35%, transparent);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease, transform 380ms var(--fg-ease);
}
.fg-hero .wp-block-button__link::before,
.fg-on-media .wp-block-button__link::before,
.fg-play .wp-block-button__link::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	transition: transform 220ms ease;
}
.fg-play .wp-block-button__link::before {
	width: 0;
	height: 0;
	border-radius: 0;
	background: none;
	border-style: solid;
	border-width: 6px 0 6px 10px;
	border-color: transparent transparent transparent currentColor;
}
.fg-hero .wp-block-button__link:hover,
.fg-hero .wp-block-button__link:focus-visible,
.fg-on-media .wp-block-button__link:hover,
.fg-on-media .wp-block-button__link:focus-visible,
.fg-play .wp-block-button__link:hover,
.fg-play .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}
.fg-hero .wp-block-button__link:hover::before,
.fg-on-media .wp-block-button__link:hover::before { transform: scale(1.4); }
.fg-play .wp-block-button__link:hover { transform: scale(1.06); }

/* -------------------------------------------------------------
   Project index — list of titles; the still of the one you point at shows beside it.
------------------------------------------------------------- */
.fg-index { position: relative; }
.fg-index .wp-block-post-template { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--wp--preset--color--line); }
.fg-index .wp-block-post { border-bottom: 1px solid var(--wp--preset--color--line); transition: opacity 260ms ease; }

.fg-index__row { position: relative; }
.fg-index__row > .wp-block-post-title { flex: 0 1 auto; min-width: 0; }
.fg-index__row > :last-child { margin-left: auto; }
.fg-index .wp-block-post-title { margin: 0; display: flex; align-items: center; transition: transform 380ms var(--fg-ease), color 200ms ease; }
.fg-index .wp-block-post-title::before {
	content: "";
	flex: none;
	width: 0;
	height: 0.22em;
	margin-right: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	opacity: 0;
	transition: width 380ms var(--fg-ease), margin 380ms var(--fg-ease), opacity 200ms ease;
}
.fg-index .wp-block-post-title a { text-decoration: none; }
.fg-index .wp-block-post-title a::after {
	/* Whole row is clickable. */
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}

.fg-index .fg-index__still { margin: 0; overflow: hidden; }
.fg-index .fg-index__still img { aspect-ratio: var(--wp--custom--scope--ratio, 2.39 / 1); object-fit: cover; width: 100%; height: auto; display: block; }

@media (hover: hover) and (min-width: 782px) {
	.fg-index { min-height: 22rem; }
	.fg-index .wp-block-post-template { width: calc(55% - 1.5rem); }
	.fg-index .fg-index__still {
		position: absolute;
		top: 0;
		right: 0;
		width: calc(45% - 1.5rem);
		pointer-events: none;
		opacity: 0;
		transform: scale(1.04);
		transition: opacity 420ms ease, transform 900ms var(--fg-ease);
	}
	/* With nothing pointed at, the first project's still is on screen. */
	.fg-index .wp-block-post:first-child .fg-index__still { opacity: 1; transform: scale(1); }
	.fg-index .wp-block-post-template:hover .wp-block-post .fg-index__still,
	.fg-index .wp-block-post-template:focus-within .wp-block-post .fg-index__still { opacity: 0; transform: scale(1.04); }
	.fg-index .wp-block-post-template .wp-block-post:hover .fg-index__still,
	.fg-index .wp-block-post-template .wp-block-post:focus-within .fg-index__still { opacity: 1; transform: scale(1); }

	.fg-index .wp-block-post-template:has(.wp-block-post:hover) .wp-block-post:not(:hover) { opacity: 0.32; }
	.fg-index .wp-block-post:hover .wp-block-post-title,
	.fg-index .wp-block-post:focus-within .wp-block-post-title { color: var(--wp--preset--color--accent); transform: translateX(6px); }
	.fg-index .wp-block-post:hover .wp-block-post-title::before,
	.fg-index .wp-block-post:focus-within .wp-block-post-title::before { width: 0.22em; margin-right: 0.28em; opacity: 1; }
}
/* Touch screens and small widths: the still sits above each title. */
@media (hover: none), (max-width: 781px) {
	.fg-index .wp-block-post { display: flex; flex-direction: column; padding-top: 1.25rem; }
	.fg-index .fg-index__still { order: -1; }
}

/* -------------------------------------------------------------
   Playground — title and discipline over the image
------------------------------------------------------------- */
.fg-playground .wp-block-post {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--wp--preset--color--base);
}
.fg-playground .wp-block-post-featured-image { position: absolute; inset: 0; margin: 0; height: 100%; }
.fg-playground .wp-block-post-featured-image a { display: block; height: 100%; }
.fg-playground .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(.75);
	transition: transform 700ms var(--fg-ease), filter 500ms ease;
}
.fg-playground .wp-block-post::after {
	/* Shade at the bottom so the text reads on any photo. */
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 60%;
	pointer-events: none;
	background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--fg-scrim) 55%, transparent) 45%, color-mix(in srgb, var(--fg-scrim) 85%, transparent) 100%);
	opacity: .9;
	transition: opacity 500ms ease;
}
.fg-playground .fg-caption {
	position: absolute;
	left: 1.25rem;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 2;
	transition: transform 480ms var(--fg-ease);
}
.fg-playground .fg-caption .wp-block-post-terms { color: color-mix(in srgb, var(--fg-on-media) 82%, transparent); }
.fg-playground .fg-caption .wp-block-post-title {
	margin: 0;
	color: var(--fg-on-media);
	letter-spacing: var(--fg-tracking);
	line-height: 1.02;
	transition: color 200ms ease;
}
.fg-playground .fg-caption .wp-block-post-title a { text-decoration: none; color: inherit; }
.fg-playground .fg-caption .wp-block-post-title a::after { content: ""; position: absolute; inset: -100vh -100vw; z-index: 1; }
.fg-playground .wp-block-post { isolation: isolate; }
.fg-playground .wp-block-post:hover .wp-block-post-featured-image img,
.fg-playground .wp-block-post:focus-within .wp-block-post-featured-image img { transform: scale(1.06); filter: saturate(1.1); }
.fg-playground .wp-block-post:hover::after { opacity: 1; }
.fg-playground .wp-block-post:hover .fg-caption,
.fg-playground .wp-block-post:focus-within .fg-caption { transform: translateY(-6px); }
.fg-playground .wp-block-post:hover .wp-block-post-title,
.fg-playground .wp-block-post:focus-within .wp-block-post-title { color: var(--wp--preset--color--accent); }

/* -------------------------------------------------------------
   Lists: credits and awards (block styles)
------------------------------------------------------------- */
.wp-block-list.is-style-credits {
	list-style: none;
	padding-left: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
	gap: 1.25rem 2rem;
}
.wp-block-list.is-style-credits li { line-height: 1.35; }
.wp-block-list.is-style-credits li em {
	display: block;
	font-family: var(--fg-font-caption);
	font-style: var(--fg-font-caption-style);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	margin-bottom: 0.15rem;
}

.wp-block-list.is-style-awards { list-style: none; padding-left: 0; }
.wp-block-list.is-style-awards li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.25rem 2rem;
	padding: 0.9rem 0;
	border-top: 1px solid var(--wp--preset--color--line);
}
.wp-block-list.is-style-awards li:last-child { border-bottom: 1px solid var(--wp--preset--color--line); }
.wp-block-list.is-style-awards li em {
	font-family: var(--fg-font-caption);
	font-style: var(--fg-font-caption-style);
	color: var(--wp--preset--color--muted);
}

/* -------------------------------------------------------------
   Project page
------------------------------------------------------------- */
/* Opening still: fills the screen, stays put, fades to black while the content slides over it. */
.fg-project-hero {
	position: sticky;
	top: 0;
	z-index: 0;
	height: min(100vh, 900px);
	min-height: 520px;
	overflow: hidden;
	background: var(--wp--preset--color--base);
}
.fg-project-hero .wp-block-post-featured-image { position: absolute; inset: 0; margin: 0; height: 100%; }
.fg-project-hero .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(calc(1 + var(--fg-progress, 0) * .06));
	transform-origin: 50% 40%;
	will-change: transform;
}
.fg-project-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--base);
	opacity: calc(var(--fg-progress, 0) * .92);
	pointer-events: none;
}
.fg-project-body {
	position: relative;
	z-index: 1;
	background: var(--wp--preset--color--base);
}

/* Project details (client, agency, role…) */
.fg-details p { margin: 0; }
.fg-details .fg-details__label {
	font-family: var(--fg-font-caption);
	font-style: var(--fg-font-caption-style);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.wp-block-cover.fg-film { aspect-ratio: 16 / 9; min-height: 0 !important; }
.wp-block-cover.fg-film--wide { aspect-ratio: 16 / 10; }
.wp-block-cover.fg-film .wp-block-cover__inner-container { width: auto; }

.fg-chapter > .wp-block-column:first-child .wp-block-heading { position: sticky; top: calc(var(--fg-header-h) + 1.5rem); }

/* Images and films inside a case: slow zoom and a touch more colour when pointed at. */
.fg-project-body .wp-block-image,
.fg-project-body .wp-block-cover { overflow: hidden; }
.fg-project-body .wp-block-image img,
.fg-project-body .wp-block-cover__image-background {
	filter: saturate(.85);
	transition: transform 1200ms var(--fg-ease), filter 500ms ease;
}
.fg-project-body .wp-block-image:hover img,
.fg-project-body .wp-block-cover:hover .wp-block-cover__image-background { transform: scale(1.04); filter: saturate(1.1) brightness(1.06); }

/* Next project: a full-width band with that project's still behind the title. */
.fg-next { position: relative; overflow: hidden; isolation: isolate; }
.fg-next__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--fg-next-img, none);
	background-size: cover;
	background-position: center;
	opacity: .38;
	transition: transform 1400ms var(--fg-ease), opacity 500ms ease;
}
.fg-next:hover .fg-next__bg,
.fg-next:focus-within .fg-next__bg { transform: scale(1.05); opacity: .7; }
.fg-next a { text-decoration: none; }
.fg-next .post-navigation-link__label {
	display: block;
	margin-bottom: 0.4rem;
	font-family: var(--fg-font-caption);
	font-style: var(--fg-font-caption-style);
	font-weight: 400;
	letter-spacing: 0;
	font-size: var(--wp--preset--font-size--large);
}
.fg-next .wp-block-post-navigation-link {
	font-family: var(--fg-font-heading);
	font-weight: var(--fg-weight-heading);
	letter-spacing: var(--fg-track-3);
	line-height: 0.9;
}
.fg-next .wp-block-post-navigation-link a {
	display: inline-flex;
	align-items: center;
	transition: transform 420ms var(--fg-ease), color 220ms ease;
}
.fg-next .wp-block-post-navigation-link a::after { content: ""; position: absolute; inset: 0; }
.fg-next .wp-block-post-navigation-link a::before {
	content: "";
	flex: none;
	width: 0;
	height: 0.2em;
	margin-right: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	opacity: 0;
	transition: width 420ms var(--fg-ease), margin 420ms var(--fg-ease), opacity 200ms ease;
}
.fg-next:hover .wp-block-post-navigation-link a,
.fg-next .wp-block-post-navigation-link a:focus-visible { color: var(--wp--preset--color--accent); transform: translateX(8px); }
.fg-next:hover .wp-block-post-navigation-link a::before,
.fg-next .wp-block-post-navigation-link a:focus-visible::before { width: 0.2em; margin-right: 0.26em; opacity: 1; }
.fg-next .fg-ulink { position: relative; z-index: 2; }

/* -------------------------------------------------------------
   Contact — centred, over an image or a looping video
------------------------------------------------------------- */
.fg-contact { overflow: hidden; color: var(--fg-on-media); }
.fg-contact .fg-live { color: color-mix(in srgb, var(--fg-on-media) 82%, transparent); }
.fg-details a + a { margin-left: 1.1rem; }
.fg-details a::after { bottom: -2px; }
.fg-contact::before,
.fg-contact::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}
.fg-contact::before { background: radial-gradient(ellipse 70% 60% at 50% 48%, color-mix(in srgb, var(--fg-scrim) 25%, transparent) 0%, color-mix(in srgb, var(--fg-scrim) 60%, transparent) 60%, color-mix(in srgb, var(--fg-scrim) 90%, transparent) 100%); }
.fg-contact::after { background: linear-gradient(180deg, var(--wp--preset--color--base) 0%, transparent 22%, transparent 72%, var(--wp--preset--color--base) 100%); }
.fg-contact .wp-block-cover__inner-container { z-index: 2; }
.fg-contact .wp-block-cover__image-background,
.fg-contact .wp-block-cover__video-background { transition: transform 1600ms var(--fg-ease), opacity 700ms ease; }
.fg-contact:has(.fg-contact__mail a:hover) .wp-block-cover__image-background,
.fg-contact:has(.fg-contact__mail a:focus-visible) .wp-block-cover__image-background,
.fg-contact:has(.fg-contact__mail a:hover) .wp-block-cover__video-background { transform: scale(1.06); }

.fg-contact__mail a {
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 0.05em;
	text-underline-offset: 0.12em;
	overflow-wrap: anywhere;
	transition: color 220ms ease, text-decoration-color 220ms ease;
}
.fg-contact__mail a:hover,
.fg-contact__mail a:focus-visible { color: var(--wp--preset--color--accent); text-decoration-color: var(--wp--preset--color--accent); }

.fg-live { display: inline-flex; align-items: center; gap: 10px; }
.fg-live::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	animation: fg-blink 2.4s steps(1, end) infinite;
}
@keyframes fg-blink { 0% { opacity: 1; } 50% { opacity: .25; } 100% { opacity: 1; } }

.fg-contact .wp-block-button__link {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	color: var(--fg-on-media);
	background: color-mix(in srgb, var(--fg-scrim) 35%, transparent);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease;
}
.fg-contact .wp-block-button__link:hover,
.fg-contact .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}
.fg-contact .fg-details { border-top: 1px solid color-mix(in srgb, var(--fg-on-media) 20%, transparent); }
.fg-contact .fg-details .fg-details__label { color: color-mix(in srgb, var(--fg-on-media) 72%, transparent); }
.fg-contact .wp-block-social-links.fg-social .wp-social-link,
.fg-contact .wp-block-social-links.is-style-logos-only.fg-social .wp-social-link { color: var(--fg-on-media); }
.fg-contact .wp-block-social-links.fg-social .wp-social-link:hover,
.fg-contact .wp-block-social-links.is-style-logos-only.fg-social .wp-social-link:hover,
.fg-contact .wp-block-social-links.fg-social .wp-social-link:focus-within { color: var(--wp--preset--color--accent); }

/* Contact page: the contact section fills the first screen under the bar. */
.wp-site-blocks > main.fg-contact-page { padding-top: 0; }
.fg-contact-page .fg-contact { min-height: 100vh !important; min-height: 100svh !important; margin-block: 0 !important; }
.fg-contact-page .wp-block-post-content > .fg-contact:first-child { margin-top: 0; }

/* Closing band on the home page that leads to the contact page.
   It has a background image by default (darkened so the text reads). To use your own: select
   "Cierre de contacto" → Styles → Background image. Picking a solid background colour removes it. */
.fg-cta { position: relative; isolation: isolate; overflow: hidden; }
.fg-cta:not(.has-background) {
	color: var(--fg-on-media);
	background-color: var(--wp--preset--color--base);
	background-image: url("assets/images/still-03.jpg");
	background-size: cover;
	background-position: 50% 50%;
}
.fg-cta:not(.has-background)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		linear-gradient(180deg, var(--wp--preset--color--base) 0%, transparent 28%, transparent 70%, var(--wp--preset--color--base) 100%),
		radial-gradient(ellipse 80% 70% at 30% 55%, color-mix(in srgb, var(--fg-scrim) 35%, transparent), color-mix(in srgb, var(--fg-scrim) 75%, transparent));
}
.fg-cta:not(.has-background) .has-muted-color { color: color-mix(in srgb, var(--fg-on-media) 78%, transparent) !important; }
.fg-cta > * { max-width: var(--wp--style--global--wide-size) !important; }
.fg-cta p { margin: 0; }
.fg-cta__link { margin: 0; line-height: 0.9; letter-spacing: var(--fg-track-3); }
.fg-cta__link a {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	transition: transform 420ms var(--fg-ease), color 220ms ease;
}
.fg-cta__link a::after {
	content: "→";
	font-family: var(--fg-font-text);
	font-weight: 400;
	font-size: 0.5em;
	margin-left: 0.3em;
	transform: translateX(-0.3em);
	opacity: 0;
	transition: transform 420ms var(--fg-ease), opacity 220ms ease;
}
.fg-cta__link a:hover,
.fg-cta__link a:focus-visible { color: var(--wp--preset--color--accent); transform: translateX(8px); }
.fg-cta__link a:hover::after,
.fg-cta__link a:focus-visible::after { transform: none; opacity: 1; }

/* -------------------------------------------------------------
   Utilities
------------------------------------------------------------- */
.fg-muted { color: var(--wp--preset--color--muted); }
.fg-credits-font { font-family: var(--fg-font-caption); }

.wp-block-video video { width: 100%; }
.wp-block-embed.is-type-video iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; }

/* Social icons follow the text color, so they work in every style variation. */
.wp-block-social-links.fg-social { gap: 0.9rem 1.35rem; }
.wp-block-social-links.fg-social .wp-social-link,
.wp-block-social-links.is-style-logos-only.fg-social .wp-social-link {
	color: inherit;
	background: none;
	transition: color 220ms ease, transform 380ms var(--fg-ease);
}
.wp-block-social-links.fg-social .wp-social-link:hover,
.wp-block-social-links.is-style-logos-only.fg-social .wp-social-link:hover,
.wp-block-social-links.fg-social .wp-social-link:focus-within { color: var(--wp--preset--color--accent); transform: translateY(-3px); }
.wp-block-social-links.fg-social .wp-social-link a { padding: 0.25rem; color: inherit; }
.fg-details .wp-social-link a::after { content: none; }

/* -------------------------------------------------------------
   Home: showreel behind the projects
   The reel fills the screen and stays put (sticky) while the project cards
   scroll over it in two staggered columns. Its title dims as the cards arrive.
------------------------------------------------------------- */
.wp-site-blocks > main:has(> .fg-reel:first-child) { padding-top: 0; }

.fg-reel { position: relative; isolation: isolate; }
.fg-reel > .fg-reel__screen {
	position: sticky;
	top: 0;
	z-index: 0;
	height: 100vh;
	height: 100svh;
	min-height: 32rem !important;
	margin-block: 0;
	overflow: hidden;
	color: var(--fg-on-media);
	padding: calc(var(--fg-header-h) + 2rem) var(--fg-gutter) clamp(2rem, 6vh, 4rem);
}
.admin-bar .fg-reel > .fg-reel__screen { top: var(--wp-admin--admin-bar--height, 32px); height: calc(100vh - var(--wp-admin--admin-bar--height, 32px)); }
.fg-reel__screen .wp-block-cover__image-background,
.fg-reel__screen .wp-block-cover__video-background {
	transform: scale(calc(1.02 + var(--fg-progress, 0) * .1));
	will-change: transform;
}
/* Shade that thickens as the cards cover the reel, and a fade into the page at the bottom. */
.fg-reel__screen::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: var(--fg-scrim);
	opacity: calc(var(--fg-progress, 0) * .62);
}
.fg-reel__screen .wp-block-cover__inner-container {
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1440px);
	margin-inline: auto;
}
/* The fade on scroll sits on the text blocks themselves (not on their container), so a headline
   with the "Inverted over image" style can still blend with the showreel behind it. */
.fg-reel__screen .wp-block-cover__inner-container :is(h1, h2, h3, p, .wp-block-buttons) {
	opacity: calc(1 - var(--fg-progress, 0) * 2.6);
	transform: translateY(calc(var(--fg-progress, 0) * -6rem));
	filter: blur(calc(var(--fg-progress, 0) * 6px));
}
.fg-reel__title .fg-hero__name { color: var(--fg-on-media); margin: 0; }
.fg-reel__title .fg-font-caption { margin: 0; color: color-mix(in srgb, var(--fg-on-media) 88%, transparent); }

/* Project cards over the reel. */
/* Panel with the projects: a solid sheet that slides up over the showreel as you scroll.
   Its colour (and text colour, corner radius, padding) is set on the "Projects" group in the editor. */
.fg-reel > .fg-stack-panel {
	position: relative;
	z-index: 1;
	margin-block: 0 !important;
	box-shadow: 0 -24px 70px color-mix(in srgb, var(--fg-scrim) 45%, transparent);
}
/* Colours come from the palette (Styles → Colors → Palette → "Panel de proyectos"), unless a colour
   is picked on the block itself, which then wins. */
.fg-stack-panel:not(.has-background) { background-color: var(--wp--preset--color--panel, #EDE6D6); }
.fg-stack-panel:not(.has-text-color) { color: var(--wp--preset--color--panel-text, #0A0A0A); }

/* Corner styles for any section (block Styles tab): rounded top, rounded, square.
   The radius size: Styles → Additional CSS → :root { --fg-radius: 40px; } */
:root { --fg-radius: clamp(18px, 2.2vw, 32px); }
.wp-block-group.is-style-fg-rounded-top { border-top-left-radius: var(--fg-radius); border-top-right-radius: var(--fg-radius); }
.wp-block-group.is-style-fg-rounded { border-radius: var(--fg-radius); overflow: hidden; }
.wp-block-group.is-style-fg-square { border-radius: 0 !important; }

/* Feathered top edge: the section's own colour fades in above it, so it melts into whatever is behind
   (the showreel, an image, another section) instead of starting with a hard line.
   Fade height: Styles → Additional CSS → :root { --fg-feather: 40vh; } */
:root { --fg-feather: clamp(140px, 30vh, 360px); }
.wp-block-group.is-style-fg-feather-top { position: relative; border-top-left-radius: 0; border-top-right-radius: 0; }
.wp-block-group.is-style-fg-feather-top::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: var(--fg-feather);
	background: inherit;
	background-image: none;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .7) 35%, transparent 100%);
	mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .7) 35%, transparent 100%);
}
.fg-reel > .fg-stack-panel.is-style-fg-feather-top { box-shadow: none; }
.fg-stack-panel .fg-stack__head h2 { margin: 0; color: inherit; }
.fg-stack-panel .fg-ulink a { color: inherit; }
.fg-stack-panel .wp-block-query-no-results p { color: inherit; }
.fg-stack { position: relative; }
.fg-stack .wp-block-post-template {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: clamp(1rem, 2vw, 2rem);
	align-items: start;
}
/* Three aligned columns. The column count can be changed in the editor (Post template → Layout);
   below 1100px it drops to two, and on phones to one. */
:where(.fg-stack .wp-block-post-template) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fg-stack .wp-block-post { margin: 0; min-width: 0; transition: opacity 420ms ease, filter 420ms ease; }

.fg-card { position: relative; overflow: hidden; background: var(--wp--preset--color--surface); isolation: isolate; }
.fg-card .wp-block-post-featured-image { margin: 0; overflow: hidden; }
.fg-card .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: transform 1200ms var(--fg-ease), filter 500ms ease;
}
.fg-card::after {
	/* Shade at the bottom so the caption reads on any still. */
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 55%;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--fg-scrim) 70%, transparent) 100%);
}
.fg-card__caption {
	position: absolute;
	left: clamp(1rem, 2.2vw, 2rem);
	right: clamp(1rem, 2.2vw, 2rem);
	bottom: clamp(1rem, 2vw, 1.75rem);
	z-index: 2;
	color: var(--fg-on-media);
}
.fg-card__caption .wp-block-post-terms {
	color: color-mix(in srgb, var(--fg-on-media) 80%, transparent);
	font-size: var(--wp--preset--font-size--medium);
	margin: 0;
}
.fg-card__caption .wp-block-post-title {
	margin: 0;
	color: var(--fg-on-media);
	font-size: clamp(1.25rem, 1.6vw, 1.75rem);
	line-height: 1.08;
	letter-spacing: calc(var(--fg-tracking) * 0.8);
}
.fg-card__caption .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 2px;
	padding-bottom: 0.08em;
	transition: background-size 480ms var(--fg-ease);
}
/* Whole card is the link. */
.fg-card__caption .wp-block-post-title a::after { content: ""; position: absolute; inset: -100vh -100vw; }
.fg-card { cursor: pointer; }
.fg-card .wp-block-post-title a:focus-visible { outline: none; }
.fg-card:has(a:focus-visible) { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 4px; }

.fg-card:hover .wp-block-post-featured-image img,
.fg-card:focus-within .wp-block-post-featured-image img { transform: scale(1.045); }
.fg-card:hover .wp-block-post-title a,
.fg-card:focus-within .wp-block-post-title a { background-size: 100% 2px; }

.fg-stack__more { position: relative; z-index: 1; padding-block: clamp(2rem, 6vh, 4rem) 0; }

@media (max-width: 1100px) {
	.fg-stack .wp-block-post-template.wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.fg-stack .wp-block-post-template.wp-block-post-template { grid-template-columns: minmax(0, 1fr); }
}

/* -------------------------------------------------------------
   Reveal on scroll: cards, section titles and case images rise and fade in
   as they enter the screen, one after another along each row.
   Only things below the fold at load are hidden first, and only when the script runs.
------------------------------------------------------------- */
.fg-will-reveal {
	opacity: 0;
	transform: translate3d(0, 48px, 0) scale(.97);
	transition: opacity 900ms ease, transform 1100ms var(--fg-ease) !important;
	transition-delay: var(--fg-delay, 0ms) !important;
}
.fg-will-reveal.is-in { opacity: 1; transform: none; }

/* -------------------------------------------------------------
   Projects page: a large line of filters over a grid of upright cards.
   Pointing at a card raises a coloured panel with the client, the title and a line about it;
   the other cards step back. The panel colour is set per project (editor sidebar → Card colour).
------------------------------------------------------------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.fg-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.1em 0.32em;
	font-family: var(--fg-font-caption);
	font-style: normal;
	font-weight: 400;
	font-size: clamp(2rem, 3.8vw, 4.25rem);
	line-height: 1.12;
	letter-spacing: calc(var(--fg-tracking) * 0.8);
	text-wrap: balance;
}
.fg-filter__item {
	position: relative;
	color: inherit;
	text-decoration: none;
	transition: color 220ms ease;
}
.fg-filter__item::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.04em;
	height: max(1px, 0.035em);
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 420ms var(--fg-ease);
}
.fg-filter__item.is-current::after,
.fg-filter__item:hover::after,
.fg-filter__item:focus-visible::after { transform: scaleX(1); }
.fg-filter__item:hover,
.fg-filter__item:focus-visible { color: var(--wp--preset--color--accent); }
.fg-filter__item.is-current:hover { color: inherit; }
.fg-filter__count {
	position: relative;
	top: -0.95em;
	margin-left: 0.18em;
	font-family: var(--fg-font-text);
	font-size: 0.36em;
	line-height: 0;
	letter-spacing: 0;
	vertical-align: baseline;
	font-variant-numeric: tabular-nums;
}
.fg-filter__sep { color: color-mix(in srgb, currentColor 45%, transparent); }
.fg-filter__sep--lead { margin-left: 0.25em; }

.fg-work .wp-block-post-template {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: clamp(1rem, 1.7vw, 1.75rem);
	align-items: start;
}
:where(.fg-work .wp-block-post-template) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) {
	.fg-work .wp-block-post-template.wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.fg-work .wp-block-post-template.wp-block-post-template { grid-template-columns: minmax(0, 1fr); }
}
.fg-work .wp-block-post { margin: 0; min-width: 0; transition: opacity 320ms ease, filter 420ms ease, transform 420ms var(--fg-ease); }
.fg-work .wp-block-post[hidden] { display: none; }
.fg-work .wp-block-post.is-leaving { opacity: 0 !important; transform: scale(.96); }
.fg-work .wp-block-post.is-entering { opacity: 0; transform: translateY(28px); }

.fg-work-card { position: relative; isolation: isolate; }
.fg-work-card .wp-block-post-featured-image {
	margin: 0;
	overflow: hidden;
	border-radius: 6px;
	background: var(--wp--preset--color--surface);
}
.fg-work-card .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	transition: transform 1200ms var(--fg-ease);
}

.fg-work-card__panel {
	--fg-panel-pad: clamp(1rem, 1.9vw, 1.9rem);
	position: absolute;
	inset: clamp(0.9rem, 1.7vw, 1.75rem);
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1rem;
	padding: var(--fg-panel-pad);
	border-radius: 4px;
	color: var(--fg-card-ink, var(--wp--preset--color--base));
	background: color-mix(in srgb, var(--fg-card-color, var(--wp--preset--color--accent)) 88%, transparent);
	-webkit-backdrop-filter: blur(10px) saturate(1.3);
	backdrop-filter: blur(10px) saturate(1.3);
	opacity: 0;
	transform: scale(.975);
	pointer-events: none;
	transition: opacity 650ms cubic-bezier(.165, .84, .44, 1), transform 800ms cubic-bezier(.165, .84, .44, 1);
}
.fg-work-card__panel > * { margin: 0 !important; }
.fg-work-card__client,
.fg-work-card__client a {
	color: inherit !important;
	text-decoration: none;
	font-family: var(--fg-font-caption);
	font-style: normal;
	font-size: clamp(1.75rem, 2.7vw, 3rem);
	line-height: 1;
	letter-spacing: calc(var(--fg-tracking) * 0.8);
}
.fg-work-card__title {
	margin: 0;
	color: inherit;
	font-family: var(--fg-font-text);
	font-weight: 600;
	font-size: clamp(1.05rem, 1.35vw, 1.5rem);
	line-height: 1.15;
	letter-spacing: calc(var(--fg-tracking) * 0.4);
}
.fg-work-card__title a { color: inherit; text-decoration: none; }
/* Whole card is the link. */
.fg-work-card__title a::after { content: ""; position: absolute; inset: calc(-1 * clamp(0.9rem, 1.7vw, 1.75rem)); pointer-events: auto; z-index: 3; }
.fg-work-card__excerpt,
.fg-work-card__excerpt p { margin: 0; font-size: var(--wp--preset--font-size--small); line-height: 1.4; opacity: .88; }
.fg-work-card__excerpt .wp-block-post-excerpt__more-text { display: none; }
.fg-work-card:has(a:focus-visible) .wp-block-post-featured-image { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 4px; }

@media (hover: hover) and (min-width: 782px) {
	.fg-work-card:hover .fg-work-card__panel,
	.fg-work-card:focus-within .fg-work-card__panel { opacity: 1; transform: none; }
	.fg-work-card:hover .wp-block-post-featured-image img { transform: scale(1.035); }
	.fg-work .wp-block-post-template:has(.wp-block-post:hover) .wp-block-post:not(:hover) { opacity: 0.3; filter: grayscale(0.8); }
}
/* Phones, tablets and the editor: the details sit under the image. */
@media (hover: none), (max-width: 781px) {
	.fg-work-card__panel {
		position: static;
		opacity: 1;
		transform: none;
		padding: 0.85rem 0 0;
		gap: 0.4rem;
		color: inherit;
		background: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		pointer-events: auto;
	}
	.fg-work-card__client,
	.fg-work-card__client a { font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--muted) !important; }
	.fg-work-card__title a::after { inset: 0; }
}
.editor-styles-wrapper .fg-work-card__panel { position: static; opacity: 1; transform: none; padding: 0.85rem 0 0; color: inherit; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* -------------------------------------------------------------
   Point at one, the rest step back (home cards, project index, playground)
------------------------------------------------------------- */
@media (hover: hover) {
	.fg-stack .wp-block-post-template:has(.wp-block-post:hover) .wp-block-post:not(:hover),
	.fg-playground .wp-block-post-template:has(.wp-block-post:hover) .wp-block-post:not(:hover) {
		opacity: 0.38;
		filter: grayscale(0.7);
	}
	.fg-playground .wp-block-post { transition: opacity 420ms ease, filter 420ms ease; }
}

/* -------------------------------------------------------------
   Preview video: plays over the still while you point at the piece
------------------------------------------------------------- */
:where(.wp-block-post-featured-image.has-fg-preview) { position: relative; }
.wp-block-post-featured-image .fg-preview {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	pointer-events: none;
	transition: opacity 420ms ease;
}
.wp-block-post-featured-image .fg-preview.is-playing { opacity: 1; }
.fg-playground .wp-block-post-featured-image .fg-preview { z-index: 0; }

/* -------------------------------------------------------------
   Cursor: a dot in the accent colour that grows over links and says "View"
   over projects. Mouse and trackpad only. Turn it off in Styles → Additional CSS:
   :root { --fg-cursor: off; }
------------------------------------------------------------- */
.fg-cursor {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;
	width: 0;
	height: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity 200ms ease;
}
.fg-cursor.is-visible { opacity: 1; }
.fg-cursor__dot {
	--fg-cursor-size: 22px;
	position: absolute;
	left: 0;
	top: 0;
	width: var(--fg-cursor-size);
	height: var(--fg-cursor-size);
	transform: translate(-50%, -50%);
	border-radius: 50%;
	display: grid;
	place-items: center;
	/* Frosted glass, the same recipe as the navigation bar. */
	background: color-mix(in srgb, var(--fg-glass) 28%, transparent);
	-webkit-backdrop-filter: blur(10px) saturate(1.6);
	backdrop-filter: blur(10px) saturate(1.6);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 22%, transparent);
	box-shadow: 0 6px 24px color-mix(in srgb, var(--fg-scrim) 25%, transparent), inset 0 1px 0 color-mix(in srgb, var(--wp--preset--color--contrast) 14%, transparent);
	transition: width 380ms var(--fg-ease), height 380ms var(--fg-ease), background-color 240ms ease, border-color 240ms ease;
}
/* A small core in the accent colour marks the exact point. */
.fg-cursor__dot::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 6px;
	height: 6px;
	margin: -3px 0 0 -3px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	transition: transform 300ms var(--fg-ease), opacity 200ms ease;
}
.fg-cursor__label {
	position: relative;
	font-family: var(--fg-font-text);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--contrast);
	opacity: 0;
	white-space: nowrap;
	transition: opacity 160ms ease;
}
/* Over a link or button: a bigger lens with an accent rim. */
.fg-cursor.is-link .fg-cursor__dot {
	--fg-cursor-size: 46px;
	/* Over links the lens stops blurring (just a glass rim) so what you point at stays readable. */
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 6%, transparent);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 70%, transparent);
}
.fg-cursor.is-link .fg-cursor__dot::before { transform: scale(0); opacity: 0; }
/* Over a project or a video: a large lens with a word. */
.fg-cursor.is-view .fg-cursor__dot {
	--fg-cursor-size: 92px;
	background: color-mix(in srgb, var(--fg-glass) 38%, transparent);
	border-color: color-mix(in srgb, var(--wp--preset--color--accent) 55%, transparent);
}
.fg-cursor.is-view .fg-cursor__dot::before { transform: scale(0); opacity: 0; }
.fg-cursor.is-view .fg-cursor__label { opacity: 1; transition-delay: 120ms; }
.fg-cursor.is-down .fg-cursor__dot { --fg-cursor-size: 16px; }
.fg-cursor.is-link.is-down .fg-cursor__dot { --fg-cursor-size: 38px; }
.fg-cursor.is-view.is-down .fg-cursor__dot { --fg-cursor-size: 80px; }

/* Solid version, if you prefer it: Styles → Additional CSS → :root { --fg-cursor: solid; } */
.fg-cursor.is-solid .fg-cursor__dot { --fg-cursor-size: 10px; background: var(--wp--preset--color--accent); border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.fg-cursor.is-solid .fg-cursor__dot::before { display: none; }
.fg-cursor.is-solid.is-link .fg-cursor__dot { --fg-cursor-size: 38px; background: transparent; border-color: var(--wp--preset--color--accent); }
.fg-cursor.is-solid.is-view .fg-cursor__dot { --fg-cursor-size: 88px; background: var(--wp--preset--color--accent); }
.fg-cursor.is-solid .fg-cursor__label { color: var(--wp--preset--color--base); }

/* Without glass support, or when the visitor asks for less transparency: a solid lens. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.fg-cursor:not(.is-solid) .fg-cursor__dot { background: color-mix(in srgb, var(--fg-glass) 82%, transparent); }
}
@media (prefers-reduced-transparency: reduce) {
	.fg-cursor:not(.is-solid) .fg-cursor__dot { background: var(--fg-glass); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

html.has-fg-cursor,
html.has-fg-cursor body,
html.has-fg-cursor a,
html.has-fg-cursor button,
html.has-fg-cursor [role="button"],
html.has-fg-cursor label { cursor: none; }
html.has-fg-cursor :is(input, textarea, select, [contenteditable="true"]) { cursor: auto; }

/* -------------------------------------------------------------
   Loading screen: shown while the first page of a visit loads, then fades out.
   Its content is the "Loading screen" template part (Appearance → Editor → Patterns).
------------------------------------------------------------- */
.fg-preloader { display: none; }
html.fg-loading .fg-preloader,
html.fg-loading-out .fg-preloader {
	position: fixed;
	inset: 0;
	z-index: 100001;
	display: grid;
	place-items: center;
	padding: var(--fg-gutter);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}
html.fg-loading { overflow: hidden; }
html.fg-loading-out .fg-preloader {
	opacity: 0;
	visibility: hidden;
	transition: opacity 600ms ease, visibility 0s linear 600ms;
}
.fg-preloader__content { text-align: center; }
.fg-preloader__content > * { margin: 0 !important; }
.fg-preloader .wp-block-image img { display: block; margin-inline: auto; max-width: min(60vw, 100%); height: auto; }
html.fg-loading .fg-preloader__content { animation: fg-preloader-in 500ms var(--fg-ease) both; }
@keyframes fg-preloader-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* -------------------------------------------------------------
   Mobile menu (overlay): links centred and large, in the Headings font, rising in one by one.
------------------------------------------------------------- */
.fg-header .wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: center;
	--navigation-layout-justify: center;
	--navigation-layout-direction: column;
	padding: calc(var(--fg-header-h) + 1rem) var(--fg-gutter) 2rem;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}
.fg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
.fg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close { height: 100%; }
.fg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	min-height: 100%;
	padding-top: 0;
	align-items: center !important;
	justify-content: center;
	text-align: center;
}
.fg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	flex-direction: column;
	align-items: center !important;
	justify-content: center;
	gap: clamp(0.4rem, 2.5vh, 1.25rem) !important;
	width: 100%;
}
.fg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	justify-content: center;
	align-items: center !important;
	width: auto;
}
.fg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding: 0.05em 0 !important;
	font-family: var(--fg-font-heading);
	font-weight: var(--fg-weight-heading);
	font-size: clamp(2.75rem, 13vw, 5.5rem);
	line-height: 1;
	letter-spacing: var(--fg-track-3);
	text-align: center;
}
.fg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { bottom: 0; height: 3px; }
.fg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	animation: fg-menu-in 600ms var(--fg-ease) both;
}
.fg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: 70ms; }
.fg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: 140ms; }
.fg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: 210ms; }
.fg-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(n+5) { animation-delay: 280ms; }
@keyframes fg-menu-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.fg-header .wp-block-navigation__responsive-container-close,
.fg-header .wp-block-navigation__responsive-container-open { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.fg-header .wp-block-navigation__responsive-container-close { top: 1rem; right: var(--fg-gutter); }
.fg-header .wp-block-navigation__responsive-container-close svg { width: 30px; height: 30px; }

/* -------------------------------------------------------------
   Reduce motion: everything stays still, nothing breaks.
------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: 0ms !important; animation: none !important; }
	.fg-hero .wp-block-cover:hover .wp-block-cover__image-background,
	.fg-playground .wp-block-post:hover .wp-block-post-featured-image img,
	.fg-project-body .wp-block-image:hover img,
	.fg-project-body .wp-block-cover:hover .wp-block-cover__image-background,
	.fg-next:hover .fg-next__bg,
	.fg-contact:has(.fg-contact__mail a:hover) .wp-block-cover__image-background { transform: none; }
	.fg-index .wp-block-post:hover .wp-block-post-title,
	.fg-playground .wp-block-post:hover .fg-caption,
	.fg-next:hover .wp-block-post-navigation-link a { transform: none; }
	.fg-project-hero .wp-block-post-featured-image img { transform: none; }
	.fg-reel__screen .wp-block-cover__image-background,
	.fg-reel__screen .wp-block-cover__video-background,
	.fg-reel__screen .wp-block-cover__inner-container,
	.fg-card:hover .wp-block-post-featured-image img { transform: none; }
	.fg-reel__screen .wp-block-cover__inner-container :is(h1, h2, h3, p, .wp-block-buttons) { opacity: 1; filter: none; transform: none; }
	.fg-will-reveal { opacity: 1; transform: none; }
	body::after { animation: none !important; }
}

/* In the editor, show the opening still, the reel and the cards without the front-end tricks. */
.editor-styles-wrapper .fg-reel > .fg-reel__screen { position: relative; height: auto; min-height: 70vh !important; }
.editor-styles-wrapper .fg-reel { background: var(--wp--preset--color--surface); }
.editor-styles-wrapper .fg-project-hero { position: relative; height: 60vh; }
.editor-styles-wrapper .fg-playground .wp-block-post { aspect-ratio: auto; }
.editor-styles-wrapper .fg-playground .wp-block-post-featured-image,
.editor-styles-wrapper .fg-playground .fg-caption { position: static; }
.editor-styles-wrapper .fg-playground .wp-block-post::after { display: none; }
.editor-styles-wrapper .fg-playground .fg-caption .wp-block-post-title { color: inherit; }
.editor-styles-wrapper .wp-site-blocks > main { padding-top: 0; }

/* Next-project band: title sits at the bottom of the band. */
.fg-next { display: flex; flex-direction: column; justify-content: flex-end; }
.fg-next > .alignwide { width: 100%; }