/* Majento portfolio deck for Shayana Pharm */

@font-face{font-family:"Russo One";src:url("fonts/RussoOne-400-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Exo 2";src:url("fonts/Exo2-400-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Exo 2";src:url("fonts/Exo2-600-latin.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --bg:#fafafa;
  --ink:#111115;
  --ink-2:#4a4a55;
  --m:#e5007d;
  --c:#00ccea;
  --y:#ffeb29;
  --black:#0b0b0e;
  --pad-x:clamp(20px,4.4vw,64px);
  --pad-y:clamp(26px,4.2vh,52px);
  --pw:clamp(150px,min(15.2vw,25vh),226px);
  --ease:cubic-bezier(.16,1,.3,1);
}

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

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

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Exo 2",system-ui,sans-serif;
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.5;
  hyphens:none;
  -webkit-hyphens:none;
  overflow-wrap:normal;
  word-break:keep-all;
  -webkit-font-smoothing:antialiased;
}

::selection{background:var(--m);color:#fff}
:focus-visible{outline:3px solid var(--m);outline-offset:4px;border-radius:2px}

img{max-width:100%}

/* ---------- deck scrolling ---------- */

#deck{
  height:100svh;
  overflow-y:scroll;
  overflow-x:hidden;
  scroll-snap-type:y mandatory;
  scrollbar-width:thin;
  scrollbar-color:var(--m) rgba(17,17,21,.08);
}
#deck::-webkit-scrollbar{width:10px}
#deck::-webkit-scrollbar-track{background:rgba(17,17,21,.06)}
#deck::-webkit-scrollbar-thumb{background:var(--m);border-radius:0}

.screen{
  position:relative;
  min-height:100svh;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(18px,2.6vh,34px);
  padding:var(--pad-y) var(--pad-x);
  overflow:clip;
  isolation:isolate;
}

/* ---------- flat diagonal slabs ---------- */

.slab{
  position:absolute;
  z-index:-1;
  transform-origin:center;
  pointer-events:none;
}
.slab--m{background:var(--m)}
.slab--c{background:var(--c)}
.slab--y{background:var(--y)}

/* ---------- type ---------- */

.h1,.h2{
  font-family:"Russo One",system-ui,sans-serif;
  font-weight:400;
  letter-spacing:-.005em;
  line-height:1;
  margin:0;
  text-wrap:balance;
}
.h1{font-size:clamp(2.1rem,4.9vw,4.4rem)}
.h1--tight{line-height:.98}
.h2{font-size:clamp(1.8rem,3.5vw,3.1rem)}

.lede{
  margin:clamp(14px,2vh,22px) 0 0;
  font-size:clamp(1rem,1.35vw,1.28rem);
  color:var(--ink-2);
  max-width:34ch;
}
.sub{
  margin:10px 0 0;
  font-size:clamp(.95rem,1.1vw,1.08rem);
  color:var(--ink-2);
  max-width:60ch;
}
.body{
  margin:14px 0 0;
  max-width:58ch;
  font-size:clamp(.95rem,1.05vw,1.05rem);
}
.caption{
  margin:0;
  font-size:.86rem;
  color:var(--ink-2);
}
.caption--center{text-align:center}

.head{display:flex;flex-direction:column;gap:0}
.head--center{text-align:center;align-items:center}
.head--split{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(20px,3vw,56px);
  align-items:end;
}
.head__aside{display:flex;flex-direction:column;gap:12px;align-items:flex-start}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- logo ---------- */

.logo--big{width:clamp(150px,15vw,210px);height:auto;display:block}
.corner-logo{
  position:absolute;
  top:clamp(18px,2.6vh,30px);
  right:var(--pad-x);
  width:92px;
  height:auto;
  opacity:.55;
  z-index:3;
}

/* ---------- buttons ---------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:16px 30px;
  border-radius:999px;
  font-family:"Exo 2",sans-serif;
  font-weight:600;
  font-size:1rem;
  text-decoration:none;
  white-space:nowrap;
  transition:transform .28s var(--ease),background-color .2s linear,color .2s linear;
}
.btn--k{background:var(--black);color:#fff}
.btn--k:hover{background:var(--m)}
.btn--m{background:var(--m);color:#fff}
.btn--m:hover{background:var(--black)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btns{flex-direction:column}

/* ---------- opening + closing ---------- */

.screen--open,.screen--close{justify-content:center;gap:clamp(12px,2vh,24px)}
.screen--open .h1,.screen--close .h1{max-width:20ch}
.screen--close .h1{align-self:flex-start}
.open,.close{
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  align-items:center;
  gap:clamp(20px,3vw,48px);
  width:100%;
  min-height:0;
}
.open__text,.close__text{align-self:start}
.art{
  display:block;
  width:100%;
  height:auto;
  max-height:74svh;
  object-fit:contain;
}
.art--portrait{max-height:66svh;width:auto;margin-inline:auto}
.open__art,.close__art,.divider__art{display:flex;justify-content:center}

.zigzag{
  display:block;
  width:96px;
  height:22px;
  margin-top:clamp(18px,3vh,32px);
  color:var(--ink);
}

.contacts{
  display:flex;
  align-items:center;
  gap:16px;
  margin:22px 0 0;
  font-size:clamp(1rem,1.2vw,1.15rem);
  font-weight:600;
}
.contacts a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--m);padding-bottom:2px}
.contacts a:hover{color:var(--m)}
.contacts .dot{width:7px;height:7px;background:var(--c);display:inline-block}

.open-slab-1{width:74vw;height:14vh;left:-10vw;bottom:-2vh;transform:skewY(-7deg)}
.open-slab-2{width:30vw;height:8vh;left:-8vw;bottom:14vh;transform:skewY(-7deg)}
.open-slab-3{width:20vw;height:7vh;right:-6vw;top:6vh;transform:skewY(-7deg)}
.close-slab-1{width:70vw;height:13vh;right:-10vw;bottom:-1vh;transform:skewY(7deg)}
.close-slab-2{width:26vw;height:8vh;right:-6vw;bottom:13vh;transform:skewY(7deg)}
.close-slab-3{width:18vw;height:6vh;left:-4vw;top:7vh;transform:skewY(7deg)}

/* ---------- video grids ---------- */

.vgrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.8vw,26px);
  width:min(1080px,100%);
  margin-inline:auto;
}
.vframe{
  position:relative;
  aspect-ratio:16/9;
  background:var(--black);
  border-radius:12px;
  overflow:hidden;
}
.vframe iframe,.vframe .film__iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}
.vcard{margin:0}
.vcard figcaption{
  margin-top:8px;
  font-size:.82rem;
  color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
.solo{width:min(980px,100%);margin-inline:auto;display:flex;flex-direction:column;gap:14px}
.vframe--solo{border-radius:14px}

.dlg-slab-1{width:19vw;height:13vh;left:-10vw;top:46vh;transform:skewY(-9deg)}
.dlg-slab-2{width:26vw;height:11vh;right:-8vw;bottom:6vh;transform:skewY(-9deg)}
.ani-slab-1{width:26vw;height:16vh;left:-10vw;top:44vh;transform:skewY(-8deg)}

/* ---------- films ---------- */

.films{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.8vw,26px);
  width:100%;
  max-width:min(100%,150svh);
  margin:0 auto;
}
.film{margin:0}
.film__btn{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16/9;
  padding:0;
  border:0;
  border-radius:12px;
  overflow:hidden;
  background:var(--black);
  cursor:pointer;
  transition:transform .3s var(--ease);
}
.film__btn:hover{transform:translateY(-4px)}
.film__poster{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:opacity .25s linear;
}
.film__btn:hover .film__poster{opacity:.72}
.film__play{
  position:absolute;
  left:50%;
  top:50%;
  translate:-50% -50%;
  width:58px;
  height:58px;
  border-radius:50%;
  background:var(--m);
  color:#fff;
  display:grid;
  place-items:center;
  transition:transform .3s var(--ease),background-color .2s linear;
}
.film__play svg{width:26px;height:26px;margin-left:3px}
.film__btn:hover .film__play{transform:scale(1.12);background:var(--black)}
.film__title{
  margin-top:10px;
  font-family:"Russo One",sans-serif;
  font-size:clamp(.95rem,1.2vw,1.15rem);
  line-height:1.15;
}
.films-slab-1{width:38vw;height:13vh;right:-8vw;top:8vh;transform:skewY(9deg)}
.films-slab-2{width:32vw;height:10vh;left:-8vw;bottom:6vh;transform:skewY(9deg)}

/* ---------- divider ---------- */

.divider{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);
  align-items:center;
  gap:clamp(24px,4vw,64px);
  width:100%;
}
.namelist{
  list-style:none;
  margin:clamp(24px,4vh,44px) 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.namelist li{
  font-family:"Russo One",sans-serif;
  font-size:clamp(1.1rem,1.9vw,1.7rem);
  display:flex;
  align-items:center;
  gap:14px;
}
.namelist li::before{
  content:"";
  width:clamp(26px,3vw,46px);
  height:6px;
  flex:none;
  background:var(--m);
}
.namelist li:nth-child(2)::before{background:var(--c)}
.namelist li:nth-child(3)::before{background:var(--y)}

.div-slab-1{width:40vw;height:13vh;left:-12vw;top:6vh;transform:skewY(-9deg)}
.div-slab-2{width:30vw;height:11vh;right:-6vw;top:8vh;transform:skewY(-9deg)}
.div-slab-3{width:34vw;height:11vh;left:-10vw;bottom:-1vh;transform:skewY(-9deg)}

/* ---------- figures (numbers) ---------- */

.figures{
  display:flex;
  gap:clamp(18px,2.4vw,40px);
  margin:0;
}
.figure{display:flex;flex-direction:column;gap:6px}
.figures dt{
  font-family:"Russo One",sans-serif;
  font-size:clamp(1.5rem,2.5vw,2.3rem);
  line-height:1;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.figures dd{
  align-self:flex-start;
  margin:0;
  padding:4px 9px 5px;
  font-size:.78rem;
  font-weight:600;
  line-height:1.2;
  color:#fff;
  background:var(--m);
}
.figure:nth-child(2) dd{background:var(--c);color:var(--ink)}
.figure:nth-child(3) dd{background:var(--y);color:var(--ink)}

/* ---------- phone mockups ---------- */

.rail{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:clamp(10px,1.4vw,24px);
  width:100%;
  padding:16px 0 clamp(20px,3vh,34px);
  overflow:visible;
  scrollbar-width:none;
}
.rail::-webkit-scrollbar{display:none}
.rail--tight{gap:clamp(8px,1vw,16px);width:auto;justify-content:flex-start;flex:none}
.rail--tight .phone{--pw:clamp(104px,min(9.4vw,17.5vh),158px)}
.rail--six{--pw:clamp(120px,min(12.1vw,20.4vh),182px)}

.phone{
  --r:calc(var(--pw) * .118);
  position:relative;
  flex:none;
  width:var(--pw);
  /* без aspect-ratio: высоту задаёт сам экран 390x844, ничего не обрезается;
     сверху полоса под статус-бар и «остров», снизу полоса под home-индикатор */
  padding:calc(var(--pw) * .13) calc(var(--pw) * .022) calc(var(--pw) * .07);
  border-radius:var(--r);
  background:linear-gradient(150deg,#33333c 0%,#0b0b0e 26%,#0b0b0e 74%,#3a3a44 100%);
  box-shadow:0 22px 40px -18px rgba(17,17,21,.55),0 3px 10px rgba(17,17,21,.18);
  scroll-snap-align:center;
  transition:transform .5s var(--ease);
}
.phone--sm{--pw:clamp(126px,min(11.6vw,21vh),168px)}
.phone--xs{width:var(--pw)}
.phone img{
  width:100%;
  height:auto;
  aspect-ratio:390/844;
  object-fit:fill;
  display:block;
  border-radius:calc(var(--pw) * .03);
  background:var(--black);
}
.phone::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:var(--r);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
  pointer-events:none;
  z-index:2;
}
.phone::after{
  content:"";
  position:absolute;
  top:calc(var(--pw) * .034);
  left:50%;
  translate:-50% 0;
  width:26%;
  height:calc(var(--pw) * .075);
  border-radius:999px;
  background:#0b0b0e;
  z-index:3;
}
.tilt-l{transform:rotate(-6deg) translateY(2.2%)}
.tilt-r{transform:rotate(6deg) translateY(2.2%)}

/* ---------- black window ---------- */

.window{
  background:var(--black);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 26px 48px -22px rgba(17,17,21,.5),0 3px 10px rgba(17,17,21,.14);
  align-self:center;
  width:100%;
}
.window__bar{
  display:flex;
  align-items:center;
  gap:7px;
  height:30px;
  padding-left:14px;
}
.window__bar span{width:9px;height:9px;border-radius:50%;background:rgba(11,11,14,.72)}
.window--m .window__bar{background:var(--m)}
.window--y .window__bar{background:var(--y)}
.window--c .window__bar{background:var(--c)}
.window img{display:block;width:100%;height:auto}

.split{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) auto;
  align-items:center;
  gap:clamp(20px,3vw,48px);
  width:100%;
}

/* ---------- section slabs ---------- */

.meals-slab-1{width:66vw;height:20vh;left:-8vw;bottom:19vh;transform:skewY(-6deg)}
.meals-slab-2{width:18vw;height:8vh;right:-6vw;top:4vh;transform:skewY(-7deg)}
.meals2-slab-1{width:48vw;height:20vh;right:-10vw;bottom:8vh;transform:skewY(7deg)}
.pmc-slab-1{width:72vw;height:21vh;right:-10vw;bottom:15vh;transform:skewY(6deg)}
.pmc-slab-2{width:18vw;height:8vh;left:-6vw;bottom:2vh;transform:skewY(6deg)}
.sting-slab-1{width:56vw;height:19vh;left:-8vw;bottom:16vh;transform:skewY(-5deg)}
.sting-slab-2{width:18vw;height:8vh;right:-4vw;top:4vh;transform:skewY(-6deg)}

.screen--meals,.screen--meals2{--accent:var(--m)}
.screen--pmc{--accent:var(--c)}
.screen--sting{--accent:var(--y)}

/* ---------- motion ---------- */

.rail .phone{transform:var(--tilt,none) translateY(14px)}
.tilt-l{--tilt:rotate(-6deg)}
.tilt-r{--tilt:rotate(6deg)}
.is-in .rail .phone{transform:var(--tilt,none) translateY(0)}
.is-in .tilt-l{transform:rotate(-6deg) translateY(2.2%)}
.is-in .tilt-r{transform:rotate(6deg) translateY(2.2%)}
.rail .phone:nth-child(2){transition-delay:.06s}
.rail .phone:nth-child(3){transition-delay:.12s}
.rail .phone:nth-child(4){transition-delay:.18s}
.rail .phone:nth-child(5){transition-delay:.24s}
.rail .phone:nth-child(6){transition-delay:.3s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.001ms !important;animation-duration:.001ms !important}
  .rail .phone{transform:var(--tilt,none)}
}

/* ---------- tablet ---------- */

@media (max-width:1080px){
  .head--split{grid-template-columns:minmax(0,1fr);align-items:start}
  .head__aside{flex-direction:row;flex-wrap:wrap}
  .btns{flex-direction:row}
  .split{grid-template-columns:minmax(0,1fr)}
  .rail--tight{justify-content:center;width:100%}
}

/* ---------- mobile ---------- */

@media (max-width:760px){
  :root{
    --pw:clamp(200px,62vw,260px);
    --pad-y:clamp(30px,5vh,48px);
  }
  #deck{scroll-snap-type:y proximity}
  .screen{
    min-height:100svh;
    height:auto;
    justify-content:center;
    padding-top:clamp(64px,10vh,92px);
    padding-bottom:clamp(36px,6vh,56px);
    gap:20px;
  }
  .slab{display:none}
  .screen--open .h1,.screen--close .h1{max-width:none}
  .corner-logo{width:74px;top:18px;right:20px}

  .open,.close,.divider{grid-template-columns:minmax(0,1fr);gap:20px}
  .open__art,.close__art,.divider__art{order:-1}
  .art{max-height:32svh}
  .art--portrait{max-height:34svh}
  .close__art{order:2}
  .lede{max-width:none}
  .zigzag{margin-top:18px}

  .vgrid{grid-template-columns:minmax(0,1fr);gap:16px}
  .films{grid-template-columns:minmax(0,1fr);max-width:none}

  .rail{
    justify-content:flex-start;
    overflow-x:auto;
    overflow-y:visible;
    padding-bottom:28px;
    scroll-snap-type:x mandatory;
    gap:14px;
    margin-inline:calc(var(--pad-x) * -1);
    padding-inline:var(--pad-x);
    width:100vw;
    max-width:100vw;
  }
  .rail--six,.phone--sm{--pw:clamp(200px,62vw,260px)}
  .rail{
    background-image:linear-gradient(97deg,transparent 0 6%,var(--accent,#e5007d) 6% 78%,transparent 78%);
    background-repeat:no-repeat;
    background-size:100% 46%;
    background-position:0 88%;
    padding-block:10px 26px;
  }
  .rail .phone,.is-in .rail .phone,.tilt-l,.tilt-r,.is-in .tilt-l,.is-in .tilt-r{transform:none}

  .figures{flex-wrap:wrap;gap:16px 22px}
  .figures dt{font-size:clamp(1.4rem,7vw,1.9rem)}

  .split{gap:20px}
  .window{width:100%}
  .btn{padding:14px 24px;font-size:.95rem}
  .contacts{flex-wrap:wrap;gap:12px}
}

@media (max-width:760px) and (orientation:portrait){
  .h1{font-size:clamp(1.85rem,8.4vw,2.6rem)}
  .h2{font-size:clamp(1.6rem,7.6vw,2.2rem)}
}

/* short desktop windows */
@media (min-width:761px) and (max-height:760px){
  .art{max-height:64svh}
  .vgrid{width:min(880px,100%)}
  .solo{width:min(820px,100%)}
}

/* facade players used when the deck is opened straight from disk */
.vframe--facade{background:var(--black)}
.film__btn--link{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:inherit}
.film__btn--link:hover{transform:none}
.film__btn--link:hover .film__poster{opacity:.72}