.es-interactive-gradient { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var( --wp--preset--color--base, #f0eeed ) var( --es-gradient-image ) center / cover no-repeat; color: var( --wp--preset--color--contrast, #3d251d ); }
.es-interactive-gradient.has-blobs, .es-interactive-gradient.has-webgl { background-image: none; }
/* WebGL gradient (view.js). Rendered at half resolution and upscaled; hidden unless the context was created. */
.es-interactive-gradient__canvas { position: absolute; inset: 0; z-index: 0; display: none; width: 100%; height: 100%; pointer-events: none; }
.has-webgl .es-interactive-gradient__canvas { display: block; }
.es-interactive-gradient__blobs { position: absolute; inset: 0; z-index: 0; display: none; overflow: hidden; background: radial-gradient( 30% 50% at 0% 100%, rgba( 60, 22, 8, 0.5 ) 0%, rgba( 60, 22, 8, 0 ) 100% ), linear-gradient( 90deg, #5f3626 0%, #764f42 20%, #9b786f 35%, #c0a39f 50%, #d8c0be 65%, #d6c3c4 80%, #bab2b9 100% ); pointer-events: none; }
.has-blobs .es-interactive-gradient__blobs { display: block; }
/* -30% inset is the travel budget: view.js clamps each layer to +/-0.5 x travel (max 55px), so no edge can show. Gradient positions are in blob-box space: blob = ( 0.3 + section ) / 1.6. */
.es-interactive-gradient__blob { position: absolute; inset: -30%; will-change: transform; pointer-events: none; }
.es-interactive-gradient__blob--dark { background: radial-gradient( 36% 56% at 84% 16%, #350300 0%, #4a1706 14%, #6f4333 34%, rgba( 122, 80, 64, 0.85 ) 55%, rgba( 140, 100, 85, 0.25 ) 75%, rgba( 140, 100, 85, 0 ) 100% ); }
.es-interactive-gradient__blob--mid { background: radial-gradient( 34% 26% at 46% 12%, #a9816e 0%, rgba( 145, 100, 80, 0.65 ) 50%, rgba( 145, 100, 80, 0 ) 100% ); }
.es-interactive-gradient__blob--light { background: radial-gradient( 34% 40% at 72% 78%, #f7ffff 0%, #f5f4f9 25%, #ecdfe8 50%, rgba( 232, 217, 224, 0.35 ) 75%, rgba( 232, 217, 224, 0 ) 100% ); }
.es-interactive-gradient::before { position: absolute; inset: 0; z-index: 1; background: rgba( 240, 238, 237, 0.38 ); content: ""; pointer-events: none; }
.es-interactive-gradient p { margin: 0; }
.es-interactive-gradient__line { position: absolute; left: 50%; z-index: 2; width: 1px; height: calc( 50% - 8.5rem ); background: rgba( 61, 37, 29, 0.42 ); transform: scaleY( 1 ); pointer-events: none; }
.es-interactive-gradient__line--top { top: 7.25rem; height: calc( 50% - 11rem ); transform-origin: top; }
/* Match the top label’s 1.8125rem gap; shorten the rule to keep its centre endpoint fixed. */
.es-interactive-gradient__line--bottom { bottom: 5.5rem; height: calc( 50% - 10rem ); transform-origin: bottom; }
.es-interactive-gradient.is-visible .es-interactive-gradient__line { transform: scaleY( 1 ); }
.es-interactive-gradient__corner, .es-interactive-gradient__label, .es-interactive-gradient__copy { position: absolute; z-index: 3; }
.es-interactive-gradient__corner { font-family: var( --wp--preset--font-family--display, "formiga", serif ); font-size: 4rem; font-weight: 300; line-height: 1; text-transform: uppercase; opacity: 0.28; }
.es-interactive-gradient__corner--tl { top: 2.25rem; left: 0.75rem; }.es-interactive-gradient__corner--tr { top: 2.25rem; right: 0.75rem; }.es-interactive-gradient__corner--bl { bottom: 2.25rem; left: 0.75rem; }.es-interactive-gradient__corner--br { right: 0.75rem; bottom: 2.25rem; }
.es-interactive-gradient__label { left: 50%; width: min( 37.75rem, 90% ); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.0625rem; line-height: 1; text-align: center; text-transform: uppercase; transform: translateX( -50% ); }
.es-interactive-gradient__label--top { top: 4.5rem; }.es-interactive-gradient__label--bottom { bottom: 2.75rem; }
.es-interactive-gradient__copy { top: 50%; left: 50%; width: 23.125rem; font-size: 0.875rem; letter-spacing: -0.015625rem; line-height: 1.285; text-align: center; transform: translate( -50%, -50% ); }
.es-interactive-gradient--editor { height: clamp( 30rem, 55vw, 45rem ); }
.es-interactive-gradient--editor .es-interactive-gradient__corner { font-size: clamp( 2rem, 5vw, 4rem ); }
@media ( prefers-reduced-motion: reduce ), ( hover: none ) { .es-interactive-gradient__blob { transform: none !important; } }
/*
 * Mobile (Figma "04-About 3", 402×745): the four words become a centred vertical stack
 * above the label → rule → copy → rule → label column. Everything flows; nothing is absolute.
 */
@media ( width < 768px ) {
	.es-interactive-gradient { display: flex; flex-direction: column; align-items: center; height: auto; min-height: 100vh; min-height: 100svh; padding: clamp( 4rem, 9svh, 5.25rem ) 1.125rem 1.75rem; text-align: center; }
	.es-interactive-gradient__corner, .es-interactive-gradient__label, .es-interactive-gradient__copy, .es-interactive-gradient__line { position: static; transform: none; }
	.es-interactive-gradient__corner { font-size: clamp( 1.5rem, 5svh, 2.75rem ); line-height: 1.2; }
	.es-interactive-gradient .es-interactive-gradient__corner--br { margin-bottom: clamp( 1rem, 3svh, 2.5rem ); }
	.es-interactive-gradient__label { width: auto; font-size: 0.6875rem; letter-spacing: 0.125rem; }
	.es-interactive-gradient__line { flex: 1 0 1rem; height: clamp( 1rem, 6svh, 5rem ); margin: clamp( 0.5rem, 2svh, 1rem ) 0; transform: scaleY( 1 ); }
	.es-interactive-gradient.is-visible .es-interactive-gradient__line { transform: scaleY( 1 ); }
	.es-interactive-gradient__line--top { order: 1; }
	.es-interactive-gradient__copy { order: 2; width: auto; font-size: 0.875rem; line-height: 1.5; }
	.es-interactive-gradient__line--bottom { order: 3; }
	.es-interactive-gradient__label--top { order: 0; }
	.es-interactive-gradient__label--bottom { order: 4; }
	.es-interactive-gradient__corner { order: -1; }
}
.es-interactive-gradient--preview { height: auto; min-height: 0; aspect-ratio: 16 / 9; }

/* Only hide content once the front-end observer is ready. Editor, no-JS and
 * reduced-motion views keep the complete composition visible. Opacity-only text
 * fades preserve desktop centring and the mobile stack. */
@media ( prefers-reduced-motion: no-preference ) {
	.es-interactive-gradient.is-reveal-ready .es-interactive-gradient__line { transform: scaleY( 0 ); }
	.es-interactive-gradient.is-reveal-ready .es-interactive-gradient__corner,
	.es-interactive-gradient.is-reveal-ready .es-interactive-gradient__label,
	.es-interactive-gradient.is-reveal-ready .es-interactive-gradient__copy { opacity: 0; }
	.es-interactive-gradient.is-reveal-ready.is-visible .es-interactive-gradient__corner,
	.es-interactive-gradient.is-reveal-ready.is-visible .es-interactive-gradient__label,
	.es-interactive-gradient.is-reveal-ready.is-visible .es-interactive-gradient__copy { transition: opacity 1.1s ease-out var( --es-reveal-delay, 0s ); }
	.es-interactive-gradient__corner--tl { --es-reveal-delay: 0.15s; }
	.es-interactive-gradient__corner--tr { --es-reveal-delay: 0.35s; }
	.es-interactive-gradient__corner--bl { --es-reveal-delay: 0.55s; }
	.es-interactive-gradient__corner--br { --es-reveal-delay: 0.75s; }
	.es-interactive-gradient__label--top { --es-reveal-delay: 0.45s; }
	.es-interactive-gradient__copy { --es-reveal-delay: 0.85s; }
	.es-interactive-gradient__label--bottom { --es-reveal-delay: 1.1s; }
	.es-interactive-gradient.is-reveal-ready.is-visible .es-interactive-gradient__line { transform: scaleY( 1 ); transition: transform 3.8s cubic-bezier( 0.65, 0, 0.35, 1 ) 0.15s; }
	.es-interactive-gradient.is-reveal-ready.is-visible .es-interactive-gradient__line--bottom { transition-delay: 0.5s; }
	.es-interactive-gradient.is-reveal-ready.is-visible .es-interactive-gradient__corner { opacity: 0.28; }
	.es-interactive-gradient.is-reveal-ready.is-visible .es-interactive-gradient__label,
	.es-interactive-gradient.is-reveal-ready.is-visible .es-interactive-gradient__copy { opacity: 1; }
}