/*
 * Velara Signature Finder v1.8.47 — cross-device experience polish.
 *
 * Ownership:
 * - iOS final-media alpha fallback presentation
 * - desktop decorative Finder bottle scale
 * - mobile Finder viewport continuity
 * - mobile guided-bottle visibility
 * - "Wear the feeling" surface palette
 *
 * This module intentionally does not style Shop, Cart, Checkout, profiles,
 * matching logic or search behavior.
 */

:root{
  --vsf-wear-white:#fdfcfe;
  --vsf-wear-soft:#faf5fd;
  --vsf-wear-lilac:#f4e1fd;
  --vsf-wear-blush:#f2dafe;
  --vsf-wear-ink:#351f50;
}

/* --------------------------------------------------------------------------
   1. Home/Finder surface palette
   Bring the approved "Wear the feeling" blush/lilac surface into the primary
   Finder card without changing typography or interaction geometry.
   -------------------------------------------------------------------------- */
.velara-site.velara-hero.velara-hero-split-bg{
  background-color:var(--vsf-wear-soft)!important;
}

.velara-site.velara-hero.velara-hero-split-bg
.vsf-app:not(.vsf-final-overlay) .vsf-panel{
  background:
    radial-gradient(circle at 91% 5%,rgba(242,218,254,.64),transparent 34%),
    linear-gradient(
      145deg,
      rgba(253,252,254,.98) 0%,
      rgba(250,245,253,.97) 49%,
      rgba(244,225,253,.94) 78%,
      rgba(242,218,254,.91) 100%
    )!important;
}

.velara-site.velara-hero.velara-hero-split-bg
.vsf-app:not(.vsf-final-overlay) .vsf-path-card{
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.96) 0%,
      rgba(252,248,254,.96) 57%,
      rgba(247,234,252,.92) 100%
    )!important;
}

/* Reuse the panel's existing decorative glow as the only new Home motion.
   It is deliberately slow and low-amplitude. */
@keyframes vsfWearSurfaceGlow{
  0%{transform:translate3d(0,0,0) scale(.96);opacity:.72}
  50%{transform:translate3d(-12px,-9px,0) scale(1.06);opacity:.92}
  100%{transform:translate3d(4px,-4px,0) scale(1);opacity:.78}
}

.velara-site.velara-hero.velara-hero-split-bg
.vsf-app:not(.vsf-final-overlay) .vsf-panel::after{
  background:
    radial-gradient(circle,rgba(204,151,239,.22) 0%,rgba(242,218,254,.13) 44%,transparent 70%)!important;
  animation:vsfWearSurfaceGlow 11s ease-in-out infinite alternate;
  will-change:transform,opacity;
}

/* --------------------------------------------------------------------------
   2. Desktop bottle: larger only on real desktop.
   Scaled-desktop/Windows density modes retain their own tested sizing.
   -------------------------------------------------------------------------- */
@media(min-width:1181px) and (hover:hover) and (pointer:fine){
  html:not(.vsf-scaled-desktop)
  .velara-site.velara-hero.velara-hero-split-bg
  .vsf-app:not(.vsf-final-overlay) .vsf-bottle{
    scale:1.32!important;
    transform-origin:center center!important;
  }

  /* A regular desktop at 125% OS scaling is still the requested desktop
     composition. The earlier DPR guard reduced this bottle to .74 scale. */
  html.vsf-scaled-desktop
  .velara-site.velara-hero.velara-hero-split-bg
  .vsf-app:not(.vsf-final-overlay) .vsf-bottle{
    scale:1.32!important;
    transform-origin:center center!important;
  }

  html:not(.vsf-scaled-desktop)
  .velara-site.velara-hero.velara-hero-split-bg
  .vsf-app:not(.vsf-final-overlay) .vsf-aura{
    width:446px!important;
    height:446px!important;
  }
}

@media(min-width:1181px) and (max-height:740px) and (hover:hover) and (pointer:fine){
  html:not(.vsf-scaled-desktop)
  .velara-site.velara-hero.velara-hero-split-bg
  .vsf-app:not(.vsf-final-overlay) .vsf-bottle{
    scale:1.18!important;
  }

  html.vsf-scaled-desktop
  .velara-site.velara-hero.velara-hero-split-bg
  .vsf-app:not(.vsf-final-overlay) .vsf-bottle{
    scale:1.18!important;
  }

  html:not(.vsf-scaled-desktop)
  .velara-site.velara-hero.velara-hero-split-bg
  .vsf-app:not(.vsf-final-overlay) .vsf-aura{
    width:395px!important;
    height:395px!important;
  }
}

/* --------------------------------------------------------------------------
   3. Mobile viewport continuity.
   The page header is normal-flow on phones, so the hero owns at least the
   remaining small/dynamic viewport height. Content can still grow naturally.
   This prevents the photographic/lilac background from ending above the
   selector's visual bottom on iPhone.
   -------------------------------------------------------------------------- */
@media(max-width:980px){
  body.vsf-home-page,
  body.vsf-home-page #page,
  body.vsf-home-page .site,
  body.vsf-home-page .site-content,
  body.vsf-home-page main,
  body.vsf-home-page .entry-content,
  body.vsf-home-page [data-elementor-type="wp-page"]{
    background-color:var(--vsf-wear-soft)!important;
  }

  html:not(.vsf-scaled-desktop)
  body .velara-site.velara-hero.velara-hero-split-bg,
  html:not(.vsf-scaled-desktop)
  body .velara-hero.velara-hero-split-bg{
    min-height:calc(100vh - var(--velara-header-clearance,0px))!important;
    min-height:calc(100svh - var(--velara-header-clearance,0px))!important;
    min-height:calc(100dvh - var(--velara-header-clearance,0px))!important;
    box-sizing:border-box!important;
    padding-bottom:max(52px,calc(34px + env(safe-area-inset-bottom)))!important;
    background-color:var(--vsf-wear-soft)!important;
  }

  html.vsf-ios:not(.vsf-scaled-desktop)
  body .velara-site.velara-hero.velara-hero-split-bg,
  html.vsf-ios:not(.vsf-scaled-desktop)
  body .velara-hero.velara-hero-split-bg{
    background-color:var(--vsf-wear-soft)!important;
  }
}

/* --------------------------------------------------------------------------
   4. Phones: hide only the normal fill-progress bottle while answering.
   The final transition/video overlay is explicitly excluded. Progress stage
   indicators remain untouched.
   -------------------------------------------------------------------------- */
@media(max-width:980px) and (hover:none) and (pointer:coarse){
  html:not(.vsf-scaled-desktop)
  .vsf-app[data-mode="guided"].is-guided-question:not(.vsf-final-overlay)
  .vsf-visual{
    display:none!important;
    visibility:hidden!important;
  }
}

/* Width fallback for WebKit and embedded browsers that report pointer media
   features inconsistently. It deliberately does not depend on an iOS UA class
   or on the Elementor Home wrapper. */
@media(max-width:760px){
  html:not(.vsf-scaled-desktop)
  .vsf-app[data-mode="guided"].is-guided-question:not(.vsf-final-overlay)
  .vsf-visual{
    display:none!important;
    visibility:hidden!important;
    width:0!important;
    height:0!important;
    min-height:0!important;
    max-height:0!important;
    margin:0!important;
    overflow:hidden!important;
  }

  html:not(.vsf-scaled-desktop)
  .vsf-app[data-mode="guided"].is-guided-question:not(.vsf-final-overlay)
  .vsf-card{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    grid-template-areas:
      "copy"
      "selector"!important;
  }

  html:not(.vsf-scaled-desktop)
  .vsf-app[data-mode="guided"].is-guided-question:not(.vsf-final-overlay)
  .vsf-right{
    display:contents!important;
  }

  /* iOS was inheriting the old 250 px Notes cap. Three rows of answer cards
     are taller than that, so the final row and actions were paint-clipped. */
  html:not(.vsf-scaled-desktop)
  .vsf-app[data-mode="guided"].is-guided-question:not(.vsf-final-overlay)
  .vsf-guided-flow:not([hidden]),
  html:not(.vsf-scaled-desktop)
  .vsf-app[data-mode="guided"].is-guided-question:not(.vsf-final-overlay)
  .vsf-options[data-vsf-option-count]{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
  }

  html:not(.vsf-scaled-desktop)
  .vsf-app[data-mode="guided"].is-guided-question:not(.vsf-final-overlay)
  .vsf-guided-flow:not([hidden]){
    grid-template-rows:auto auto auto auto!important;
    align-content:start!important;
  }
}

/* --------------------------------------------------------------------------
   5. iOS animated transparent-image fallback.
   iOS receives an animated WebP when the configured final media is WebM.
   No portrait-video edge masks/fields are allowed on this path.
   -------------------------------------------------------------------------- */
.vsf-final-video-stage.is-transparent-image-media::before,
.vsf-final-video-stage.is-transparent-image-media::after{
  display:none!important;
}

.vsf-final-video-stage.is-transparent-image-media{
  background:
    radial-gradient(
      ellipse 88% 78% at 50% 38%,
      var(--vsf-wear-white) 0%,
      var(--vsf-wear-soft) 49%,
      var(--vsf-wear-lilac) 78%,
      var(--vsf-wear-blush) 100%
    )!important;
  background-color:var(--vsf-wear-soft)!important;
}

.vsf-final-overlay.has-final-image .vsf-final-overlay-backdrop,
.vsf-final-overlay.has-final-svg .vsf-final-overlay-backdrop{
  background:
    radial-gradient(
      ellipse 88% 78% at 50% 38%,
      var(--vsf-wear-white) 0%,
      var(--vsf-wear-soft) 49%,
      var(--vsf-wear-lilac) 78%,
      var(--vsf-wear-blush) 100%
    )!important;
}

.vsf-final-video-stage.is-transparent-image-media .vsf-final-video-wash{
  background:
    radial-gradient(
      ellipse 86% 76% at 50% 38%,
      rgba(253,252,254,.98) 0%,
      rgba(250,245,253,.96) 50%,
      rgba(244,225,253,.94) 80%,
      rgba(242,218,254,.92) 100%
    )!important;
}

.vsf-final-video-stage.is-transparent-image-media .vsf-final-video-media{
  background:transparent!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  filter:blur(8px) saturate(1) contrast(1) brightness(1)!important;
}

.vsf-final-overlay.is-video-active
.vsf-final-video-stage.is-transparent-image-media .vsf-final-video-media{
  filter:blur(0) saturate(1) contrast(1) brightness(1)!important;
}

/* Use the approved palette in the regular transparent-video ritual too. */
.vsf-final-overlay.is-direct-final-media .vsf-final-video-stage{
  background:
    radial-gradient(
      ellipse 88% 78% at 50% 38%,
      var(--vsf-wear-white) 0%,
      var(--vsf-wear-soft) 48%,
      var(--vsf-wear-lilac) 78%,
      var(--vsf-wear-blush) 100%
    );
}

.vsf-final-overlay.is-direct-final-media .vsf-final-video-wash{
  background:
    radial-gradient(
      ellipse 86% 76% at 50% 38%,
      rgba(253,252,254,.98) 0%,
      rgba(250,245,253,.96) 50%,
      rgba(244,225,253,.93) 80%,
      rgba(242,218,254,.90) 100%
    );
}

@media(max-width:680px){
  .vsf-final-video-stage.is-transparent-image-media .vsf-final-image-media{
    width:94vw!important;
    height:86vh!important;
    object-fit:contain!important;
    object-position:center!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .velara-site.velara-hero.velara-hero-split-bg
  .vsf-app:not(.vsf-final-overlay) .vsf-panel::after{
    animation:none!important;
  }
}