@import url("fonts.css");

/* ============================================================
   ATMA.EVENTS — расписание встреч с Сальвадором Атма
   Палитра «божественный свет»: слоновая кость, песок, шампань,
   благородное золото. Та же, что на masteratma.ru.
   ============================================================ */

:root{
  /* Свет */
  --page:       #FDFBF7;
  --page-warm:  #FAF6EE;
  --sand:       #F4EDE1;
  --sand-deep:  #EBE1D0;

  /* Тьма — для подвала и акцентов */
  --night:      #2E2820;
  --night-2:    #241F18;
  --night-3:    #1B1712;

  /* Чернила */
  --ivory:      #23201B;   /* основной текст и заголовки */
  --ivory-soft: #5D5449;
  --ivory-dim:  #9C9285;
  --ivory-ghost:#C4BAAA;

  /* Золото */
  --gold:       #B58F4C;
  --gold-warm:  #C9A868;
  --gold-pale:  #8A6E2C;   /* на светлом нужен тёмный оттенок, иначе не читается */
  --gold-deep:  #E8D5AC;
  --gold-glow:  #F7E9C9;

  --serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --ease:      cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);

  --gut:  clamp(1.25rem, 4.5vw, 5rem);
  --maxw: 1240px;
}

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

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  overflow-x:clip;
}

body{
  margin:0;
  background:var(--page);
  color:var(--ivory-soft);
  font-family:var(--sans);
  font-weight:300;
  font-size:clamp(1rem,.4vw + .9rem,1.06rem);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.loading{ overflow:hidden; }

h1,h2,h3{
  font-family:var(--serif);
  font-weight:300;
  color:var(--ivory);
  margin:0;
  line-height:1.06;
  letter-spacing:-.012em;
}

p{ margin:0 0 1.2em; }
p:last-child{ margin-bottom:0; }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; }

::selection{ background:var(--gold-glow); color:var(--ivory); }
:focus-visible{ outline:1px solid var(--gold); outline-offset:4px; }

/* ---------- Зерно и виньетка ---------- */
.grain,.vignette{ position:fixed; inset:0; pointer-events:none; }
.grain{
  z-index:9997; opacity:.03; inset:-120%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
  will-change:transform;
}
@keyframes grain{
  0%{transform:translate(0,0)}      16%{transform:translate(-2%,-3%)}
  33%{transform:translate(-4%,2%)}  50%{transform:translate(2%,-4%)}
  66%{transform:translate(-3%,3%)}  83%{transform:translate(3%,1%)}
  100%{transform:translate(0,0)}
}
.vignette{
  z-index:2;
  background:radial-gradient(ellipse at 50% 38%, transparent 55%, rgba(120,104,78,.09) 100%);
}

/* ---------- Свет за курсором ---------- */
.aura{
  position:fixed; top:0; left:0; z-index:1;
  width:620px; height:620px; margin:-310px 0 0 -310px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(247,233,201,.55) 0%, rgba(247,233,201,.18) 38%, transparent 70%);
  mix-blend-mode:multiply;
  opacity:0; transition:opacity 1.2s var(--ease);
  will-change:transform;
}
.aura.on{ opacity:1; }

/* ---------- Полоса прокрутки ---------- */
.progress{
  position:fixed; top:0; left:0; height:1px; z-index:9000;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-warm));
  width:0; transition:width .12s linear;
}

/* ============================================================
   ПРЕЛОАДЕР
   ============================================================ */
.intro{
  position:fixed; inset:0; z-index:9999;
  background:var(--page);
  display:grid; place-items:center;
  transition:opacity 1s var(--ease), visibility 1s;
}
.intro.done{ opacity:0; visibility:hidden; }
.intro__in{ text-align:center; }
.intro__mark{
  width:46px; margin:0 auto 1.8rem; color:var(--gold);
  opacity:0; animation:markIn 1.3s var(--ease) .15s forwards;
}
@keyframes markIn{ from{opacity:0;transform:scale(.7) rotate(-25deg)} to{opacity:1;transform:none} }
.intro__mark path{
  stroke-dasharray:120; stroke-dashoffset:120;
  animation:draw 1.6s var(--ease) .3s forwards;
}
@keyframes draw{ to{ stroke-dashoffset:0; } }
.intro__line{
  width:min(200px,40vw); height:1px; margin:0 auto 1.4rem;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transform:scaleX(0); animation:lineIn 1.2s var(--ease) .9s forwards;
}
@keyframes lineIn{ to{ transform:scaleX(1); } }
.intro__w{
  font-family:var(--serif); font-size:clamp(1.6rem,4vw,2.4rem);
  letter-spacing:.34em; color:var(--ivory); text-transform:uppercase;
  opacity:0; animation:rise 1.3s var(--ease) 1.05s forwards;
}
@keyframes rise{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }

/* ============================================================
   ШАПКА
   ============================================================ */
.top{
  position:fixed; top:0; left:0; right:0; z-index:800;
  padding:1.3rem var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  transition:background .5s var(--ease), padding .5s var(--ease), transform .6s var(--ease);
}
.top--solid{
  background:rgba(253,251,247,.84);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  padding-block:.9rem;
  box-shadow:0 1px 0 rgba(35,32,27,.07);
}
.brand{ display:flex; align-items:center; gap:.85rem; }
.brand__mark{ width:22px; color:var(--gold); flex-shrink:0; }
.brand__txt{ line-height:1.12; }
.brand__t{
  display:block; font-size:.5rem; letter-spacing:.42em;
  text-transform:uppercase; color:var(--ivory-dim);
}
.brand__n{
  display:block; font-family:var(--serif); font-size:1.1rem;
  letter-spacing:.16em; color:var(--ivory); text-transform:uppercase;
}
.top__link{
  font-size:.58rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ivory-soft); white-space:nowrap;
  padding:.7rem 1.2rem; border:1px solid rgba(201,162,39,.34);
  position:relative; overflow:hidden;
  transition:color .5s var(--ease), border-color .5s var(--ease);
}
.top__link span{ position:relative; z-index:2; }
.top__link::before{
  content:''; position:absolute; inset:0; background:var(--gold);
  transform:translateY(101%); transition:transform .5s var(--ease);
}
.top__link:hover{ color:#fff; border-color:var(--gold); }
.top__link:hover::before{ transform:translateY(0); }

/* ---------- Переключатель языка ----------
   Два слова и точка между ними: на этом сайте он должен быть заметен
   ровно настолько, чтобы его нашли, и ни на грамм больше. */
.top__r{ display:flex; align-items:center; gap:1.1rem; }

.lang{ display:flex; align-items:center; gap:.42rem; }
.lang__b{
  appearance:none; background:none; border:0; padding:.3rem .1rem; margin:0;
  font-family:var(--sans); font-size:.58rem; font-weight:400;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--ivory-dim); cursor:pointer;
  position:relative; transition:color .45s var(--ease);
}
.lang__b::after{
  content:''; position:absolute; left:0; right:0; bottom:.05rem; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.lang__b:hover{ color:var(--ivory); }
.lang__b.on{ color:var(--ivory); }
.lang__b.on::after{ transform:scaleX(1); }
.lang__s{ color:var(--ivory-ghost); font-size:.6rem; }

@media (max-width:560px){
  .top__r{ gap:.8rem; }
  /* На узком экране кнопка «О Мастере» съедает строку — язык важнее */
  .top__link{ padding:.6rem .85rem; letter-spacing:.16em; }
}

/* ============================================================
   ПЕРВЫЙ ЭКРАН
   ============================================================ */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center;
  padding-block:clamp(7rem,14vh,10rem) clamp(4rem,8vh,7rem);
  overflow:hidden;
}
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg img{
  width:100%; height:100%; object-fit:cover; object-position:68% 30%;
  transform:scale(1.08);
  animation:drift 30s var(--ease-soft) infinite alternate;
  filter:contrast(1.01) brightness(1.03);
}
@keyframes drift{ to{ transform:scale(1.16) translateX(-1.5%); } }
.hero__bg::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(253,251,247,.97) 0%, rgba(253,251,247,.92) 30%, rgba(253,251,247,.5) 56%, rgba(253,251,247,.14) 100%),
    linear-gradient(180deg, rgba(253,251,247,.6) 0%, transparent 26%, transparent 62%, var(--page) 100%);
}

.wrap{
  width:100%; max-width:var(--maxw); margin:0 auto;
  padding-inline:var(--gut);
  position:relative; z-index:3;
}

.hero__year{
  font-size:.56rem; letter-spacing:.5em; text-transform:uppercase;
  color:var(--gold); display:flex; align-items:center; gap:1.1rem;
  margin-bottom:1.9rem;
  opacity:0; animation:rise 1.3s var(--ease) .2s forwards;
}
.hero__year::after{
  content:''; height:1px; width:clamp(2.5rem,7vw,6rem);
  background:linear-gradient(90deg,var(--gold),transparent);
}

/* Заголовок в две ровные строки: «Расписание встреч» и «с Сальвадором Атма»
   почти одной длины, поэтому ширина в 19 знаков держит их парой,
   а не рвёт на четыре рваных обрывка. */
.hero h1{
  font-size:clamp(2.4rem,5.6vw,4.6rem);
  max-width:8em;
  line-height:1.04;
  opacity:0; animation:rise 1.5s var(--ease) .35s forwards;
}
.hero h1 em{
  font-style:italic; color:var(--gold-pale);
  display:block; margin-top:.12em;
  font-size:.86em;            /* вторая строка чуть тише — имя не спорит с темой */
  letter-spacing:.004em;
}
.hero__sub{
  max-width:46ch; margin-top:2rem;
  font-size:clamp(1rem,.6vw + .88rem,1.16rem);
  opacity:0; animation:rise 1.4s var(--ease) .6s forwards;
}
.hero__cta{
  margin-top:2.6rem; display:flex; flex-wrap:wrap; gap:1rem;
  opacity:0; animation:rise 1.3s var(--ease) .85s forwards;
}

/* Кнопки */
/* Кнопки */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:.8rem;
  padding:1.05rem 2.2rem; overflow:hidden; cursor:pointer;
  font-size:.63rem; letter-spacing:.24em; text-transform:uppercase;
  border:1px solid var(--gold); background:none; color:var(--ivory);
  font-family:var(--sans);
  transition:color .5s var(--ease);
}
.btn span{ position:relative; z-index:2; }
.btn::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(120deg,var(--gold-warm),var(--gold));
  transform:translateY(101%); transition:transform .55s var(--ease);
}
.btn:hover{ color:#fff; }
.btn:hover::before{ transform:translateY(0); }
.btn--solid{ color:#fff; }
.btn--solid::before{ transform:translateY(0); }
.btn--solid:hover{ color:var(--ivory); }
.btn--solid:hover::before{ transform:translateY(-101%); }
.btn--ghost{ border-color:var(--ivory-ghost); }

/* ---------- Обратный отсчёт ---------- */
.next{
  margin-top:clamp(2.5rem,6vh,4rem);
  padding-top:clamp(1.6rem,4vh,2.4rem);
  border-top:1px solid var(--sand-deep);
  max-width:640px;
  opacity:0; animation:rise 1.3s var(--ease) 1.05s forwards;
}
.next__l{
  font-size:.54rem; letter-spacing:.36em; text-transform:uppercase;
  color:var(--gold); margin-bottom:.9rem;
}
.next__t{
  font-family:var(--serif); font-size:clamp(1.2rem,2.2vw,1.6rem);
  color:var(--ivory); margin-bottom:1.1rem;
}
.clock{ display:flex; gap:clamp(1.2rem,3vw,2.4rem); }
.clock__u{ text-align:left; }
.clock__n{
  font-family:var(--serif); font-size:clamp(1.9rem,4vw,2.9rem);
  color:var(--ivory); line-height:1;
  font-variant-numeric:tabular-nums;
}
.clock__c{
  display:block; margin-top:.4rem;
  font-size:.52rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ivory-dim);
}

/* Стрелка вниз */
.scroll-hint{
  position:absolute; left:50%; bottom:2.2rem; z-index:3;
  transform:translateX(-50%);
  display:grid; place-items:center; gap:.7rem;
  font-size:.5rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--ivory-dim);
  opacity:0; animation:rise 1.2s var(--ease) 1.4s forwards;
}
.scroll-hint i{
  display:block; width:1px; height:38px;
  background:linear-gradient(180deg,var(--gold),transparent);
  animation:pulseLine 2.4s var(--ease-soft) infinite;
}
@keyframes pulseLine{ 0%,100%{opacity:.3;transform:scaleY(.7)} 50%{opacity:1;transform:scaleY(1)} }
@media (max-width:760px){
  .scroll-hint{ display:none; }
  .hero__bg img{ object-position:56% 18%; }
  .hero__bg::after{
    background:linear-gradient(180deg,
      rgba(253,251,247,.70) 0%, rgba(253,251,247,.80) 30%,
      rgba(253,251,247,.90) 58%, rgba(253,251,247,.97) 84%, var(--page) 100%);
  }
}}

/* ============================================================
   РАСПИСАНИЕ
   ============================================================ */
.sched{ padding-block:clamp(4.5rem,10vh,8rem); position:relative; z-index:3; }

.sec-head{ margin-bottom:clamp(2.5rem,6vh,4rem); }
.eyebrow{
  font-size:.56rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--gold); display:flex; align-items:center; gap:1rem;
  margin-bottom:1.3rem;
}
.eyebrow::after{
  content:''; height:1px; width:clamp(2rem,6vw,4.5rem);
  background:linear-gradient(90deg,var(--gold),transparent);
}
.sec-head h2{ font-size:clamp(2rem,4.5vw,3.4rem); }

/* Фильтры */
.filters{
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin-top:2rem;
}
.filter{
  padding:.62rem 1.25rem; cursor:pointer;
  background:var(--page); border:1px solid var(--sand-deep);
  font-size:.56rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ivory-soft);
  transition:color .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.filter:hover{ color:var(--ivory); border-color:var(--gold-deep); }
.filter.on{ color:var(--gold-pale); border-color:var(--gold); background:var(--gold-glow); }

/* Месяц */
.month{
  display:flex; align-items:center; gap:1.4rem;
  margin:clamp(2.5rem,5vh,3.5rem) 0 .5rem;
}
.month:first-of-type{ margin-top:0; }
.month__n{
  font-family:var(--serif); font-size:clamp(1.1rem,2vw,1.4rem);
  color:var(--ivory-dim); letter-spacing:.2em; text-transform:uppercase;
  white-space:nowrap;
}
.month__r{ flex:1; height:1px; background:linear-gradient(90deg,var(--sand-deep),transparent); }

/* Карточка события */
.ev{
  position:relative;
  display:grid; grid-template-columns:7rem 1fr auto;
  gap:clamp(1.2rem,3vw,2.6rem); align-items:center;
  padding:clamp(1.5rem,3vw,2.1rem) clamp(1rem,2vw,1.6rem);
  border-top:1px solid var(--sand-deep);
  transition:background .5s var(--ease);
}
.ev:last-child{ border-bottom:1px solid var(--sand-deep); }
.ev::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:1px;
  background:linear-gradient(180deg,transparent,var(--gold),transparent);
  transform:scaleY(0); transition:transform .6s var(--ease);
}
.ev:hover{ background:var(--page-warm); }
.ev:hover::before{ transform:scaleY(1); }

.ev__d{ text-align:center; }
.ev__day{
  display:block; font-family:var(--serif);
  font-size:clamp(2.6rem,5vw,3.6rem); line-height:.92;
  color:var(--ivory); font-variant-numeric:tabular-nums;
  transition:color .5s var(--ease);
}
.ev:hover .ev__day{ color:var(--gold); }
.ev__mon{
  display:block; margin-top:.45rem;
  font-size:.54rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold);
}
.ev__dow{
  display:block; margin-top:.25rem;
  font-size:.5rem; letter-spacing:.2em; color:var(--ivory-dim); text-transform:uppercase;
}

.ev__b h3{
  font-size:clamp(1.25rem,2.2vw,1.75rem);
  margin-bottom:.55rem;
  transition:color .5s var(--ease);
}
.ev:hover .ev__b h3{ color:var(--gold-pale); }
.ev__tags{
  display:flex; flex-wrap:wrap; gap:.4rem .9rem; align-items:center;
  font-size:.55rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ivory-dim); margin-bottom:.6rem;
}
.ev__tag{ display:inline-flex; align-items:center; gap:.42rem; }
.ev__tag::before{ content:''; width:3px; height:3px; border-radius:50%; background:var(--gold); }
.ev__note{ font-size:.9rem; line-height:1.6; margin:0; max-width:56ch; color:var(--ivory-soft); }

.ev__a{ display:flex; flex-direction:column; gap:.6rem; align-items:stretch; }
.ev__a .btn{ padding:.85rem 1.5rem; font-size:.56rem; justify-content:center; }

.pill{
  display:inline-block; padding:.28rem .7rem;
  font-size:.5rem; letter-spacing:.2em; text-transform:uppercase;
  border:1px solid var(--gold-deep); color:var(--gold-pale);
}
.pill--soon{ border-color:var(--gold); background:var(--gold-glow); color:var(--gold-pale); }

@media (max-width:880px){
  .ev{ grid-template-columns:5.2rem 1fr; }
  .ev__a{ grid-column:1/-1; flex-direction:row; flex-wrap:wrap; }
  .ev__a .btn{ flex:1 1 auto; }
}
@media (max-width:520px){
  .ev{ grid-template-columns:1fr; gap:.9rem; padding-inline:0; }
  .ev__d{ display:flex; align-items:baseline; gap:.6rem; text-align:left; }
  .ev__day{ font-size:2.1rem; }
  .ev__mon,.ev__dow{ margin-top:0; }
}

/* Пусто / загрузка */
.state{
  padding-block:clamp(3rem,8vh,5rem); text-align:center;
  color:var(--ivory-dim); font-size:.95rem;
}
.state__dots span{
  display:inline-block; width:4px; height:4px; margin:0 3px; border-radius:50%;
  background:var(--gold); opacity:.35;
  animation:dot 1.4s var(--ease-soft) infinite;
}
.state__dots span:nth-child(2){ animation-delay:.2s; }
.state__dots span:nth-child(3){ animation-delay:.4s; }
@keyframes dot{ 0%,100%{opacity:.25;transform:translateY(0)} 50%{opacity:1;transform:translateY(-5px)} }

/* ============================================================
   ПОДВАЛ
   ============================================================ */
.foot{
  position:relative; z-index:3;
  margin-top:clamp(3rem,8vh,6rem);
  padding-block:clamp(4rem,9vh,6.5rem) 2.5rem;
  background:var(--night);
  color:rgba(253,251,247,.6);
}
.foot__q{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.2rem,2.4vw,1.85rem); line-height:1.42;
  color:#FDFBF7; max-width:30ch;
  margin-bottom:clamp(2.5rem,6vh,4rem);
}
.foot__g{
  display:grid; gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));
  padding-bottom:2.5rem;
  border-bottom:1px solid rgba(232,213,172,.16);
}
.foot__h{
  font-size:.52rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold-warm); margin-bottom:1.1rem;
}
.foot__g ul{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.foot__g a{ font-size:.88rem; color:rgba(253,251,247,.6); transition:color .4s var(--ease); }
.foot__g a:hover{ color:var(--gold-deep); }
/* Юридические документы отдельной строкой: они нужны редко,
   но обязаны быть найдены сразу, когда понадобились. */
.foot__legal{
  list-style:none; margin:0; padding:1.8rem 0 0;
  display:flex; flex-wrap:wrap; gap:.6rem 1.8rem;
}
.foot__legal a{
  font-size:.76rem; color:rgba(253,251,247,.45);
  transition:color .4s var(--ease);
}
.foot__legal a:hover{ color:var(--gold-deep); }

.foot__b{
  padding-top:2rem; display:flex; flex-wrap:wrap; gap:.8rem 2rem;
  justify-content:space-between; align-items:center;
  font-size:.72rem; color:rgba(253,251,247,.4);
}
/* Строка об организаторах длиннее копирайта — не даём ей ужаться
   в узкий столбик рядом с ним */
.foot__co{ max-width:44em; }

/* ============================================================
   ПОЯВЛЕНИЕ
   ============================================================ */
.rv{ opacity:0; transform:translateY(24px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.rv.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .rv{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
  .grain{ display:none; }
  .hero__bg img{ animation:none; transform:none; }
}

/* ---------- Прошедшие события ---------- */
.filter--past{ margin-left:auto; }
@media (max-width:640px){ .filter--past{ margin-left:0; } }

.ev--past{ opacity:.5; }
.ev--past:hover{ opacity:.75; background:none; }
.ev--past::before{ display:none; }
.ev--past .ev__day{ color:var(--ivory-dim); }
.ev--past:hover .ev__day,
.ev--past:hover .ev__b h3{ color:var(--ivory); }
.ev--past .pill{ border-color:var(--ivory-ghost); color:var(--ivory-dim); }