/* index-premium.css — premium polish + minimal motion for the order page only.
 * Pure CSS, no layout changes, honours prefers-reduced-motion. Remove the <link> to revert. */
:root{--ix-ease:cubic-bezier(.22,.8,.24,1);--ix-brand:linear-gradient(135deg,#4F2EF2,#B91FD1 55%,#FF2D78)}

/* ── Entrance: gentle staggered rise (fill backwards → no leftover transform) ── */
@keyframes ix-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes ix-fade{from{opacity:0}to{opacity:1}}
@keyframes ix-pop{from{opacity:0;transform:translateY(-6px) scale(.985)}to{opacity:1;transform:none}}
@keyframes ix-sheen{0%{transform:translateX(-120%) skewX(-18deg)}60%,100%{transform:translateX(220%) skewX(-18deg)}}
@keyframes ix-line{0%{background-position:0% 50%}100%{background-position:200% 50%}}

.nav{animation:ix-fade .5s var(--ix-ease) backwards}
.ss-banner-wrap{animation:ix-rise .7s var(--ix-ease) .05s backwards}
.ss-intro{animation:ix-rise .7s var(--ix-ease) .18s backwards}
#order{animation:ix-rise .75s var(--ix-ease) .3s backwards}

/* ── Banner: soft lift + one-time light sweep ─────────────────────────────── */
.ss-banner{transition:transform .5s var(--ix-ease),box-shadow .5s var(--ix-ease)}
.ss-banner::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.38) 50%,transparent 65%);
  transform:translateX(-120%) skewX(-18deg);animation:ix-sheen 2.2s var(--ix-ease) 1s 1 both}
.ss-banner:hover{transform:translateY(-3px);box-shadow:0 30px 60px -28px rgba(110,30,180,.45)}

/* ── Intro typography ─────────────────────────────────────────────────────── */
.ss-intro h1{text-wrap:balance}
.ss-intro .ss-tag{letter-spacing:.01em}

/* ── Order card: hairline accent that slowly drifts ───────────────────────── */
#order{position:relative;transition:box-shadow .5s var(--ix-ease)}
#order::before{content:"";position:absolute;left:28px;right:28px;top:0;height:2px;border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,#4F2EF2,#B91FD1,#FF2D78,#B91FD1,#4F2EF2);background-size:200% 100%;
  animation:ix-line 9s linear infinite;opacity:.9;pointer-events:none}
#order:hover{box-shadow:0 1px 2px rgba(29,14,43,.05),0 34px 70px -34px rgba(110,30,180,.42)!important}
#pay-card{animation:ix-rise .5s var(--ix-ease) backwards}
#done-card>div{animation:ix-pop .55s var(--ix-ease) backwards}
#err1,#err2{animation:ix-pop .3s var(--ix-ease) backwards}

/* ── Inputs & dropdown buttons: calm focus glow ───────────────────────────── */
#order input,#order .svc-dd-btn{transition:border-color .2s ease,box-shadow .25s ease,background-color .2s ease,transform .2s var(--ix-ease)}
#order input:focus,#order .svc-dd-btn:focus-visible,#order .svc-dd-btn[aria-expanded="true"]{
  outline:none!important;border-color:rgba(185,31,209,.55)!important;box-shadow:0 0 0 4px rgba(185,31,209,.12)!important}
#order .svc-dd-btn:hover{transform:translateY(-1px)}
#order .svc-dd-caret{transition:transform .3s var(--ix-ease)}
#order .svc-dd-btn[aria-expanded="true"] .svc-dd-caret{transform:rotate(180deg)}

/* ── Dropdown panel + rows ────────────────────────────────────────────────── */
.svc-dd-menu{transform-origin:top center}
.svc-dd-menu:not([hidden]){animation:ix-pop .22s var(--ix-ease)}
.svc-dd-item{transition:background-color .18s ease,padding-left .22s var(--ix-ease)}
.svc-dd-item:hover{padding-left:19px}
.svc-dd-list{scrollbar-width:thin;scrollbar-color:rgba(150,60,190,.35) transparent;scroll-behavior:smooth}

/* ── Primary buttons: gentle sheen + press feedback ───────────────────────── */
#order .btn:not(.ghost),#pay-card .btn:not(.ghost),#done-card .btn{position:relative;overflow:hidden;isolation:isolate;
  transition:transform .2s var(--ix-ease),box-shadow .3s ease,filter .3s ease}
#order .btn:not(.ghost)::after,#pay-card .btn:not(.ghost)::after,#done-card .btn::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);
  transform:translateX(-130%) skewX(-18deg);transition:transform .8s var(--ix-ease)}
#order .btn:not(.ghost):hover,#pay-card .btn:not(.ghost):hover,#done-card .btn:hover{transform:translateY(-2px);filter:saturate(1.08)}
#order .btn:not(.ghost):hover::after,#pay-card .btn:not(.ghost):hover::after,#done-card .btn:hover::after{transform:translateX(130%) skewX(-18deg)}
#order .btn:active,#pay-card .btn:active,#done-card .btn:active{transform:translateY(0) scale(.985)}
.btn.ghost{transition:background-color .2s ease,border-color .2s ease,transform .2s var(--ix-ease)}
.btn.ghost:hover{transform:translateY(-1px)}

/* ── Nav links ────────────────────────────────────────────────────────────── */
.nav-links a{transition:background-color .2s ease,color .2s ease,transform .2s var(--ix-ease)}
.nav-links a:hover{transform:translateY(-1px)}

/* ── Step badge & amount ──────────────────────────────────────────────────── */
.badge{transition:background-color .3s ease,color .3s ease}
.amount{transition:opacity .25s ease}

/* ── Long-form SEO section: reveal as it scrolls into view (progressive) ──── */
@supports (animation-timeline:view()){
  @keyframes ix-reveal{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  main.container~section.container>h2,main.container~section.container>h3,main.container~section.container>p,main.container~section.container>div{
    animation:ix-reveal linear backwards;animation-timeline:view();animation-range:entry 0% entry 35%}
}

/* ══ Premium pass 2 — atmosphere, typography, refined controls ═════════════ */
@keyframes ix-dot{0%,100%{box-shadow:0 0 0 0 rgba(185,31,209,.45)}60%{box-shadow:0 0 0 7px rgba(185,31,209,0)}}
html{scroll-behavior:smooth}
::selection{background:rgba(185,31,209,.2);color:#1D0E2B}

/* Atmosphere: soft aurora washes behind the page (static, no repaint cost) */
html body{background-image:
  radial-gradient(760px 420px at 12% -4%,rgba(79,46,242,.13),transparent 70%),
  radial-gradient(680px 420px at 92% 2%,rgba(255,45,120,.12),transparent 70%),
  radial-gradient(900px 520px at 50% 38%,rgba(185,31,209,.06),transparent 72%)!important;
  background-repeat:no-repeat!important}

/* Banner: gradient hairline ring + deeper float */
.ss-banner{position:relative}
.ss-banner::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:2;opacity:.55;
  background:var(--ix-brand);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}

/* Intro: tagline becomes a glass pill with a live dot */
.ss-intro h1{letter-spacing:-.04em}
.ss-intro .ss-tag{display:inline-flex;align-items:center;gap:9px;padding:8px 16px 8px 14px;margin-top:4px;border-radius:999px;
  font-size:13.5px!important;font-weight:650!important;letter-spacing:.01em;color:#5B4766!important;
  background:rgba(255,255,255,.72);border:1px solid rgba(120,60,170,.16);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 10px 26px -16px rgba(110,30,180,.5)}
.ss-intro .ss-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ix-brand);animation:ix-dot 2.6s ease-out infinite}

/* Order card: glass surface, richer depth, calmer typography */
#order{border-radius:30px!important;padding:26px 26px 24px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(253,248,255,.82))!important;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 1px 2px rgba(29,14,43,.05),0 28px 64px -34px rgba(110,30,180,.38),inset 0 1px 0 rgba(255,255,255,.9)!important}
#order>.row strong{font-size:17px;letter-spacing:-.01em}
#order .badge{padding:6px 12px;border-radius:999px;font-weight:700;letter-spacing:.02em;
  background:linear-gradient(135deg,rgba(79,46,242,.1),rgba(255,45,120,.12))!important;color:#A3156B!important;border:1px solid rgba(185,31,209,.2)}
#order .divider{height:1px!important;background:linear-gradient(90deg,transparent,rgba(120,60,170,.22),transparent)!important;border:0!important;margin:16px 0!important}
#order .label{font-size:11.5px!important;font-weight:700!important;letter-spacing:.07em!important;text-transform:uppercase!important;color:#85708F!important;margin:18px 0 8px!important}
#order input,#order .svc-dd-btn{min-height:52px;border-radius:16px!important;background:rgba(255,255,255,.92)!important;
  border:1px solid rgba(120,60,170,.16)!important;box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(29,14,43,.04)}
#order input::placeholder{color:#A894B3}
#order .svc-dd-btn:hover{border-color:rgba(185,31,209,.35)!important}
.amount{font-size:26px!important;font-weight:800!important;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
#next-btn{min-height:56px;border-radius:18px!important;font-size:15.5px!important;letter-spacing:.01em;
  box-shadow:0 20px 36px -16px rgba(150,30,200,.7),inset 0 1px 0 rgba(255,255,255,.35)!important}

/* Dropdown panel: frosted glass */
.svc-dd-menu{background:rgba(255,255,255,.94)!important;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid rgba(120,60,170,.16)!important;border-radius:20px!important;overflow:hidden;
  box-shadow:0 34px 64px -26px rgba(60,20,110,.5)!important}
.svc-dd-item+.svc-dd-item{border-top:1px solid rgba(120,60,170,.08)}
.svc-dd-item:hover{background:linear-gradient(90deg,rgba(185,31,209,.07),rgba(255,45,120,.04))!important}

/* Long-form section: editorial typography */
main.container~section.container{max-width:720px!important}
main.container~section.container h2{position:relative;font-size:21px!important;font-weight:780!important;letter-spacing:-.025em!important;color:#1D0E2B!important;margin:44px 0 14px!important;padding-top:16px}
main.container~section.container h2::before{content:"";position:absolute;left:0;top:0;width:34px;height:3px;border-radius:3px;background:var(--ix-brand)}
main.container~section.container h3{font-size:16px!important;font-weight:720!important;letter-spacing:-.015em;color:#2A1A38!important;margin:28px 0 8px!important}
main.container~section.container p{font-size:15px!important;line-height:1.8!important;color:#5B4766!important}
main.container~section.container ul{list-style:none!important;padding:0!important;margin:0!important;display:grid;gap:10px}
main.container~section.container li{position:relative;padding-left:26px!important;font-size:14.5px;line-height:1.65;color:#5B4766}
main.container~section.container li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--ix-brand);box-shadow:0 0 0 4px rgba(185,31,209,.12)}
main.container~section.container a{color:#B31572;font-weight:650;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .35s var(--ix-ease)}
main.container~section.container a:hover{background-size:100% 1.5px}

@media (max-width:640px){#order{padding:20px 16px 18px!important;border-radius:26px!important}main.container~section.container h2{font-size:19px!important}}

/* ── Respect reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}