/* ==========================================================================
   Zauq Boutique — liquid motion

   The brief was "liquid animations, every transition like water moving between
   sections". Built as SILK rather than water, on purpose: this is a bridal
   atelier, and the site already speaks a fabric language — the page transition
   is a drape falling, the image reveal is a cover coming off a finished piece.
   A separate water theme laid beside that would read as two motion languages
   arguing. So the existing gesture is deepened into a fluid one instead.

   FLOW DIRECTION
   Primary is downward: content falls and settles the way cloth does, matching
   the unveil, which already clips from the top. Secondary is a slow rightward
   lateral drift on the continuous elements, so the page always has one thing
   quietly moving without ever asking to be looked at.

   ANIMATION STYLE
   Slow (14–26s cycles), low amplitude, no bounce and no elastic. The hypnotic
   part is meant to come from persistence and continuity, not from size — a big
   wobble is noticed once and then becomes annoying. Entrances use --ease-veil,
   the long soft deceleration already defined in styles.css; continuous drifts
   are linear, because anything eased loops with a visible hitch.

   PERFORMANCE
   Everything here is transform, opacity or clip-path — the properties the
   compositor can animate without laying out or painting each frame. Deliberately
   NOT used: feTurbulence/feDisplacementMap (repaints the filter region every
   frame and destroys scrolling on a mid-range phone), and WebGL (a build step
   and a battery cost this project has no reason to take on). No JavaScript
   either: the reveals hook onto the .is-visible class the existing
   IntersectionObserver already sets.

   TO REMOVE ALL OF THIS: delete the liquid.css <link> from the pages. Nothing
   else depends on it.
   ========================================================================== */

:root {
  /* One period of drift. Long enough that the eye never catches the loop. */
  --liquid-drift: 26s;
  --liquid-drift-slow: 38s;
  /* How far the liquid rise overshoots before settling. */
  --liquid-swell: 1.06;
}

/* ---------- 1. Liquid edges between sections ----------
   A wave along the top of every tinted band, so the boundary between two
   sections is a moving edge rather than a ruled line — the thing that makes
   scrolling feel like moving through a fluid rather than past a stack of boxes.

   Masked rather than drawn, so the wave takes the colour of the section it
   belongs to. Twice viewport width and translated by exactly -50%, which is what
   makes the loop seamless. ::before is already the zardozi motif, so this rides
   on ::after. */
.section--cream, .section--ink { overflow: hidden; }

.section--cream::after,
.section--ink::after {
  content: "";
  position: absolute;
  top: -1px;                /* -1 hides the hairline where the two bands meet */
  left: 0;
  width: 200%;
  height: clamp(26px, 4vw, 54px);
  z-index: -1;
  pointer-events: none;
  -webkit-mask: url("../images/wave-soft.svg") repeat-x 0 0 / 50% 100%;
          mask: url("../images/wave-soft.svg") repeat-x 0 0 / 50% 100%;
  animation: liquid-drift var(--liquid-drift) linear infinite;
}
/* The wave is painted in the colour of the section ABOVE, so it reads as that
   section pouring down into this one rather than as a stripe of its own.

   Most tinted bands follow a plain white .section, so white is the default and
   the four sibling rules below correct the cases where it doesn't. Getting this
   wrong is very visible — a mismatched colour shows up as a hard band sitting
   above the wave, which is exactly what it looked like on the first pass. */
.section--cream::after,
.section--ink::after { background: var(--white); }

.section--cream + .section--ink::after   { background: var(--cream); }
.section--ink + .section--cream::after   { background: var(--ink); }
.section--cream + .section--cream::after { background: var(--cream); }
.section--ink + .section--ink::after     { background: var(--ink); }

@keyframes liquid-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ---------- 2. Backdrop currents ----------
   A pair of very soft, very large radial washes drifting inside the tinted
   bands. Individually invisible; together they keep the background from ever
   being completely still, which is most of where the hypnotic quality comes
   from. Sized far larger than the band so no edge is ever visible. */
.section--cream > .wrap,
.section--ink > .wrap { position: relative; z-index: 1; }

.section--cream::before,
.section--ink::before {
  /* The motif rule in styles.css already owns this pseudo-element; this only
     adds the drift to it, so the two compose instead of one replacing the
     other. */
  animation: liquid-current var(--liquid-drift-slow) ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes liquid-current {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1.04); }
  to   { transform: translate3d(1.5%, 1%, 0) scale(1.09); }
}

/* ---------- 3. The unveil, made liquid ----------
   This is the important one. styles.css reveals a photograph by wiping a straight
   edge down it. Here the same clip gains an animated corner radius, so the edge
   arrives curved and flattens as it settles — the shape water makes filling a
   vessel, or cloth dropping into place.

   inset() with `round` is used rather than ellipse() because it interpolates
   predictably between two states and never leaves the corners of the frame
   uncovered at the end, which ellipse() does at some aspect ratios. */
.veil .tile-figure, .veil-figure {
  clip-path: inset(0 0 100% 0 round 46% 46% 0 0 / 34% 34% 0 0);
}
.veil.is-visible .tile-figure,
.veil-figure.is-visible {
  clip-path: inset(0 0 0 0 round 0 0 0 0 / 0 0 0 0);
  transition: clip-path var(--t-veil) var(--ease-veil) var(--d, 0s);
}

/* The settle overshoots a little now: the image swells past its resting size and
   comes back, the way a fabric drop does. Nothing else changes — the standalone
   `scale` property is still kept free of `transform` so the hover zoom composes
   rather than fights it, exactly as before. */
.veil.is-visible .tile-figure img,
.veil-figure.is-visible img {
  animation: liquid-settle 1.5s var(--ease-veil) var(--d, 0s) both;
}
@keyframes liquid-settle {
  0%   { scale: 1.14; }
  62%  { scale: var(--liquid-swell); }
  100% { scale: 1; }
}

/* ---------- 4. Text blocks rise like liquid ----------
   Sections of copy come up with the same curved leading edge, at a smaller
   amplitude so it never turns reading into an event. */
.reveal, .stagger > * {
  --liquid-lift: 18px;
}
.reveal.is-visible, .stagger.is-visible > * {
  animation: liquid-rise .95s var(--ease-veil) var(--d, 0s) both;
}
@keyframes liquid-rise {
  from { opacity: 0; transform: translate3d(0, var(--liquid-lift), 0); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 5. Cards answer the cursor like a surface ----------
   The tile softens its corners and lifts a touch — a fluid responding to being
   touched, rather than a box scaling up. */
.card .tile-figure,
.card-figure-link .tile-figure {
  transition: border-radius .7s var(--ease-veil), transform .7s var(--ease-veil);
}
.card:hover .tile-figure,
.card:focus-within .tile-figure {
  border-radius: 42% 42% 38% 38% / 8% 8% 6% 6%;
  transform: translate3d(0, -5px, 0);
}

/* ---------- 6. The page transition, made liquid ----------
   styles.css draws the incoming page down as a flat drape. Same gesture, but the
   leading edge is now curved and relaxes flat as it lands, so navigating reads
   as the next page pouring in. */
@keyframes page-drape {
  from { clip-path: inset(0 0 100% 0 round 40% 40% 0 0 / 22% 22% 0 0); }
  to   { clip-path: inset(0 0 0 0 round 0 0 0 0 / 0 0 0 0); }
}

/* ---------- 7. Reduced motion ----------
   Everything above is decoration. Someone who has asked their system for less
   motion — often because it makes them ill — gets the content with none of it.
   The continuous drifts stop entirely rather than merely slowing, because a
   slow perpetual movement is exactly the thing that triggers vestibular
   symptoms. */
@media (prefers-reduced-motion: reduce) {
  .section--cream::after,
  .section--ink::after,
  .section--cream::before,
  .section--ink::before {
    animation: none;
    transform: none;
  }
  .veil .tile-figure, .veil-figure { clip-path: none; }
  .veil.is-visible .tile-figure, .veil-figure.is-visible { clip-path: none; transition: none; }
  .veil.is-visible .tile-figure img,
  .veil-figure.is-visible img { animation: none; scale: 1; }
  .reveal.is-visible, .stagger.is-visible > * { animation: none; opacity: 1; transform: none; }
  .card:hover .tile-figure, .card:focus-within .tile-figure {
    border-radius: 0; transform: none;
  }
  @keyframes page-drape { from { clip-path: none; } to { clip-path: none; } }
}

/* Without JavaScript the .is-visible class is never applied, so the reveals must
   not be what makes content visible. Matches the existing safety net. */
@media (scripting: none) {
  .veil .tile-figure, .veil-figure { clip-path: none; }
  .reveal, .stagger > * { opacity: 1; transform: none; }
}