/* First-paint preloader backdrop. The Framer Pre-Loader element (position:fixed;
   z-index:10) is parsed partway down <body>, so for a frame before it paints the
   top of the page renders — the base site flashes before the preloader. This
   stylesheet is render-blocking (linked in <head>), so this rule paints a
   full-viewport cover from the very first paint, keyed to the server-rendered
   html.site-preloading class, sitting just under the real preloader (z-index:9)
   to hide that flash. It disappears the instant preloader-lock.js drops the
   site-preloading class. Kept in this <head> stylesheet to avoid editing the
   minified single-line route.ts.

   The cover MUST match the preloader/site backdrop, never #fff: the Framer
   Pre-Loader's outro (Variant 3) fades its own blue-wave wallpaper out to reveal
   what sits behind it — which is this cover — so a white cover paints a ~1.5s
   white flash right before the site appears, and on a slow first load (wallpaper
   not yet decoded) it shows as a plain-white preload. So the cover uses the SAME
   backdrop as the Pre-Loader and hero (shared-blue-wave-background-wide.jpg),
   with a flat #5891c9 (the image's average colour, sampled from the asset) as
   the instant fallback before that shared, fetchpriority-high image decodes.
   Blue cover -> blue preloader -> blue hero: no white at any moment. */
html.site-preloading::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9;
  background: #5891c9 url("/assets/img/shared-blue-wave-background-wide.jpg")
    center center / cover no-repeat;
  pointer-events: none;
  transition: opacity 900ms cubic-bezier(0.44, 0, 0.56, 1);
}

/* preloader-lock.js adds site-revealing when the Pre-Loader's Variant 3 shutter
   starts, so the cover dissolves in step with the outro instead of popping off
   when the class is finally dropped. */
html.site-preloading.site-revealing::before {
  opacity: 0;
}

/* Attributes-only liquid-glass veil on Framer background wrappers.
   Reuses the existing dock/card blur(30px) material. No extra DOM nodes. */

[data-framer-background-image-wrapper] {
  isolation: isolate;
}

[data-framer-background-image-wrapper]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  box-sizing: border-box;
  border-radius: inherit;
  corner-shape: inherit;
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(30px) saturate(1.4);
  -webkit-backdrop-filter: blur(30px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  opacity: 1;
  transition: opacity 430ms cubic-bezier(0.44, 0, 0.56, 1);
}

[data-framer-background-image-wrapper]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  corner-shape: inherit;
  background:
    radial-gradient(
      80% 50% at 30% 20%,
      rgba(255, 255, 255, 0.28) 0%,
      rgba(255, 255, 255, 0) 55%
    ),
    radial-gradient(
      60% 40% at 70% 80%,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(255, 255, 255, 0) 50%
    );
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  animation: media-glass-caustic 1.8s ease-in-out infinite;
  opacity: 1;
  transition: opacity 430ms cubic-bezier(0.44, 0, 0.56, 1);
}

[data-framer-background-image-wrapper] img {
  opacity: 0;
  transition: opacity 430ms cubic-bezier(0.44, 0, 0.56, 1);
}

/* Device-frame overlay (Footer > iPhone > silver frame) is a transparent PNG
   silhouette — metal bezel + rounded corners, with a transparent screen cutout
   and transparent gutters around the phone — not a rectangular fill like a
   wallpaper or thumbnail. The default veil (inset:0, border-radius:inherit=0)
   therefore paints a hard-edged rectangle over the whole bounding box, leaking
   past the phone shape and blanketing the rounded screen beneath it. Shape the
   veil to the frame's own alpha channel so the liquid glass materialises AS the
   phone: mask-mode:match-source uses the image alpha, so the veil paints only
   over the opaque bezel; the transparent screen is left to the Wallpaper layer's
   own (rounded) veil. Small variant keeps the mask asset light. */
.framer-zpfp88 > [data-framer-background-image-wrapper]::before,
.framer-zpfp88 > [data-framer-background-image-wrapper]::after {
  -webkit-mask-image: url("/assets/img/risefit-iphone-14-pro-max-frame-small.webp");
  mask-image: url("/assets/img/risefit-iphone-14-pro-max-frame-small.webp");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

[data-framer-background-image-wrapper][data-media-ready]::before,
[data-framer-background-image-wrapper][data-media-ready]::after {
  opacity: 0;
}

[data-framer-background-image-wrapper][data-media-ready]::after {
  animation: none;
}

[data-framer-background-image-wrapper][data-media-ready] img {
  opacity: 1;
}

[data-framer-background-image-wrapper][data-media-cached]::after {
  animation: none;
}

[data-framer-background-image-wrapper][data-media-cached][data-media-ready]::before,
[data-framer-background-image-wrapper][data-media-cached][data-media-ready]::after,
[data-framer-background-image-wrapper][data-media-cached][data-media-ready] img {
  transition-duration: 0ms;
}

/* Overlay windows (About, Tools, ...) are white cards, so the default 22%-white
   glass is invisible against them, and on a warm cache the 0ms cached path makes
   the icons simply pop in. Give the overlay glass a faint cool tint so it reads
   on white, and always play a short dissolve there — even when cached — so the
   folder contents visibly materialise instead of appearing in one frame. */
#overlay [data-framer-background-image-wrapper]::before {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(206, 216, 232, 0.5) 100%
  );
  border-color: rgba(30, 50, 80, 0.08);
}

#overlay [data-framer-background-image-wrapper][data-media-cached]::after {
  animation: media-glass-caustic 1.8s ease-in-out infinite;
}

#overlay [data-framer-background-image-wrapper][data-media-cached][data-media-ready]::before,
#overlay [data-framer-background-image-wrapper][data-media-cached][data-media-ready]::after,
#overlay [data-framer-background-image-wrapper][data-media-cached][data-media-ready] img {
  transition-duration: 320ms;
}

#overlay [data-framer-background-image-wrapper][data-media-ready]::after {
  animation: none;
}

/* Exempt the Framer Pre-Loader's own wallpaper from the liquid-glass veil above.
   The Pre-Loader ([data-framer-name="Pre-Loader"]) paints its blue-wave backdrop
   through a [data-framer-background-image-wrapper], so the default veil frosts it
   (img opacity:0 + a 22%-white blur) until media-glass.js marks it ready — on a
   slow first load that is the plain-white preload. The preloader must read as its
   solid blue backdrop from the first paint, never frosted, so drop the veil here
   and keep its wallpaper opaque. Scoped to the stable data-framer-name (not the
   hashed class) and placed after the base rules so it wins on source order. */
[data-framer-name="Pre-Loader"] [data-framer-background-image-wrapper]::before,
[data-framer-name="Pre-Loader"] [data-framer-background-image-wrapper]::after {
  content: none;
}

[data-framer-name="Pre-Loader"] [data-framer-background-image-wrapper] img {
  opacity: 1;
}

/* Contact-CTA <video> (Footer). The video has preload="none" + a local poster
   and NO <img>, so the background-image-wrapper veil above never touches it.
   media-glass.js tags the video's own container with data-media-video, then sets
   data-media-ready once the poster IMAGE has actually loaded + decoded (or the
   video can render a frame) — so the veil's lifetime tracks real load, never a
   timer. The marker is JS-added (not in SSR HTML): the CTA is below the fold, so
   the veil is up long before it scrolls into view, and if the script ever fails
   to run the video simply shows normally instead of staying frosted. The veil is
   rounded by the ancestor Content-stack (overflow:clip + 24px radius). */
[data-media-video] {
  isolation: isolate;
}

[data-media-video]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  box-sizing: border-box;
  border-radius: inherit;
  corner-shape: inherit;
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(30px) saturate(1.4);
  -webkit-backdrop-filter: blur(30px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  opacity: 1;
  transition: opacity 430ms cubic-bezier(0.44, 0, 0.56, 1);
}

[data-media-video]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  corner-shape: inherit;
  background:
    radial-gradient(
      80% 50% at 30% 20%,
      rgba(255, 255, 255, 0.28) 0%,
      rgba(255, 255, 255, 0) 55%
    ),
    radial-gradient(
      60% 40% at 70% 80%,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(255, 255, 255, 0) 50%
    );
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  animation: media-glass-caustic 1.8s ease-in-out infinite;
  opacity: 1;
  transition: opacity 430ms cubic-bezier(0.44, 0, 0.56, 1);
}

[data-media-video] > video {
  opacity: 0;
  transition: opacity 430ms cubic-bezier(0.44, 0, 0.56, 1);
}

[data-media-video][data-media-ready]::before,
[data-media-video][data-media-ready]::after {
  opacity: 0;
}

[data-media-video][data-media-ready]::after {
  animation: none;
}

[data-media-video][data-media-ready] > video {
  opacity: 1;
}

[data-media-video][data-media-cached]::after {
  animation: none;
}

[data-media-video][data-media-cached][data-media-ready]::before,
[data-media-video][data-media-cached][data-media-ready]::after,
[data-media-video][data-media-cached][data-media-ready] > video {
  transition-duration: 0ms;
}

@keyframes media-glass-caustic {
  0%,
  100% {
    background-position: 0% 20%, 100% 80%;
    filter: brightness(0.85);
  }
  50% {
    background-position: 80% 60%, 20% 30%;
    filter: brightness(1.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-framer-background-image-wrapper]::after,
  [data-media-video]::after {
    animation: none;
  }

  [data-framer-background-image-wrapper]::before,
  [data-framer-background-image-wrapper]::after,
  [data-framer-background-image-wrapper] img,
  [data-media-video]::before,
  [data-media-video]::after,
  [data-media-video] > video {
    transition-duration: 80ms;
  }

  #overlay [data-framer-background-image-wrapper]::after {
    animation: none;
  }

  #overlay [data-framer-background-image-wrapper][data-media-cached][data-media-ready]::before,
  #overlay [data-framer-background-image-wrapper][data-media-cached][data-media-ready]::after,
  #overlay [data-framer-background-image-wrapper][data-media-cached][data-media-ready] img {
    transition-duration: 80ms;
  }
}

@media (forced-colors: active) {
  [data-framer-background-image-wrapper]::before,
  [data-media-video]::before {
    background: Canvas;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid CanvasText;
  }

  [data-framer-background-image-wrapper]::after,
  [data-media-video]::after {
    animation: none;
    background: none;
    mix-blend-mode: normal;
    filter: none;
  }
}

/* No-JS safety net: if scripting is completely unavailable the preloader cover
   can never be removed by JS, so hide it immediately. The site renders without
   the preloader animation but remains fully usable. */
@media (scripting: none) {
  html.site-preloading::before {
    display: none !important;
  }
}