/* ThisIsMe — SOLID + WOW v1(reveal/underline/flash) + v2(sheen/ambient/confetti/hint)
   + v3(progress/dots) + v4(perf/typography/focus) */

/* ===== Base reset & guard-rails ===== */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

:root{
  --vh: 1svh; /* iOS safe viewport unit */

  /* palette */
  --bg:#ffffff; --text:#0f172a; --muted:#6b7280;
  --vio:#7c3aed; --cyan:#22d3ee; --ring:rgba(124,58,237,.45);
  --border:rgba(0,0,0,.12);

  /* typography */
  --fs-base: clamp(16px, 0.95rem + 0.25vw, 19px);
  --fs-h1:   clamp(40px, 7.5vw, 120px);
  --fs-h2:   clamp(22px, 0.9rem + 1.5vw, 32px);
  --fs-lead: clamp(16px, 2.1vw, 22px);

  /* layout rhythm */
  --wrap-max: 1120px;
  --wrap-pad: clamp(16px, 4vw, 32px);

  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: clamp(40px, 8vh, 80px);

  /* easing for micro-animations */
  --ease: cubic-bezier(.22,1,.36,1);

  /* ambient spot (WOW v2) */
  --amb-x: 50%;
  --amb-y: 40%;
  --amb-o: 0;

  /* scroll progress (WOW v3) */
  --prog: 0%;
}

@media (prefers-color-scheme:dark){
  :root{ --bg:#0b0b0c; --text:#f2f2f2; --muted:#9ca3af; --border:rgba(255,255,255,.12); }
}

html,body{ overflow-x:hidden }
body{
  margin:0; color:var(--text); background:var(--bg);
  font: var(--fs-base)/1.65 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Inter,Arial;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  padding-top: max(0px, env(safe-area-inset-top));
}

/* ===== Typo polish (WOW v4) ===== */
@supports (text-wrap: balance){
  h1,h2{ text-wrap: balance; }
}
@supports (text-wrap: pretty){
  p, li{ text-wrap: pretty; }
}
p, li{ hyphens: auto; }

/* Anchor comfort: заголовки не прячутся под UI/скролл */
:root{ scroll-padding-top: clamp(10px, 2vh, 20px); }

a{text-decoration:none; color:inherit}
:focus-visible{outline:2px solid var(--vio); outline-offset:3px; border-radius:6px}

.wrap{
  width: min(100% - 2*var(--wrap-pad), var(--wrap-max));
  margin-inline: auto;
}

/* Перф: мгновенная отрисовка секций по мере появления */
section{
  padding-block: var(--space-6);
  content-visibility: auto;
  contain-intrinsic-size: 0 800px; /* резерва на время расчёта */
}
h1,h2,h3,h4,h5,h6{ margin: 0 0 var(--space-3); line-height: 1.1; }
p, ul, ol { margin: 0 0 var(--space-3); }
ul, ol { padding-inline-start: 1.2em; }
img, svg, video { max-width: 100%; height: auto; display: block; image-rendering: -webkit-optimize-contrast; }

/* === Global fixed background + light/dark overlay === */
.bg-global{
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 1;
  background-image: image-set(
    url("assets/hero-hands.avif") type("image/avif"),
    url("assets/hero-hands.webp") type("image/webp"),
    url("assets/hero-hands.jpg") type("image/jpeg")
  );
  background-color: #efefef;
  transform: translateZ(0);
}
.bg-global::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: rgba(255,255,255,.55);  /* day filter */
}
@media (prefers-color-scheme:dark){
  .bg-global::after{ background: rgba(0,0,0,.45); } /* night filter */
}

/* === Ambient spot overlay (WOW v2) === */
.ambient{
  position: fixed; inset:0; z-index: -1; pointer-events:none;
  background: radial-gradient(700px 700px at var(--amb-x) var(--amb-y),
              rgba(255,255,255,.25), transparent 60%);
  mix-blend-mode: soft-light;
  opacity: var(--amb-o);
  transition: opacity .5s ease;
}
@media (hover:none), (pointer:coarse){
  .ambient{ display:none; }
}

/* === HERO (grid: 1fr | auto | 1fr | auto) === */
.hero{
  min-height: calc(100 * var(--vh));
  display: grid;
  grid-template-rows: 1fr auto 1fr auto;
  justify-items: center;
  align-items: center;
  text-align: center;
  padding-top: clamp(12px, 2vh, 24px);
}
.hero__logo{ grid-row:2; display:flex; align-items:center; justify-content:center; }
.hero__logo img{ width: clamp(96px, 10vw, 140px); height:auto; display:block; }

.hero__content{ grid-row:4; display:flex; flex-direction:column; align-items:center; gap:12px; }
.hero__title{
  margin: 0 0 var(--space-2);
  line-height: 1.05;
  font-weight: 800;
  font-size: var(--fs-h1);
  letter-spacing: -.02em;
}
.hero__title span{ display:block; }
.tagline{ color:var(--muted); font-size: var(--fs-lead); }
.hero__cta{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }

/* Sections transparent (overlay ensures readability) */
.section{ background: transparent; position: relative; }
h2{ font-size:var(--fs-h2); }
.epigraph{ color:var(--muted); font-style:italic; opacity:.85 }

/* Buttons & form */
.btn{
  position: relative;
  overflow: hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem 1.15rem; border:1px solid var(--border); border-radius:12px; font-weight:700;
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
  background-clip: padding-box;
  will-change: transform;
}
.btn--primary{
  color:#fff; border-color:transparent;
  background:linear-gradient(90deg,var(--vio),var(--cyan));
  box-shadow:0 10px 26px -10px var(--ring);
}
.btn--ghost{ border-color:var(--border) }
.btn--primary:hover,
.btn--ghost:hover{ transform:translateY(-1px) }
.btn--ghost:hover{ border-color:var(--vio) }

/* WOW v2: subtle sheen on buttons (desktop only) */
@media (hover:hover) and (pointer:fine){
  .btn::after{
    content:"";
    position:absolute; inset:-1px;
    background:
      linear-gradient(120deg, rgba(255,255,255,.0) 20%,
                              rgba(255,255,255,.35) 40%,
                              rgba(255,255,255,.0) 60%);
    transform: translateX(-120%);
    transition: transform .6s var(--ease);
    pointer-events:none;
  }
  .btn:hover::after,
  .btn:focus-visible::after{ transform: translateX(120%); }
}

/* WOW v4: keyboard "magnet" focus for buttons (не мешает hover) */
.btn:focus-visible{
  transform: translateY(-1px) scale(1.015);
  box-shadow: 0 14px 30px -12px var(--ring);
  border-color: transparent;
}

/* Waitlist form */
.waitlist-form{
  margin:22px auto 0; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; max-width:640px
}
.waitlist-form input[type="email"]{
  flex:1 1 260px; min-width:220px;
  padding:.85rem 1rem; border:1px solid var(--border); border-radius:12px;
  font:inherit; color:inherit; background:transparent
}

.site-footer{ text-align:center; color:var(--muted); padding:40px 16px 60px }

/* ===== WOW v1 ===== */
@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
  .reveal.is-in{ opacity:1; transform: none; }
}
.h-underline{ position:relative; display:inline-block; }
@media (prefers-reduced-motion: no-preference){
  .h-underline::after{
    content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px;
    background: linear-gradient(90deg, var(--vio), var(--cyan));
    transition: width .8s var(--ease);
  }
  .h-underline.is-in::after{ width:100%; }
}
.section--flash::before{
  content:"";
  position: absolute;
  inset: -14px;
  border-radius: 20px;
  pointer-events: none;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  box-shadow:
    0 10px 30px rgba(0,0,0,.10),
    0 0 0 1px rgba(0,0,0,.04);
  animation: flashBox 1.1s ease forwards;
}
@keyframes flashBox{ 0%{opacity:1} 100%{opacity:0} }
html:focus-within { scroll-behavior: smooth; }

/* ===== WOW v2 extras ===== */
.confetti-layer{ position: fixed; inset: 0; pointer-events: none; z-index: 999; }
.confetti{
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  opacity: 0; transform: translate3d(0,0,0) scale(1);
  animation: confettiPop 800ms ease forwards;
}
@keyframes confettiPop{
  0%   { opacity: 0; transform: translate3d(0,0,0) scale(0.8) rotate(0deg); }
  10%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--dx), var(--dy), 0) scale(1.05) rotate(var(--rot)); }
}
.hint{
  position: fixed; right: 16px; bottom: 16px; z-index: 900;
  background: rgba(255,255,255,.85); color: var(--text);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 10px 14px; display: flex; align-items: center; gap: 8px;
  box-shadow: 0 6px 22px rgba(0,0,0,.10); backdrop-filter: blur(4px);
  transform: translateY(12px); opacity: 0; pointer-events: none;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.hint.is-visible{ transform: none; opacity: 1; pointer-events: auto; }
.hint__label{ font-weight: 600; }
.hint__arrow{ opacity:.7; }
@media (prefers-color-scheme:dark){ .hint{ background: rgba(20,20,20,.65); color: var(--text); } }
@media (hover:none), (pointer:coarse){ .hint{ display:none; } }

/* ===== WOW v3 ===== */
/* Progress bar */
.progress{
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 950;
  background: transparent; pointer-events: none;
}
.progress__bar{
  width: var(--prog); height: 100%;
  background: linear-gradient(90deg, var(--vio), var(--cyan));
  box-shadow: 0 0 12px rgba(124,58,237,.35);
  transition: width .08s linear;
}

/* Dot navigation */
.dots{
  position: fixed; right: 14px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 10px; z-index: 900;
}
.dot{
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(255,255,255,.65);
  border: 1px solid var(--border);
  box-shadow: 0 3px 10px rgba(0,0,0,.12);
  display: inline-block;
  transition: transform .15s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.dot:hover, .dot:focus-visible{ transform: scale(1.2); border-color: var(--vio); }
.dot.is-active{
  background: linear-gradient(180deg, var(--vio), var(--cyan));
  border-color: transparent;
  transform: scale(1.25);
}
@media (prefers-color-scheme:dark){
  .dot{ background: rgba(20,20,20,.65); }
}
@media (max-width: 900px){
  .dots{ display:none; } /* не мешаем на планшетах/мобилках */
}

/* === WOW v5: Hero shimmer (respect reduced-motion) === */
@media (prefers-reduced-motion: no-preference){
  .hero__title span{
    position: relative;
    /* чуть плотнее цвет, чтобы shimmer был заметен */
    text-shadow: 0 1px 0 rgba(255,255,255,.06);
  }
  .hero__title span::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(100deg,
      transparent 10%,
      rgba(255,255,255,.28) 45%,
      transparent 60%);
    mix-blend-mode: overlay;      /* деликатнее на любом фоне */
    transform: translateX(-120%);
    animation: heroShine 2s ease forwards;
    animation-delay: var(--shine-delay, 0s);
    pointer-events:none;
  }
  /* пробег по первой, второй, третьей строке с небольшой задержкой */
  .hero__title span:nth-child(1)::after{ --shine-delay: .6s; }
  .hero__title span:nth-child(2)::after{ --shine-delay: 1.0s; }
  .hero__title span:nth-child(3)::after{ --shine-delay: 1.4s; }

  @keyframes heroShine{
    0%   { transform: translateX(-120%); opacity: .0; }
    20%  { opacity: .9; }
    60%  { opacity: .35; }
    100% { transform: translateX(120%); opacity: 0; }
  }
}

/* === WOW v5: Idle attention for primary CTA (one gentle pulse) === */
.btn--primary.is-idle {
  animation: ctaIdle 1000ms var(--ease) 1 both;
}
@keyframes ctaIdle {
  0%   { transform: translateY(0) scale(1); box-shadow: 0 10px 26px -10px var(--ring); }
  35%  { transform: translateY(-1px) scale(1.02); box-shadow: 0 18px 38px -12px var(--ring); }
  100% { transform: translateY(0) scale(1); box-shadow: 0 10px 26px -10px var(--ring); }
}