/* ============================================================
   Приглашение на урок макияжа
   Палитра: светлый серый / белый / чёрный + серебро.
   ============================================================ */

:root{
  --bg:#f1f0ed;
  --paper:#fffefc;
  --ink:#111111;
  --ink-2:#333333;
  --muted:#8b8b8b;
  --line:#e3e0dc;

  --font-script:'Great Vibes','Snell Roundhand','Savoye LET','Segoe Script',cursive;
  --font-serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --font-sans:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.33,1,.68,1);
  --ease-flight:cubic-bezier(.22,1,.36,1);
}

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

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  background:var(--bg);
}

body{
  margin:0;
  min-height:100%;
  font-family:var(--font-sans);
  font-size:16px;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overscroll-behavior-y:none;
  -webkit-tap-highlight-color:transparent;
}

body.no-scroll{overflow:hidden}

button{font:inherit;color:inherit}
img{max-width:100%}
[hidden]{display:none !important}

/* бумажная «пыль» ---------------------------------------------- */
.grain{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
}

/* сцена --------------------------------------------------------- */
.scene{
  position:relative;
  z-index:1;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:calc(env(safe-area-inset-top) + 24px) 18px calc(env(safe-area-inset-bottom) + 18px);
  overflow-x:hidden;
}

/* интро и результат лежат в одной ячейке — макет не «прыгает» */
.stack{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  place-items:center;
  width:100%;
  max-width:440px;
}

/* кнопка звука -------------------------------------------------- */
.sound{
  position:fixed;
  top:calc(env(safe-area-inset-top) + 12px);
  right:12px;
  z-index:60;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(0,0,0,.08);
  border-radius:50%;
  background:rgba(255,255,255,.72);
  color:var(--ink);
  cursor:pointer;
  opacity:.9;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  transition:opacity .3s ease,border-color .3s ease,transform .2s ease;
}
.sound:active{transform:scale(.94)}
.sound svg{width:17px;height:17px;display:block}
.sound .sound-off{display:none}
.sound.is-muted .sound-on{display:none}
.sound.is-muted .sound-off{display:block}

/* ══════════ ИНТРО ══════════ */
.intro{
  grid-area:1 / 1;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  transition:opacity .9s ease,transform .9s var(--ease-soft);
}
.intro.is-gone{
  opacity:0;
  transform:translateY(-10px) scale(.982);
  pointer-events:none;
}

.greeting{
  margin:0;
  font-family:var(--font-script);
  font-size:clamp(40px,12.6vw,68px);
  font-weight:400;
  line-height:1.12;
  color:var(--ink);
  text-align:center;
  transition:opacity .32s ease,transform .32s var(--ease-soft);
}
.greeting.is-out{
  opacity:0;
  transform:translateY(-10px);
}
.greeting-text{
  display:inline-block;
  padding:0 .06em;
  clip-path:inset(-30% 100% -30% 0);
  animation:writeIn 1.7s cubic-bezier(.45,0,.2,1) .15s forwards;
}

/* конверт ------------------------------------------------------- */
/* конверт сразу на месте: анимируется только приветствие */
.envelope-wrap{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-top:clamp(24px,6vh,54px);
}

.envelope{
  position:relative;
  display:block;
  width:min(78vw,330px);
  aspect-ratio:1.4 / 1;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  perspective:1000px;
  -webkit-user-select:none;
  user-select:none;
  touch-action:manipulation;
  transition:transform .5s var(--ease-soft);
}
.envelope:focus-visible{outline:2px solid var(--ink);outline-offset:10px;border-radius:4px}
.envelope:active{transform:translateY(-1px) scale(.994)}

@media (hover:hover){
  .envelope:hover{transform:translateY(-5px)}
}

/* тень под конвертом */
.env-shadow{
  position:absolute;
  left:4%;
  right:4%;
  bottom:-9%;
  height:46%;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(50% 55% at 50% 50%,rgba(0,0,0,.5),rgba(0,0,0,0) 72%);
  filter:blur(16px);
  transition:opacity .7s ease,transform .7s ease;
}
@media (hover:hover){
  .envelope:hover .env-shadow{opacity:.85;transform:scale(1.03)}
}

/* внутренняя часть (тёмная) — задняя стенка конверта */
.env-inner{
  position:absolute;
  inset:0;
  z-index:1;
  border-radius:3px;
  background:radial-gradient(130% 95% at 50% 0%,#1a1a1a 0%,#0c0c0c 55%,#060606 100%);
  box-shadow:
    inset 0 0 34px rgba(0,0,0,.95),
    inset 0 1px 0 rgba(255,255,255,.05);
}

/* «письмо» — сам сертификат, лежит внутри кармана */
.env-letter{
  position:absolute;
  left:4%;
  right:4%;
  bottom:6%;
  z-index:2;
  display:block;
  aspect-ratio:1748 / 1241;
  padding:6px;
  overflow:hidden;
  border-radius:4px;
  background:var(--paper);
  box-shadow:0 2px 14px rgba(0,0,0,.55);
  transform:translateY(0) rotate(0deg);
  transition:transform .95s cubic-bezier(.36,.02,.18,1);
  will-change:transform;
}
.env-letter img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:2px;
}
/* письмо внутри конверта в тени: верхний край не «светится» в щелях,
   когда клапан только приподнимается */
.env-letter::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:24px;
  border-radius:4px 4px 0 0;
  background:linear-gradient(180deg,rgba(0,0,0,.58),rgba(0,0,0,.24) 55%,rgba(0,0,0,0));
  opacity:1;
  transition:opacity .3s ease;
  pointer-events:none;
}
/* тень уходит, как только клапан открылся — письмо «выходит на свет» */
.envelope.is-open .env-letter::after{opacity:0;transition-delay:.1s}
.envelope.is-rise .env-letter{transform:translateY(-112%) rotate(-1.1deg)}
.envelope.is-rise .env-flap{z-index:1}

/* передняя часть — «карман» с V-образным вырезом.
   Закрытый клапан ровно закрывает вырез, а когда он открыт —
   через вырез видно письмо ещё до того, как оно начнёт выезжать. */
.env-pocket{
  position:absolute;
  inset:0;
  z-index:3;
  display:block;
  width:100%;
  height:100%;
  pointer-events:none;
  filter:drop-shadow(0 -1.5px 2px rgba(0,0,0,.45));
}

/* клапан */
.env-flap{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:56%;
  z-index:6;
  transform-origin:top center;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  transform:rotateX(0deg);
  transition:transform .5s cubic-bezier(.3,.75,.35,1);
  pointer-events:none;
  will-change:transform;
}
.envelope.is-open .env-flap{transform:rotateX(-180deg)}

.env-flap-face,
.env-flap-back{
  position:absolute;
  inset:0;
  display:block;
  clip-path:polygon(0 0,100% 0,50% 100%);
  -webkit-clip-path:polygon(0 0,100% 0,50% 100%);
}
.env-flap-face{
  background:linear-gradient(180deg,#343434 0%,#202020 62%,#151515 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  opacity:1;
  transition:opacity .01s linear;
}
.env-flap-back{
  /* та же плоскость, что и лицо: при перевороте клапана она сама
     зеркалится и встаёт острым углом вверх — как у настоящего конверта */
  transform:translateZ(.5px);
  background:linear-gradient(180deg,#151515 0%,#1b1b1b 60%,#232323 100%);
  opacity:0;
  transition:opacity .01s linear;
}

/* подмена грани ровно в момент, когда клапан встаёт ребром (≈90°) */
.envelope.is-open .env-flap-face{opacity:0;transition-delay:.17s}
.envelope.is-open .env-flap-back{opacity:1;transition-delay:.17s}

.env-flap-text{
  position:absolute;
  left:0;
  right:0;
  top:22%;
  padding:0 4%;
  text-align:center;
  font-family:var(--font-script);
  font-size:clamp(16px,4.6vw,21px);
  font-weight:400;
  line-height:1.1;
  color:#f7f7f7;
  opacity:.95;
  text-shadow:0 1px 3px rgba(0,0,0,.45);
  transform:translateZ(1px);
}

/* восковая печать на кончике клапана — картинка с вырезанным фоном */
.env-seal{
  position:absolute;
  left:50%;
  top:100%;
  z-index:2;
  width:clamp(52px,14vw,64px);
  transform:translate(-50%,-52%);
  display:block;
  pointer-events:none;
  filter:
    drop-shadow(0 5px 9px rgba(0,0,0,.6))
    drop-shadow(0 1px 2px rgba(0,0,0,.5));
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
.env-seal img{
  display:block;
  width:100%;
  height:auto;
  -webkit-user-select:none;
  user-select:none;
}
.envelope.is-open .env-seal{opacity:0;transition:opacity .01s linear .17s}

/* подсказка */
.hint{
  margin:18px 0 0;
  font-size:10px;
  letter-spacing:.26em;
  text-transform:lowercase;
  color:#666;
  opacity:0;
  animation:hintPulse 3.4s ease-in-out 1.9s infinite;
}
.hint.is-gone{
  animation:none;
  opacity:0;
  transition:opacity .28s ease;
}

/* ══════════ РЕЗУЛЬТАТ ══════════ */
.reveal{
  grid-area:1 / 1;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  outline:none;
  visibility:hidden;
  pointer-events:none;
}
.reveal.is-live{visibility:visible;pointer-events:auto}

.headline{
  margin:0 0 clamp(6px,1.2vh,10px);
  max-width:22ch;
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(21px,5.6vw,32px);
  line-height:1.3;
  letter-spacing:.005em;
  color:var(--ink);
  text-wrap:balance;
}
.headline .w{
  display:inline-block;
  opacity:0;
  transform:translateY(12px);
  filter:blur(5px);
  will-change:opacity,transform;
}
.reveal.is-on .headline .w{
  animation:wordIn .75s var(--ease-out) both;
  animation-delay:calc(.7s + var(--i) * .05s);
}

/* сертификат */
/* переворот на месте: лицо и оборот — грани одной карточки */
.cert-card{
  position:relative;
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:none;
  color:inherit;
  text-align:left;
  cursor:pointer;
  opacity:0;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  perspective:1600px;
  -webkit-perspective:1600px;
}
.cert-card:focus-visible{outline:2px solid var(--ink);outline-offset:6px;border-radius:8px}

.cert-flip{
  position:relative;
  display:block;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  transition:transform .9s cubic-bezier(.35,.05,.2,1);
}
.cert-card.is-flipped .cert-flip{transform:rotateY(180deg)}

.cert-face{
  display:block;
  border:1px solid #e9e6e2;
  border-radius:8px;
  background:var(--paper);
  box-shadow:
    0 30px 60px -28px rgba(0,0,0,.45),
    0 10px 24px -14px rgba(0,0,0,.24),
    0 1px 2px rgba(0,0,0,.05);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
.cert-front{padding:9px}
.cert-back{
  position:absolute;
  inset:0;
  transform:rotateY(180deg);
  overflow:hidden;
  background:linear-gradient(180deg,#fffefc 0%,#f4f2ee 100%);
}

.cert-img{
  display:block;
  width:auto;
  max-width:100%;
  max-height:70svh;
  height:auto;
  margin:0 auto;
  border-radius:3px;
}

.card-hint{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin:0 0 clamp(14px,2.6vh,22px);
  font-size:8.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#8f8b86;
  opacity:0;
}
.reveal.is-on .card-hint{animation:fadeIn .45s 1.5s forwards}
.card-hint svg{width:11px;height:11px;display:block;flex:none}

/* кнопки */
.actions{
  display:flex;
  gap:10px;
  width:100%;
  margin-top:clamp(14px,2.2vh,18px);
  opacity:0;
  transform:translateY(14px);
  visibility:hidden;
}
.reveal.is-on .actions{
  visibility:visible;
  transition:visibility 0s linear 1.45s;
  animation:fadeUpSm .65s 1.45s var(--ease-out) both;
}

.btn{
  flex:1 1 0;
  min-width:0;
  min-height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:12px 8px;
  border-radius:2px;
  font-family:var(--font-sans);
  font-size:12.5px;
  line-height:1.15;
  letter-spacing:.01em;
  text-align:center;
  cursor:pointer;
  touch-action:manipulation;
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .18s ease;
}
.btn svg{width:15px;height:15px;flex:none}
.btn-ghost{background:rgba(255,255,255,.66);color:var(--ink);border:1px solid var(--ink)}
.btn-solid{background:var(--ink);color:#fff;border:1px solid var(--ink)}

@media (hover:hover){
  .btn-ghost:hover{background:var(--ink);color:#fff}
  .btn-solid:hover{background:var(--paper);color:var(--ink)}
}
.btn:active{transform:scale(.982)}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.again{
  margin-top:24px;
  padding:8px 6px;
  border:0;
  background:none;
  font-size:9.5px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:#9b9893;
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transition:color .25s ease;
}
.reveal.is-on .again{
  visibility:visible;
  transition:color .25s ease, visibility 0s linear 2s;
  animation:fadeIn .5s 2s forwards;
}
.again:hover{color:var(--ink)}
.again:focus-visible{outline:1px solid var(--ink);outline-offset:4px}

/* ══════════ КОНТАКТЫ ══════════ */
.sheet{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.sheet-backdrop{
  position:absolute;
  inset:0;
  background:rgba(10,10,10,.42);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  opacity:0;
  transition:opacity .35s ease;
}
.sheet-panel{
  position:relative;
  width:100%;
  max-width:460px;
  max-height:calc(100% - 40px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:30px 22px calc(22px + env(safe-area-inset-bottom));
  border-radius:22px 22px 0 0;
  background:var(--paper);
  box-shadow:0 -20px 60px rgba(0,0,0,.25);
  transform:translateY(32px);
  opacity:0;
  transition:transform .45s var(--ease-out),opacity .35s ease;
}
.sheet.is-on .sheet-backdrop{opacity:1}
.sheet.is-on .sheet-panel{transform:none;opacity:1}

.sheet-close{
  position:absolute;
  top:14px;
  right:14px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--paper);
  cursor:pointer;
  transition:border-color .25s ease;
}
.sheet-close svg{width:15px;height:15px}
.sheet-close:hover{border-color:#bbb}

.sheet-title{
  margin:0 0 10px;
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:400;
  font-size:27px;
  line-height:1.2;
  color:var(--ink);
}
.sheet-text{
  margin:0 0 20px;
  font-size:13.5px;
  line-height:1.55;
  color:#6b6b6b;
}

.contact{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:10px;
  padding:13px 14px;
  border:1px solid #e9e6e2;
  border-radius:14px;
  color:inherit;
  text-decoration:none;
  background:rgba(255,255,255,.5);
  transition:border-color .25s ease,background .25s ease,transform .2s ease;
}
.contact:active{transform:scale(.99)}
@media (hover:hover){
  .contact:hover{border-color:#111;background:#fff}
  .contact:hover .contact-ico{background:#111;color:#fff;border-color:#111}
}

.contact-ico{
  flex:none;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid #dcdcdc;
  border-radius:50%;
  color:var(--ink);
  background:#fff;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.contact-ico svg{width:19px;height:19px;display:block}

.contact-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.contact-net{
  font-size:9px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:#a0a0a0;
}
.contact-handle{
  font-size:15px;
  letter-spacing:.01em;
  color:var(--ink);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.contact-arrow{flex:none;color:#b5b5b5}
.contact-arrow svg{width:16px;height:16px;display:block}

/* ══════════ ОБОРОТ СЕРТИФИКАТА ══════════ */
.back-inner{
  display:flex;
  flex-direction:column;
  justify-content:center;
  row-gap:clamp(6px,1.5vw,20px);
  height:100%;
  padding:clamp(10px,3vw,18px) clamp(12px,3.4vw,20px);
  text-align:left;
}
.back-p{
  display:block;
  margin:0;
  font-family:var(--font-serif);
  font-weight:400;
  font-size:clamp(9.8px,2.95vw,13px);
  line-height:1.5;
  color:#161513;
}
.back-rule{
  display:block;
  flex:none;
  height:1px;
  margin:0;
  background:linear-gradient(90deg,rgba(0,0,0,0),#ddd8d0 20%,#ddd8d0 80%,rgba(0,0,0,0));
}
.back-sign{
  display:block;
  margin:0;
  font-family:var(--font-script);
  font-size:clamp(20px,5.4vw,28px);
  line-height:1.15;
  color:var(--ink);
  text-align:center;
}
.back-sign svg{
  width:.72em;
  height:.72em;
  display:inline-block;
  vertical-align:-.03em;
  margin-left:.2em;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linejoin:round;
}
/* ══════════ TOAST ══════════ */
.toast{
  position:fixed;
  left:50%;
  bottom:calc(env(safe-area-inset-bottom) + 22px);
  z-index:120;
  max-width:min(92vw,420px);
  padding:12px 16px;
  border-radius:10px;
  background:#111;
  color:#fff;
  font-size:12px;
  line-height:1.45;
  text-align:center;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,12px);
  transition:opacity .3s ease,transform .3s ease;
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ══════════ NOSCRIPT ══════════ */
.noscript{
  max-width:520px;
  margin:40px auto;
  padding:0 18px;
  font-family:var(--font-serif);
  text-align:center;
}
.noscript img{width:100%;height:auto;margin:18px 0}

/* ══════════ АНИМАЦИИ ══════════ */
@keyframes writeIn{
  from{clip-path:inset(-30% 100% -30% 0)}
  to{clip-path:inset(-30% 0 -30% 0)}
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes fadeUpSm{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes fadeIn{
  to{opacity:1}
}
@keyframes wordIn{
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}
@keyframes hintPulse{
  0%{opacity:0}
  14%{opacity:1}
  50%{opacity:.6}
  86%{opacity:1}
  100%{opacity:0}
}

/* ══════════ АДАПТИВ ══════════ */
@media (max-width:379px){
  .btn{font-size:12px;padding:12px 6px;gap:5px;letter-spacing:0}
  .btn svg{width:14px;height:14px}
  .actions{gap:8px}
}

@media (max-width:359px){
  .btn{font-size:11.5px;padding:12px 6px;letter-spacing:0}
  .btn svg{display:none}
}

@media (max-height:680px){
  .greeting{font-size:clamp(32px,10vw,48px)}
  .envelope-wrap{margin-top:20px}
  .headline{font-size:clamp(19px,5.2vw,26px)}
}

@media (min-width:720px){
  .stack{max-width:560px}
  .envelope{width:380px}
  .headline{font-size:34px;max-width:26ch}
  .cert-img{max-height:74svh}
  .back-p{font-size:16px;line-height:1.6}
  .back-sign{font-size:34px}
  .sheet{align-items:center;padding:24px}
  .sheet-panel{border-radius:18px;transform:translateY(14px) scale(.985)}
  .sheet.is-on .sheet-panel{transform:none}
}

@media (min-width:1200px){
  .stack{max-width:640px}
  .envelope{width:420px}
  .headline{font-size:36px;max-width:28ch}
}

/* невысокие десктопные окна: сцена помещается целиком, без прокрутки */
@media (min-width:720px) and (max-height:720px){
  .stack{max-width:500px}
  .headline{margin-bottom:12px}
}

/* уважение к «уменьшить движение» */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-delay:0ms !important;
    transition-duration:.01ms !important;
  }
  .greeting-text{clip-path:none}
  .envelope-wrap{opacity:1;transform:none}
  .reveal{visibility:visible;pointer-events:auto}
  .headline .w{opacity:1;transform:none;filter:none}
  .cert-card{opacity:1}
  .actions{opacity:1;transform:none}
  .again{opacity:1}
}