/*
 * LAU - reusable visual utilities.
 *
 * Project level layer, loaded before the section stylesheets so a section can
 * always override what it needs.
 *
 * ---------------------------------------------------------------------------
 * Global smooth scroll
 * ---------------------------------------------------------------------------
 *
 * The only unscoped, unconditional rule in this file: everything else here is
 * an opt-in class a section adds itself, this one applies site-wide with no
 * class to add. It lives here rather than in its own file because it is a
 * single declaration, not because it follows the opt-in pattern above.
 *
 * Governs every same-page anchor jump: the header/hero "Descargar proyecto"
 * links, the primary nav (Servicios, Nuestros proyectos, Contacto), and any
 * future `#anchor` link. Native, so it needs no JavaScript.
 *
 * Guarded by `prefers-reduced-motion`, the same way the section reveals below
 * are: a visitor who asked for reduced motion gets an instant jump instead.
 */

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

/*
 * ---------------------------------------------------------------------------
 * lau-topographic-contours
 * ---------------------------------------------------------------------------
 *
 * Decorative layer of topographic contour lines: long, near-parallel bands that
 * run edge to edge with a gentle undulation, plus one concentric core that the
 * bands wrap around, the way relief reads on a survey plan. Vector only. It is
 * never a photograph and never a raster texture.
 *
 * The artwork is authored in assets/img/topographic-contours.svg and inlined
 * below as a data URI, the same technique every other icon mask in this
 * project already uses. A relative url() here resolved fine on the front end
 * (relative to this stylesheet's own address) but 404ed inside the block
 * editor, because add_editor_style() inlines this file's contents into a
 * <style> tag in the editor iframe - which resolves relative url()s against
 * the iframe document, not this file. Inlining removes that dependency
 * entirely; edit the .svg file by hand, then re-encode it here.
 *
 * The artwork is static, authored by hand: twelve cubic bezier bands drawn past
 * both edges of the 800x600 viewBox so they always bleed off-screen, plus seven
 * concentric ellipses centred at (620, 420) for the core.
 *
 * Each element carries its own `opacity`, fading from 0.35 at the top band to
 * 0.10 at the outermost ring. Those multiply with the layer opacity below, so
 * the effective alpha on screen ranges from about 0.05 down to 0.015. Raise
 * `--lau-contours-opacity` if the pattern needs to read more strongly; editing
 * the SVG is not required.
 *
 * It is one composition, not a tile, so it must not repeat: the default is
 * `cover` + `no-repeat`. Cropping is graceful at any viewport, because what
 * gets cropped is more of the same horizontal bands.
 *
 * It carries no background of its own. The dark background or gradient belongs
 * to the section, which is what lets the same pattern sit over different
 * surfaces.
 *
 * Usage
 *   Add the class to the section wrapper, either in the block markup or from
 *   the editor: Advanced > Additional CSS class(es).
 *
 *       <div class="my-section lau-topographic-contours">
 *
 * Tuning, per host, without touching this file or the SVG:
 *
 *       .my-section {
 *           --lau-contours-opacity:  0.15;      default
 *           --lau-contours-size:     cover;
 *           --lau-contours-position: center;    move the core into view
 *           --lau-contours-repeat:   no-repeat;
 *       }
 *
 * Stacking: the layer sits at z-index 0 inside the host. A host whose content
 * is statically positioned must raise it, otherwise the pattern paints over the
 * copy. Raising it here is deliberately avoided, because a blanket rule on the
 * children would also lift things that must stay behind, such as the overlay of
 * a core/cover.
 *
 * The layer never takes part in layout and never receives the pointer.
 */

.lau-topographic-contours {
	position: relative;
}

.lau-topographic-contours::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600' preserveAspectRatio='xMidYMid slice'%3E%3Cg class='contour-drift' fill='none' stroke='%23ffffff' stroke-width='1'%3E%3Cpath d='M-100 120 C 120 60, 280 230, 460 150 S 760 90, 940 190' opacity='0.35'/%3E%3Cpath d='M-100 154 C 120 90, 280 258, 460 182 S 760 120, 940 216' opacity='0.335'/%3E%3Cpath d='M-100 188 C 120 120, 280 286, 460 214 S 760 150, 940 242' opacity='0.320'/%3E%3Cpath d='M-100 222 C 120 150, 280 314, 460 246 S 760 180, 940 268' opacity='0.305'/%3E%3Cpath d='M-100 256 C 120 180, 280 342, 460 278 S 760 210, 940 294' opacity='0.29'/%3E%3Cpath d='M-100 290 C 120 210, 280 370, 460 310 S 760 240, 940 320' opacity='0.275'/%3E%3Cpath d='M-100 324 C 120 240, 280 398, 460 342 S 760 270, 940 346' opacity='0.26'/%3E%3Cpath d='M-100 358 C 120 270, 280 426, 460 374 S 760 300, 940 372' opacity='0.245'/%3E%3Cpath d='M-100 392 C 120 300, 280 454, 460 406 S 760 330, 940 398' opacity='0.230'/%3E%3Cpath d='M-100 426 C 120 330, 280 482, 460 438 S 760 360, 940 424' opacity='0.215'/%3E%3Cpath d='M-100 460 C 120 360, 280 510, 460 470 S 760 390, 940 450' opacity='0.200'/%3E%3Cpath d='M-100 494 C 120 390, 280 538, 460 502 S 760 420, 940 476' opacity='0.185'/%3E%3Cellipse cx='620' cy='420' rx='40' ry='26' opacity='0.28'/%3E%3Cellipse cx='620' cy='420' rx='78' ry='50' opacity='0.25'/%3E%3Cellipse cx='620' cy='420' rx='116' ry='74' opacity='0.220'/%3E%3Cellipse cx='620' cy='420' rx='154' ry='98' opacity='0.190'/%3E%3Cellipse cx='620' cy='420' rx='192' ry='122' opacity='0.160'/%3E%3Cellipse cx='620' cy='420' rx='230' ry='146' opacity='0.130'/%3E%3Cellipse cx='620' cy='420' rx='268' ry='170' opacity='0.100'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: var(--lau-contours-repeat, no-repeat);
	background-position: var(--lau-contours-position, center);
	background-size: var(--lau-contours-size, cover);
	opacity: var(--lau-contours-opacity, 0.15);
	pointer-events: none;
}

/*
 * ---------------------------------------------------------------------------
 * lau-technical-grid
 * ---------------------------------------------------------------------------
 *
 * Decorative backdrop of fine ruled squares, the way a drawing sheet or a
 * technical grid reads. Two repeating gradients, no image and no generated
 * geometry, so there is nothing to regenerate and no file to keep in sync.
 *
 * The lines are drawn in `currentColor`, so the grid inherits the host's text
 * colour and stays legible on light and dark surfaces alike. Like the contour
 * layer, it carries no background of its own.
 *
 * It is painted on `::before`, while `lau-topographic-contours` uses `::after`,
 * so a section may carry both at once without one replacing the other.
 *
 * Usage
 *   Add the class to the section wrapper, in the block markup or from the
 *   editor: Advanced > Additional CSS class(es).
 *
 * Tuning, per host:
 *
 *       .my-section {
 *           --lau-grid-size:    48px;   spacing between rules
 *           --lau-grid-opacity: 0.04;
 *       }
 *
 * Stacking: the layer sits at z-index 0 inside the host, so a host whose
 * content is statically positioned must raise it. The layer never takes part in
 * layout and never receives the pointer.
 */

.lau-technical-grid {
	position: relative;
}

.lau-technical-grid::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image:
		repeating-linear-gradient(to right, currentColor 0 1px, transparent 1px var(--lau-grid-size, 48px)),
		repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px var(--lau-grid-size, 48px));
	opacity: var(--lau-grid-opacity, 0.04);
	pointer-events: none;
}

/*
 * ---------------------------------------------------------------------------
 * lau-interactive-cards
 * ---------------------------------------------------------------------------
 *
 * Interactive treatment for a set of cards: a soft lift, a deeper shadow and a
 * warmer border while the pointer is over one of them.
 *
 * It goes on the CONTAINER, not on each card, so one class per section is
 * enough and the cards stay untouched:
 *
 *     <div class="my-grid lau-interactive-cards"> ... cards ... </div>
 *
 * Applied that way it reaches whatever the container holds - core/column,
 * core/group, core/button - without knowing any section's class names, which
 * is what makes "aplica lau-interactive-cards a [seccion]" a one-line change
 * and keeps every card editable from the editor.
 *
 * Buttons are singled out on purpose: a card-sized lift on a button reads as a
 * glitch, so they get the smaller one and no shadow of their own.
 *
 * Only transform, box-shadow and border-color move. None of them take part in
 * layout, so a hovered card can never shift its neighbours or resize the grid.
 *
 * The specificity here is deliberate: `:not()` counts towards it, so these
 * rules outrank the older per-section card hovers even though this file loads
 * first. Where such a rule still exists it is simply superseded.
 */

/*
 * `:not()` is carried into the transition rules too, and not for show: the
 * section stylesheets load after this file and already declare a transition
 * on their own card class. At equal specificity theirs would win and the
 * timing below would never apply, leaving the hover on the old 0.3s ease.
 */
.lau-interactive-cards > *:not(.wp-block-button) {
	transition:
		transform 0.5s cubic-bezier(0.16, 0.84, 0.28, 1),
		box-shadow 0.5s cubic-bezier(0.16, 0.84, 0.28, 1),
		border-color 0.5s cubic-bezier(0.16, 0.84, 0.28, 1);
}

.lau-interactive-cards > .wp-block-button {
	transition: transform 0.5s cubic-bezier(0.16, 0.84, 0.28, 1);
}

@media (hover: hover) {
	.lau-interactive-cards > *:not(.wp-block-button):hover {
		transform: translateY(-0.5rem);
		box-shadow: var(--wp--preset--shadow--spx-lift);
		border-color: rgba(227, 207, 184, 0.3);
	}

	/*
	 * Half the card's lift: enough to read as movement, not so much that a
	 * button looks like it detaches from its row. 2px was tried first and was
	 * not perceptible.
	 */
	.lau-interactive-cards > .wp-block-button:hover {
		transform: translateY(-0.25rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.lau-interactive-cards > *:hover {
		transform: none;
	}
}