/*
 * 4e6ka.ru — home page motion layer.
 * Layout, colors and components are stock Silicon / Bootstrap 5;
 * this file only adds what Bootstrap has no utility for.
 * JS writes CSS variables (--flip, --py, --mx, --sk, --bx…), CSS does the drawing.
 */

:root {
  --reveal-dist: 28px;
  --reveal-ease: cubic-bezier(.22, .61, .36, 1);
  --spring: cubic-bezier(.3, 1.6, .5, 1);       /* overshoot, "bouncy" */
  --hard-shadow-color: #131022;
}
.dark-mode { --hard-shadow-color: #6366f1; }

/* ---------- Small helpers ---------- */
.shadow-hard { box-shadow: 8px 8px 0 var(--hard-shadow-color) !important; }
.caption-mono {
  font-family: var(--bs-font-monospace);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hand { font-family: "Caveat", cursive; font-weight: 700; line-height: 1; }

/* ---------- Scroll progress bar ---------- */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1100;
  height: 3px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6, #d946ef);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

/* ---------- Reveal on scroll (.js-anim is set by home.js, so no JS = no hidden content) ---------- */
.js-anim [data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--reveal-dist), 0);
  transition: opacity .7s var(--reveal-ease), transform .7s var(--reveal-ease);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.js-anim [data-reveal="left"]  { transform: translate3d(calc(var(--reveal-dist) * -1), 0, 0); }
.js-anim [data-reveal="right"] { transform: translate3d(var(--reveal-dist), 0, 0); }
.js-anim [data-reveal="zoom"]  { transform: scale(.94); }
.js-anim [data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- Parallax: --py is written by home.js ---------- */
[data-parallax] { translate: 0 var(--py, 0); will-change: translate; }

/* ---------- Hero ---------- */
.hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(600px circle at var(--x, 75%) var(--y, 30%), rgba(99, 102, 241, .3), transparent 60%);
}
.ghost-word {
  position: absolute;
  top: 2rem;
  left: -1.5rem;
  font-size: clamp(9rem, 26vw, 24rem);
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .09);
  pointer-events: none;
  user-select: none;
}
.text-rotator { display: inline-block; white-space: nowrap; }

/* Flip card: --flip (0…180) follows the scroll of the first screen */
.flip { position: relative; max-width: 26rem; perspective: 1400px; }
.flip-inner {
  display: grid;
  transform: rotateY(calc(var(--flip, 0) * 1deg));
  transform-style: preserve-3d;
  transition: transform .12s linear;
}
.flip-face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip-back { transform: rotateY(180deg); }
.flip-back mark { background: rgba(34, 197, 94, .25); color: inherit; }
.flip-caption-after,
.flip.is-done .flip-caption-before { display: none; }
.flip.is-done .flip-caption-after { display: inline; color: #22c55e; }

.photo-sticker {
  position: absolute;
  left: -2.5rem;
  bottom: -1.5rem;
  z-index: 2;
  width: 7.5rem;
  padding: .4rem .4rem .5rem;
  background: #fff;
  border-radius: .5rem;
  box-shadow: 6px 6px 0 var(--hard-shadow-color);
  text-align: center;
}
.photo-sticker img { display: block; width: 100%; height: auto; border-radius: .35rem; }
.photo-sticker .hand { display: block; margin-top: .3rem; color: #131022; font-size: 1.05rem; }
.photo-sticker::before,                                      /* tape */
.proof::before {
  content: "";
  position: absolute;
  top: -.6rem;
  left: 50%;
  z-index: 1;
  width: 4.5rem;
  height: 1.3rem;
  background: rgba(253, 224, 71, .8);
  transform: translateX(-50%);
}
@media (max-width: 575.98px) {
  .photo-sticker { left: -.25rem; bottom: -6.75rem; width: 5.5rem; }
}

/* ---------- Velocity marquee ---------- */
.marq-track {
  display: flex;
  width: max-content;
  transform: translateX(var(--mx, 0));
  will-change: transform;
}
.marq-track + .marq-track { margin-top: .5rem; }
.marq-group { display: flex; align-items: center; }
/* Solid fill only: outlined (text-stroke) glyphs on a moving layer sometimes don't render */
.marq-group span {
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: #fff;
  white-space: nowrap;
  cursor: text;
}
.marq-group span:nth-child(even) { color: #131022; }
.marq-group span::after {                 /* separator; pseudo-content is not copied */
  content: "✦";
  display: inline-block;
  margin-inline: .4em;
  font-size: .4em;
  vertical-align: .55em;
  color: #fde047;
}
.marq-track--sm .marq-group span { font-size: clamp(1.5rem, 3.2vw, 2.75rem); }
.marq ::selection { background: #fde047; color: #131022; }

/* ---------- "Taking projects" status dot ---------- */
.pulse-dot {
  display: inline-block;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: currentColor;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); }
  70%  { box-shadow: 0 0 0 .6rem rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* ---------- Services: clickable tabs ---------- */
.service-tab .bx-chevron-right { transition: transform .25s, color .25s; }
.service-tab.card-hover.shadow-sm.active { box-shadow: 0 0 0 2px #6366f1, 0 .75rem 1.5rem -.75rem rgba(99, 102, 241, .6) !important; }
.service-tab.active .bx-chevron-right { color: #6366f1; transform: translateX(4px); }
.tab-pane.active .stagger > * { animation: fade-up .5s var(--reveal-ease) both; }
.tab-pane.active .stagger > :nth-child(2) { animation-delay: .06s; }
.tab-pane.active .stagger > :nth-child(3) { animation-delay: .12s; }
.tab-pane.active .stagger > :nth-child(4) { animation-delay: .18s; }
.tab-pane.active .stagger > :nth-child(5) { animation-delay: .24s; }
.tab-pane.active .stagger > :nth-child(6) { animation-delay: .3s; }
@keyframes fade-up { from { opacity: 0; transform: translateY(12px); } }

/* ---------- Results: sticky number that changes while scrolling ---------- */
.story-number { display: inline-block; line-height: 1; font-variant-numeric: tabular-nums; }
.story-number.is-pop { animation: pop .6s var(--spring); }
@keyframes pop { 40% { transform: scale(1.15); } }
@media (min-width: 992px) {
  .story-sticky { position: sticky; top: 7rem; }
  .story-step { padding-block: 10vh; }
  .story-step:first-child { padding-top: 0; }
  .js-anim .story-step { opacity: .35; transition: opacity .4s; }
  .js-anim .story-step.is-active { opacity: 1; }
}

/* Proof screenshots as taped stickers */
.proof {
  position: relative;
  padding: .75rem;
  background: #fff;
  border-radius: 1rem;
  box-shadow: 10px 10px 0 var(--hard-shadow-color);
  transition: transform .3s var(--spring);
}
.proof:hover { transform: translateY(-6px); }
.dark-mode .proof { --hard-shadow-color: #6366f1; }

/* ---------- Portfolio (ms2Gallery): big taped screenshots, zigzag, numbered ---------- */
.portfolio-list { counter-reset: work; }
.portfolio-item { counter-increment: work; }
.portfolio-item:last-child { margin-bottom: 0 !important; }
.portfolio-num::before { content: "№ " counter(work, decimal-leading-zero); }
@media (min-width: 992px) {
  .portfolio-item:nth-child(even) > :first-child { order: 2; }   /* zigzag */
}
.portfolio-zoom {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .25s, transform .35s var(--spring);
}
.proof:hover .portfolio-zoom,
.proof:focus-visible .portfolio-zoom { opacity: 1; transform: none; }
.portfolio-item p:empty { display: none; }

/* ---------- Myth cards: click flips the card (myth → truth) ---------- */
.myth {
  display: grid;
  width: 100%;
  min-height: 15rem;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  perspective: 1200px;
  transition: transform .25s var(--spring);
}
.myth:hover { transform: translateY(-6px); }
.myth:focus-visible { outline: 3px solid #6366f1; outline-offset: 4px; border-radius: 1rem; }
.myth-face {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform .7s cubic-bezier(.3, 1.3, .5, 1);
}
.myth-back { transform: rotateY(180deg); }
.myth.is-broken .myth-front { transform: rotateY(-180deg); }
.myth.is-broken .myth-back { transform: rotateY(0deg); }

/* ---------- AI answer typing ---------- */
.ai-typing::after {
  content: "";
  display: inline-block;
  width: .5em;
  height: 1.1em;
  margin-left: 2px;
  vertical-align: -.15em;
  background: currentColor;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.js-anim .ai-sources { opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; }
.js-anim .ai-sources.is-visible { opacity: 1; transform: none; }

/* ---------- Floating sticker CTA ---------- */
.sticker-cta {
  position: fixed;
  right: 1.25rem;
  bottom: 5.5rem;                                  /* clears Silicon's scroll-to-top button */
  z-index: 1030;
  display: grid;
  place-items: center;
  width: 5.5rem;
  height: 5.5rem;
  border: 3px solid #131022;
  border-radius: 50%;
  background: #fde047;
  color: #131022;
  font-size: 1.35rem;
  text-align: center;
  text-decoration: none;
  box-shadow: 4px 4px 0 #131022;
  opacity: 0;
  transform: scale(.4);
  pointer-events: none;
  transition: opacity .3s, transform .45s var(--spring);
}
.sticker-cta.is-shown { opacity: 1; transform: none; pointer-events: auto; animation: float 3.6s ease-in-out .5s infinite; }
.sticker-cta:hover { color: #131022; animation-play-state: paused; transform: scale(1.08); }
.sticker-cta:active { transform: scale(.94); box-shadow: 1px 1px 0 #131022; }
@keyframes float { 50% { transform: translateY(-6px); } }
@media (max-width: 575.98px) { .sticker-cta { width: 4.5rem; height: 4.5rem; font-size: 1.1rem; right: .75rem; } }

/* ---------- Click particles: 4-point "AI sparkle" stars (created by home.js) ---------- */
.boom { position: fixed; top: 0; left: 0; z-index: 2000; pointer-events: none; will-change: transform, opacity; }
.spark {
  clip-path: polygon(50% 0, 63% 37%, 100% 50%, 63% 63%, 50% 100%, 37% 63%, 0 50%, 37% 37%);
}

/* ---------- "Don't press" button: the only place where the page tilts and falls apart ---------- */
body.is-broken .is-scattered {
  transition: transform .7s cubic-bezier(.2, .9, .3, 1.4) !important;
  transform: translate(var(--bx), var(--by)) rotate(var(--br)) scale(var(--bs, 1)) !important;
}
body.is-fixing .is-scattered { transition: transform 1s cubic-bezier(.3, 1.6, .5, 1) !important; }

/* Red "outage" layer over the page: tint, glitch stripes, big message */
.break-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: grid;
  place-items: center;
  padding: 1rem;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .08) 0 2px, transparent 2px 6px),
    rgba(239, 68, 68, .22);
  -webkit-backdrop-filter: grayscale(.8) contrast(1.3);
          backdrop-filter: grayscale(.8) contrast(1.3);
  opacity: 0;
  transition: opacity .25s;
}
.break-overlay.is-on { opacity: 1; }
.break-overlay strong {
  padding: .5rem 1.25rem;
  background: #ef4444;
  color: #fff;
  font-size: clamp(2rem, 7vw, 5rem);
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  box-shadow: 8px 8px 0 #131022;
  animation: glitch .35s steps(2) infinite;
}
@keyframes glitch {
  0%   { transform: translate(0, 0); text-shadow: 3px 0 #22d3ee, -3px 0 #fde047; }
  50%  { transform: translate(-4px, 2px); text-shadow: -3px 0 #22d3ee, 3px 0 #fde047; }
  100% { transform: translate(3px, -2px); text-shadow: 2px 2px #22d3ee, -2px -2px #fde047; }
}

/* ---------- Click ripple on buttons ---------- */
.page-wrapper .btn { position: relative; overflow: hidden; }
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .4);
  transform: scale(0);
  animation: ripple .6s ease-out forwards;
  pointer-events: none;
}
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

/* ---------- Respect "reduce motion" ---------- */
@media (prefers-reduced-motion: reduce) {
  .pulse-dot,
  .ai-typing::after,
  .sticker-cta.is-shown,
  .tab-pane.active .stagger > * { animation: none; }
  .flip-inner { transition: none; }
}