@font-face {
  font-family: "Marginalis";
  src: url("fonts/Marginalis-Regular.woff2?v=20261013b") format("woff2");
  font-weight: 400;
  font-display: block;
}
@font-face {
  font-family: "Marginalis";
  src: url("fonts/Marginalis-Medium.woff2?v=20261013b") format("woff2");
  font-weight: 500;
  font-display: block;
}
@font-face {
  font-family: "Marginalis Rounded";
  src: url("fonts/Marginalis-Rounded.woff2?v=20261013b") format("woff2");
  font-weight: 400;
  font-display: block;
}
@font-face {
  font-family: "Marginalis Rounded";
  src: url("fonts/Marginalis-RoundedMedium.woff2?v=20261013b") format("woff2");
  font-weight: 500;
  font-display: block;
}

:root {
  --dark: #191919;
  --cream: #f2e0ce;
  --red: #b5372d;
  --teal: #5d8b8f;
  --k: 1;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { background: var(--dark); }
/* touch: native snapping; mouse/trackpad paging is handled in script.js */
@media (pointer: coarse) { html { scroll-snap-type: y mandatory; } }
body { background: var(--dark); color: var(--cream); font-family: "Marginalis", sans-serif; overflow-x: hidden; font-synthesis: none; }
/* the family ships one weight per style — never let the browser fake a bold */
h1, h2 { font-weight: 400; }
img { display: block; max-width: none; -webkit-user-drag: none; }

/* ---------- slide scaffold ---------- */
.slide {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.stage {
  position: absolute;
  left: var(--ox, 0px); top: var(--oy, 0px);
  width: 1920px; height: 1080px;
  transform-origin: 0 0;
  transform: scale(var(--k));
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

.abs { position: absolute; }
/* Trim text boxes to cap height / baseline (what Figma's "cap height to baseline" does).
   Done with margins instead of `text-box: trim-both cap alphabetic`, which Chrome
   forgets on partial relayout (lines jumped after animations finished).
   Marginalis (hhea): ascent .95em, descent .25em, cap .7em → top .5lh-.35em, bottom .5lh-.35em */
.t { font-family: "Marginalis"; white-space: nowrap; margin-block: calc(.35em - .5lh) calc(.35em - .5lh); }
.r { font-family: "Marginalis Rounded"; }
.ln { display: block; }
.lbl { font-size: 33.75px; line-height: 45.14px; }
.c-dark { color: var(--dark); }
.c-cream { color: var(--cream); }
.c-red { color: var(--red); }
.c-teal { color: var(--teal); }

.chip {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  height: 54.093px;
  padding: 15.047px 30.093px;
  border-radius: 376.164px;
  white-space: nowrap;
}
.chip > span { font-size: 33.75px; line-height: 45.14px; margin-block: calc(.35em - .5lh) calc(.35em - .5lh); }
.bg-dark { background: var(--dark); }
.bg-cream { background: var(--cream); }
.bg-red { background: var(--red); }
.bg-teal { background: var(--teal); }

/* rotated box: outer = Figma bounding box, inner = rotated node */
.rb { position: absolute; display: flex; align-items: center; justify-content: center; }
.rb > * { flex: none; position: relative; }

.clip > div { width: 56.991px; height: 177.169px; }
.clip img { position: absolute; left: -2.502px; top: -2.498px; }

.dot > div { width: 123px; height: 123px; display: grid; place-items: center; }
.dot img { position: absolute; inset: 0; }
.dot span { position: relative; font-size: 80px; line-height: 117.75px; margin-block: calc(.35em - .5lh) calc(.35em - .5lh); }

/* ---------- animation system ---------- */
.js .a, .js .ch { opacity: 0; }
.is-in .a {
  animation: var(--anim, fadeUp) var(--dur, .9s) var(--ez, var(--ease)) var(--d, 0s) both;
}
.ch { display: inline-block; }
.is-in .ch {
  animation: var(--anim, chUp) var(--dur, .7s) var(--ez, var(--ease))
             calc(var(--base, 0s) + var(--i) * var(--step, .03s)) both;
}
/* entrance finished: release the element so hover / drag / WAAPI can move it */
.is-in .a.done, .is-in .ch.done { animation: none; opacity: 1; }

@keyframes fadeUp   { from { opacity: 0; translate: 0 60px; } to { opacity: 1; translate: 0 0; } }
@keyframes fadeDown { from { opacity: 0; translate: 0 -40px; } to { opacity: 1; translate: 0 0; } }
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeLeft { from { opacity: 0; translate: -80px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes chUp     { from { opacity: 0; translate: 0 .6em; } to { opacity: 1; translate: 0 0; } }
@keyframes chPop {
  0% { opacity: 0; scale: .2; }
  60% { opacity: 1; scale: 1.18; }
  100% { opacity: 1; scale: 1; }
}
@keyframes pop {
  0% { opacity: 0; scale: .2; }
  60% { opacity: 1; scale: 1.12; }
  80% { scale: .96; }
  100% { opacity: 1; scale: 1; }
}
/* thrown onto the table */
@keyframes drop {
  0% { opacity: 0; translate: var(--fx, 0px) var(--fy, -160px); scale: 1.25; rotate: var(--fr, -10deg); }
  60% { opacity: 1; }
  100% { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; }
}
/* paperclips flying in */
@keyframes fly {
  from { opacity: 0; translate: var(--fx, 0px) var(--fy, -500px); rotate: var(--fr, 160deg); }
  to { opacity: 1; translate: 0 0; rotate: 0deg; }
}
@keyframes bounceIn {
  0% { opacity: 0; translate: 0 -900px; }
  55% { opacity: 1; translate: 0 0; }
  70% { translate: 0 -60px; }
  84% { translate: 0 0; }
  92% { translate: 0 -14px; }
  100% { opacity: 1; translate: 0 0; }
}
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -16px; } }
@keyframes wipeX  { from { opacity: 1; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes wipeY  { from { opacity: 1; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes wipeUp { from { opacity: 1; clip-path: inset(100% 0 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes fromRight { from { opacity: 1; translate: 110% 0; } to { opacity: 1; translate: 0 0; } }
@keyframes fromBottom { from { opacity: 1; translate: 0 100%; } to { opacity: 1; translate: 0 0; } }
@keyframes toTeal { from { color: var(--cream); } to { color: var(--teal); } }
/* tape: lifted off the table, slapped down, settles */
@keyframes stick {
  0%   { opacity: 0; translate: var(--fx, -40px) var(--fy, -70px); scale: 1.35; rotate: var(--fr, -8deg); filter: drop-shadow(0 40px 24px rgba(0, 0, 0, .45)); }
  55%  { opacity: 1; translate: 0 0; scale: .96; rotate: 0deg; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .25)); }
  75%  { scale: 1.02; }
  100% { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0)); }
}
/* tear-off calendar: the sheet hangs on one end while the tear runs along the
   edge, then breaks free and drops out of frame */
@keyframes tearOff {
  0%   { rotate: 0deg; translate: 0 0; }
  12%  { rotate: calc(var(--r1) * .15); }
  48%  { rotate: var(--r1); translate: 0 0; animation-timing-function: cubic-bezier(.5, 0, .9, .45); }
  99%  { visibility: visible; }
  100% { rotate: var(--r2); translate: var(--tx) 2600px; visibility: hidden; }
}
/* sheets bleed past the 1920×1080 frame (--sx/--sy/--sw/--sh) so letterbox margins match */
.tearoff {
  position: absolute;
  left: var(--sx, 0px); top: var(--sy, 0px);
  width: var(--sw, 1920px); height: var(--sh, 1080px);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 0 0; mask-position: 0 0;
  -webkit-mask-size: var(--sw, 1920px) var(--sh, 1080px); mask-size: var(--sw, 1920px) var(--sh, 1080px);
  will-change: transform;
}

/* ---------- 1 · hero ---------- */
#s1 .stage {
  background: var(--cream);
  --pl: -457px; --pt: -3241px;   /* torn paper */
  --tl: 158px;  --tt: 197px;     /* title */
}
#s1 .paper { left: var(--pl); top: var(--pt); width: 2834px; height: 3894px; }
#s1 .title { left: var(--tl); top: var(--tt); font-size: 180px; line-height: 180px; }
#s1 .title.masked {
  mask-image: url("assets/s1-mask.svg?v=20261013b");
  mask-size: 2834px 3894px;
  mask-repeat: no-repeat;
  /* the box sits (.5lh - .35em) above the cap line because of the trim margin */
  mask-position: calc(var(--pl) - var(--tl)) calc(var(--pt) - var(--tt) + .5lh - .35em);
}

/* slide 1: dark sheet hangs on its left end, right side drops first */
#s1 .tearoff {
  background: var(--dark);
  -webkit-mask-image: url("assets/s1-tear.svg?v=20261013b"); mask-image: url("assets/s1-tear.svg?v=20261013b");
  --sx: -457px; --sw: 2834px; --sh: 1700px;
  transform-origin: 457px 602px;
  --r1: 7deg; --r2: 26deg; --tx: -40px;
}
#s1 .tearoff .title { left: calc(var(--tl) - var(--sx)); top: calc(var(--tt) - var(--sy, 0px)); }
.m #s1 .tearoff { --sx: 0px; --sy: 0px; --sw: 1080px; --sh: 1920px; -webkit-mask-image: url("assets/s1-tear-m.svg?v=20261013b"); mask-image: url("assets/s1-tear-m.svg?v=20261013b"); transform-origin: 0 932px; }
#s1.is-in .tearoff { animation: tearOff 1.8s cubic-bezier(.45, 0, .55, 1) 1.1s both; }

/* ---------- 3 / 12 · glyph set ---------- */
.glyphs { top: 209px; font-size: 90px; line-height: 120px; letter-spacing: 27px; }

/* ---------- 5 · collage ---------- */
.sticker { filter: url(#sticker); }
.photo-frame { width: 938.665px; height: 574.264px; background: #393939; border: 20px solid #eaeaea; overflow: hidden; }
.card-house { width: 707px; height: 433px; background: var(--cream); overflow: hidden; }

/* ---------- 7 · handwriting ---------- */
#s7 .hl { color: var(--cream); }
#s7.is-in .hl { animation: toTeal .4s ease var(--d) both; }

/* slide 7: cream sheet over the left half hangs on its bottom corner and falls */
#s7 .tearoff {
  background: var(--cream);
  -webkit-mask-image: url("assets/s7-tear.svg?v=20261013b"); mask-image: url("assets/s7-tear.svg?v=20261013b");
  --sx: -600px; --sy: -600px; --sw: 2700px; --sh: 2280px;
  transform-origin: 1567px 1680px;
  --r1: -5deg; --r2: -9deg; --tx: -80px;
}
.m #s7 .tearoff { --sx: 0px; --sy: 0px; --sw: 1080px; --sh: 1920px; -webkit-mask-image: url("assets/s7-tear-m.svg?v=20261013b"); mask-image: url("assets/s7-tear-m.svg?v=20261013b"); transform-origin: 0 929px; --r1: 7deg; --r2: 26deg; --tx: -40px; }
#s7.is-in .tearoff { animation: tearOff 1.8s cubic-bezier(.45, 0, .55, 1) .5s both; }
/* the typed text and chip under the sheet come in as it falls away */
#s7.is-in .stage > .a, #s7.is-in .ln.a { animation-delay: calc(var(--d, 0s) + 1.3s); }

/* slide 9: the dark sheet over the cream half tears off like on slide 1 */
#s9 .tearoff {
  background: var(--dark);
  -webkit-mask-image: url("assets/s9-sheet.svg?v=20261013b"); mask-image: url("assets/s9-sheet.svg?v=20261013b");
  --sx: -600px; --sw: 3120px; --sh: 1700px;
  transform-origin: 600px 554px;
  --r1: 7deg; --r2: 26deg; --tx: -40px;
}
.m #s9 .tearoff { --sx: 0px; --sy: 0px; --sw: 1080px; --sh: 1920px; -webkit-mask-image: url("assets/s9-sheet-m.svg?v=20261013b"); mask-image: url("assets/s9-sheet-m.svg?v=20261013b"); transform-origin: 0 976px; }
#s9.is-in .tearoff { animation: tearOff 1.8s cubic-bezier(.45, 0, .55, 1) .9s both; }
#s9.is-in .after-tear { animation-delay: calc(var(--d, 0s) + .9s); }

/* ---------- 10 · styles switcher ---------- */
.w-medium { font-weight: 500; }

.switcher {
  left: 135px; top: 187px; width: 1650px; min-height: 584px;
  border-radius: 30px;
  padding: 60px 100px 100px;
  background: var(--card-bg);
  color: var(--card-fg);
  transition: background-color .5s var(--ease), color .5s var(--ease);
}
/* regular = cream, medium styles = red, rounded = teal */
.sw-regular        { --card-bg: var(--cream); --card-fg: var(--dark);  --caret: var(--red);  --tab-on-bg: var(--red);   --tab-on-fg: var(--cream); }
.sw-medium,
.sw-rounded-medium { --card-bg: var(--red);   --card-fg: var(--cream); --caret: var(--dark); --tab-on-bg: var(--cream); --tab-on-fg: var(--dark); }
.sw-rounded        { --card-bg: var(--teal);  --card-fg: var(--cream); --caret: var(--dark); --tab-on-bg: var(--cream); --tab-on-fg: var(--dark); }
.switcher .tabs { display: flex; gap: 20px; }
.switcher .tab {
  position: relative; cursor: pointer; font: inherit;
  border: 0;
  background: var(--dark); color: var(--cream);
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s, scale .2s;
}
.switcher .tab:hover { scale: 1.05; }
.switcher .tab.on { background: var(--tab-on-bg); color: var(--tab-on-fg); }
.switcher .txt {
  --gap: 60px;
  font-size: 100px; line-height: 120px; letter-spacing: -1px;
  margin-block: calc(var(--gap) + .35em - .5lh) calc(.35em - .5lh);
  white-space: pre-wrap; overflow-wrap: anywhere;
  transition: opacity .25s;
  cursor: text; outline: none; caret-color: var(--caret);
  user-select: text; -webkit-user-select: text;
  border-radius: 12px;
}
.switcher .txt:focus { outline: 3px dashed currentColor; outline-offset: 20px; }
.switcher .txt:empty::before { content: "впишите свой текст"; opacity: .45; }
/* idle typing caret after the sample — tells you the text is editable */
.switcher .txt::after {
  content: "";
  display: inline-block;
  width: .075em; height: .78em;
  margin-left: .1em;
  vertical-align: baseline;
  background: var(--caret);
  transition: background-color .5s var(--ease);
  animation: blink 1.05s steps(1, end) infinite;
}
.switcher .txt:focus::after { display: none; }
@keyframes blink { 50% { opacity: 0; } }
.edit-hint { opacity: .75; }
.tab:focus-visible, .hint:focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; }
.switcher .txt.swap { opacity: 0; }
@keyframes switchIn { from { opacity: 0; scale: .8; translate: 0 60px; } to { opacity: 1; scale: 1; translate: 0 0; } }

/* ---------- 11 · rounded ---------- */
#s11.is-in .dot > div { animation: bob 3.2s ease-in-out calc(var(--d) + 1.4s) infinite; }

/* ---------- 14 · cards ---------- */
.tile, .pcard { width: 245px; height: 287px; border: 3px solid var(--dark); border-radius: 10px; }
.tile { display: grid; place-items: center; }
.tile span { font-family: "Marginalis Rounded"; font-size: 200px; line-height: 40px; color: var(--cream); margin-block: calc(.35em - .5lh) calc(.35em - .5lh); }
.pcard { background: var(--cream); padding: 30px; display: flex; flex-direction: column; gap: 30px; }
.pcard .pic { position: relative; width: 179px; height: 173px; border-radius: 2px; overflow: hidden; flex: none; }
.pcard .pic img { position: absolute; }
.pcard .pic2 { position: absolute; left: calc(50% + .5px); top: 46px; width: 204px; height: 135px; transform: translateX(-50%); border-radius: 2px; overflow: hidden; }
.pcard .pic2 img { position: absolute; }
.pcard p { width: 179px; font-family: "Marginalis Rounded"; font-size: 25px; line-height: 40px; text-align: center; color: var(--dark); margin-block: calc(.35em - .5lh) calc(.35em - .5lh); }
.pcard p.reg { font-family: "Marginalis"; }
@media (hover: hover) {
  #s14 .rb.done { transition: scale .3s var(--ease); }
  #s14 .rb.done:hover { scale: 1.06; }
}

/* ---------- drag & drop (5, 11, 14) ---------- */
[data-drag] { cursor: grab; touch-action: none; }
.stamp > * { pointer-events: auto; }
.dragging { cursor: grabbing; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .35)); }
.returning { transition: left .6s var(--ease), top .6s var(--ease); }
@media (pointer: coarse) {
  [data-drag="big"] { touch-action: auto; cursor: auto; }
}
.hint { z-index: 900; border: 0; cursor: pointer; font: inherit; transition: scale .2s; }
.hint:hover { scale: 1.05; }

/* ---------- 15 · finale ---------- */
.lang { position: absolute; inset: 0; pointer-events: none; }
.lang > * { transition: opacity .45s var(--ease), translate .45s var(--ease); }
.credits-hit { z-index: 10; }
.lang.en > * { opacity: 0; translate: 0 -30px; }
.lang.en > .flip { opacity: 1; translate: 0 0; }
.lang.ru > .flip { opacity: 0; translate: 0 30px; }

.dl {
  z-index: 50; height: auto; padding: 26px 44px;
  text-decoration: none; cursor: pointer;
  transition: scale .25s var(--ease), box-shadow .3s;
}
.dl > span { font-size: 45px; line-height: 56px; }
.dl:hover { scale: 1.06; box-shadow: 0 0 0 14px rgba(242, 224, 206, .25); }
.dl:focus-visible { outline: 4px solid var(--dark); outline-offset: 6px; }
.is-in .dl.done { animation: dlPulse 2.4s ease-in-out 1s 3; }
@keyframes dlPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242, 224, 206, .45); }
  50% { box-shadow: 0 0 0 18px rgba(242, 224, 206, 0); }
}

/* ---------- mobile: portrait 1080×1920 stages ---------- */
.m .slide { height: auto; aspect-ratio: 9 / 16; }
/* desktop: let paper / decorations bleed into the letterbox margins */
html:not(.m) .stage { overflow: visible; }
.m .stage { width: 1080px; height: 1920px; }
.m .lbl { font-size: 40px; line-height: 52px; }
.m .chip { height: auto; padding: 18px 36px; }
.m .chip > span { font-size: 40px; line-height: 52px; }
.m #s1 .stage { --pt: -2911px; --tl: 60px; --tt: 680px; }
.m #s1 .title { font-size: 112px; line-height: 122px; }
.m #s9 .ul { text-decoration: underline 4px var(--teal); text-underline-offset: 14px; }
.m #s9 .ulw { text-decoration: underline wavy 4px var(--teal); text-underline-offset: 14px; }
.m .switcher .txt { --gap: 56px; font-size: 62px; line-height: 86px; }
.m .switcher { min-height: 0; }
.m .dl { justify-content: center; padding: 44px 0; }
.m .dl > span { font-size: 64px; line-height: 76px; }
/* name line breaks: desktop 3+3, mobile 2+2+2 */
.mbr, .mplus { display: none; }
.m .mbr, .m .mplus { display: inline; }
.m .dbr { display: none; }
.m #s15 .lang .chip > span { font-size: 34px; line-height: 44px; }
.m .switcher .tabs { gap: 14px; flex-wrap: wrap; }
.m .glyphs .ln { text-wrap: balance; }

@media (prefers-reduced-motion: reduce) {
  .js .a, .js .ch { opacity: 1; }
  .is-in .a, .is-in .ch, #s1.is-in .stage, #s11.is-in .dot > div { animation: none !important; }
  .tearoff { display: none; }
  #s7 .hl { color: var(--teal); }
  .switcher .txt::after { animation: none; }
}