/* Чайки — кафе. Статичный сайт без сборки. */

@font-face{
  font-family:"Jost";
  src:url("../fonts/Jost.ttf") format("truetype");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --paper:#F2E8D8;
  --ink:#2A2420;
  --line:rgba(42,36,32,.18);
  --max:1440px;
  --gutter:clamp(20px,4vw,48px);
  --ease:cubic-bezier(.2,.6,.2,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper) url("../img/paper.jpg") repeat;
  background:var(--paper) image-set(url("../img/paper.webp") type("image/webp"),url("../img/paper.jpg") type("image/jpeg")) repeat;
  background-size:800px 800px;
  color:var(--ink);
  font:300 16px/1.6 "Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
address{font-style:normal}
figure,p,ul,h1{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.small{font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:400}

/* ---------- заставка ---------- */
.splash{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  background:var(--paper) url("../img/paper.jpg") repeat;
  background:var(--paper) image-set(url("../img/paper.webp") type("image/webp"),url("../img/paper.jpg") type("image/jpeg")) repeat;
  background-size:800px 800px;
  transition:opacity .7s ease,visibility 0s linear .7s;
}
.splash__logo{width:clamp(140px,16vw,200px);height:auto;opacity:0;animation:splash-in .9s ease .1s forwards}
@keyframes splash-in{to{opacity:1}}
.splash.is-done{opacity:0;visibility:hidden;pointer-events:none}
html:not(.js) .splash{display:none}

/* ---------- шапка ---------- */
.header{
  position:fixed;left:0;right:0;top:0;z-index:50;
  height:68px;display:flex;align-items:center;justify-content:space-between;gap:24px;
  max-width:none;padding-left:var(--gutter);padding-right:var(--gutter);
  background:var(--paper) url("../img/paper.jpg") repeat;
  background:var(--paper) image-set(url("../img/paper.webp") type("image/webp"),url("../img/paper.jpg") type("image/jpeg")) repeat;
  background-size:800px 800px;
  transition:box-shadow .35s;
}
.header__inner{width:100%;max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px}
.header.is-compact{box-shadow:0 1px 0 rgba(42,36,32,.12),0 10px 30px -18px rgba(42,36,32,.35)}
.header__logo img{width:96px}
main{padding-top:68px}
.header__addr{white-space:nowrap}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:48px;padding:0 28px;border:1px solid currentColor;
  font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:400;white-space:nowrap;
  transition:background-color .25s,color .25s;
}
.btn:hover{background:var(--ink);color:var(--paper)}

/* ---------- герой ---------- */
.hero{
  position:relative;overflow:hidden;color:#fff;background:#C3AF91;
  height:min(calc(100vh - 68px),860px);
  min-height:520px;
}
@supports (height:100svh){.hero{height:min(calc(100svh - 68px),860px)}}
.hero__bg{position:absolute;inset:0;will-change:transform;transform-origin:50% 60%}
.hero__bg picture,.hero__img{width:100%;height:100%}
.hero__img{object-fit:cover;object-position:50% 42%;transition:transform 2.8s var(--ease),opacity .9s ease}
.js .hero__img{transform:scale(1.08);opacity:0}
.js .hero__img.is-ready{opacity:1}
.is-loaded .hero__img{transform:scale(1)}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(40,30,20,.6) 0%,rgba(40,30,20,.22) 40%,rgba(40,30,20,.08) 100%);
}
.hero__fg{position:absolute;inset:0;z-index:2;will-change:transform,opacity}
.hero__mark{
  position:absolute;left:50%;top:50%;width:min(620px,72vw);
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 4px 18px rgba(60,40,20,.35)) drop-shadow(0 0 40px rgba(60,40,20,.25));
  transition:opacity 1.4s ease .5s;
}
.js .hero__mark{opacity:0}
.is-loaded .hero__mark{opacity:1}
.hero__title{
  position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(28px,6vh,64px);
  font-weight:300;font-size:clamp(13px,2.1vw,30px);line-height:1.35;letter-spacing:.3em;text-transform:uppercase;text-align:center;
  transition:opacity 1s ease 1s,transform 1s var(--ease) 1s;
}
.js .hero__title{opacity:0;transform:translateY(12px)}
.is-loaded .hero__title{opacity:1;transform:none}

/* ---------- услуги ---------- */
.services{padding-top:5vw;padding-bottom:clamp(48px,6.5vw,96px)}
.services__list{text-align:center}
.services__list li{
  padding:clamp(4px,.6vw,8px) 0;
  font-weight:200;font-size:clamp(30px,3.6vw,52px);line-height:1.25;letter-spacing:.005em;
}

/* ---------- приглашение ---------- */
.statement{padding-top:0;padding-bottom:clamp(56px,8vw,120px)}
.statement__frame{border:1px solid var(--ink);padding:clamp(8px,.9vw,12px)}
.statement__inner{border:1px solid var(--line);padding:clamp(44px,6.4vw,88px) clamp(20px,4vw,48px);text-align:center}
.statement__text{margin:0 auto;max-width:1100px;font-weight:400;font-size:clamp(14px,2.1vw,30px);line-height:1.45;letter-spacing:.3em;text-transform:uppercase}

/* ---------- фото ---------- */
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 0}
.gallery figure{overflow:hidden}
.gallery img{width:100%;height:clamp(280px,39vw,560px);object-fit:cover;object-position:50% 45%}
.gallery figure:last-child img{object-position:62% 45%}

/* ---------- контакты ---------- */
.contacts{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:stretch}
.contacts__card-wrap{position:relative;display:flex;align-items:center;padding:clamp(40px,4.5vw,64px) var(--gutter)}
.contacts__card-wrap::before{content:"";position:absolute;inset:0;background:url("../img/wall-1200.jpg") center/cover;background-image:image-set(url("../img/wall-1200.webp") type("image/webp"),url("../img/wall-1200.jpg") type("image/jpeg"));opacity:.9}
.card{
  position:relative;z-index:2;width:100%;max-width:560px;margin:0 auto;
  border:1px solid var(--ink);background:rgba(255,252,246,.45);
  padding:clamp(28px,3.4vw,48px) clamp(24px,3.4vw,48px) clamp(32px,3.8vw,54px);
}
.card__label{font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:400;line-height:1.9;max-width:420px}
.card__tel{margin-top:28px;display:flex;flex-direction:column;gap:8px;font-weight:300;font-size:clamp(26px,2.7vw,38px);line-height:1.15;letter-spacing:.02em}
.card__tel a{border-bottom:1px solid var(--line);padding-bottom:10px;transition:border-color .3s}
.card__tel a:hover{border-color:var(--ink)}
.card__addr{margin-top:30px;font-size:17px;letter-spacing:.04em}
.contacts__photo{position:relative;overflow:hidden;min-height:0}
.contacts__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:55% 24%}

/* ---------- подвал ---------- */
.footer{padding-top:clamp(64px,7vw,104px);padding-bottom:clamp(40px,4vw,56px);text-align:center}
.footer__logo{width:clamp(160px,15vw,220px);margin:0 auto}
.footer__line{margin-top:clamp(40px,5vw,72px);display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px}
.footer__line .sep{opacity:.5}
.footer__line a:hover{text-decoration:underline;text-underline-offset:6px}

/* ---------- появление при прокрутке ---------- */
.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js [data-reveal].in{opacity:1;transform:none}
/* список услуг: сам список не прячем, появляются пункты по очереди */
.js .services__list[data-reveal]{opacity:1;transform:none;transition:none}
.js .services__list[data-reveal] li{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .services__list.in li{opacity:1;transform:none}
.services__list li:nth-child(2){transition-delay:.08s}
.services__list li:nth-child(3){transition-delay:.16s}
.services__list li:nth-child(4){transition-delay:.24s}
.services__list li:nth-child(5){transition-delay:.32s}
.services__list li:nth-child(6){transition-delay:.4s}
/* то, что видно сразу при загрузке, не анимируем */
.js .no-anim,.js .no-anim *{transition:none!important}
.gallery figure:last-child{transition-delay:.12s}

/* ---------- адаптив ---------- */
@media (max-width:900px){
  .header__addr{display:none}
  .contacts{grid-template-columns:1fr}
  .contacts__photo{height:70vw;max-height:520px}
  .contacts__photo img{position:static}
}
@media (max-width:640px){
  .gallery{grid-template-columns:1fr}
  .gallery img{height:70vw}
}
@media (max-width:560px){
  .header{height:60px}
  .header__logo img{width:80px}
  main{padding-top:60px}
  .btn{height:42px;padding:0 16px;letter-spacing:.12em;font-size:12px}
  .hero{height:min(calc(100vh - 60px),600px)}
  @supports (height:100svh){.hero{height:min(calc(100svh - 60px),600px)}}
  .footer__line{flex-direction:column;gap:10px}
  .footer__line .sep{display:none}
}