/* ══════════════════════════════════════════════════════════════════════════
   THE FREE MASTERCLASS AS AN OBJECT, 8 Oct 2026. Pair with js/mclass.js.
   Same file on both sites (build/academy/site/css/mclass.css and
   build/landing/site/css/mclass.css): 🔴 change both.

   Founder, 8 Oct 2026: «make a 3d looking object of this image (which will
   represent the free gifted masterclass) and then when they click on it it will
   transfer them into a new page (the platform where the masterclass is located)».
   Placement, his answer the same day: both sites.

   The object: a landscape travel album. His cover image is the front board; a
   plum linen spine with gold lettering; the page block on three edges; a gold
   ribbon bookmark hanging out of the bottom; a gold «Подарок» seal on the cover.
   It tilts toward the mouse. Pressed, the cover swings open on its spine, and the
   big plane (css/loader.css) takes her to the platform.

   Pure CSS 3D. Every face is a plain element in one preserve-3d box. js/mclass.js
   only writes custom properties (CSSOM, which the strict CSP allows) and adds
   .is-open. No script, no 3D: it is still the cover image inside a link.
   ══════════════════════════════════════════════════════════════════════════ */
.mk{--w:520px;--d:32px;--h:calc(var(--w) * .5623);   /* the cover is 1821×1024 */
  --rx:-17deg;--ry:25deg;--rz:-2deg;position:relative}
.mk__obj{position:relative;display:block;width:var(--w);max-width:100%;margin:0 auto;padding:34px 0 64px;
  perspective:1700px;perspective-origin:50% 40%;text-decoration:none;color:inherit;cursor:pointer;
  -webkit-tap-highlight-color:transparent;border-radius:10px}
.mk__obj:focus-visible{outline:3px solid #F0B760;outline-offset:6px}
.mk__scene{position:relative;display:block;width:var(--w);height:var(--h);transform-style:preserve-3d;
  animation:mkFloat 6.5s ease-in-out infinite}
.mk__book{position:absolute;left:0;top:0;width:var(--w);height:var(--h);transform-style:preserve-3d;
  transform:rotateX(calc(var(--rx) + var(--tx,0deg))) rotateY(calc(var(--ry) + var(--ty,0deg))) rotateZ(var(--rz));
  transition:transform .7s cubic-bezier(.16,1,.3,1)}
.mk__f{position:absolute;left:0;top:0;display:block;-webkit-backface-visibility:hidden;backface-visibility:hidden}

/* the front board, hinged on the spine */
.mk__cover{position:absolute;left:0;top:0;width:var(--w);height:var(--h);transform-style:preserve-3d;transform-origin:0 50%;
  transform:translateZ(calc(var(--d) / 2));transition:transform .9s cubic-bezier(.55,.05,.2,1)}
.mk__front{width:100%;height:100%;border-radius:3px 6px 6px 3px;overflow:hidden;background:#3D213D;
  box-shadow:inset 0 0 0 1px rgba(255,236,210,.18)}
.mk__front picture,.mk__front img{display:block;width:100%;height:100%;object-fit:cover}
/* the hinge groove a hardcover has a finger's width from the spine */
.mk__front::before{content:"";position:absolute;z-index:2;left:3.2%;top:0;bottom:0;width:7px;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(255,240,220,.22) 45%,rgba(0,0,0,.12));mix-blend-mode:multiply}
/* light on the board: moves with the mouse (--gx), brightens when she points at it */
.mk__glare{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    linear-gradient(112deg,rgba(255,255,255,0) calc(var(--gx,38%) - 22%),rgba(255,250,240,.24) var(--gx,38%),rgba(255,255,255,0) calc(var(--gx,38%) + 18%)),
    linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 30%,rgba(40,10,30,.18));
  opacity:.75;transition:opacity .4s}
.mk__obj:hover .mk__glare{opacity:1}
/* inside of the front board: the plum endpaper, seen once it opens */
.mk__coverback{width:100%;height:100%;transform:rotateY(180deg);border-radius:6px 3px 3px 6px;
  background:#4C1F3C url(../assets/img/tex-paper-plum.webp) 0 0/384px 384px;
  box-shadow:inset 0 0 0 10px rgba(240,183,96,.0),inset 0 0 0 11px rgba(240,183,96,.35)}

/* the first page, under the board */
.mk__inside{width:var(--w);height:var(--h);transform:translateZ(calc(var(--d) / 2 - 2px));border-radius:2px 4px 4px 2px;
  background:#FCF0E5 url(../assets/img/tex-paper-ivory.webp) 0 0/768px 768px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;
  box-shadow:inset 18px 0 22px -14px rgba(60,25,10,.35)}
.mk__inside b{font:italic 500 clamp(18px,2.6vw,26px)/1.2 "Playfair Display",Georgia,serif;color:#2E1128}
.mk__back{width:var(--w);height:var(--h);transform:rotateY(180deg) translateZ(calc(var(--d) / 2));border-radius:6px 3px 3px 6px;
  background:#3D213D}

/* the spine: plum linen, gold foil */
.mk__spine{width:var(--d);height:var(--h);left:calc(var(--d) / -2);transform:rotateY(-90deg);border-radius:3px;
  background:
    linear-gradient(90deg,rgba(0,0,0,.35),rgba(255,255,255,.07) 30%,rgba(255,255,255,0) 55%,rgba(0,0,0,.3)),
    repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,rgba(0,0,0,.04) 1px 2px),
    #4C1F3C;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.mk__spine span{display:block;white-space:nowrap;transform:rotate(-90deg);
  font:600 calc(var(--d) * .42)/1 "Raleway",Arial,sans-serif;letter-spacing:.22em;text-transform:uppercase;
  color:#F1D087;text-shadow:0 1px 0 rgba(0,0,0,.4)}

/* the page block, a little inside the boards on three edges */
.mk__pages{background-color:#FBF2E6}
.mk__pages--r{width:var(--d);height:calc(var(--h) - 8px);top:4px;left:calc(var(--w) - var(--d) / 2 - 4px);transform:rotateY(90deg);
  background-image:linear-gradient(90deg,rgba(80,40,20,.25),rgba(80,40,20,0) 18%,rgba(80,40,20,0) 82%,rgba(80,40,20,.25)),
    repeating-linear-gradient(90deg,#E9DAC6 0 1px,#FFF9F0 1px 3px)}
.mk__pages--t{width:calc(var(--w) - 4px);height:var(--d);top:calc(var(--d) / -2 + 4px);left:0;transform:rotateX(90deg);
  background-image:linear-gradient(0deg,rgba(80,40,20,.2),rgba(80,40,20,0) 18%,rgba(80,40,20,0) 82%,rgba(80,40,20,.2)),
    repeating-linear-gradient(0deg,#E9DAC6 0 1px,#FFF9F0 1px 3px)}
.mk__pages--b{width:calc(var(--w) - 4px);height:var(--d);top:calc(var(--h) - var(--d) / 2 - 4px);left:0;transform:rotateX(-90deg);
  background-image:linear-gradient(0deg,rgba(80,40,20,.3),rgba(80,40,20,.05) 18%,rgba(80,40,20,.05) 82%,rgba(80,40,20,.3)),
    repeating-linear-gradient(0deg,#DCCAB3 0 1px,#F4E8D8 1px 3px)}

/* the ribbon bookmark, out of the bottom, between the pages */
.mk__ribbon{position:absolute;left:74%;top:calc(var(--h) - 10px);width:15px;height:58px;transform-origin:50% 0;
  transform:translateZ(1px);
  background:linear-gradient(90deg,#A86F1C,#F1D087 38%,#FFF1CC 52%,#D9A04A 70%,#9A630F);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%);
  animation:mkSway 5.2s ease-in-out infinite}

/* the gold seal on the board */
.mk__seal{position:absolute;z-index:4;right:4.5%;bottom:7%;width:clamp(64px,17%,92px);aspect-ratio:1;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transform:rotate(-11deg);
  background:#F0B760 url(../assets/img/tex-paper-gold.webp) 0 0/256px 256px;color:#371536;text-align:center;
  box-shadow:inset 0 0 0 3px rgba(255,248,230,.45),inset 0 0 0 5px rgba(150,95,20,.35),
    inset 0 -6px 10px rgba(120,70,10,.28),0 6px 14px rgba(26,6,24,.45)}
.mk__seal b{font:italic 600 clamp(12px,3.6vw,17px)/1 "Playfair Display",Georgia,serif}
.mk__seal i{font:700 clamp(7px,1.9vw,9.5px)/1 "Raleway",Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;font-style:normal}

/* the table under it: the shadow stays flat, only the album floats */
.mk__shadow{position:absolute;left:10%;right:2%;bottom:30px;height:46px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(10,2,8,.62),rgba(10,2,8,0));filter:blur(8px);
  transform:translateX(var(--sx,0px));animation:mkShadow 6.5s ease-in-out infinite}

/* pointing at it: it lifts toward her */
.mk__obj:hover .mk__scene,.mk__obj:focus-visible .mk__scene{animation-play-state:paused}
.mk__obj:hover .mk__book,.mk__obj:focus-visible .mk__book{
  transform:translateY(-10px) translateZ(26px) rotateX(calc(var(--rx) + var(--tx,0deg))) rotateY(calc(var(--ry) + var(--ty,0deg))) rotateZ(var(--rz))}

/* pressed: the board opens on its spine, the album turns to her */
.mk.is-open .mk__scene{animation:none}
/* it slides right by a third, so the opened board stays in view */
.mk.is-open .mk__book{transform:translateX(calc(var(--w) * .34)) translateY(-4px) scale(.86) rotateX(-6deg) rotateY(10deg) rotateZ(0deg)}
.mk.is-open .mk__cover{transform:translateZ(calc(var(--d) / 2)) rotateY(-158deg)}
.mk.is-open .mk__ribbon{animation:none}

@keyframes mkFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes mkShadow{0%,100%{opacity:1}50%{opacity:.72}}
@keyframes mkSway{0%,100%{transform:translateZ(1px) rotate(2.5deg)}50%{transform:translateZ(1px) rotate(-3deg)}}

/* the words next to it */
.mk__txt{text-align:center;max-width:34ch;margin:0 auto}
.mk__h{margin:0 0 10px;font-family:"Playfair Display",Georgia,serif;font-weight:500;font-size:clamp(26px,3.2vw,36px);line-height:1.12}
.mk__p{margin:0 0 8px;font-size:18px;line-height:1.5}
.mk__note{margin:0 0 22px;font-size:15px;line-height:1.5;opacity:.8}

/* a phone */
@media (max-width:640px){
  .mk{--w:min(84vw,360px);--d:20px}
  .mk__obj{padding:22px 0 54px}
  .mk__ribbon{height:44px;width:12px}
  /* the opened album would be twice as wide as the phone: open the board less, keep it all in view */
  .mk.is-open .mk__book{transform:translateX(calc(var(--w) * .1)) translateY(-4px) scale(.8) rotateX(-6deg) rotateY(14deg)}
  .mk.is-open .mk__cover{transform:translateZ(calc(var(--d) / 2)) rotateY(-122deg)}
}
@media (prefers-reduced-motion:reduce){
  .mk__scene,.mk__ribbon,.mk__shadow{animation:none}
  .mk__book,.mk__cover{transition:none}
}