/* Fluid Imagination — motion layer.
   Pure CSS, opt-in by class, transform/opacity only. Colors ride the
   cold/warm dial via --accent-primary; neutral warm-gray on pages with no
   data-mode. Respects prefers-reduced-motion. Author here; ships in the plugin. */

:root{
  --fi-drift: 18s;          /* wave horizontal drift period */
  --fi-morph: 10s;          /* organic blob shape morph period */
  --fi-float: 9s;           /* card / shape idle float period */
  --fi-float-dist: 8px;     /* idle float travel distance */

  /* Motion-layer color: neutral warm-gray by default. */
  --fi-motion-color: var(--color-warm-gray);

  /* Tiled wave used as a CSS mask (200px seamless tile). */
  --fi-wave-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='28' viewBox='0 0 200 28' preserveAspectRatio='none'%3E%3Cpath d='M0 14 C25 2 75 2 100 14 S175 26 200 14 L200 28 L0 28 Z' fill='%23000'/%3E%3C/svg%3E");
}

/* On single Creations, the dial's accent drives the motion color. */
[data-mode="cold"],
[data-mode="warm"]{ --fi-motion-color: var(--accent-primary); }

/* Keyframes (shared) */
@keyframes fi-morph{ 50%{ border-radius:58% 42% 38% 62% / 60% 55% 45% 40%; } }
@keyframes fi-drift-slow{ 50%{ transform:translate(4vw,3vw); } }
@keyframes fi-float{ 50%{ transform:translateY(calc(-1 * var(--fi-float-dist))); } }
@keyframes fi-wave-drift{ to{ -webkit-mask-position:200px 0; mask-position:200px 0; } }
@keyframes fi-wave-drift-r{ to{ -webkit-mask-position:-240px 0; mask-position:-240px 0; } }

/* Accessibility: freeze all motion when the visitor asks for reduced motion.
   Shapes still render, just static. */
@media (prefers-reduced-motion: reduce){
  .fi-ambient::before, .fi-ambient::after,
  .fi-wave::before,
  .fi-card-fluid img,
  .fi-footer-wave::before, .fi-footer-wave::after{
    animation: none !important;
  }
}

/* Ambient background — two whisper-slow drifting blobs behind all content.
   Injected once by the plugin as <div class="fi-ambient" aria-hidden="true">. */
.fi-ambient{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.fi-ambient::before, .fi-ambient::after{
  content:""; position:absolute;
  border-radius:42% 58% 63% 37% / 45% 40% 60% 55%;
  background:radial-gradient(circle at 35% 35%,
             color-mix(in oklch, var(--fi-motion-color) 22%, transparent), transparent 70%);
  filter:blur(40px); opacity:.5;
}
.fi-ambient::before{
  width:46vw; height:46vw; top:-8vw; left:-6vw;
  animation:fi-morph var(--fi-morph) ease-in-out infinite,
            fi-drift-slow calc(var(--fi-drift) * 2.4) ease-in-out infinite;
}
.fi-ambient::after{
  width:38vw; height:38vw; bottom:-10vw; right:-8vw;
  animation:fi-morph calc(var(--fi-morph) * 1.3) ease-in-out infinite reverse,
            fi-drift-slow calc(var(--fi-drift) * 3) ease-in-out infinite reverse;
}

/* Keep page content above the ambient layer (ambient is body's first child). */
body > :not(.fi-ambient){ position:relative; z-index:1; }

/* Section divider — a wave-shaped band sitting on the section's top edge,
   drifting horizontally. Opt in by adding class "fi-wave" to a section. */
.fi-wave{ position:relative; }
.fi-wave::before{
  content:""; position:absolute; left:0; right:0; top:0; height:28px;
  transform:translateY(-100%);
  background:var(--fi-motion-color); opacity:.9;
  -webkit-mask:var(--fi-wave-svg) repeat-x; mask:var(--fi-wave-svg) repeat-x;
  -webkit-mask-size:200px 28px; mask-size:200px 28px;
  animation:fi-wave-drift var(--fi-drift) linear infinite;
}

/* Cards — organic corners + slow idle float + liquid lift on hover, mapped onto
   the post feature image. Add "fi-card-fluid" to the Elementor image widget
   (styles the inner <img>); also works if placed on an <img> directly. */
.fi-card-fluid img, img.fi-card-fluid{
  display:block;
  /* !important overrides Elementor core's `.elementor img{border-radius:0}`,
     which ties on specificity but loads after this stylesheet. */
  border-radius:38px 42px 40px 44px / 44px 40px 42px 38px !important;
  animation:fi-float var(--fi-float) ease-in-out infinite;
  transition:transform .35s ease, box-shadow .35s ease;
  will-change:transform;
}
/* Hover: pause the float and lift. */
.fi-card-fluid:hover img, img.fi-card-fluid:hover{
  animation-play-state:paused;
  transform:translateY(-8px) scale(1.01);
  box-shadow:0 18px 40px rgba(0,0,0,.16);
}

/* Footer — a closing wave on the top edge + a slow drifting shape.
   Opt in by adding "fi-footer-wave" to the footer section. */
.fi-footer-wave{ position:relative; }
.fi-footer-wave::before{
  content:""; position:absolute; left:0; right:0; top:0; height:32px;
  transform:translateY(-100%);
  background:var(--fi-motion-color); opacity:.85;
  -webkit-mask:var(--fi-wave-svg) repeat-x; mask:var(--fi-wave-svg) repeat-x;
  -webkit-mask-size:240px 32px; mask-size:240px 32px;
  animation:fi-wave-drift-r calc(var(--fi-drift) * 1.2) linear infinite;
}
.fi-footer-wave::after{
  content:""; position:absolute; right:6%; top:18px;
  width:46px; height:46px; border-radius:50%;
  background:radial-gradient(circle at 40% 40%, var(--color-amber), var(--color-rust));
  opacity:.5; filter:blur(2px); pointer-events:none;
  animation:fi-float calc(var(--fi-float) * 1.2) ease-in-out infinite;
}

/* Post tags — organic "blob" corners echoing the fluid cards, with a small
   playful lift + tilt on hover. Shape/motion only: the theme keeps its own
   per-post accent fill. Add "fi-chip" to the Elementor post-info (terms) widget;
   it styles each term pill. Also works if placed on a tag element directly.
   The radius uses !important to override the theme's per-element 2px chip radius. */
.fi-chip .elementor-post-info__terms-list-item,
a.fi-chip, span.fi-chip{
  display:inline-block;
  border-radius:12px 14px 11px 15px / 15px 11px 14px 12px !important;
  transition:transform .3s ease, box-shadow .3s ease;
}
.fi-chip .elementor-post-info__terms-list-item:hover,
a.fi-chip:hover, span.fi-chip:hover{
  transform:translateY(-2px) rotate(-1.5deg);
  box-shadow:0 6px 14px rgba(0,0,0,.18);
}

/* Reduced motion: keep the organic shape, drop the hover movement. */
@media (prefers-reduced-motion: reduce){
  .fi-chip .elementor-post-info__terms-list-item,
  a.fi-chip, span.fi-chip{ transition:none; }
  .fi-chip .elementor-post-info__terms-list-item:hover,
  a.fi-chip:hover, span.fi-chip:hover{ transform:none; }
}