/*! OPTB Nitro Motion v1.2 — improved panel + presets + bug fixes */
.optb-app{ --ease: cubic-bezier(.22,.61,.36,1) }

/* === Scroll reveal presets === */
.optb-app .reveal-x{ opacity:0; transform: translateX(-18px) }
.optb-app .reveal-y{ opacity:0; transform: translateY(18px) }
.optb-app .reveal-in{ opacity:1; transform:none; transition: opacity .7s var(--ease), transform .7s var(--ease) }

/* Breathing hover */
.optb-app .card.breathe:hover,
.optb-app .feature.breathe:hover,
.optb-app .price.breathe:hover,
.optb-app .review.breathe:hover{
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 28px 80px rgba(10,15,30,.16);
}

/* Section transitions */
.optb-app [data-sep="wave"]{ position:relative; overflow:visible }
.optb-app [data-sep="wave"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:46px;
  background: radial-gradient(120% 60px at 50% 0, rgba(0,0,0,.09), transparent 70%);
  opacity:.35; pointer-events:none;
}
.optb-app [data-sep="diag"]{ position:relative }
.optb-app [data-sep="diag"]::before{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:60px;
  transform: skewY(-3deg); transform-origin: 0 100%;
  background: rgba(0,0,0,.05); opacity:.25; pointer-events:none;
}

/* Sticky nav shrink */
.optb-app .optb-nav.sticky{ position:sticky; top:0; z-index:30; backdrop-filter: saturate(140%) blur(8px) }
.optb-app .optb-nav.sticky .inner{ transition: padding .25s var(--ease) }
.optb-app .optb-nav.sticky.shrink .inner{ padding-block: 6px !important }

/* Underline animation */
.optb-app a.underline-anim{ position:relative; text-decoration:none }
.optb-app a.underline-anim::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:100%;
  background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s var(--ease)
}
.optb-app a.underline-anim:hover::after{ transform: scaleX(1) }

/* Parallax elements */
.optb-app [data-parallax-el]{ will-change: transform }

/* Canvas bg holder */
.optb-app .nitro-bg{ position:absolute; inset:0; z-index:-1; pointer-events:none }

/* Backgrounds: ensure gradient/noise/blobs supported even without Nitro */
.optb-app [data-bg="gradient"]::before{
  content:""; position:absolute; inset:-20%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(700px 420px at 12% 26%, color-mix(in oklab, #3a8cff, #fff 14%), transparent 60%),
    radial-gradient(800px 460px at 88% 22%, color-mix(in oklab, #b3d3ff, #fff 12%), transparent 60%);
  filter: blur(22px); opacity:.85;
}
.optb-app [data-bg="noise"]::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.02), rgba(0,0,0,.02) 1px, transparent 1px, transparent 2px);
  opacity:.6;
}

/* ===== Controls Panel ===== */
#nitro-controls{ position: fixed; right: 16px; bottom: 16px; z-index: 99999; font: 14px/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif }
#nitro-controls .fab{ display:inline-flex; align-items:center; gap:8px; border-radius:999px; border:1px solid rgba(32,45,100,.22); padding:12px 14px; background:#0b5cf5; color:#fff; font-weight:900; cursor:pointer; box-shadow:0 16px 38px rgba(11,92,245,.35) }
#nitro-controls .panel{ position: absolute; right:0; bottom:62px; width:360px; max-height:70vh; overflow:auto; background:#fff; border:1px solid rgba(32,45,100,.22); border-radius:16px; padding:14px; box-shadow:0 22px 60px rgba(10,15,30,.16); display:none }
#nitro-controls.open .panel{ display:block }
#nitro-controls h4{ margin:6px 0 8px; font-size:12px; letter-spacing:.06em; text-transform:uppercase; opacity:.7 }
#nitro-controls .row{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 0; border-bottom:1px dashed rgba(0,0,0,.08) }
#nitro-controls .row:last-child{ border-bottom:none }
#nitro-controls .row label{ font-weight:800 }
#nitro-controls select, #nitro-controls input[type="number"], #nitro-controls input[type="text"]{
  width: 180px; padding:8px 10px; border-radius:12px; border:1px solid rgba(32,45,100,.22); background:#fff
}
#nitro-controls .pick{ margin-top:8px; display:flex; gap:8px }
#nitro-controls .chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:999px; border:1px solid rgba(32,45,100,.22); background:#f5f7ff; font-weight:800 }
#nitro-controls .chips{ display:flex; flex-wrap:wrap; gap:8px }
#nitro-controls .chips .chip{ cursor:pointer }
#nitro-controls .chips .chip.active{ background:#0b5cf5; color:#fff; border-color: transparent; box-shadow:0 10px 26px rgba(11,92,245,.35) }
#nitro-controls .hint{ font-size:12px; opacity:.7; margin-top:8px }

/* Selected outline + label */
.nitro-selected{ outline: 2px dashed #0b5cf5; outline-offset: 2px; position: relative }
.nitro-selected::after{ content: attr(data-nitro-name); position:absolute; top:-10px; right:-10px; background:#0b5cf5; color:#fff; font-size:10px; padding:2px 6px; border-radius:999px }

@media (prefers-color-scheme: dark){
  #nitro-controls .panel{ background:#0b1022; color:#e7eaf6; border-color: rgba(230,233,247,.22) }
  #nitro-controls .fab{ background:#3168ff }
  select, input{ background:#0b1022; color:#e7eaf6 }
  #nitro-controls .chip{ background:#0f1430; border-color: rgba(230,233,247,.22) }
}