/* Mock-ups on the case-study pages. Every size is in cqw (a share of the scene's own width), so a scene keeps its
   proportions from a phone to a wide desktop. Scenes sit on the same iridescent stages as before. */

.m-fig { padding: clamp(12px, 3.4vw, 56px); }
.m-fig[data-kind="fan"] { padding-bottom: 0; }          /* the pages run off the bottom edge of the stage */
.m-scene { position: relative; width: 100%; container-type: inline-size; }

/* soft parallax: things nearer the front drift a little more than things behind (see mock.js) */
.m-tilt {
  transform: translate3d(calc(var(--px, 0) * var(--d, 1) * -.9cqw), calc(var(--py, 0) * var(--d, 1) * -.55cqw), 0);
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

/* ---------- a fan of website pages ---------- */
.m-fan { aspect-ratio: 100 / 72; }
.m-pcard { position: absolute; bottom: -12cqw; overflow: hidden; background: #fff; border-radius: .8cqw .8cqw 0 0; box-shadow: 0 2.6cqw 5.5cqw rgba(20, 20, 30, .42), 0 .5cqw 1.3cqw rgba(20, 20, 30, .28); }
.m-pimg { display: block; width: 100%; height: auto; }


/* ---------- printed pages on a desk ---------- */
.m-print { aspect-ratio: 100 / 62; }
.m-sheet { position: absolute; background: #fff; box-shadow: .5cqw 1.8cqw 3.6cqw rgba(20, 20, 30, .42), 0 .2cqw .6cqw rgba(20, 20, 30, .3); }
.m-sheet::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, rgba(255, 255, 255, .22), transparent 40%, rgba(0, 0, 30, .06)); }
.m-sheet img { display: block; width: 100%; height: auto; }
.m-land .m-sheet { width: 44cqw; }
.m-land .m-s1 { left: 4cqw;  top: 13cqw; transform: rotate(-6deg); z-index: 1; }
.m-land .m-s3 { left: 52cqw; top: 9cqw;  transform: rotate(5deg);  z-index: 2; }
.m-land .m-s2 { left: 28cqw; top: 30cqw; transform: rotate(1.5deg); z-index: 3; }
.m-port .m-sheet { width: 27cqw; }
.m-port .m-s1 { left: 13cqw; top: 15cqw; transform: rotate(-7deg); z-index: 1; }
.m-port .m-s3 { left: 60cqw; top: 16cqw; transform: rotate(8deg);  z-index: 2; }
.m-port .m-s2 { left: 36.5cqw; top: 8cqw; transform: rotate(2deg); z-index: 3; }
/* --- printed paper: grain, curl shading, stacked edge --- */
.m-sheet { box-shadow: .3cqw .3cqw 0 #f3f3f1, .6cqw .6cqw 0 #e4e4e1, .8cqw 1.5cqw 3.2cqw rgba(20,20,30,.45), .2cqw .5cqw 1cqw rgba(20,20,30,.3); }
.m-sheet::after {
  background:
    linear-gradient(90deg, rgba(0,0,0,.10), transparent 6%, transparent 94%, rgba(0,0,0,.05)),
    linear-gradient(118deg, rgba(255,255,255,.26), transparent 42%, rgba(0,0,20,.10)),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='200' height='200' filter='url(%23p)' opacity='.35'/></svg>");
  mix-blend-mode: multiply;
}
/* two printed portrait sheets sit centred */
.m-port.m-two .m-s1 { left: 25cqw; } .m-port.m-two .m-s2 { left: 48cqw; }

@media (prefers-reduced-motion: reduce) { .m-tilt { transform: none; transition: none; } }

/* type-of-work pages: one block per example */
.k-ex { padding-top: clamp(60px, 12vh, 150px); }
.k-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px clamp(16px, 3vw, 40px); margin-bottom: clamp(16px, 3vh, 32px); }
.k-head h2 { font: 500 clamp(24px, 3.2vw, 48px)/1 var(--font); letter-spacing: -.04em; margin: 0; }
.k-head .c-tags { flex: 1; }

.m-fig { animation: none; background-size: cover; background-position: center; background-repeat: no-repeat; }
.m-fig::after { opacity: .35; }

/* finished photographic mock-ups: full-bleed, no stage padding */
.m-figr { padding: 0; background: none; }
.m-figr::before, .m-figr::after { display: none; }
.m-render { container-type: normal; }
.m-render img { display: block; width: 100%; height: auto; }


/* =====================  BLACK BACKDROP WITH AN IRIDESCENT GLOW  ===================== */
.m-fig {
  background-color: #060609;
  background-image:
    radial-gradient(ellipse 46% 64% at 22% 52%, rgba(63, 245, 224, .82), transparent 74%),
    radial-gradient(ellipse 44% 62% at 42% 46%, rgba(88, 128, 255, .80), transparent 74%),
    radial-gradient(ellipse 44% 62% at 62% 54%, rgba(165, 107, 255, .84), transparent 74%),
    radial-gradient(ellipse 42% 60% at 80% 56%, rgba(240, 110, 255, .70), transparent 74%),
    radial-gradient(ellipse 60% 22% at 50% 100%, rgba(30, 30, 50, .9), transparent 80%);
}
.m-fig::before { display: none; }
.m-figr { background-image: none; }


/* fans of whole documents (guideline pages, brochure pages) */
.m-fan--land { aspect-ratio: 100 / 46; }
.m-fan--port { aspect-ratio: 100 / 64; }
.m-fan--land .m-pcard, .m-fan--port .m-pcard { bottom: auto; border-radius: .6cqw; }

.k-note { color: var(--dim); }


/* =====================  FANS THAT ROTATE THROUGH THEIR PAGES  ===================== */
.m-fan { cursor: pointer; outline: none; }
.m-fan:focus-visible { outline: 2px solid #3ff5e0; outline-offset: 6px; }
.m-pcard { transition: transform .6s cubic-bezier(.2, .7, .2, 1), left .9s cubic-bezier(.2, .7, .2, 1), top .9s cubic-bezier(.2, .7, .2, 1), width .9s cubic-bezier(.2, .7, .2, 1), rotate .9s cubic-bezier(.2, .7, .2, 1), opacity .28s ease; }
.m-pcard.no-move { transition: none; }
.m-pcard.is-wrap { opacity: 0; }

.m-fan--web [data-slot="1"] { left: 3cqw;    top: 20cqw; width: 21cqw; z-index: 1; }
.m-fan--web [data-slot="2"] { left: 15cqw;   top: 12cqw; width: 25cqw; z-index: 2; }
.m-fan--web [data-slot="3"] { left: 34.5cqw; top: 4cqw;  width: 31cqw; z-index: 5; }
.m-fan--web [data-slot="4"] { left: 60cqw;   top: 12cqw; width: 25cqw; z-index: 2; }
.m-fan--web [data-slot="5"] { left: 76cqw;   top: 20cqw; width: 21cqw; z-index: 1; }

.m-fan--land [data-slot="1"] { left: 1.5cqw;  top: 17cqw; width: 26cqw; rotate: -4deg;  z-index: 1; }
.m-fan--land [data-slot="2"] { left: 13cqw;   top: 9cqw;  width: 32cqw; rotate: -2deg;  z-index: 2; }
.m-fan--land [data-slot="3"] { left: 30cqw;   top: 4cqw;  width: 40cqw; rotate: 0deg;   z-index: 5; }
.m-fan--land [data-slot="4"] { left: 55cqw;   top: 9cqw;  width: 32cqw; rotate: 2deg;   z-index: 2; }
.m-fan--land [data-slot="5"] { left: 72.5cqw; top: 17cqw; width: 26cqw; rotate: 4deg;   z-index: 1; }

.m-fan--port [data-slot="1"] { left: 4cqw;  top: 20cqw; width: 19cqw; rotate: -5deg;   z-index: 1; }
.m-fan--port [data-slot="2"] { left: 17cqw; top: 11cqw; width: 24cqw; rotate: -2.5deg; z-index: 2; }
.m-fan--port [data-slot="3"] { left: 37cqw; top: 5cqw;  width: 26cqw; rotate: 0deg;    z-index: 5; }
.m-fan--port [data-slot="4"] { left: 59cqw; top: 11cqw; width: 24cqw; rotate: 2.5deg;  z-index: 2; }
.m-fan--port [data-slot="5"] { left: 77cqw; top: 20cqw; width: 19cqw; rotate: 5deg;    z-index: 1; }

@media (prefers-reduced-motion: reduce) { .m-pcard { transition: none; } }


/* =====================  GALLERIES AND PLAIN IMAGES ON THE BLACK GLOW  ===================== */
.c-slide, .c-cover, .c-card-media, .c-media > .c-fig:not(.m-fig), .c-page .c-fig {
  animation: none; background-repeat: no-repeat; background-size: 100% 100%; background-color: #060609;
  background-image:
    radial-gradient(ellipse 46% 64% at 22% 52%, rgba(63, 245, 224, .82), transparent 74%),
    radial-gradient(ellipse 44% 62% at 42% 46%, rgba(88, 128, 255, .80), transparent 74%),
    radial-gradient(ellipse 44% 62% at 62% 54%, rgba(165, 107, 255, .84), transparent 74%),
    radial-gradient(ellipse 42% 60% at 80% 56%, rgba(240, 110, 255, .70), transparent 74%),
    radial-gradient(ellipse 60% 22% at 50% 100%, rgba(30, 30, 50, .9), transparent 80%);
}
.c-slide::before, .c-cover::before, .c-card-media::before, .c-media > .c-fig:not(.m-fig)::before, .c-page .c-fig::before { display: none; }
/* on black, a soft drop shadow does nothing: give the pages a faint edge and a deep shadow instead */
.c-slide img, .c-cover > img, .c-card-media img, .c-media > .c-fig > img, .c-page .c-frame {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .10), 0 34px 80px rgba(0, 0, 0, .6), 0 6px 18px rgba(0, 0, 0, .45);
}

.c-slide { padding: clamp(18px, 5.5vw, 96px); }
.c-cover { padding: clamp(18px, 7vw, 130px); }


/* a written section on a type page (for example the platforms I design for) */
.k-text { padding-top: clamp(60px, 12vh, 150px); }
.k-text h2 { font: 500 clamp(24px, 3.2vw, 48px)/1 var(--font); letter-spacing: -.04em; margin: 0 0 .5em; }
.k-lead { max-width: 40em; margin: 0 0 clamp(24px, 4vh, 44px); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.5; color: var(--text); }
.k-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: clamp(20px, 3vw, 40px) var(--pad); }
.k-grid li { border-top: 1px solid var(--rule); padding-top: 14px; }
.k-grid h3 { font: 500 clamp(20px, 1.9vw, 28px)/1.1 var(--font); letter-spacing: -.02em; margin: 0 0 .4em; }
.k-grid p { margin: 0; color: var(--text); line-height: 1.45; max-width: 26em; }

/* a cut-out mock-up (transparent background) floating on the glow, with a soft shadow under it */
.m-cutout { container-type: normal; width: 82%; margin: 0 auto; }
.m-cutout img { display: block; width: 100%; height: auto; filter: drop-shadow(0 2.2vw 2.6vw rgba(0, 0, 0, .55)); }