/* ==========================================================================
   SERVICES PAGE — "НИТКА" (concept C, chosen 2026-08-10)
   Six services told as six scenes on one continuous thread. Each scene opens
   with the situation, not the service name: you recognise yourself first and
   read the label second. The thread lights as you scroll and closes into a
   ring around the final CTA.
   Dials: DESIGN_VARIANCE 8 · MOTION_INTENSITY 9 · VISUAL_DENSITY 3
   ========================================================================== */

.svc-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   1. HERO
   -------------------------------------------------------------------------- */
.svc-hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(140px, 20vh, 220px) clamp(70px, 12vh, 140px);
  overflow: hidden;
}

.svc-haze {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 45% at 22% 30%, rgba(250, 250, 250, 0.077), transparent 62%),
    radial-gradient(ellipse 45% 40% at 78% 72%, rgba(250, 250, 250, 0.084), transparent 60%);
  animation: svc-haze 22s var(--ease-smooth) infinite alternate;
}

@keyframes svc-haze {
  from { transform: translate3d(-2%, -1%, 0) scale(1); opacity: 0.85; }
  to   { transform: translate3d(2%, 2%, 0) scale(1.1); opacity: 1; }
}

.svc-hero__inner { position: relative; z-index: 1; text-align: center; }
.svc-hero__inner .svc-eyebrow { margin-bottom: var(--space-md); }

.svc-hero__heading {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 8vw, 150px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.svc-line { display: block; overflow: hidden; }

.svc-line > span {
  display: block;
  transform: translate3d(0, 105%, 0);
  transition: transform 1.25s var(--ease-out-expo);
}

html.is-ready .svc-line > span { transform: translate3d(0, 0, 0); }

/* Scroll cue — the first millimetre of the thread. */
.svc-hero__cue {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1px;
  height: clamp(50px, 8vh, 90px);
  background: linear-gradient(to bottom, transparent, var(--signal));
  transform: translateX(-50%);
  transform-origin: bottom;
  animation: svc-cue 2.4s var(--ease-smooth) infinite;
}

@keyframes svc-cue {
  0%, 100% { transform: translateX(-50%) scaleY(0.4); opacity: 0.5; }
  50%      { transform: translateX(-50%) scaleY(1);   opacity: 1; }
}

/* --------------------------------------------------------------------------
   2. THE THREAD
   -------------------------------------------------------------------------- */
.svc-thread { position: relative; }

.svc-rail {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 2;
}

.svc-rail__track,
.svc-rail__fill {
  position: absolute;
  inset: 0;
  width: 100%;
}

.svc-rail__track { background: var(--color-border); }

.svc-rail__fill {
  background: linear-gradient(to bottom, var(--signal), var(--signal));
  transform: scaleY(0);
  transform-origin: top center;
  will-change: transform;
}

/* The spark that rides the leading edge — the studio's signature device. */
.svc-rail__spark {
  position: absolute;
  top: 0;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #FAFAFA;
  box-shadow: 0 0 10px 2px var(--signal),
              0 0 26px 6px var(--color-glow);
  opacity: 0;
  will-change: transform;
}

.svc-scene {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  padding-block: clamp(70px, 12vh, 140px);
  overflow: hidden;
}

/* Per-scene ambient bloom, alternating side so the page never falls into a
   repeating rhythm. Same accent token throughout — no extra colours. */
.svc-scene__glow {
  position: absolute;
  top: 50%;
  left: 18%;
  width: min(70vw, 900px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(250, 250, 250, 0.056) 0%, transparent 66%);
  transform: translate3d(-50%, -50%, 0) scale(1);
  transition: opacity 1.4s var(--ease-smooth), transform 1.8s var(--ease-out-expo);
}

.svc-scene--right .svc-scene__glow { left: 82%; }

html.svc-ready .svc-scene__glow {
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(0.82);
}

html.svc-ready .svc-scene.is-lit .svc-scene__glow {
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) scale(1);
}

/* Node on the rail, ignites when its scene is in view. */
.svc-node {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg);
  transform: translate3d(-50%, -50%, 0) scale(1);
  transition: transform 0.8s var(--ease-spring), border-color 0.6s var(--ease-smooth),
              background 0.6s var(--ease-smooth), box-shadow 0.6s var(--ease-smooth);
  z-index: 3;
}

.svc-scene.is-lit .svc-node {
  transform: translate3d(-50%, -50%, 0) scale(1.55);
  border-color: transparent;
  background: var(--signal);
  box-shadow: 0 0 24px 4px var(--color-glow);
}

/* Width and type scale are tuned together so the longest service name
   ("Корпоративний сайт") still sits on one line at every viewport — the canon
   forbids both wrapping headings and truncation, so the size gives way. */
.svc-scene__inner {
  position: relative;
  z-index: 1;
  max-width: 56%;
}

.svc-scene--right .svc-scene__inner { margin-left: auto; text-align: right; }

/* Content rises as the scene lights — one strong cinematic beat per section.
   Gated on html.svc-ready: without the module the text just sits there,
   readable, instead of waiting forever at opacity 0. */
html.svc-ready .svc-scene__num,
html.svc-ready .svc-scene__when,
html.svc-ready .svc-scene__title,
html.svc-ready .svc-scene__foot {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity 0.9s var(--ease-smooth), transform 1.1s var(--ease-out-expo);
}

html.svc-ready .svc-scene.is-lit .svc-scene__num,
html.svc-ready .svc-scene.is-lit .svc-scene__when,
html.svc-ready .svc-scene.is-lit .svc-scene__title,
html.svc-ready .svc-scene.is-lit .svc-scene__foot { opacity: 1; transform: none; }

html.svc-ready .svc-scene.is-lit .svc-scene__when  { transition-delay: 0.08s; }
html.svc-ready .svc-scene.is-lit .svc-scene__title { transition-delay: 0.16s; }
html.svc-ready .svc-scene.is-lit .svc-scene__foot  { transition-delay: 0.26s; }

.svc-scene__num {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-widest);
  color: var(--signal);
}

/* The situation leads; the service name follows. */
.svc-scene__when {
  margin-top: var(--space-sm);
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 38px);
  line-height: 1.3;
  color: var(--color-text-secondary);
}

.svc-scene__title {
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 4.4vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.svc-scene__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.svc-scene--right .svc-scene__foot { justify-content: flex-end; }

.svc-scene__term {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.svc-scene__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--color-border-strong);
  font-family: var(--font-heading);
  font-size: var(--text-small);
  transition: border-color var(--dur-fast) var(--ease-smooth);
}

.svc-scene__link i {
  font-style: normal;
  transition: transform var(--dur-fast) var(--ease-out-quart);
}

.svc-scene__link:hover { border-color: var(--signal); }
.svc-scene__link:hover i { transform: translate3d(5px, 0, 0); }

/* --------------------------------------------------------------------------
   3. PROCESS STRIP
   -------------------------------------------------------------------------- */
.svc-process {
  padding-block: clamp(90px, 14vh, 170px);
  border-top: 1px solid var(--color-border);
}

.svc-process__heading {
  margin-top: var(--space-sm);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 58px);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.svc-process__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.svc-process__list li {
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
}

.svc-process__list span {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-wide);
  color: var(--signal);
}

.svc-process__list h3 {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: var(--text-subhead);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.svc-process__list p {
  margin-top: 8px;
  font-size: var(--text-small);
  color: var(--color-text-muted);
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   4. CTA — the thread closes into a ring
   -------------------------------------------------------------------------- */
.svc-cta {
  position: relative;
  padding-block: clamp(120px, 20vh, 240px);
  overflow: hidden;
  text-align: center;
}

.svc-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(74vw, 660px);
  aspect-ratio: 1;
  border: 1px solid var(--color-border-strong);
  border-top-color: var(--signal);
  border-radius: 50%;
  transform: translate3d(-50%, -50%, 0);
  animation: svc-spin 48s linear infinite;
  pointer-events: none;
}

@keyframes svc-spin {
  from { transform: translate3d(-50%, -50%, 0) rotate(0deg); }
  to   { transform: translate3d(-50%, -50%, 0) rotate(360deg); }
}

.svc-cta__inner { position: relative; z-index: 1; }

.svc-cta__heading {
  margin-top: var(--space-sm);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 5.2vw, 88px);
  line-height: 1.04;
  letter-spacing: -0.038em;
}

.svc-cta__sub {
  margin: var(--space-sm) auto 0;
  max-width: 52ch;
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

.svc-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* Response promise — the last thing read before the click. The dot is a live
   signal, not decoration: it says a person is actually on the other end. */
.svc-cta__reply {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.svc-cta__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 0 var(--color-glow);
  animation: svc-alive 2.8s var(--ease-smooth) infinite;
}

@keyframes svc-alive {
  0%   { box-shadow: 0 0 0 0 var(--color-glow); opacity: 1; }
  70%  { box-shadow: 0 0 0 9px rgba(250, 250, 250, 0); opacity: 0.75; }
  100% { box-shadow: 0 0 0 0 rgba(250, 250, 250, 0); opacity: 1; }
}

/* --------------------------------------------------------------------------
   RESPONSIVE — the rail moves to the left edge, scenes go full width
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .svc-rail { left: var(--gutter); }
  .svc-node { left: var(--gutter); }
  .svc-scene { min-height: auto; padding-block: clamp(56px, 10vh, 90px); }
  .svc-scene__inner {
    max-width: none;
    padding-left: calc(var(--gutter) + 22px);
  }
  .svc-scene--right .svc-scene__inner { margin-left: 0; text-align: left; }
  .svc-scene--right .svc-scene__foot { justify-content: flex-start; }
  .svc-scene__glow,
  .svc-scene--right .svc-scene__glow { left: 40%; }
  .svc-hero { min-height: auto; }
  .svc-hero__cue { display: none; }
}

/* Below 600px the nowrap single-line fit gets too tight against the
   --gutter:18px override in main.css — let it wrap to 2 lines instead
   of clipping. */
@media (max-width: 600px) {
  .svc-hero__heading {
    white-space: normal;
    font-size: clamp(34px, 11vw, 56px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .svc-haze,
  .svc-hero__cue,
  .svc-cta__dot,
  .svc-ring { animation: none; }
  .svc-line > span { transform: none; }
  /* Never leave content invisible when the reveal is switched off. These have
     to out-specify the html.svc-ready rules above, hence the same prefix. */
  html.svc-ready .svc-scene__num,
  html.svc-ready .svc-scene__when,
  html.svc-ready .svc-scene__title,
  html.svc-ready .svc-scene__foot { opacity: 1; transform: none; transition: none; }
  html.svc-ready .svc-scene__glow { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); transition: none; }
  .svc-rail__fill { transform: scaleY(1); }
  .svc-rail__spark { display: none; }
}