/* ============================================================
   Akdeniz — Hero. Леска, крючок, море.
   ============================================================ */

:root{
  --deep:      #04121e;   /* глубина */
  --deep-2:    #071f33;   /* толща воды */
  --sea:       #0b3a5c;   /* вода */
  --foam:      #eaf6fb;   /* текст */
  --foam-dim:  #8fb2c6;   /* вторичный текст */
  --accent:    #35e0c8;   /* бирюза */
  --accent-dk: #12a894;

  --pad-l: clamp(52px,9vw,130px);  /* левое поле контента */
  --line-x: 40px;         /* где висит леска — вплотную к тексту (из JS) */
  --hook-y: 46vh;         /* финальная точка крючка (уточняется из JS) */
  --dive-y: 88vh;         /* глубина погружения */
  --off-hook: 538;        /* длина нити в финале  (уточняется из JS) */
  --off-dive: 135;        /* длина нити на глубине (уточняется из JS) */

  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-pull: cubic-bezier(.16,1.02,.3,1.12);   /* рывок с перелётом */
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  /* наклонённая лента и трос чуть выходят за края – документу от этого
     шириться не должно. clip не создаёт контейнер прокрутки, hidden – запасной */
  overflow-x:hidden;
  overflow-x:clip;
}

body{
  margin:0;
  background:var(--deep);
  color:var(--foam);
  font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- Навигация ---------- */
.nav{
  position:absolute; inset:0 0 auto 0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:28px clamp(20px,5vw,64px);
}
.nav__logo{
  display:flex; align-items:center; gap:10px;
  color:var(--foam); text-decoration:none;
  font-weight:700; font-size:19px; letter-spacing:-.02em;
}
/* эмблема выше, чем шире – ведём по высоте, ширину считает viewBox */
.nav__mark{
  height:26px; width:auto; display:block;
  fill:var(--accent); stroke:none;
}
.nav__menu{ display:flex; gap:clamp(16px,2.5vw,34px); }
.nav__menu a{
  color:var(--foam-dim); text-decoration:none;
  font-size:15px; transition:color .25s;
}
.nav__menu a:hover{ color:var(--accent); }

/* на телефоне меню прячется – вместо него звонок одним нажатием */
.nav__call{ display:none; }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100vh; min-height:100svh;
  display:flex; align-items:center;
  overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% 110%, var(--sea) 0%, transparent 60%),
    radial-gradient(90% 60% at 15% 0%, var(--deep-2) 0%, transparent 70%),
    var(--deep);
}

.hero__inner{
  position:relative; z-index:20;
  width:100%;
  padding:0 clamp(20px,5vw,64px) 0 var(--pad-l);
  max-width:1400px; margin:0 auto;
}

/* ---------- Леска ---------- */
.line{
  position:absolute; inset:0; z-index:10;
  width:100%; height:100%;
  pointer-events:none;
}
.line path{
  fill:none;
  stroke-width:1.5;
  shape-rendering:geometricPrecision;
}
.line__main{
  stroke:rgba(53,224,200,.62);
  stroke-dasharray:1000;
  stroke-dashoffset:var(--off-hook);
}

/* ---------- Крючок ---------- */
.hook{
  position:absolute; z-index:11;
  left:var(--line-x); top:var(--hook-y);
  width:32px; height:57px;
  margin-left:-16px;
  fill:none;
  stroke:var(--accent);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 10px rgba(53,224,200,.45));
}

/* ---------- Заголовок ---------- */
/* режем только снизу — сверху и по бокам оставляем воздух наклонённому слову */
.title-mask{ clip-path:inset(-40% -12% 0 -12%); padding-bottom:.08em; }
.hero__title{
  margin:0;
  font-size:clamp(38px,7.4vw,104px);
  line-height:1.02;
  letter-spacing:-.035em;
  font-weight:800;
}
.hero__title br{ display:block; }
/* слово висит на крючке — свободный конец провисает */
.tilt{
  display:inline-block;
  transform:rotate(3deg) translateY(-.03em);
  transform-origin:left center;
}

.hero__sub{
  margin:26px 0 0;
  max-width:46ch;
  font-size:clamp(15px,1.5vw,19px);
  line-height:1.55;
  color:var(--foam-dim);
}

/* ---------- Кнопки ---------- */
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:36px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:16px 30px; border-radius:100px;
  font-size:16px; font-weight:600; text-decoration:none;
  transition:background .25s, color .25s, border-color .25s, box-shadow .25s, transform .3s var(--ease-out);
  will-change:transform;
}
.btn--solid{
  background:var(--accent); color:#03202b;
  box-shadow:0 8px 30px -8px rgba(53,224,200,.6);
}
.btn--solid:hover{ background:#5cf0da; }
.btn--ghost{ color:var(--foam); }
.btn--ghost:hover{ color:var(--accent); }

/* ---------- Заглушки секций ---------- */
.section{
  position:relative;
  padding:clamp(90px,14vh,170px) clamp(20px,5vw,64px)
          clamp(90px,14vh,170px) var(--pad-l);
  max-width:1400px; margin:0 auto;
  border-top:1px solid rgba(143,178,198,.1);
}
.section__title{
  margin:0 0 14px;
  font-size:clamp(28px,4vw,54px);
  letter-spacing:-.03em; font-weight:800;
}
.section__lead{ margin:0; color:#c3d8e4; max-width:56ch; }

/* ============================================================
   Анимация появления — играет один раз
   ============================================================ */
/* стартовые состояния — только если JS жив и спектакль ещё впереди */
.js .line__main{ stroke-dashoffset:1000; }
.js .hook{ transform:translateY(calc(-1 * var(--hook-y) - 12vh)); }
.js .hero__title{ transform:translateY(120%); }
.js .nav,
.js .reveal,

.is-playing .line__main{ animation:cast 1.85s var(--ease-out) .1s forwards; }
.is-playing .hook{ animation:hook 1.85s var(--ease-out) .1s forwards; }
/* заголовок едет ровно тогда, когда крючок тянет его вверх (0.88s → 1.4s) */
.is-playing .hero__title{ animation:pull .7s var(--ease-pull) .88s forwards; }
.is-playing .nav{ animation:fade-in .6s var(--ease-out) 1.4s forwards; }
.is-playing .reveal{ animation:rise .65s var(--ease-out) forwards; animation-delay:calc(1.3s + var(--d,0s)); }

/* заброс лески: конец нити всегда там же, где крючок */
@keyframes cast{
  0%   { stroke-dashoffset:1000; }
  33%  { stroke-dashoffset:var(--off-dive); }   /* ушла на глубину */
  42%  { stroke-dashoffset:var(--off-dive); }   /* пауза под водой */
  70%  { stroke-dashoffset:var(--off-hook); }   /* смоталась — тянем вверх */
  100% { stroke-dashoffset:var(--off-hook); }
}
@keyframes hook{
  0%   { transform:translateY(calc(-1 * var(--hook-y) - 12vh)); }
  33%  { transform:translateY(calc(var(--dive-y) - var(--hook-y))); }
  42%  { transform:translateY(calc(var(--dive-y) - var(--hook-y))); }
  70%  { transform:translateY(0); }
  78%  { transform:translateY(-1.4vh) rotate(-3deg); }
  88%  { transform:translateY(.5vh) rotate(1.5deg); }
  100% { transform:translateY(0); }
}
@keyframes pull{
  0%   { transform:translateY(120%); }
  72%  { transform:translateY(-2.5%); }
  100% { transform:translateY(0); }
}
@keyframes rise{
  from{ opacity:0; transform:translateY(22px); }
  to  { opacity:1; transform:translateY(0); }
}
@keyframes fade-in{ to{ opacity:1; } }

/* Уже видели спектакль в этой сессии / движение отключено — показываем финал */
.js.is-done .line__main{ stroke-dashoffset:var(--off-hook); }
.js.is-done .hook{ transform:translateY(0); }
.js.is-done .hero__title{ transform:translateY(0); }
.js.is-done .nav,
.js.is-done .reveal{ opacity:1; }

/* ---------- Мобильные ---------- */
@media (max-width:760px){
  :root{ --pad-l:40px; }
  .nav__menu{ display:none; }
  .nav__call{
    display:inline-flex; align-items:center;
    padding:10px 18px; border-radius:100px;
    background:var(--accent); color:#03202b;
    font-size:14px; font-weight:600; text-decoration:none;
  }
  .hero__inner{ padding-right:20px; }
  .hero__title{ font-size:clamp(30px,8.6vw,46px); }
  .hook{ width:22px; height:36px; margin-left:-11px; }
  .hero__title{ letter-spacing:-.03em; }
  .hero__sub{ margin-top:20px; }
  .hero__cta{ margin-top:28px; }
  .btn{ flex:1 1 auto; }
  /* тайминги ужимаем — на телефоне терпение короче */
  .is-playing .line__main,
  .is-playing .hook{ animation-duration:1.5s; }
  .is-playing .hero__title{ animation-duration:.6s; animation-delay:.72s; }
  .is-playing .nav{ animation-delay:1.15s; }
  .is-playing .reveal{ animation-delay:calc(1.05s + var(--d,0s)); }
}

/* ---------- Уважаем настройки движения ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition-duration:.01ms !important; }
  .js .line__main{ stroke-dashoffset:var(--off-hook); }
  .js .hook{ transform:translateY(0); }
  .js .hero__title{ transform:translateY(0); }
  .js .nav,.js .reveal{ opacity:1; }
}