/* ============================================================
   VINORA EVENTS — perf.css
   Loaded LAST. Scroll performance.

   The gloss pass left 34 elements with backdrop-filter on the
   page. Each one is its own compositing layer that re-blurs on
   every scroll frame, and together with a full-viewport grain
   layer and 42 running animations that is what made scrolling
   stutter and flash.

   The look is kept — the blur is simply replaced with a solid
   tint, which is visually almost identical over an opaque page
   and costs nothing. backdrop-filter survives only where the
   content behind it actually moves: the header.
   ============================================================ */

/* 1. Blur only where something scrolls underneath */
.sm-step,.sf-q,.sf-table,.post-card,.faq,.svc2-card,.step2,
.stats .stat,.feat,.keyfacts,.area-grid a,.q-form,.pr-card,
.pr-note,.tw-col,.sf-inc,.blog-grid article,#vchat,#darkSwitch{
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important
}
html[data-dark] .sm-step,html[data-dark] .sf-q,html[data-dark] .sf-table,
html[data-dark] .post-card,html[data-dark] .faq,html[data-dark] .svc2-card,
html[data-dark] .step2,html[data-dark] .stats .stat,html[data-dark] .feat,
html[data-dark] .keyfacts,html[data-dark] .area-grid a,html[data-dark] .q-form,
html[data-dark] .pr-card{
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  background:linear-gradient(165deg,#43033a,#2b0926)
}

/* 2. The grain was a fixed, full-viewport layer repainting on scroll.
      Same texture, zero scroll cost: attach it to the ground instead. */
html[data-dark] body:after{display:none}
html[data-dark] body{
  background-color:var(--d-bg,#180417);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E")
}

/* 3. The aurora stays, but promoted to its own layer and told the
      browser exactly what changes, so it never triggers layout. */
html[data-dark] body:before{
  will-change:transform;contain:strict;
  animation-duration:40s
}

/* 4. Don't paint sections the visitor cannot see. The height hint
      keeps the scrollbar honest while they are skipped. */
.sec:not(.hero):not(#hero){
  content-visibility:auto;
  contain-intrinsic-size:auto 900px
}

/* 5. Hover-only effects must not create layers while idle */
.m-spot:after,.pr-card:after,.tw-vinora:after,.sm-step:after,
.sf-q:after,.post-card:after,.svc2-card:after,.step2:after,.feat:after{
  will-change:auto
}

/* 6. Grid safety: a flex rail inside 1fr can blow the column out.
      minmax(0,1fr) keeps it inside the container. */
@media(min-width:1000px){
  #services > .wrap,#prices > .wrap,
  #process > .wrap,#faq > .wrap{
    grid-template-columns:minmax(250px,27%) minmax(0,1fr)
  }
}

/* 7. Respect the OS setting properly — no animation at all, and no
      content-visibility games that can jump the scroll position. */
@media(prefers-reduced-motion:reduce){
  html[data-dark] body:before{animation:none}
  .sec:not(.hero):not(#hero){content-visibility:visible}
}

/* ============================================================
   PAINT COST
   63 elements were carrying 3-to-5 layer box-shadows with large
   blur radii. Blur is the most expensive thing a browser paints,
   and multiplying it by layers and by elements is what held the
   page at ~20fps while scrolling. Two layers reproduce the same
   lift at a fraction of the cost: one tight contact shadow and
   one soft ambient one.
   ============================================================ */
.sm-step,.sf-q,.sf-table,.post-card,.faq,.svc2-card,.step2,
.stats .stat,.feat,.keyfacts,.area-grid a,.q-form,.pr-card,
.pr-note,.blog-grid article,.pack{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 10px 24px -16px rgba(44,1,38,.34)!important
}
.sm-step:hover,.sf-q:hover,.post-card:hover,.svc2-card:hover,
.step2:hover,.feat:hover,.pr-card:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 18px 36px -18px rgba(44,1,38,.42)!important
}
.tw-vinora,.sf-inc,.quote-sec .q-form{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 18px 40px -22px rgba(44,1,38,.6)!important
}
.masonry figure,.g-rail figure,.g-stage figure,.post-card .thumb,
.svc2-card img,.blog-grid img,.insta a{
  box-shadow:0 12px 28px -18px rgba(44,1,38,.45)!important
}
.btn{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 8px 18px -10px rgba(107,7,92,.55)!important
}
html[data-dark] .sm-step,html[data-dark] .sf-q,html[data-dark] .sf-table,
html[data-dark] .post-card,html[data-dark] .faq,html[data-dark] .svc2-card,
html[data-dark] .step2,html[data-dark] .stats .stat,html[data-dark] .feat,
html[data-dark] .keyfacts,html[data-dark] .area-grid a,html[data-dark] .q-form,
html[data-dark] .pr-card{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 14px 30px -18px rgba(0,0,0,.72)!important
}

/* Falling petals: eighteen continuously animating elements over the
   hero image. Six reads the same and costs a third as much. */
#petals .petal:nth-child(n+7){display:none}
#petals{will-change:auto}

/* The hero's Ken Burns and the aurora are the only long-running
   animations left; keep them on their own layer so they composite
   rather than repaint. */
.hero .slide img,html[data-dark] body:before{will-change:transform}

/* content-visibility was re-laying out sections as they entered the
   viewport, which showed up as the "blink" while scrolling. The
   paint savings above make it unnecessary. */
.sec:not(.hero):not(#hero){content-visibility:visible;contain-intrinsic-size:auto}

@media(max-width:780px){
  /* phones repaint shadows most expensively of all */
  .sm-step,.sf-q,.post-card,.faq,.svc2-card,.step2,
  .stats .stat,.feat,.pr-card,.area-grid a{
    box-shadow:0 6px 16px -12px rgba(44,1,38,.3)!important
  }
  #petals{display:none}
}