/* ZOKKU home only (loaded after site.css by index.html).
   On a phone (up to 700 px) the opening becomes: the title, then the live window of the plugin on screen in a frame
   of its chapter colour, a progress line, its name and role (a link to its page) with Pause, then the line and the
   CTA. Above 700 px nothing changes: the loops stay behind the title at 22 % (site.css). */

/* The still in the HTML sits in a <picture> (the poster for phones); behind the title it fills like the loops. */
.ap-strato > picture{display:contents}
.ap-strato > picture > img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 35%;transform:scale(1.08)}
.ap-dida{display:none}

@media (max-width:700px){
  .apertura{display:grid;grid-template-columns:minmax(0,1fr);padding:20px var(--margine) 40px}
  .apertura .griglia{display:contents}
  .ap-titolo{order:1;margin-bottom:20px}
  /* the frame: 10 px of chapter colour around the window, its height from the width (windows are 1000 x 640) */
  .ap-sfondo{order:2;position:relative;inset:auto;z-index:auto;height:calc((100vw - 2 * var(--margine) - 20px) / 1.5625 + 20px);border-radius:var(--r-m);background:var(--campo,var(--tile));-webkit-mask-image:none;mask-image:none;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 10%,transparent),0 26px 44px -30px rgba(10,10,10,.6);transition:background-color 700ms var(--ease-soft)}
  .ap-strato{inset:10px;transition:opacity 700ms var(--ease-soft)}
  .ap-strato.attivo{opacity:1}
  .ap-strato > img,.ap-strato > video,.ap-strato > picture > img{object-fit:cover;object-position:50% 50%;transform:none;border-radius:6px;box-shadow:0 12px 26px -14px rgba(0,0,0,.55)}

  .ap-dida{order:3;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;margin-top:12px}
  .ap-dida-link{display:flex;flex-direction:column;justify-content:center;min-height:48px;text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent}
  .ap-dida-nome{font-size:21px;font-weight:500;line-height:1.15;letter-spacing:-.01em}
  .ap-dida-ruolo{font-size:var(--s-small);line-height:1.3;color:var(--fg-2)}
  .ap-dida-link:active{opacity:.7}

  /* one segment per featured plugin; the one on screen fills over its 8 s, the ones before stay full */
  .ap-barre{grid-column:1 / -1;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;margin-bottom:8px}
  .ap-barre li{height:3px;border-radius:2px;background:color-mix(in srgb,var(--fg) 16%,transparent);overflow:hidden}
  .ap-barre li::after{content:"";display:block;height:100%;background:var(--fg);transform:scaleX(0);transform-origin:left}
  .ap-barre li.fatto::after{transform:none}
  .ap-barre li.on::after{animation:ap-riempi var(--hold,8000ms) linear forwards}
  .ap-barre.fermo li.on::after{animation-play-state:paused}

  .ap-pausa{min-height:44px;min-width:44px;padding:0 14px;border-radius:var(--r-s);font-size:15px;font-weight:500;color:var(--fg-2);background:var(--bg);box-shadow:inset 0 0 0 1px var(--tile-2);-webkit-tap-highlight-color:transparent;transition:transform var(--t-press) var(--ease-out)}
  .ap-pausa:active{transform:scale(.96)}
  .ap-pausa:focus-visible{outline-color:var(--fg)}

  .ap-lato{order:4;margin-top:20px;gap:18px}
  .ap-lato p{font-size:19px;max-width:30ch}
}
/* the plugin list on a phone (a list below 600 px, site.css): bigger icons, a hairline between rows */
@media (max-width:600px){
  html[data-page="home"] .app-griglia{gap:0}
  html[data-page="home"] .app{grid-template-columns:64px minmax(0,1fr) auto;padding:10px 4px;column-gap:16px;border-radius:0;border-bottom:1px solid color-mix(in srgb,currentColor 12%,transparent)}
  html[data-page="home"] li:last-child > .app{border-bottom:0}
  html[data-page="home"] .app-tessera{max-width:64px}
  html[data-page="home"] .app::before{left:36px;top:10px;width:64px}
  html[data-page="home"] .app-nome{font-size:19px}
}
@keyframes ap-riempi{to{transform:none}}