/* Wisfr micro-interactions — "intelligent, calm, alive".
   Every effect enhances a visible resting state: if this file or interactions.js
   fails to load, the page still reads correctly.
   Animated properties are limited to transform, opacity, filter and background-position.
   Colors are the Wisfr Design System tokens (neon-mint, luminous-cyan, mint-edge,
   hairline-strong, radius-*, shadow-*). */

/* ---------- 1. Tokens ---------- */
:root{
  --dur-instant:80ms;
  --dur-fast:160ms;
  --dur-base:240ms;
  --dur-slow:400ms;
  --dur-ambient:2400ms;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  --neon-mint:#4cf0b0;
  --luminous-cyan:#4af8f9;
  --on-accent:#000011;
  --mint-edge:rgba(16,185,129,.30);
  --mint-08:rgba(76,240,176,.08);
  --hairline-strong:rgba(255,255,255,.10);
  --glass-fill-strong:rgba(255,255,255,.05);
  --surface-800:#1e293b;
  --error:#ef4444;
  --error-text:#f87171;
  --radius-lg:8px;
  --radius-xl:12px;
  --radius-2xl:16px;
  --radius-full:9999px;
  --shadow-cta:0 6px 18px rgba(76,240,176,.12);
  --shadow-cta-hover:0 8px 25px rgba(76,240,176,.2);
  --shadow-glow:0 4px 20px rgba(76,240,176,.4);
  --shadow-card-hover:0 20px 40px rgba(0,0,0,.3);
  --ring-focus:0 0 0 3px rgba(16,185,129,.25);
}

/* Cross-document crossfade for the EN/TR switch (JS skips it for every other navigation). */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:var(--dur-base);animation-timing-function:var(--ease-in-out)}
.ix-leaving main,.ix-leaving footer{opacity:0;transition:opacity var(--dur-fast) var(--ease-in-out)}

/* Tailwind transition utilities, re-timed onto the motion tokens and narrowed to
   compositor-friendly + color properties (Tailwind's CDN styles load after this file,
   so these use a :root prefix to win). */
:root .transition,:root .transition-all,:root .transition-colors{
  transition-property:color,background-color,border-color,opacity,transform,filter;
  transition-duration:var(--dur-fast);transition-timing-function:var(--ease-out);
}
:root .duration-200,:root .duration-300{transition-duration:var(--dur-base)}

/* Invisible scrollbars (still scrollable by wheel, touch and keyboard); the
   2px .ix-progress bar shows the reading position instead. */
html{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar{display:none}

/* ---------- 2. Buttons ---------- */
.demo-cta.demo-cta{
  position:relative;
  background-image:linear-gradient(90deg,var(--neon-mint),var(--luminous-cyan),var(--neon-mint));
  background-size:200% 100%;
  background-position:0% 0;
  transition:
    transform var(--dur-base) var(--ease-out),
    translate var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    background-position var(--dur-slow) var(--ease-out);
}
/* The glow grows by fading in a shadow-cta-hover layer, not by animating box-shadow. */
.demo-cta::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:var(--shadow-cta-hover);opacity:0;
  transition:opacity var(--dur-base) var(--ease-out);
}
.demo-cta:hover,.demo-cta:focus-visible{transform:translateY(-1px);background-position:100% 0}
.demo-cta:hover::after,.demo-cta:focus-visible::after{opacity:1}
.demo-cta:active{transform:scale(.97);transition-duration:var(--dur-instant)}
.demo-cta:focus-visible{outline:none;box-shadow:var(--shadow-cta),var(--ring-focus)}

.ix-arrow{transition:transform var(--dur-base) var(--ease-out)}
a:hover>.ix-arrow,a:focus-visible>.ix-arrow,button:hover>.ix-arrow,button:focus-visible>.ix-arrow{transform:translateX(3px)}

.ix-btn-secondary.ix-btn-secondary{position:relative;transition:transform var(--dur-base) var(--ease-out),background-color var(--dur-base) var(--ease-out)}
.ix-btn-secondary::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid var(--mint-edge);
  pointer-events:none;opacity:0;transform:scale(.96);
  transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);
}
.ix-btn-secondary:hover::after,.ix-btn-secondary:focus-visible::after{opacity:1;transform:none}
.ix-btn-secondary:active{transform:scale(.97);transition-duration:var(--dur-instant)}
.ix-btn-secondary:focus-visible{outline:none;box-shadow:var(--ring-focus)}

/* Loading / success: the label crossfades to a 3-dot "agent thinking" pulse, then a drawn check. */
.ix-btn-label{transition:opacity var(--dur-fast) var(--ease-out)}
.ix-btn-status{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:5px;pointer-events:none;opacity:0;transition:opacity var(--dur-fast) var(--ease-out)}
.ix-dot{width:6px;height:6px;border-radius:var(--radius-full);background:currentColor;opacity:.35}
.ix-check{width:18px;height:18px;display:none}
.ix-check path{stroke-dasharray:1;stroke-dashoffset:1}
[data-ix-state=loading],[data-ix-state=success]{border-radius:var(--radius-full)!important;cursor:default}
[data-ix-state=loading] .ix-btn-label,[data-ix-state=success] .ix-btn-label{opacity:0}
[data-ix-state=loading] .ix-btn-status,[data-ix-state=success] .ix-btn-status{opacity:1}
[data-ix-state=loading] .ix-dot{animation:ix-think 1.2s var(--ease-in-out) infinite}
[data-ix-state=loading] .ix-dot:nth-child(2){animation-delay:160ms}
[data-ix-state=loading] .ix-dot:nth-child(3){animation-delay:320ms}
[data-ix-state=success] .ix-dot{display:none}
[data-ix-state=success] .ix-check{display:block}
[data-ix-state=success] .ix-check path{animation:ix-draw var(--dur-slow) var(--ease-out) forwards}
@keyframes ix-think{0%,100%{opacity:.35;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@keyframes ix-draw{to{stroke-dashoffset:0}}

/* ---------- 3. Glass cards ---------- */
.ix-card.ix-card{
  position:relative;isolation:isolate;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform var(--dur-slow) var(--ease-out);
}
.ix-card.ix-card.ix-tilting{transition-duration:var(--dur-fast)}
/* Cursor spotlight: mint at 8%, positioned by --mx/--my. */
.ix-card::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),var(--mint-08),transparent 70%);
  opacity:0;transition:opacity var(--dur-base) var(--ease-out);
}
/* Border light: a mint→cyan sweep crosses once, then the ring rests at mint-edge. */
.ix-card::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;padding:1px;
  background:
    linear-gradient(110deg,transparent 35%,var(--neon-mint) 45%,var(--luminous-cyan) 55%,transparent 65%) 100% 0/300% 100% no-repeat,
    linear-gradient(var(--mint-edge),var(--mint-edge));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  opacity:0;transition:opacity var(--dur-base) var(--ease-out);
}
.ix-card:hover::before,.ix-card:focus-within::before{opacity:1}
.ix-card:hover::after,.ix-card:focus-within::after{opacity:1;animation:ix-sweep 900ms var(--ease-in-out) 1 both}
@keyframes ix-sweep{from{background-position:100% 0,0 0}to{background-position:-50% 0,0 0}}
.ix-well{transform:translate(var(--px,0px),var(--py,0px));transition:transform var(--dur-slow) var(--ease-out)}
.ix-card.ix-tilting .ix-well{transition-duration:var(--dur-fast)}
.ix-well.ix-drawing path,.ix-well.ix-drawing circle,.ix-well.ix-drawing rect,.ix-well.ix-drawing line,.ix-well.ix-drawing polyline{
  stroke-dasharray:1;animation:ix-draw-in 900ms var(--ease-out) both;
}
@keyframes ix-draw-in{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* ---------- 4. Scroll & reveal ---------- */
.ix-shimmer{
  background-image:
    linear-gradient(110deg,transparent 40%,rgba(255,255,255,.75) 50%,transparent 60%),
    linear-gradient(90deg,var(--neon-mint),var(--luminous-cyan));
  background-size:250% 100%,100% 100%;
  background-repeat:no-repeat;
  background-position:150% 0,0 0;
}
.ix-shimmer.ix-in{animation:ix-shimmer 1200ms var(--ease-in-out) 1 both}
@keyframes ix-shimmer{from{background-position:150% 0,0 0}to{background-position:-60% 0,0 0}}

.ix-count{font-variant-numeric:tabular-nums}

.ix-bullet{transform-origin:center}
.ix-bullets.ix-in .ix-bullet{animation:ix-pop var(--dur-slow) var(--ease-spring) both;animation-delay:calc(var(--i,0) * 40ms)}
@keyframes ix-pop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}

/* Nav: sticky bar that gains blur and a hairline after 8px of scroll. */
header.ix-nav.ix-nav{position:sticky;top:0;z-index:40}
.ix-nav::before{
  content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);z-index:-1;
  background:rgba(10,15,36,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hairline-strong);opacity:0;transition:opacity var(--dur-base) var(--ease-out);
}
.ix-nav.ix-scrolled::before{opacity:1}
.ix-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:60;pointer-events:none;
  background:linear-gradient(90deg,var(--neon-mint),var(--luminous-cyan));
  transform-origin:0 50%;transform:scaleX(0);
}
.ix-navlinks{position:relative}
.ix-underline{
  position:absolute;left:0;bottom:-6px;width:100px;height:2px;border-radius:var(--radius-full);pointer-events:none;
  background:linear-gradient(90deg,var(--neon-mint),var(--luminous-cyan));
  transform-origin:0 50%;opacity:0;
  transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-fast) var(--ease-out);
}

/* ---------- 5. Forms ---------- */
.ix-field{position:relative;display:block}
.ix-field>label.ix-float{
  position:absolute;left:12px;top:13px;color:#94a3b8;font-size:16px;line-height:1.25;pointer-events:none;
  transform-origin:0 0;transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out);
}
.ix-field.ix-has-float>input,.ix-field.ix-has-float>textarea{padding-top:1.35rem;padding-bottom:.4rem}
.ix-field>input:focus~label.ix-float,.ix-field>textarea:focus~label.ix-float,
.ix-field>input:not(:placeholder-shown)~label.ix-float,.ix-field>textarea:not(:placeholder-shown)~label.ix-float{
  transform:translateY(-9px) scale(.75);
}
.ix-field>input:focus~label.ix-float,.ix-field>textarea:focus~label.ix-float{color:var(--neon-mint)}
/* Focus ring blooms from 0 to 3px (scale + opacity on a ring layer). */
.ix-field::after{
  content:"";position:absolute;inset:0;border-radius:6px;pointer-events:none;box-shadow:var(--ring-focus);
  opacity:0;transform:scale(.985);transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);
}
.ix-field:focus-within::after{opacity:1;transform:none}
.ix-field.ix-invalid::after{box-shadow:0 0 0 3px rgba(239,68,68,.25);opacity:1;transform:none}
.ix-field.ix-shake{animation:ix-shake 320ms var(--ease-in-out)}
@keyframes ix-shake{0%,100%{transform:translateX(0)}12.5%,62.5%{transform:translateX(-3px)}37.5%,87.5%{transform:translateX(3px)}}
.ix-help{
  position:absolute;left:2px;top:calc(100% + 2px);font-size:12px;line-height:1.2;color:var(--error-text);
  opacity:0;transform:translateY(-4px);transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);
}
.ix-field.ix-invalid .ix-help{opacity:1;transform:none}
.ix-valid-check{position:absolute;right:12px;top:15px;width:16px;height:16px;color:var(--neon-mint);pointer-events:none;opacity:0}
.ix-valid-check path{stroke-dasharray:1;stroke-dashoffset:1}
.ix-field.ix-valid .ix-valid-check{opacity:1}
.ix-field.ix-valid .ix-valid-check path{animation:ix-draw var(--dur-slow) var(--ease-out) forwards}

/* ---------- 6. Ambient ---------- */
.ix-ping{position:relative;animation:none!important}
.ix-ping::after{
  content:"";position:absolute;inset:0;border-radius:inherit;background:inherit;
  animation:ix-ping var(--dur-ambient) var(--ease-out) infinite;
}
@keyframes ix-ping{0%{transform:scale(1);opacity:.7}60%,100%{transform:scale(2.2);opacity:0}}
.contact-widget-btn.ix-nudge{animation:ix-nudge 900ms var(--ease-spring) 2}
@keyframes ix-nudge{0%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}55%{transform:translateY(0)}75%{transform:translateY(-2px)}}

/* ---------- 7. Feedback ---------- */
.ix-copy{
  position:relative;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin-left:6px;
  border-radius:var(--radius-lg);border:1px solid var(--hairline-strong);background:rgba(255,255,255,.03);color:#cbd5e1;
  vertical-align:middle;cursor:pointer;transition:transform var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out);
}
/* Design system CopyButton: mint-edge border on hover, spring icon swap, surface-800 tooltip. */
.ix-copy:hover,.ix-copy:focus-visible{border-color:var(--mint-edge);outline:none}
.ix-copy:focus-visible{box-shadow:var(--ring-focus)}
.ix-copy:active{transform:scale(.92);transition-duration:var(--dur-instant)}
.ix-copy svg{width:14px;height:14px;position:absolute;transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur-base) var(--ease-spring)}
.ix-copy .ix-copy-done{opacity:0;transform:scale(.5);color:var(--neon-mint)}
.ix-copy.ix-copied .ix-copy-idle{opacity:0;transform:scale(.5)}
.ix-copy.ix-copied .ix-copy-done{opacity:1;transform:none}
.ix-tip{
  position:absolute;bottom:calc(100% + 8px);left:50%;padding:4px 8px;border-radius:6px;white-space:nowrap;
  font-size:12px;font-weight:500;line-height:1;color:#fff;background:var(--surface-800);pointer-events:none;
  opacity:0;transform:translate(-50%,4px);transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur-base) var(--ease-out);
}
.ix-copy.ix-copied .ix-tip{opacity:1;transform:translate(-50%,0)}
pre.ix-has-copy{position:relative}
pre.ix-has-copy>.ix-copy{position:absolute;top:8px;right:8px}

.ix-billing{display:flex;justify-content:center;align-items:center;gap:12px;margin:0 0 32px;font-size:14px;color:#cbd5e1}
.ix-switch{
  position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:var(--radius-full);
  border:1px solid var(--hairline-strong);background:var(--glass-fill-strong);
}
.ix-switch button{position:relative;z-index:1;padding:10px 18px;border-radius:var(--radius-full);font-weight:600;line-height:1;color:#cbd5e1;background:none;border:0;cursor:pointer;transition:color var(--dur-base) var(--ease-out)}
.ix-switch button[aria-pressed=true]{color:var(--on-accent)}
.ix-switch button:focus-visible{outline:2px solid var(--neon-mint);outline-offset:2px}
.ix-knob{
  position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:var(--radius-full);
  background:linear-gradient(90deg,var(--neon-mint),var(--luminous-cyan));box-shadow:var(--shadow-cta);
  transition:transform var(--dur-slow) var(--ease-spring);
}
.ix-switch[data-period=yearly] .ix-knob{transform:translateX(100%)}
/* Rolling price: only digits that change roll up from below, staggered 40ms. */
.ix-price{display:inline-flex;overflow:hidden;height:1.15em;line-height:1.15;vertical-align:bottom;font-variant-numeric:tabular-nums}
.ix-digit{display:inline-block;transition:transform var(--dur-slow) var(--ease-out)}

/* ---------- Touch: no tilt, magnetic pull or cursor effects ---------- */
@media (pointer:coarse){
  .ix-card{transform:none}
  .ix-card::before{display:none}
  .ix-well{transform:none}
  .demo-cta{translate:none!important}
}

/* ---------- Reduced motion: final states, opacity-only fades ≤ --dur-fast ---------- */
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .demo-cta,.ix-btn-secondary,.ix-card,.ix-well,.ix-arrow,.ix-underline,.ix-field>label.ix-float,.ix-help,.ix-digit,.ix-knob,.ix-copy svg,.ix-tip{
    transition-property:opacity!important;transition-duration:var(--dur-fast)!important;
  }
  .demo-cta:hover,.demo-cta:focus-visible,.demo-cta:active,.ix-btn-secondary:active,.ix-copy:active{transform:none}
  .ix-card,.ix-well{transform:none!important}
  a:hover>.ix-arrow,a:focus-visible>.ix-arrow,button:hover>.ix-arrow,button:focus-visible>.ix-arrow{transform:none}
  .ix-card:hover::after,.ix-card:focus-within::after{animation:none;background:linear-gradient(var(--mint-edge),var(--mint-edge))}
  .ix-shimmer.ix-in,.ix-bullets.ix-in .ix-bullet,.ix-well.ix-drawing *,.ix-field.ix-shake,.contact-widget-btn.ix-nudge{animation:none!important}
  .ix-ping::after{animation:none;display:none}
  [data-ix-state=loading] .ix-dot{animation:none;opacity:.8}
  [data-ix-state=success] .ix-check path,.ix-field.ix-valid .ix-valid-check path{animation:none;stroke-dashoffset:0}
  .ix-help{transform:none}
  .ix-field::after{transform:none}
}