/* The studio home v4 «Light»: the page lives one day. studio.js moves one light by the scroll position and writes
   --page (the page light), --s-ink / --s-soft / --s-link (text that stays readable on it), --sun-x / --sun-y / --sun-a (the
   sun over Cyanopica 3D), --evening, --glow (its lamps), --lamp (the night lamp over the sheet), --psun-x / --psun-a and
   --sun-dx (the sun the painter moves and the shadow it casts). CSS never lights a work: only real frames change. */
html { --s-ink: var(--ink); --s-soft: var(--graphite); --s-link: var(--azure); }   /* on html: studio.js writes them there */
.page-home main { color: var(--s-ink); }

/* One pinned chapter per app */
.ch { position: relative; height: calc(var(--len) * 100 * var(--lvh)); overflow-x: clip; }
.ch--3d { --len: 3.6; }
.ch--2d { --len: 4.8; }
.ch__pin { position: sticky; top: 0; height: calc(100 * var(--svh)); display: grid; align-items: center;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(16px, 3.4vw, 64px);
  padding: 92px max(var(--gutter), calc((100% - var(--max)) / 2)) 56px;
  overflow-x: clip; }   /* the pin is the screen's width: clip x only (wider glows made mobile Chrome zoom out), light runs free in y */
.ch__copy { position: relative; z-index: 2; display: grid; align-self: center; }
.beat { grid-area: 1 / 1; align-self: center; will-change: opacity, transform; }
.beat + .beat { opacity: 0; visibility: hidden; }
.ch__stage { position: relative; z-index: 1; margin: 0; justify-self: center; }
.ch__note { position: absolute; top: calc(100% + 14px); inset-inline: 0; text-align: center; font-size: 13px;
  line-height: 1.4; color: var(--s-soft); }

/* Type: one family (Geologica), weight does the work (the kicker and .btn--light are shared: site.css) */
.display { margin: 0; font-weight: 800; font-size: clamp(56px, min(8.6vw, 14vh), 136px); line-height: .9;
  letter-spacing: -.048em; }
.display > span { display: block; }
.display__light { color: var(--s-link); }
.display--paint { font-size: clamp(50px, min(7.4vw, 12.5vh), 118px); }
:lang(ar) .display, :lang(hi) .display, :lang(zh-Hans) .display { letter-spacing: 0; line-height: 1.08; }
.ch__lead { margin-top: clamp(16px, 2.6vh, 26px); max-width: 34ch; font-size: clamp(17px, 1.42vw, 21px); line-height: 1.5;
  color: var(--s-soft); }
.say { margin: 0; max-width: 15ch; font-weight: 700; font-size: clamp(36px, min(4.8vw, 8.4vh), 76px); line-height: 1.02;
  letter-spacing: -.034em; }
:lang(ar) .say, :lang(hi) .say, :lang(zh-Hans) .say { letter-spacing: 0; line-height: 1.2; }
.get { margin-top: clamp(22px, 3.6vh, 34px); display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.get__price { font-size: 15px; color: var(--s-soft); }
.link--night { display: inline-block; margin-top: 22px; color: var(--s-link); }
/* Cyanopica 2D's last beat: its line is smaller than the 3D title, so the store button gets more air */
.ch--2d [data-beat="2"] .ch__lead { margin-top: clamp(18px, 3vh, 28px); }
.ch--2d [data-beat="2"] .get { margin-top: clamp(36px, 6.4vh, 60px); gap: 18px; }

/* The sun over the page: a broad warm light that crosses from left to right during the day */
.ch__sun { position: absolute; z-index: 0; top: -38%; left: calc(50% + var(--sun-x, -.6) * 46%); width: 110vmax;
  height: 110vmax; translate: -50% 0; border-radius: 50%; pointer-events: none; opacity: var(--sun-a, 1);
  background: radial-gradient(closest-side, rgba(255, 238, 200, .95), rgba(255, 224, 166, .46) 34%, rgba(255, 214, 150, .12) 58%, rgba(255, 210, 150, 0) 74%); }

/* Cyanopica 3D: the flat (cut-outs of the app's own day and evening stills), its sun shadow, the evening orbit */
.stage3d { width: min(100%, calc(70 * var(--svh) * 1400 / 1362)); aspect-ratio: 1400 / 1362; }
.stage3d > img { position: absolute; inset: 0; width: 100%; height: 100%; background: none; border: 0; box-shadow: none; }
.stage3d__shadow { transform: translate(calc(var(--sun-x, -.6) * -4%), 4.5%) scale(1.03); opacity: calc(1 - var(--evening, 0)); }
.stage3d__img--evening { opacity: var(--evening, 0); }
.stage3d__turn { opacity: 0; }
.stage3d__glow { position: absolute; inset: -20%; border-radius: 50%; pointer-events: none; opacity: var(--glow, 0);
  background: radial-gradient(closest-side, rgba(255, 190, 112, .46), rgba(255, 166, 86, .16) 52%, rgba(255, 160, 80, 0) 76%); }

/* Cyanopica 2D: the sheet, a lamp over it at night, the sun the painter moves */
.sheet__frame { position: relative; height: min(calc(70 * var(--svh)), 960px); aspect-ratio: 540 / 960; border-radius: 3px;
  background: #FBFAF7; box-shadow: calc(var(--sun-dx, 0) * 1px) 44px 70px -34px rgba(6, 10, 20, .62), 0 2px 8px rgba(6, 10, 20, .22); }
.sheet__frame::before { content: ""; position: absolute; inset: -30% -60%; z-index: -1; border-radius: 50%; pointer-events: none;
  opacity: var(--lamp, 0); background: radial-gradient(closest-side, rgba(255, 228, 184, .34), rgba(255, 214, 160, .1) 55%, rgba(255, 210, 150, 0) 78%); }
.sheet__img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 3px; }
.sheet__img--b { opacity: 0; }
/* the sun the painter moves: an arc over the sheet, left to right, like the app's own sun over the canvas */
.sheet__sun { position: absolute; z-index: 3; top: calc(9% - var(--psun-arc, 0) * 16%); left: calc(-18% + var(--psun-x, 0) * 136%);
  width: 64px; height: 64px; translate: -50% -50%; border-radius: 50%; pointer-events: none; opacity: var(--psun-a, 0);
  background: radial-gradient(circle, #FFFBEA 0 26%, #FFE38F 38%, rgba(255, 205, 100, .5) 54%, rgba(255, 190, 80, 0) 72%);
  box-shadow: 0 0 140px 70px rgba(255, 214, 128, .3); }

/* The bar on the home fades into the page instead of ending in a hard line: the light and the sun pass under it */
.page-home .bar { background: linear-gradient(to bottom, var(--bar, rgba(246, 245, 241, .92)) 52%, transparent); }
/* The sheet sits lower, so the sun's arc and the lamp's light stay clear of the bar */
.ch--2d .ch__pin { padding-top: 128px; }
.ch--2d .sheet__frame { height: min(calc(62 * var(--svh)), 900px); }
.ch--2d .sheet .ch__note { inset-inline: -48%; }   /* two lines under the lowered sheet */

.page-home .lessons { padding-top: clamp(40px, 8vh, 96px); padding-bottom: clamp(80px, 12vh, 140px); }

/* Phones and portrait tablets: the words above, the work below */
@media (max-width: 899px), (max-aspect-ratio: 4/5) {
  .ch__pin { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-content: start; align-items: start;
    gap: clamp(10px, 2vh, 22px); padding: 80px var(--gutter) 44px; }
  .ch__copy { align-self: start; }
  .beat { align-self: start; }
  .display { font-size: clamp(40px, 13.2vw, 84px); }          /* the longest word («Нарисуйте.») still fits a 390 px phone */
  .display--paint { font-size: clamp(38px, 12vw, 76px); }
  .say { font-size: clamp(31px, 9vw, 52px); max-width: 16ch; }
  .ch__lead { margin-top: 12px; font-size: 16px; }
  .get { margin-top: 16px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
  .get .btn { width: 100%; }
  .stage3d { width: min(100%, calc(42 * var(--svh) * 1400 / 1362)); align-self: center; }   /* the whole flat and its shadow on screen */
  .sheet { align-self: center; }
  .sheet__frame { height: min(calc(50 * var(--svh)), 150vw); }
  .ch__note { font-size: 12px; top: calc(100% + 8px); }
  .sheet__sun { width: 52px; height: 52px; }
  /* a sideways sun is lost on a narrow screen: here the day light comes down the page from the first scroll, and the
     flat's shadow lengthens under it */
  .ch__sun { top: calc(-30% + var(--sun-y, 0) * 66%); left: calc(50% + var(--sun-x, -.6) * 14%); width: 150vw; height: 150vw;
    background: radial-gradient(closest-side, rgba(255, 224, 156, .96), rgba(255, 206, 128, .52) 34%, rgba(255, 200, 120, .15) 58%, rgba(255, 196, 120, 0) 74%); }
  .stage3d__shadow { transform: translate(calc(var(--sun-x, -.6) * -3%), calc(1.5% + var(--sun-y, 0) * 6%)) scale(1.03); }
  .ch--2d .ch__pin { padding-top: 80px; }
  .ch--2d .sheet__frame { height: min(calc(50 * var(--svh)), 150vw); }
  .ch--2d .sheet .ch__note { inset-inline: -12%; }
  .ch--2d [data-beat="2"] .ch__lead { display: none; }   /* room for the store button above the sheet */
  .ch--2d [data-beat="2"] .get { margin-top: 28px; gap: 14px; }
}
/* Keep the scroll chapters pinned even when system animations are disabled:
   studio.js advances them only with the visitor's scroll position. */