:root{
  --ink:#07080a;
  --ink-2:#0e1013;
  --steel:#8e979f;
  --steel-dim:#5b636b;
  --steel-hi:#cfd6dc;
  --chrome-hi:#eef2f5;
  --chrome-mid:#9aa4ad;
  --chrome-lo:#3a4148;
  --ember:#c9694a;
  --paper:#f2efe9;
  --paper-dim:#d8d3c9;
  --gold:#c9a86a;
  --radius:18px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --font-body:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-display:'Unbounded',var(--font-body);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip;overscroll-behavior-y:none}
body{
  background:var(--ink);
  color:var(--chrome-hi);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}

/* ---------- атмосфера ---------- */
.grain{
  position:fixed;inset:-50%;z-index:9;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 1.2s steps(3) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)} 33%{transform:translate(-2%,1%)} 66%{transform:translate(1%,-2%)} 100%{transform:translate(0,0)}
}
.vignette{
  position:fixed;inset:0;z-index:8;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 45%,transparent 40%,rgba(0,0,0,.55) 100%);
}
/* ---------- структура сцены ---------- */
.stage{position:relative;z-index:2}
.spacer{height:calc(var(--scroll-screens, 6) * 100svh)}
.scene{position:relative;width:100%;min-height:100svh;min-height:100dvh}

.scene--photos{
  position:fixed;inset:0;z-index:3;overflow:hidden;pointer-events:none;
  background:
    radial-gradient(90% 70% at 50% 18%,#15181c 0%,#0b0d10 55%,#060708 100%);
}
.scene--photos::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 55% at 50% 40%,transparent 30%,rgba(0,0,0,.62) 100%);
}

/* поверхность: тонкая металлическая текстура */
.photo-field{
  position:absolute;inset:0;
  perspective:1400px;perspective-origin:50% 46%;
  transform-style:preserve-3d;
  will-change:transform;
}
.photo-field::before{
  content:"";position:absolute;inset:-10%;
  background:
    repeating-linear-gradient(115deg,rgba(255,255,255,.028) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(25deg,rgba(0,0,0,.22) 0 2px,transparent 2px 9px),
    linear-gradient(160deg,#191c20,#0a0b0d 60%,#101215);
  opacity:.9;
}

/* отпечаток */
.print{
  position:absolute;left:50%;top:50%;
  width:var(--w);height:var(--h);
  margin-left:calc(var(--w) / -2);margin-top:calc(var(--h) / -2);
  transform:translate3d(calc(var(--x) + var(--flight-x,0px)),calc(var(--y) + var(--flight-y,0px)),var(--z)) rotate(calc(var(--rot) + var(--flight-spin,0deg)));
  transform-style:preserve-3d;
  will-change:transform;
  border-radius:3px;
  background:#14171b;
  box-shadow:
    0 calc(var(--depth) * 1px) calc(var(--depth) * 2.4px) rgba(0,0,0,calc(.42 + var(--depth) * .012)),
    0 1px 0 rgba(255,255,255,.06) inset,
    0 0 0 1px rgba(255,255,255,.045) inset;
  opacity:0;
}
.print.is-in{opacity:1}
.print img{
  display:block;width:100%;height:100%;object-fit:cover;border-radius:2px;
  filter:saturate(.92) contrast(1.06) brightness(.96);
  pointer-events:none;-webkit-user-drag:none;
}
.print::after{
  content:"";position:absolute;inset:0;border-radius:2px;pointer-events:none;
  background:linear-gradient(150deg,rgba(255,255,255,.10),transparent 42%,rgba(0,0,0,.18));
  mix-blend-mode:soft-light;
}

/* подсказка */
.scroll-hint{
  position:absolute;left:50%;bottom:max(26px,env(safe-area-inset-bottom));z-index:5;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  color:var(--steel);font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.scroll-hint__line{
  width:1px;height:46px;background:linear-gradient(var(--steel-hi),transparent);
  animation:hintPulse 2.1s var(--ease) infinite;
}
@keyframes hintPulse{0%,100%{opacity:.25;transform:scaleY(.7)}50%{opacity:1;transform:scaleY(1)}}
.scroll-hint.is-out{opacity:0;transform:translate(-50%,14px)}

/* ---------- КОНВЕРТ ---------- */
.scene--envelope{
  position:fixed;inset:0;z-index:4;
  overflow:hidden;
  opacity:0;pointer-events:none;
  background:radial-gradient(80% 60% at 50% 40%,#111418 0%,#08090b 62%,#050506 100%);
  transition:opacity .6s var(--ease);
}
.scene--envelope.is-on{opacity:1;pointer-events:auto}

.envelope-stage{position:relative;min-height:100dvh;display:grid;place-items:center;padding-top:25dvh;--env-w:min(94vw,430px,63dvh)}
.envelope-wrap{
  position:relative;
  width:var(--env-w);
  aspect-ratio:1.55/1;
}
.envelope{
  position:relative;width:100%;height:100%;
  perspective:calc(var(--env-w) * 2.5);
  perspective-origin:50% 28%;
  isolation:isolate;
}
.envelope__back,.envelope__front,.envelope__pocket{
  position:absolute;inset:0;
  background:
    linear-gradient(155deg,#1d2126 0%,#12151a 45%,#0c0e11 100%);
  box-shadow:0 40px 70px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.05) inset;
}
.envelope__back{border-radius:6px;transform:translateZ(0)}
.envelope__back::after{
  content:"";position:absolute;inset:0 2% auto;height:2px;
  background:linear-gradient(90deg,transparent,#626b75,transparent);
  opacity:.55;
}
.envelope__pocket{
  border-radius:6px;
  clip-path:polygon(0 0,50% 42%,100% 0,100% 100%,0 100%);
  background:linear-gradient(160deg,#20252b,#14181d 60%,#0b0d10);
  box-shadow:0 -1px 0 rgba(255,255,255,.07) inset;
  overflow:hidden;
}
.envelope__front{
  border-radius:6px;
  clip-path:polygon(0 100%,0 26%,50% 64%,100% 26%,100% 100%);
  background:repeating-linear-gradient(100deg,#ffffff08 0 1px,transparent 1px 6px),linear-gradient(170deg,#242a31,#151a1f 55%,#0c0f12);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 -18px 34px -18px rgba(0,0,0,.9) inset;
  z-index:4;
}
.envelope__flap{
  pointer-events:none;
  position:absolute;left:0;right:0;top:0;height:69%;z-index:6;
  transform-origin:50% 0%;
  transform-style:preserve-3d;
  transform:rotateX(0deg);
  will-change:transform;
}
.envelope__flap-inner{
  position:absolute;inset:0;
  clip-path:polygon(0 0,100% 0,50% 100%);
  border-radius:6px 6px 0 0;
  background:linear-gradient(175deg,#2a3138 0%,#1a1f25 55%,#0f1216 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.10) inset;
  display:grid;place-items:center;
  padding-bottom:16%;
}
.envelope__flap-inner::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(100deg,rgba(255,255,255,.035) 0 1px,transparent 1px 6px);
  clip-path:polygon(0 0,100% 0,50% 100%);
}
.envelope__seal{
  position:absolute;left:50%;top:59%;translate:-50% 0;
  width:44px;height:44px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#e6c98f,#b8914f 55%,#7d5f2c 100%);
  box-shadow:0 6px 14px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.25) inset;
  z-index:3;
}
.envelope__seal::after{
  content:"AS";position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--font-display);font-size:12px;letter-spacing:.04em;color:#3a2b12;
}

/* карман, из которого выходит карта */
.card-slot{
  position:absolute;left:6%;right:6%;top:2%;
  display:flex;justify-content:center;
  clip-path:inset(var(--mouth-mask, 48%) -20px -24px);
  z-index:2;
}

/* ---------- КАРТА ---------- */
.card{
  width:100%;
  aspect-ratio:1.6/1;
}
.card__face{
  position:relative;width:100%;height:100%;overflow:hidden;
  border-radius:12px;
  padding:5.2% 5.6% 0;
  display:flex;flex-direction:column;
  background:
    radial-gradient(120% 100% at 12% 0%,#22272d 0%,#14181d 38%,#0b0d10 100%);
  box-shadow:
    0 30px 60px -22px rgba(0,0,0,.95),
    0 0 0 1px rgba(255,255,255,.09) inset,
    0 1px 0 rgba(255,255,255,.16) inset;
  border:1px solid rgba(140,150,160,.22);
}
.card__face::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(98deg,rgba(255,255,255,.035) 0 1px,transparent 1px 7px),
    linear-gradient(135deg,rgba(255,255,255,.07),transparent 38%,rgba(0,0,0,.35));
  mix-blend-mode:overlay;
}
.card__face::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:12px;
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset;
  z-index:3;
  background:linear-gradient(110deg,transparent 32%,#d8e9ff24 46%,#fff5 50%,#d8e9ff16 55%,transparent 68%);
  background-size:300% 100%;
  background-position:100% 0;
}
@media (prefers-reduced-motion:no-preference){
  .card-slot.is-sliding .card__face::after{animation:card-glint .85s ease-out both}
}
@keyframes card-glint{to{background-position:0 0}}
.card__head{
  display:flex;align-items:baseline;justify-content:flex-end;
  position:relative;z-index:2;
}
.card__no{
  font-family:var(--font-display);font-size:clamp(10px,2.6vw,15px);letter-spacing:.12em;
  color:#3e454d;
  text-shadow:0 -1px 0 #6e788255,0 1px 0 #080a0c,0 2px 3px #0009;
}
.card__secret{position:relative;flex:1;margin-top:3.4%;z-index:2;min-height:0}
.scratch{z-index:2;pointer-events:none;position:absolute;inset:0;border-radius:9px;overflow:hidden;touch-action:none;cursor:crosshair}
.scratch.is-ready{pointer-events:auto}
.scratch__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.card__reveal{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:3% 5%;pointer-events:none}
.card__kicker{
  margin:0 0 4px;font-size:clamp(7px,1.9vw,10px);letter-spacing:.28em;text-transform:uppercase;color:var(--gold)
}
.card__name{
  margin:0;font-family:var(--font-display);font-weight:600;
  font-size:calc(var(--env-w) * .052);overflow-wrap:anywhere;line-height:1.14;letter-spacing:.01em;
  background:linear-gradient(180deg,#fff,#b9c3cb 55%,#f2f5f8);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.card__desc{
  margin:6px 0 0;font-size:clamp(9px,2.4vw,13px);line-height:1.35;color:var(--steel-hi);max-width:88%
}
.card__term{
  margin:8px 0 0;font-size:clamp(8px,2.1vw,11px);letter-spacing:.16em;text-transform:uppercase;color:var(--steel-dim)
}
.card__foot{
  margin-top:auto;padding:0 0 4.4%;
  display:flex;align-items:center;gap:8px;position:relative;z-index:2;
}
.card__metal{
  flex:1;height:1px;
  background:linear-gradient(90deg,transparent,var(--steel-dim) 20%,var(--steel-hi) 55%,var(--steel-dim) 85%,transparent);
  opacity:.6;
}

/* подсказка стирания */
/* ---------- ФИНАЛ ---------- */
.final__heading,.final__actions{
  position:absolute;left:0;right:0;text-align:center;
  animation:final-arrive .4s var(--ease) both;
}
.final__heading[hidden],.final__actions[hidden]{display:none}
.final__heading{bottom:199%;z-index:8}
.final__lead{
  margin:0;font-family:var(--font-display);font-weight:500;
  font-size:calc(var(--env-w) * .034);line-height:1.25;color:var(--chrome-hi);
}
.final__sign{
  margin:calc(var(--env-w) * .022) 0 0;
  font-size:calc(var(--env-w) * .015);letter-spacing:.12em;color:var(--steel);
}
.final__actions{
  top:38%;z-index:5;display:grid;justify-items:center;
  gap:calc(var(--env-w) * .012);
}
.final__site{
  color:var(--gold);font-size:calc(var(--env-w) * .024);
  line-height:1.4;padding:2px 8px;text-decoration:none;
}
.final__site:hover,.final__site:focus-visible{text-decoration:underline}
@keyframes final-arrive{from{opacity:0}to{opacity:1}}

.btn{
  --btn-h:56px;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--btn-h);padding:0 30px;
  border-radius:99px;font-weight:600;font-size:15px;letter-spacing:.02em;
  text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.btn:active{transform:scale(.97)}
.btn--primary{
  --btn-h:max(32px,calc(var(--env-w) * .083));width:auto;max-width:100%;padding:0 calc(var(--env-w) * .038);font-size:calc(var(--env-w) * .025);
  color:#0a0b0d;
  background:linear-gradient(180deg,#f6f8fa,#c3ccd4 52%,#e9eef2);
  box-shadow:0 18px 40px -18px rgba(210,225,240,.55),0 1px 0 rgba(255,255,255,.7) inset,0 -1px 0 rgba(0,0,0,.18) inset;
}
.btn--primary:hover{box-shadow:0 22px 50px -18px rgba(210,225,240,.75),0 1px 0 rgba(255,255,255,.8) inset}
/* ---------- адаптив ---------- */
@media (max-width:520px){
  .card__face{padding:6% 6.2% 0}
}
@media (prefers-reduced-motion:reduce){
  .grain{animation:none}
  .scroll-hint__line{animation:none}
  .final__heading,.final__actions{animation:none}
  *{scroll-behavior:auto !important}
}


#certificateError{
  max-width:32rem;margin:20vh auto;padding:0 24px;
  text-align:center;font-size:1rem;line-height:1.6;
}