/* Orchid — styles for the extra motion layer (fx.js) */

/* ---------- film grain on dark surfaces ---------- */
.hero__stage::after, .dark::after, .footer::after, .preloader::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.07; mix-blend-mode: overlay;
}
.footer { position: relative; overflow: hidden; }
.footer > .wrap, .dark > .wrap { position: relative; z-index: 2; }
.hero__layer, .hero__hint { z-index: 2; }
.hero__flash { z-index: 3; }

.lite .hero__stage::after, .lite .dark::after, .lite .footer::after, .lite .preloader::after { display: none; }

/* ---------- statement: scroll-lit words ---------- */
.sw { opacity: 0.13; transition: opacity 0.5s ease, filter 0.5s ease; filter: blur(1.5px); }
.sw.is-on { opacity: 1; filter: none; }
.accent .sw.is-on { text-shadow: 0 0 34px rgba(51, 80, 255, 0.35); }

/* ---------- gradient ink on the accent word + animated headline sheen ---------- */
.accent { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.accent .sw, .accent .w { color: var(--blue); }

/* ---------- ticker ---------- */
.ticker { padding-block: clamp(30px, 6vw, 80px); overflow: hidden; display: grid; gap: clamp(8px, 1.5vw, 20px); background: var(--paper); }
.ticker__row { direction: ltr; overflow: hidden; white-space: nowrap; }
.ticker__track { display: flex; width: max-content; will-change: transform; transform-origin: 50% 50%; }
.ticker__set { display: flex; align-items: center; flex: none; }
.ticker__set span {
  font-weight: 200; font-size: clamp(2.6rem, 8.5vw, 7.5rem); line-height: 1.25; padding-inline: 0.28em;
  color: transparent; -webkit-text-stroke: 1px rgba(11, 16, 61, 0.46);
  transition: color 0.4s, -webkit-text-stroke-color 0.4s;
}
.ticker__set i { width: 0.5rem; height: 0.5rem; flex: none; border-radius: 50%; background: var(--blue); opacity: 0.6; }
.ticker__row--soft .ticker__set span {
  direction: rtl; font-size: clamp(1.3rem, 3.2vw, 2.6rem); font-weight: 300;
  color: rgba(11, 16, 61, 0.42); -webkit-text-stroke: 0;
}
.ticker__row--soft .ticker__set i { width: 0.34rem; height: 0.34rem; background: var(--violet); }

/* ---------- spotlight on cards ---------- */
.card, .service, .contact__item, .step, .chip { position: relative; }
.card::after, .service::after, .contact__item::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(51, 80, 255, 0.13), rgba(51, 80, 255, 0) 65%);
  opacity: 0; transition: opacity 0.4s;
}
.service::after { background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(150, 165, 255, 0.22), rgba(150, 165, 255, 0) 65%); }
.card:hover::after, .service:hover::after, .contact__item:hover::after { opacity: 1; }
/* glowing edge that tracks the pointer */
.card::before, .service::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(51, 80, 255, 0.75), rgba(108, 61, 255, 0.25) 45%, rgba(51, 80, 255, 0) 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.4s;
}
.service::before { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(190, 205, 255, 0.95), rgba(108, 61, 255, 0.3) 45%, rgba(51, 80, 255, 0) 70%); }
.card:hover::before, .service:hover::before { opacity: 1; }
.card > *, .service > * { position: relative; z-index: 1; }
.card.is-wait { opacity: 0; }

/* icons react on hover */
.card__icon, .service__icon { transition: transform 0.6s var(--ease), box-shadow 0.4s; }
.card:hover .card__icon { transform: translateY(-3px) rotate(-6deg) scale(1.06); }
.service:hover .service__icon { transform: translateY(-3px) rotate(-8deg) scale(1.08); box-shadow: 0 18px 34px -12px rgba(110, 120, 255, 1); }

/* ---------- buttons: sheen sweep ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.38) 50%, rgba(255, 255, 255, 0) 70%);
  transform: translateX(-130%); transition: transform 0.9s var(--ease);
}
.btn:hover::after { transform: translateX(130%); }
.btn--ghost::after { background: linear-gradient(110deg, rgba(127, 147, 255, 0) 30%, rgba(127, 147, 255, 0.28) 50%, rgba(127, 147, 255, 0) 70%); }

/* ---------- showcase: lean toward pointer + glare ---------- */
.lean { transition: transform 0.6s var(--ease); transform-style: preserve-3d; will-change: transform; }
.lean .shot--web::after, .lean.phones .shot--phone::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(60% 60% at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 70%);
  opacity: 0; transition: opacity 0.5s;
}
.shot--web, .shot--phone { position: relative; }
.stack .shot--float { position: absolute; }
.case__visual:hover .lean .shot--web::after, .case__visual:hover .lean.phones .shot--phone::after { opacity: 1; }
/* soft coloured halo behind each visual */
.case__visual { position: relative; }
.case__visual::before {
  content: ''; position: absolute; inset: 8% 6%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(90, 110, 255, 0.34), rgba(108, 61, 255, 0.12) 55%, rgba(108, 61, 255, 0));
  filter: blur(34px); opacity: var(--fade, 1);
}

/* ---------- sector cloud: slow orbits ---------- */
.sectors__cloud::before { animation: orbit 70s linear infinite; }
.sectors__cloud::after {
  content: ''; position: absolute; inset: 50% auto auto 50%; width: min(104%, 700px); aspect-ratio: 1;
  border-radius: 50%; border: 1px dashed rgba(108, 61, 255, 0.14);
  animation: orbit 110s linear infinite reverse; pointer-events: none;
}
@keyframes orbit { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } }
.bubble.is-on::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(51, 80, 255, 0.35);
  opacity: 0; animation: ping 3.6s ease-out var(--fo, 0s) infinite;
}
@keyframes ping { 0% { transform: scale(0.92); opacity: 0.7; } 70%, 100% { transform: scale(1.22); opacity: 0; } }

/* ---------- dark band grows into the page ---------- */
.fx .services { clip-path: inset(0 var(--inset, 0%) 0 var(--inset, 0%) round var(--round, 0px) var(--round, 0px) 0 0); }
.net { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.75; pointer-events: none; }

/* ---------- stats: gradient digits ---------- */
.stat strong {
  background: linear-gradient(180deg, #fff 20%, #9fb0ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat strong::after { -webkit-text-fill-color: var(--blue-soft); }

/* ---------- process: line draws across the steps ---------- */
.process__grid { position: relative; }
.process__grid::before {
  content: ''; position: absolute; inset: -1px 0 auto 0; height: 2px; background: var(--grad);
  transform: scaleX(var(--pp, 0)); transform-origin: right center;
  box-shadow: 0 0 18px rgba(51, 80, 255, 0.6);
}
.fx .step b { color: rgba(11, 16, 61, 0.16); transition: color 0.7s var(--ease), transform 0.7s var(--ease); }
.fx .step.is-on b { color: var(--blue); transform: translateY(-4px); }
.fx .step h3, .fx .step > p { transition: opacity 0.7s; opacity: 0.45; }
.fx .step.is-on h3, .fx .step.is-on > p { opacity: 1; }

/* ---------- footer wordmark ---------- */
.footer__mark {
  margin-top: clamp(30px, 6vw, 70px); text-align: center; direction: ltr; user-select: none;
  font-weight: 200; font-size: clamp(4.2rem, 21vw, 19rem); line-height: 0.95; letter-spacing: 0.02em;
  color: transparent; -webkit-text-stroke: 1px rgba(160, 175, 255, 0.44);
  background: linear-gradient(100deg, rgba(127, 147, 255, 0) 35%, rgba(160, 175, 255, 0.55) 50%, rgba(127, 147, 255, 0) 65%) 0 0 / 250% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text;
  animation: sheen 7s linear infinite;
}
.footer__mark .wl { display: block; }
@keyframes sheen { from { background-position: 140% 0; } to { background-position: -140% 0; } }
.footer__bottom { margin-top: clamp(14px, 2vw, 26px); padding-inline-end: 68px; } /* keeps clear of the floating buttons */

/* ---------- floating actions ---------- */
.fab {
  position: fixed; inset: auto auto 22px 22px; z-index: 55; display: grid; gap: 12px; justify-items: center;
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity 0.5s, transform 0.6s var(--ease);
}
.fab.is-on { opacity: 1; transform: none; pointer-events: auto; }
.fab__top, .fab__wa {
  width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center;
  transition: transform 0.4s var(--ease), background-color 0.3s, color 0.3s, box-shadow 0.3s;
}
.fab__top { color: var(--ink); background: rgba(255, 255, 255, 0.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 30px -14px rgba(20, 30, 130, 0.6); }
.fab__top svg { width: 48px; height: 48px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fab__ring-bg { stroke: rgba(11, 16, 61, 0.1); stroke-width: 2; }
.fab__ring { stroke: var(--blue); stroke-width: 2; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 0.15s linear; }
.fab.is-dark .fab__top { color: #fff; background: rgba(120, 140, 255, 0.16); }
.fab.is-dark .fab__ring-bg { stroke: rgba(190, 200, 255, 0.2); }
.fab.is-dark .fab__ring { stroke: #9fb0ff; }
.fab__wa { position: relative; color: #fff; background: #25d366; box-shadow: 0 14px 30px -12px rgba(37, 211, 102, 0.9); }
.fab__wa[hidden] { display: none; }
.fab__wa svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.fab__wa-fill { fill: currentColor; stroke: none; }
.fab__wa::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366;
  animation: ping 2.8s ease-out infinite;
}
@media (max-width: 600px) { .fab { inset: auto auto 14px 14px; } .fab__top, .fab__wa { width: 46px; height: 46px; } .fab__top svg { width: 44px; height: 44px; } }

/* ---------- header: link underline dot + hero title glow ---------- */
.hero__t1 h1 { text-shadow: 0 0 60px rgba(120, 140, 255, 0.45); }
.hero__t3 h2 { text-shadow: 0 0 40px rgba(120, 140, 255, 0.4); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .sw { opacity: 1; filter: none; }
  .fx .services { clip-path: none; }
  .fx .step b { color: var(--blue); }
  .fx .step h3, .fx .step > p { opacity: 1; }
  .card.is-wait { opacity: 1; }
}