/**
 * Aqua Studio Theme — assets/css/motion.css — v2.4.0 — Job 2026-07-11-egfs-premium-elevation
 * v2.4.0: hero structural block (§0) gets the premium-finish pass —
 * framed/rounded/shadowed .aqua-hero__media (was a sharp full-bleed
 * strip), generous .aqua-hero__copy spacing + max-width, and a real
 * .aqua-hero__subhead rule (previously unstyled, inheriting plain body
 * text). Pairs with the rebuilt assets/img/hero-brand-studio.svg and
 * style.css's .aqua-hero-h1 responsive clamp — see style.css's own
 * header comment for the full pass summary. Motion timing/keyframes
 * below (§1-3) are UNCHANGED this pass. Previously v2.3.1: §9 accessibility review flagged that .aqua-soon__email (below)
 * sets `outline: none` with no visible replacement — a WCAG 2.4.7 (Focus
 * Visible) failure on the site's live public front door. Fixed with a real
 * :focus-visible indicator (keyboard-only, so mouse/touch clicks stay
 * visually unchanged) plus a matching :focus-within ring on the parent pill
 * so the indicator is never visually clipped. No other rule in this file
 * changed. Previously v2.0.0 — Living Water motion system (structure/timing
 * kept, brand-re-skinned to the new purple/green/sand palette). Source:
 * clients/egfishstore/creative/motion-spec.md (Kenji, Motion) — production
 * CSS pasted verbatim in v1.1.0, integrated by Ali; v2.0.0 re-skin swaps
 * every hardcoded old-blue hex + Fraunces literal for the new brand
 * tokens/fonts, timing/easing/keyframes untouched.
 * Enqueued after aqua-studio-tokens in functions.php. Additive only — does
 * not edit or override any rule in style.css or rtl.css.
 *
 * Contents:
 *   0. Hero structural layout (Ali addition — style.css never defined
 *      .aqua-hero/.aqua-hero__media/.aqua-hero__copy box model; these are
 *      the minimum positioning-context rules the motion layers below need
 *      to stack correctly behind the copy. Not part of Kenji's spec verbatim
 *      — flagged here so the boundary between "spec, unchanged" and
 *      "structural prerequisite" stays visible.)
 *   1. Hero water motion (light shafts / particulate drift / caustic shimmer)
 *   2. Micro-interactions (card hover, badge fade-in, CTA ripple, nav chip underline)
 *   3. Coming-soon page motion
 *   Reduced-motion fallbacks are inlined under each block, verbatim from spec.
 */

/* ==========================================================================
   0. Hero structural layout — positioning context for Block 1 below
   ========================================================================== */
.aqua-hero {
	position: relative;
}

.aqua-hero__media {
	position: relative;
	overflow: hidden;
	/* v2.4.0 — premium-finish pass: framed like every other imagery slot
	   in this system (.aqua-card__img, .aqua-pdp__gallery) instead of a
	   sharp full-bleed edge-to-edge strip — reads as a designed hero
	   panel, not a raw banner crop. */
	border-radius: var( --radii-card, 18px );
	box-shadow: var( --elevation-card-shadow, 0 10px 28px rgba(103,50,114,.12) );
}

.aqua-hero__media-placeholder,
.aqua-hero__image {
	display: block;
	width: 100%;
	height: auto;
}

.aqua-hero__media-placeholder {
	aspect-ratio: 2400 / 900;
	background: var( --color-category-keys-marine, #673272 );
}

/* v2.4.0 — P0 CONTRAST hardening: .aqua-hero__media-placeholder (the
   no-image degrade path) is a solid dark-purple fill. It happens to sit
   BELOW .aqua-hero__copy in normal document flow today (siblings, not an
   overlay), so the heading text itself is not on top of it — but the
   photo-credit/caption pattern used elsewhere in this file
   (.aqua-hero__particles span backgrounds, etc.) is white-on-transparent
   and would silently vanish if this placeholder ever becomes a copy
   backdrop in a future edit. Explicit inverse color on anything
   inside the placeholder itself is a defensive, zero-cost guard. */
.aqua-hero__media-placeholder {
	color: var( --color-ink-text-inverse, #F9FDEC );
}

.aqua-hero__copy {
	position: relative;
	z-index: 1;
	/* v2.4.0 — "generous spacing" + "big confident headline" instruction:
	   was flush against the media with no breathing room and no width
	   cap (subhead ran the full board width on wide screens, hurting
	   readability). */
	padding-top: 44px;
	max-width: 62ch;
}

.aqua-hero__subhead {
	margin: 14px 0 28px;
	font-size: 17.5px;
	line-height: 1.6;
	color: var(--color-base-clear-mid, #78417D);
	max-width: 54ch;
}

/* ==========================================================================
   1. HERO WATER MOTION — REMOVED in v2.9.1 (Job 2026-07-20-egfs-audit-
   clearance, Ali) — D9 (audit row 9.2).
   This section styled .aqua-hero__motion / __shafts / __particles /
   __shimmer. NO PHP in the theme has emitted that markup since the hero was
   rebuilt around a real photograph (v2.5.1), so every rule here was dead —
   but they were dead DRAWINGS: layered linear-gradient "light shafts" and
   radial-gradient "caustic shimmer", i.e. dormant invented graphics that
   would have become live P0 violations the moment anyone re-added the
   markup. Deleted rather than left loaded, so the violation cannot be
   reintroduced by accident. The hero's real motion/structure lives in §0
   above and assets/css/aqua-hero-photo.css.
   ========================================================================== */

/* ==========================================================================
   2. MICRO-INTERACTIONS — creative/motion-spec.md Block 2 (§2.1–2.4)
   ========================================================================== */

/* 2.1 Product-card hover lift */
.aqua-card {
	transition: transform .22s ease, box-shadow .22s ease;
}

.aqua-card:hover,
.aqua-card:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 16px 34px rgba(18,62,99,.16);
}

/* 2.2 Badge fade-in on scroll (IntersectionObserver, one-time) */
.aqua-badge {
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .45s ease, transform .45s ease;
}

.aqua-badge.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.aqua-badge { opacity: 1; transform: none; transition: none; }
}

/* 2.3 Add-to-cart button ripple (deep-purple CTA #673272 family, subtle) */
.aqua-cta {
	position: relative;
	overflow: hidden;
}

.aqua-cta__ripple {
	position: absolute;
	border-radius: 50%;
	background: rgba(255,255,255,.55);
	transform: scale(0);
	opacity: 0;
	pointer-events: none;
	animation: aquaRipple .5s ease-out forwards;
}

@keyframes aquaRipple {
	0%   { transform: scale(0);   opacity: .55; }
	100% { transform: scale(2.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.aqua-cta__ripple { animation: none; display: none; }
}

/* 2.4 Nav category-chip tone-key underline swell */
.aqua-nav-cat-chip {
	position: relative;
	padding-bottom: 4px;
}

.aqua-nav-cat-chip::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 0;
	height: 2px;
	background-color: currentColor; /* inherits the chip's cat-key-* color already set by style.css §7 */
	transform: translateX(-50%);
	transition: width .2s ease;
}

.aqua-nav-cat-chip:hover::after,
.aqua-nav-cat-chip:focus-visible::after,
.aqua-nav-cat-chip[aria-current="page"]::after {
	width: 70%;
}

/* ==========================================================================
   3. COMING-SOON PAGE
   v2.7.0 (Ali): the "soft static reef corner ornaments" this section used
   to describe were a drawn CSS gradient ornament — purged sitewide per the
   owner's absolute no-invented-graphics rule (same pass that removed
   assets/img/reef-motif.svg and style.css's .aqua-reef-corner). Page is now
   a plain warm-cream surface with the centered full-color logo — clean
   whitespace/typography/colour, nothing drawn. Was Kenji's dark
   Living-Water-gradient + rising-bubble treatment in v1.1.0 before the
   v2.0.0 brand re-skin; no bubbles/dark-gradient-animation either way.
   ========================================================================== */
.aqua-soon {
	position: relative;
	min-height: 100vh;
	overflow: hidden;
	background: var(--surfaces-lifted-tint, #F9FDEC);
}

@media (prefers-reduced-motion: reduce) {
	.aqua-soon-body { background: var(--surfaces-lifted-tint, #F9FDEC); }
}

/* Branded content wrapper — centers the logo/headline/subline/form above
   the reef-corner ornaments via normal flow + z-index. */
.aqua-soon__content {
	position: relative;
	z-index: 1;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 24px;
	gap: 22px;
}

.aqua-soon__logo {
	width: clamp(220px, 26vw, 360px);
	height: auto;
}

.aqua-soon__wordmark-fallback {
	margin: 0;
	color: var(--cta-signal-primary, #673272);
	font-family: var(--type-display-en, 'Baloo 2'), sans-serif;
	font-weight: 700;
	font-size: clamp(28px, 5vw, 40px);
	letter-spacing: .04em;
}

.aqua-soon__headline {
	margin: 0;
	color: var(--cta-signal-primary, #673272);
	font-family: var(--type-display-en, 'Baloo 2'), sans-serif;
	font-weight: 600;
	font-size: clamp(30px, 5vw, 48px);
	line-height: 1.15;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.aqua-soon__subline {
	margin: 0;
	color: var(--color-ink-text-primary, #3A2A40);
	font-family: var(--type-text-en, 'Inter'), sans-serif;
	font-size: clamp(16px, 2vw, 19px);
}

.aqua-soon__notify {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
	background: #FFFFFF;
	border: 1px solid var(--elevation-hairline, rgba(103,50,114,.18));
	border-radius: var(--radii-cta-button, 999px);
	padding: 6px 6px 6px 22px;
	max-width: 92vw;
}

.aqua-soon__email {
	border: none;
	outline: none;
	background: transparent;
	font-family: var(--type-text-en, 'Inter'), sans-serif;
	font-size: 15px;
	color: var(--color-ink-text-primary, #3A2A40);
	min-width: 180px;
	flex: 1;
}

.aqua-soon__email::placeholder {
	color: rgba(58,42,64,.5);
}

/* v2.3.1 — accessibility fix (§9 review): the `outline: none` above removed
   the native keyboard-focus indicator with NO replacement — a WCAG 2.4.7
   (Focus Visible) failure on the site's live public front door. Restored
   with a real, on-brand indicator. :focus-visible (not :focus) is used
   deliberately so a mouse/touch click stays visually silent exactly as
   before — only Tab/keyboard focus shows the ring. The :focus-within
   companion rule highlights the whole pill so the ring is never visually
   clipped by the pill's own rounded/padded shape. */
.aqua-soon__email:focus-visible {
	outline: 2px solid var(--cta-signal-primary, #673272);
	outline-offset: 3px;
	border-radius: 8px;
}

.aqua-soon__notify:focus-within {
	border-color: var(--cta-signal-primary, #673272);
	box-shadow: 0 0 0 3px rgba(103, 50, 114, .16);
}

.aqua-soon__notify-btn {
	white-space: nowrap;
}