/* =============================================================================
   Flip card — a tile that turns over to reveal a second face.

   SPECIFIED by the designers, and this block follows that spec rather than
   inventing one. Source: a comment from Estudio ULBIA pinned to the Our Work
   frame in Figma, 2026-09-09, titled "What Our Clients Say — Interacción de
   tarjetas". It is a file comment, not a prototype: get_motion_context returns
   no nodes for the section, so nothing in the API surfaces it and it has to be
   carried here by hand. What it asks for, in order:

     · rotateY(180deg) on the Y axis, revealing the back face.
     · 500-600ms. This file uses 550.
     · "un ease-in-out suave" — a smooth ease-in-out. Note this is NOT the
       expo-out curve home.css uses for its entrances; an earlier version of
       this file borrowed that for consistency and it was wrong.
     · a 3D perspective, so the rotation has depth.
     · both faces sharing exactly the same dimensions and border radius.
     · the back face never visible mid-rotation.
     · fast and fluid, "evitando un efecto demasiado exagerado".

   THE CARD IS HOVER-ONLY, and that is a deliberate narrowing of the spec. The
   spec's touch half — a tap turns the card, a second tap turns it back — was
   built and then removed on 2026-09-14 on the owner's call: no click locks the
   card open, no click releases it, and the card does not change size. The
   reveal is hover on a pointer and keyboard focus, nothing else. There is no
   assets/js/flip-card.js any more; this component is now CSS only.

   What that costs, written down so it is a decision rather than a surprise:
   a touch screen has no hover, so the quote is reachable there only through
   the accessibility tree. Both faces are always in the DOM and nothing carries
   aria-hidden, so a screen reader still reads every quote — but a sighted
   touch user sees the logo face and no way to turn it. Re-read the designers'
   comment before changing that back.

   Not page-scoped, and nothing in it names a client, a colour or a size — the
   faces bring their own. Two pages could use this; one does.

   Markup contract:

     <div class="flip-card">
       <div class="flip-card__inner">
         <div class="flip-card__face flip-card__face--front"> … </div>
         <div class="flip-card__face flip-card__face--back">  … </div>
       </div>
     </div>

   The card sets its own height; both faces fill it. Two things turn it, and
   they are deliberately not interchangeable:

     :hover           a pointer is over it. Releases the moment it leaves.
     :focus-visible   a keyboard reached it. Releases when focus moves on.

   Keep the reveal on :focus-visible rather than :focus-within or :focus — see
   the note by that rule for what goes wrong otherwise.
   ========================================================================== */

.flip-card {
	position: relative;
	/* Establishes the 3D space. Without a perspective the rotation is a flat
	   squash rather than a turn. */
	perspective: 1400px;
}

.flip-card__inner {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	/* 550ms sits mid-range of the spec's 500-600, and ease-in-out is the curve it
	   names. Both halves matter: the duration alone with an expo-out curve still
	   reads as a snap-and-settle rather than a turn. */
	transition: transform 550ms ease-in-out;
}

.flip-card:hover .flip-card__inner {
	transform: rotateY(180deg);
}

/* Keyboard focus turns the card; a click does nothing at all.

   This is :focus-visible and not :focus or :focus-within for a reason worth
   keeping. The card is focusable (tabindex="0"), so clicking it focuses it —
   and under either of the broader selectors that focus would hold the card
   open after the pointer left, which is exactly the click-to-lock behaviour
   this component no longer has. :focus-visible only matches keyboard-initiated
   focus, so a mouse click leaves the card entirely under :hover's control.

   Its own rule rather than a comma in the list above, so that a browser which
   does not know the selector drops only this line and keeps :hover working.
   Same for the :has() rule, which is there for a card whose focusable element
   is a descendant — this page has none, but the component should not assume
   that. */
.flip-card:focus-visible .flip-card__inner {
	transform: rotateY(180deg);
}

.flip-card:has(:focus-visible) .flip-card__inner {
	transform: rotateY(180deg);
}

.flip-card__face {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	/* The back of a face must not show through the front. Safari still needs the
	   prefix for this one. */
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	overflow: hidden;
}

.flip-card__face--back {
	transform: rotateY(180deg);
}

/* =============================================================================
   Mobile: the card stops being a card that turns and becomes two panels.

   This is DESIGNED, not a fallback. The Our Work mobile frame (Figma
   v4zuHnfQeDWmJsqAyNqiDq, frame 1795:106) draws both panels stacked and both
   visible, with no flip and no tap affordance anywhere on the section. So at
   767 and below the faces come out of the 3D space and stack in ordinary flow,
   and the card's height follows its content instead of being fixed by whoever
   uses it.

   It is also what closes the hole the hover-only decision above opened: a touch
   screen has no hover, and until this block existed the back face was reachable
   on a phone only through the accessibility tree. Nothing was added to get
   there — the quote is simply not hidden at this width.

   The 767 cut is the site-wide one. Anything that positions or sizes the two
   panels belongs to whoever uses the component; all this file does is stop
   pretending they are stacked in 3D.
   ========================================================================== */

@media (max-width: 767px) {
	.flip-card {
		perspective: none;
	}

	.flip-card__inner {
		display: flex;
		flex-direction: column;
		height: auto;
		transform: none;
		transition: none;
	}

	/* Every trigger above is a transform on __inner, so overriding that one
	   property is enough — hover and focus become no-ops rather than needing to
	   be unwound one selector at a time. */
	.flip-card:hover .flip-card__inner,
	.flip-card:focus-visible .flip-card__inner,
	.flip-card:has(:focus-visible) .flip-card__inner {
		transform: none;
	}

	.flip-card__face {
		position: static;
		-webkit-backface-visibility: visible;
		backface-visibility: visible;
	}

	.flip-card__face--back {
		transform: none;
	}
}

/* Reduced motion: the quote is content, so it still has to be reachable — the
   card cross-fades in place instead of turning. backface-visibility does the
   hiding in the 3D version and opacity has to do it here, so both faces are
   flattened out of the 3D space first.

   The min-width is load-bearing, not tidiness. This block hides the back face
   with opacity and brings it back on hover; below 768 there is no flip and no
   hover, so without the guard a phone with "reduce motion" switched on would
   render the stacked quote panel at opacity 0 and there would be nothing that
   could reveal it. There is no motion to reduce at that width anyway. */
@media (prefers-reduced-motion: reduce) and (min-width: 768px) {
	.flip-card {
		perspective: none;
	}

	.flip-card__inner {
		transform: none;
		transition: none;
	}

	.flip-card__face {
		-webkit-backface-visibility: visible;
		backface-visibility: visible;
		transition: opacity 200ms ease;
	}

	.flip-card__face--back {
		transform: none;
		opacity: 0;
	}

	/* The same two triggers as the 3D version, and the same split by selector
	   support — hover on its own, keyboard focus on its own. */
	.flip-card:hover .flip-card__face--front {
		opacity: 0;
	}

	.flip-card:hover .flip-card__face--back {
		opacity: 1;
	}

	.flip-card:focus-visible .flip-card__face--front {
		opacity: 0;
	}

	.flip-card:focus-visible .flip-card__face--back {
		opacity: 1;
	}

	.flip-card:has(:focus-visible) .flip-card__face--front {
		opacity: 0;
	}

	.flip-card:has(:focus-visible) .flip-card__face--back {
		opacity: 1;
	}
}