/* Root Theory — builder animation presets.
   Applied to any element via data-anim / data-bg-anim attributes (set from the
   visual builder's Animation panel). Loaded in both the builder canvas and the
   live site so what you see while editing matches what visitors get. */

/* ── Entrance animations (play once) ── */
@keyframes rt-fade-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes rt-fade-up   { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes rt-fade-down { from { opacity: 0; transform: translateY(-28px); } to { opacity: 1; transform: none; } }
@keyframes rt-zoom-in   { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes rt-slide-left  { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } }
@keyframes rt-slide-right { from { opacity: 0; transform: translateX(-48px); } to { opacity: 1; transform: none; } }

[data-anim="fade-in"]     { animation: rt-fade-in .8s ease both; }
[data-anim="fade-up"]     { animation: rt-fade-up .8s cubic-bezier(.2,.7,.2,1) both; }
[data-anim="fade-down"]   { animation: rt-fade-down .8s cubic-bezier(.2,.7,.2,1) both; }
[data-anim="zoom-in"]     { animation: rt-zoom-in .8s cubic-bezier(.2,.7,.2,1) both; }
[data-anim="slide-left"]  { animation: rt-slide-left .8s cubic-bezier(.2,.7,.2,1) both; }
[data-anim="slide-right"] { animation: rt-slide-right .8s cubic-bezier(.2,.7,.2,1) both; }

/* ── Looping animations (continuous) ──
   These work on ANY element — a heading, a button, and especially an image or
   logo. Select the element, pick one under "✨ Animation", and it moves forever.
   They're all transform/opacity based, so they're smooth and never shift the
   surrounding layout. */
@keyframes rt-float    { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes rt-pulse    { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes rt-breathe  { 0%,100% { opacity: 1; } 50% { opacity: .6; } }
@keyframes rt-zoom     { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes rt-sway     { 0%,100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
@keyframes rt-glide    { 0%,100% { transform: translateX(-8px); } 50% { transform: translateX(8px); } }
@keyframes rt-kenburns { 0% { transform: scale(1); } 100% { transform: scale(1.12) translate(-2%,-1%); } }

[data-anim="float"]     { animation: rt-float 3.5s ease-in-out infinite; }
[data-anim="pulse"]     { animation: rt-pulse 2.5s ease-in-out infinite; }
[data-anim="breathe"]   { animation: rt-breathe 3s ease-in-out infinite; }
[data-anim="zoom"]      { animation: rt-zoom 5s ease-in-out infinite; }
[data-anim="sway"]      { animation: rt-sway 4s ease-in-out infinite; }
[data-anim="glide"]     { animation: rt-glide 5s ease-in-out infinite; }
[data-anim="ken-burns"] { animation: rt-kenburns 12s ease-in-out infinite alternate; }

/* ── Background motion ──────────────────────────────────────────────────────
   These paint an animated overlay INSIDE the section (an ::before at z-index 0)
   so the motion is always visible — even on a plain colored section with no
   background image. The section's own content is lifted above the overlay so
   text stays crisp and readable. Works over a solid color, a gradient, or a
   background photo alike. */
@keyframes rt-bg-flow      { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes rt-bg-waterfall { from { background-position: 0 0; } to { background-position: 0 240px; } }
@keyframes rt-bg-drift     { 0% { transform: translate3d(0,0,0) scale(1.15); } 50% { transform: translate3d(-3%,-2%,0) scale(1.15); } 100% { transform: translate3d(0,0,0) scale(1.15); } }
@keyframes rt-bg-aurora    { 0% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } }

/* Section becomes the positioning + stacking context for its overlay. */
[data-bg-anim="flow"],
[data-bg-anim="waterfall"],
[data-bg-anim="drift"],
[data-bg-anim="aurora"],
[data-bg-anim="ripple"] { position: relative; isolation: isolate; overflow: hidden; }

/* Keep real content above the overlay. Direct children get lifted; the overlay
   sits at z-index 0, children at z-index 1. */
[data-bg-anim="flow"] > *,
[data-bg-anim="waterfall"] > *,
[data-bg-anim="drift"] > *,
[data-bg-anim="aurora"] > *,
[data-bg-anim="ripple"] > * { position: relative; z-index: 1; }

[data-bg-anim="flow"]::before,
[data-bg-anim="waterfall"]::before,
[data-bg-anim="drift"]::before,
[data-bg-anim="aurora"]::before,
[data-bg-anim="ripple"]::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
}

/* Ripple (water) — distort the section's OWN background image with an animated
   SVG turbulence filter so the image itself looks like rippling water. Needs the
   #rt-water filter (rendered once per page by <WaterFilter/>). The ::before
   copies the section's background image and is the layer that gets distorted, so
   text on top stays perfectly crisp. Best on water/nature photos. */
[data-bg-anim="ripple"]::before {
  background-image: inherit;
  background-size: cover;
  background-position: center;
  inset: -12px;                 /* hide filter edge fringing */
  filter: url(#rt-water);
}

/* Flowing gradient sheen — a slow diagonal shimmer in the theme colors. */
[data-bg-anim="flow"]::before {
  background: linear-gradient(120deg,
    var(--accent-color, #9bac93), var(--text-primary, #234a49), var(--accent-color, #9bac93));
  background-size: 220% 220%;
  opacity: .22;
  animation: rt-bg-flow 12s ease infinite;
}

/* Aurora — a richer, larger, softer moving gradient (great behind hero text). */
[data-bg-anim="aurora"]::before {
  background: radial-gradient(60% 80% at 20% 20%, var(--accent-color, #9bac93) 0%, transparent 60%),
              radial-gradient(50% 70% at 80% 30%, var(--text-primary, #234a49) 0%, transparent 55%),
              radial-gradient(70% 90% at 50% 90%, var(--accent-color, #9bac93) 0%, transparent 60%);
  background-size: 200% 200%;
  opacity: .28;
  animation: rt-bg-aurora 16s ease-in-out infinite;
}

/* Waterfall — soft vertical streaks flowing downward, like falling water. */
[data-bg-anim="waterfall"]::before {
  background: repeating-linear-gradient(180deg,
    rgba(255,255,255,.16) 0, rgba(255,255,255,.16) 10px,
    transparent 10px, transparent 30px);
  background-size: 100% 240px;
  opacity: .5;
  animation: rt-bg-waterfall 5s linear infinite;
}

/* Drift — slow Ken-Burns pan/zoom of the section's own background image. Only
   visible when the section actually has a background image; harmless otherwise. */
[data-bg-anim="drift"]::before {
  background-image: inherit;
  background-size: cover;
  background-position: center;
  animation: rt-bg-drift 18s ease-in-out infinite;
}

/* Parallax — the background image stays fixed while the page scrolls over it.
   Needs a background image on the section (set via the builder's Background image
   picker). Not an overlay preset, so it isn't in the isolate/overflow group above. */
[data-bg-anim="parallax"] {
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Image fit control (set from the builder's Image settings) */
img[data-fit="cover"]   { object-fit: cover; }
img[data-fit="contain"] { object-fit: contain; }
img[data-fit="fill"]    { object-fit: fill; }

/* ── Testimonials marquee (continuous auto-rotate) ── */
@keyframes rt-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-anim], [data-bg-anim] { animation: none !important; }
  [data-bg-anim]::before { animation: none !important; }
}