/* Pterodactyl landing kit: reel, sheet, motion, media. Tokens only (--ptr-*), no literals.
   Markup contracts: templates/pterodactyl/landing_kit.html. Guide: docs/creation_guide_landing.md. */

:root {
  --ptr-kit-ease: cubic-bezier(.215, .61, .355, 1);
  --ptr-kit-fast: 180ms;
  --ptr-kit-slow: 640ms;
  --ptr-kit-on-media: var(--ptr-grey-white);
  --ptr-kit-media-dark: var(--ptr-grey-black);
  --ptr-kit-glass: color-mix(in srgb, var(--ptr-kit-media-dark) 52%, transparent);
  --ptr-kit-glass-edge: color-mix(in srgb, var(--ptr-kit-on-media) 18%, transparent);
  --ptr-kit-veil: color-mix(in srgb, var(--ptr-kit-media-dark) 60%, transparent);
}

/* one spring for every entrance where linear() is supported (the study's rule 5) */
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --ptr-kit-ease: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017 20.2%, 1.043 23.5%, 1.035 27.3%,
                           1.007 35.6%, .998 42.2%, 1.001 58.1%, 1);
  }
}

/* ---------- Reel: full-bleed vertical-snap carousel ---------- */

.ptr-reel, .ptr-reel *, .ptr-reel *::before, .ptr-reel *::after,
.ptr-sheet, .ptr-sheet *, .ptr-sheet *::before, .ptr-sheet *::after { box-sizing: border-box; }

.ptr-reel {
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  background: var(--ptr-kit-media-dark);
  color: var(--ptr-kit-on-media);
}
.ptr-reel::-webkit-scrollbar { display: none; }
.ptr-reel:focus-visible { outline: none; }

.ptr-reel__slide {
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: grid;
  isolation: isolate;
}

.ptr-reel__bg,
.ptr-reel__bg > img,
.ptr-reel__bg > picture > img,
.ptr-reel__bg > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.ptr-reel__bg > picture { position: absolute; inset: 0; }
.ptr-reel__bg img, .ptr-reel__bg > video { transform: scale(1.06); transition: transform 2400ms var(--ptr-kit-ease); }
.ptr-reel__slide[data-active] .ptr-reel__bg img,
.ptr-reel__slide[data-active] .ptr-reel__bg > video { transform: scale(1); }

.ptr-reel__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, var(--ptr-kit-veil) 0%, transparent 28%, transparent 48%, var(--ptr-kit-veil) 100%);
}

.ptr-reel__content {
  align-self: end;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: calc(var(--ptr-space-xx-large) + env(safe-area-inset-top)) var(--ptr-space-medium)
           calc(var(--ptr-space-xxx-large) + env(safe-area-inset-bottom));
  display: grid;
  gap: var(--ptr-space-medium);
  align-items: end;
}

@media (min-width: 900px) {
  .ptr-reel__content {
    align-self: center;
    grid-template-columns: minmax(320px, 5fr) 7fr;
    gap: var(--ptr-space-xx-large);
    align-items: center;
    padding: var(--ptr-space-xx-large) var(--ptr-space-x-large);
  }
  .ptr-reel__content--solo { grid-template-columns: minmax(0, 760px); justify-content: center; }
}

.ptr-reel__scrim--strong {
  background:
    linear-gradient(180deg, var(--ptr-kit-veil) 0%, transparent 30%),
    linear-gradient(90deg, var(--ptr-kit-veil) 0%, transparent 75%),
    linear-gradient(0deg, var(--ptr-kit-veil) 0%, transparent 60%);
}

.ptr-reel__pager {
  position: fixed;
  right: max(var(--ptr-space-x-small), env(safe-area-inset-right));
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ptr-reel__dot {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.ptr-reel__dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ptr-kit-on-media) 38%, transparent);
  transition: transform var(--ptr-kit-fast) var(--ptr-kit-ease), background var(--ptr-kit-fast);
}
.ptr-reel__dot[aria-current="true"]::before { background: var(--ptr-kit-on-media); transform: scale(1.5); }
.ptr-reel__dot:focus-visible { outline: 2px solid var(--ptr-atom-primary); outline-offset: -2px; border-radius: 50%; }

.ptr-reel__count {
  font-family: var(--ptr-font-code);
  font-size: var(--ptr-size-x-small);
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
}

.ptr-reel__hint {
  position: absolute;
  white-space: nowrap;
  left: 50%;
  bottom: calc(var(--ptr-space-xx-large) + var(--ptr-space-large) + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  font-family: var(--ptr-font-code);
  font-size: var(--ptr-size-x-small);
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .8;
  animation: ptr-kit-nudge 2.4s var(--ptr-kit-ease) infinite;
}

/* ---------- Glass card (a slide's message) ---------- */

.ptr-glass {
  background: var(--ptr-kit-glass);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border: var(--ptr-divider) solid var(--ptr-kit-glass-edge);
  border-radius: var(--ptr-radius-x-large);
  padding: var(--ptr-space-large) var(--ptr-space-large);
  color: var(--ptr-kit-on-media);
  max-width: 560px;
}
.ptr-glass__eyebrow {
  margin: 0 0 var(--ptr-space-small);
  font-family: var(--ptr-font-code);
  font-size: var(--ptr-size-x-small);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ptr-atom-primary);
}
.ptr-glass__title {
  margin: 0 0 var(--ptr-space-small);
  font-family: var(--ptr-font-hero);
  font-weight: var(--ptr-weight-hero);
  font-size: clamp(var(--ptr-size-headline), 7.2vw, var(--ptr-size-x-large));
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--ptr-kit-on-media);
}
.ptr-glass__body {
  margin: 0;
  font-family: var(--ptr-font-body);
  font-size: var(--ptr-size-small);
  line-height: 1.55;
  color: color-mix(in srgb, var(--ptr-kit-on-media) 86%, transparent);
}
.ptr-glass__body + .ptr-glass__body { margin-top: var(--ptr-space-small); }
.ptr-glass__links { display: flex; flex-wrap: wrap; gap: var(--ptr-space-small); margin-top: var(--ptr-space-medium); }

@media (max-width: 899px) {
  .ptr-reel__content { padding-right: calc(var(--ptr-space-medium) + 18px); }
  /* the slide's height is the budget: the showcase takes what the card leaves, so the card never runs off the bottom */
  .ptr-reel__content:not(.ptr-reel__content--solo) { align-self: stretch; grid-template-rows: minmax(0, 1fr) auto; }
  .ptr-reel__content > .ptr-glass { order: 2; }
  .ptr-glass { padding: var(--ptr-space-medium) var(--ptr-space-medium) var(--ptr-space-large); }
}

/* ---------- Buttons on media ---------- */

.ptr-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--ptr-space-small);
  min-height: 44px;
  padding: 0 var(--ptr-space-medium);
  border-radius: 999px;
  border: var(--ptr-divider) solid var(--ptr-kit-glass-edge);
  background: color-mix(in srgb, var(--ptr-kit-on-media) 10%, transparent);
  color: var(--ptr-kit-on-media);
  font-family: var(--ptr-font-body);
  font-size: var(--ptr-size-small);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--ptr-kit-fast), transform var(--ptr-kit-fast) var(--ptr-kit-ease);
}
.ptr-pill:hover { background: color-mix(in srgb, var(--ptr-kit-on-media) 20%, transparent); }
.ptr-pill:active { transform: scale(.97); }
.ptr-pill:focus-visible { outline: 2px solid var(--ptr-atom-primary); outline-offset: 3px; }
.ptr-pill--primary {
  background: var(--ptr-atom-primary);
  border-color: transparent;
  color: var(--ptr-text-on-primary);
  font-weight: var(--ptr-weight-headline);
}
.ptr-pill--primary:hover { background: var(--ptr-atom-hover); }

/* the fixed call to action that opens a sheet */
.ptr-dock {
  position: fixed;
  left: 50%;
  bottom: calc(var(--ptr-space-medium) + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 30;
}
.ptr-dock .ptr-pill { min-height: 52px; padding: 0 var(--ptr-space-x-large); box-shadow: 0 10px 30px var(--ptr-kit-veil); }

/* ---------- Sheet: overlay with dismiss and a sent state ---------- */

.ptr-sheet {
  width: 100%;
  max-width: 560px;
  max-height: min(92dvh, 760px);
  margin: auto auto 0;
  padding: 0;
  border: 0;
  border-radius: var(--ptr-radius-x-large) var(--ptr-radius-x-large) 0 0;
  background: var(--ptr-bg-primary);
  color: var(--ptr-text-body);
  overflow: auto;
  overscroll-behavior: contain;
  box-shadow: 0 -12px 48px var(--ptr-kit-veil);
}
.ptr-sheet:focus, .ptr-sheet:focus-visible { outline: none; }
.ptr-sheet[open] { animation: ptr-kit-sheet-in var(--ptr-kit-slow) var(--ptr-kit-ease); }
.ptr-sheet[data-closing] { animation: ptr-kit-sheet-out var(--ptr-kit-fast) ease-in forwards; }
.ptr-sheet::backdrop {
  background: var(--ptr-kit-veil);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.ptr-sheet[open]::backdrop { animation: ptr-kit-fade-in var(--ptr-kit-slow) var(--ptr-kit-ease); }
.ptr-sheet[data-closing]::backdrop { animation: ptr-kit-fade-out var(--ptr-kit-fast) ease-in forwards; }

@media (min-width: 700px) {
  .ptr-sheet { margin: auto; border-radius: var(--ptr-radius-x-large); }
}

.ptr-sheet__grab {
  display: block;
  width: 100%;
  padding: var(--ptr-space-small) 0 0;
  touch-action: none;
  cursor: grab;
}
.ptr-sheet__grab::before {
  content: "";
  display: block;
  width: 40px;
  height: 5px;
  margin: 0 auto;
  border-radius: 3px;
  background: var(--ptr-atom-outline);
}
.ptr-sheet__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--ptr-space-medium);
  padding: var(--ptr-space-medium) var(--ptr-space-large) 0;
}
.ptr-sheet__title {
  margin: 0;
  font-family: var(--ptr-font-headline);
  font-weight: var(--ptr-weight-headline);
  font-size: var(--ptr-size-headline);
  color: var(--ptr-type-color-headline);
}
.ptr-sheet__close {
  flex: none;
  width: 44px;
  height: 44px;
  margin: calc(-1 * var(--ptr-space-small)) calc(-1 * var(--ptr-space-small)) 0 0;
  border: 0;
  border-radius: 50%;
  background: var(--ptr-bg-secondary);
  color: var(--ptr-text-primary);
  font-size: var(--ptr-size-large);
  line-height: 1;
  cursor: pointer;
}
.ptr-sheet__close:focus-visible { outline: 2px solid var(--ptr-atom-primary); outline-offset: 2px; }
.ptr-sheet__body { padding: var(--ptr-space-medium) var(--ptr-space-large) calc(var(--ptr-space-large) + env(safe-area-inset-bottom)); }
.ptr-sheet__body p { margin: 0 0 var(--ptr-space-medium); font-family: var(--ptr-font-body); font-size: var(--ptr-size-small); line-height: 1.55; }

.ptr-sheet__sent { display: none; text-align: center; padding: var(--ptr-space-large) 0; }
.ptr-sheet[data-state="sent"] .ptr-sheet__sent { display: block; animation: ptr-kit-rise var(--ptr-kit-slow) var(--ptr-kit-ease); }
.ptr-sheet[data-state="sent"] .ptr-sheet__form { display: none; }
.ptr-sheet__tick {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--ptr-space-medium);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ptr-atom-positive);
  color: var(--ptr-text-on-positive);
  font-size: var(--ptr-size-headline);
}
.ptr-sheet__error {
  margin: 0 0 var(--ptr-space-medium);
  padding: var(--ptr-space-small) var(--ptr-space-medium);
  border-radius: var(--ptr-radius-medium);
  background: var(--ptr-bg-error);
  color: var(--ptr-text-primary);
  font-size: var(--ptr-size-small);
}
.ptr-sheet__error:empty { display: none; }

.ptr-field { display: grid; gap: var(--ptr-space-x-small); margin-bottom: var(--ptr-space-medium); }
.ptr-field label { font-family: var(--ptr-font-body); font-size: var(--ptr-size-small); color: var(--ptr-text-primary); }
.ptr-field input,
.ptr-field textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  padding: var(--ptr-space-small) var(--ptr-space-medium);
  border: var(--ptr-divider) solid var(--ptr-atom-outline);
  border-radius: var(--ptr-radius-large);
  background: var(--ptr-bg-input);
  color: var(--ptr-text-primary);
  font-family: var(--ptr-font-body);
  font-size: var(--ptr-size-medium);
}
.ptr-field textarea { min-height: 120px; resize: vertical; }
.ptr-field input:focus, .ptr-field textarea:focus { outline: 2px solid var(--ptr-atom-primary); outline-offset: 1px; }
.ptr-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ptr-sheet .ptr-pill--primary { width: 100%; justify-content: center; min-height: 52px; }
.ptr-sheet__foot { margin-top: var(--ptr-space-medium); font-size: var(--ptr-size-x-small); color: var(--ptr-text-secondary); text-align: center; }
.ptr-sheet__foot a { color: inherit; }

/* ---------- Motion primitives ---------- */

/* entrance: hidden only once the script has run, so a page without JS shows everything */
.ptr-js [data-ptr-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--ptr-reveal-distance, 18px), 0);
  transition: opacity var(--ptr-kit-slow) var(--ptr-kit-ease), transform var(--ptr-kit-slow) var(--ptr-kit-ease);
  transition-delay: var(--ptr-reveal-delay, 0ms);
}
.ptr-js [data-ptr-reveal="scale"] { transform: scale(.94); }
.ptr-js [data-ptr-reveal="left"] { transform: translate3d(calc(-1 * var(--ptr-reveal-distance, 24px)), 0, 0); }
.ptr-js [data-ptr-reveal="right"] { transform: translate3d(var(--ptr-reveal-distance, 24px), 0, 0); }
.ptr-js [data-ptr-reveal].is-in { opacity: 1; transform: none; }

/* scroll-linked drift: moves with the scroll position where the browser supports scroll-driven animation */
@supports (animation-timeline: view()) {
  [data-ptr-drift] {
    animation: ptr-kit-drift linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
}

/* float: a gentle idle bob for showcase objects */
[data-ptr-float] { animation: ptr-kit-float 6s ease-in-out infinite; animation-delay: var(--ptr-float-delay, 0s); }

/* marquee: an endless row; the content is written twice, the second copy aria-hidden */
.ptr-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, var(--ptr-kit-media-dark) 12%, var(--ptr-kit-media-dark) 88%, transparent); }
.ptr-marquee__track { display: flex; width: max-content; animation: ptr-kit-marquee var(--ptr-marquee-duration, 40s) linear infinite; }
.ptr-marquee:hover .ptr-marquee__track { animation-play-state: paused; }

@keyframes ptr-kit-sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes ptr-kit-sheet-out { to { transform: translateY(100%); } }
@media (min-width: 700px) {
  @keyframes ptr-kit-sheet-in { from { transform: translateY(24px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes ptr-kit-sheet-out { to { transform: translateY(24px) scale(.98); opacity: 0; } }
}
@keyframes ptr-kit-fade-in { from { opacity: 0; } }
@keyframes ptr-kit-fade-out { to { opacity: 0; } }
@keyframes ptr-kit-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes ptr-kit-drift { from { translate: 0 var(--ptr-drift, 40px); } to { translate: 0 calc(-1 * var(--ptr-drift, 40px)); } }
@keyframes ptr-kit-float { 50% { translate: 0 -10px; } }
@keyframes ptr-kit-marquee { to { transform: translateX(-50%); } }
@keyframes ptr-kit-nudge { 0%, 100% { transform: translate(-50%, 0); opacity: .8; } 50% { transform: translate(-50%, 6px); opacity: .5; } }

@media (prefers-reduced-motion: reduce) {
  .ptr-js [data-ptr-reveal] { opacity: 1; transform: none; transition: none; }
  [data-ptr-drift], [data-ptr-float], .ptr-reel__hint, .ptr-marquee__track { animation: none; }
  .ptr-marquee__track { flex-wrap: wrap; width: auto; }
  .ptr-marquee__track [aria-hidden="true"] { display: none; }
  .ptr-reel { scroll-behavior: auto; }
  .ptr-reel__bg img, .ptr-reel__bg > video { transform: none; transition: none; }
  .ptr-sheet[open], .ptr-sheet[open]::backdrop, .ptr-sheet[data-closing], .ptr-sheet[data-closing]::backdrop { animation: none; }
}

/* ---------- Media blocks ---------- */

/* device: a phone frame drawn in CSS around a screenshot or a screen recording */
.ptr-device {
  --ptr-device-width: 220px;
  position: relative;
  width: var(--ptr-device-width);
  aspect-ratio: 9 / 19.5;
  padding: calc(var(--ptr-device-width) * .035);
  border-radius: calc(var(--ptr-device-width) * .16);
  background: var(--ptr-kit-media-dark);
  box-shadow:
    inset 0 0 0 1.5px color-mix(in srgb, var(--ptr-kit-on-media) 22%, transparent),
    0 24px 60px var(--ptr-kit-veil);
  flex: none;
}
.ptr-device > img,
.ptr-device > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: calc(var(--ptr-device-width) * .125);
  background: var(--ptr-kit-media-dark);
}
.ptr-device--shot { padding: 0; background: none; aspect-ratio: auto; border-radius: calc(var(--ptr-device-width) * .1); box-shadow: 0 24px 60px var(--ptr-kit-veil); }
.ptr-device--shot > img { height: auto; border-radius: inherit; }
.ptr-device--tablet { aspect-ratio: 3 / 4; border-radius: calc(var(--ptr-device-width) * .07); }
.ptr-device--tablet > img, .ptr-device--tablet > video { border-radius: calc(var(--ptr-device-width) * .045); }

/* a fanned row of devices, the middle one forward */
.ptr-device-row {
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1400px;
}
.ptr-device-row .ptr-device { --ptr-device-width: clamp(120px, 30vw, 220px); }
/* row layout uses the individual rotate/scale properties so it composes with reveal (transform) and float (translate) */
.ptr-device-row > :nth-child(1):not(:only-child) { rotate: y -18deg; scale: .86; margin-right: -9%; }
.ptr-device-row > :nth-child(2) { z-index: 1; scale: 1.08; }
.ptr-device-row > :nth-child(3) { rotate: y 18deg; scale: .86; margin-left: -9%; }
.ptr-device-row > :only-child { scale: none; }
.ptr-device-link { display: block; flex: none; border-radius: 12%; transition: translate var(--ptr-kit-fast) var(--ptr-kit-ease); }
.ptr-device-link:hover { translate: 0 -6px; }
.ptr-device-link:focus-visible { outline: 2px solid var(--ptr-atom-primary); outline-offset: 4px; }
@media (max-width: 899px) {
  .ptr-device-row .ptr-device { --ptr-device-width: clamp(96px, 27vw, 150px); }
}

/* logo wall: a grid of marks in one tone, so mismatched logos read as a set */
.ptr-logo-wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--ptr-space-large) var(--ptr-space-x-large);
  align-items: center;
  justify-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ptr-logo-wall > li { min-width: 0; max-width: 100%; }
.ptr-logo-wall img,
.ptr-logo-wall svg {
  display: block;
  max-width: 100%;
  height: var(--ptr-logo-height, 34px);
  width: auto;
  object-fit: contain;
}
.ptr-logo-wall[data-tone="light"] img { filter: brightness(0) invert(1); opacity: .92; }
.ptr-logo-wall[data-tone="dark"] img { filter: brightness(0); opacity: .82; }
.ptr-logo-wall figcaption, .ptr-logo-wall .ptr-logo-wall__name {
  margin-top: var(--ptr-space-small);
  font-family: var(--ptr-font-code);
  font-size: var(--ptr-size-x-small);
  letter-spacing: .08em;
  text-align: center;
  opacity: .75;
}
.ptr-marquee .ptr-logo-wall { display: flex; gap: var(--ptr-space-xx-large); padding-right: var(--ptr-space-xx-large); }

/* app tile: icon, name, line and link, the way an app is presented in a store */
.ptr-app-tiles { display: grid; gap: var(--ptr-space-medium); margin: 0; padding: 0; list-style: none; }
@media (min-width: 560px) { .ptr-app-tiles--row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ptr-app-tile {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ptr-space-small) var(--ptr-space-medium);
  align-items: center;
  padding: var(--ptr-space-medium);
  border-radius: var(--ptr-radius-x-large);
  background: var(--ptr-kit-glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: var(--ptr-divider) solid var(--ptr-kit-glass-edge);
  color: var(--ptr-kit-on-media);
  text-decoration: none;
  transition: transform var(--ptr-kit-fast) var(--ptr-kit-ease), border-color var(--ptr-kit-fast);
}
a.ptr-app-tile:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--ptr-kit-on-media) 40%, transparent); }
.ptr-app-tile__icon {
  width: 56px;
  height: 56px;
  border-radius: 22.5%;
  object-fit: cover;
  background: var(--ptr-kit-on-media);
  box-shadow: 0 6px 18px var(--ptr-kit-veil);
}
.ptr-app-tile__name { margin: 0; font-family: var(--ptr-font-headline); font-weight: var(--ptr-weight-headline); font-size: var(--ptr-size-medium); }
.ptr-app-tile__line { margin: 2px 0 0; font-family: var(--ptr-font-body); font-size: var(--ptr-size-x-small); line-height: 1.45; opacity: .82; }

/* video: muted, looping, inline; the script plays it only while it is on screen */
.ptr-video {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--ptr-radius-x-large);
  background: var(--ptr-kit-media-dark);
  box-shadow: 0 24px 60px var(--ptr-kit-veil);
}
.ptr-video > video, .ptr-video > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ptr-video > video[data-wait] { opacity: 0; }
.ptr-video--portrait { aspect-ratio: 9 / 16; width: min(var(--ptr-video-width, 260px), 62vw); }
.ptr-video--square { aspect-ratio: 1; }
.ptr-video--wide { aspect-ratio: 16 / 9; }
.ptr-video__label {
  position: absolute;
  left: var(--ptr-space-small);
  bottom: var(--ptr-space-small);
  padding: 2px var(--ptr-space-small);
  border-radius: 999px;
  background: var(--ptr-kit-veil);
  color: var(--ptr-kit-on-media);
  font-family: var(--ptr-font-code);
  font-size: var(--ptr-size-x-small);
  letter-spacing: .06em;
}

/* gallery: a short row of media that scrolls sideways on a phone */
.ptr-strip {
  display: flex;
  gap: var(--ptr-space-medium);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: var(--ptr-space-x-small);
  margin: 0;
  list-style: none;
  padding-left: 0;
}
.ptr-strip::-webkit-scrollbar { display: none; }
.ptr-strip > * { flex: none; scroll-snap-align: center; }

/* terminal: real log lines, typed in when the block enters */
.ptr-terminal {
  margin: 0;
  padding: var(--ptr-space-medium);
  border-radius: var(--ptr-radius-x-large);
  background: color-mix(in srgb, var(--ptr-kit-media-dark) 82%, transparent);
  border: var(--ptr-divider) solid var(--ptr-kit-glass-edge);
  color: var(--ptr-kit-on-media);
  font-family: var(--ptr-font-code);
  font-size: var(--ptr-size-x-small);
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: 0 24px 60px var(--ptr-kit-veil);
}
.ptr-terminal__bar { display: flex; gap: 6px; margin-bottom: var(--ptr-space-small); }
.ptr-terminal__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--ptr-kit-glass-edge); }
.ptr-terminal__line { display: block; }
.ptr-terminal__line--dim { opacity: .6; }
.ptr-terminal__line--ok { color: var(--ptr-atom-primary); }
.ptr-js .ptr-terminal[data-ptr-type] .ptr-terminal__line { opacity: 0; }
.ptr-js .ptr-terminal[data-ptr-type] .ptr-terminal__line.is-typed { opacity: 1; transition: opacity 120ms; }
.ptr-js .ptr-terminal[data-ptr-type] .ptr-terminal__line--dim.is-typed { opacity: .6; }
@media (prefers-reduced-motion: reduce) { .ptr-js .ptr-terminal[data-ptr-type] .ptr-terminal__line { opacity: 1; } }

/* step strip: a pipeline of named stages with their marks */
.ptr-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ptr-space-medium); margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .ptr-steps { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.ptr-steps li { text-align: center; font-family: var(--ptr-font-code); font-size: var(--ptr-size-x-small); letter-spacing: .08em; text-transform: uppercase; }
.ptr-steps img { display: block; width: 100%; max-width: 96px; aspect-ratio: 1; object-fit: contain; margin: 0 auto var(--ptr-space-x-small); }

/* top bar over a reel: logo left, counter right */
.ptr-topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 25;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(var(--ptr-space-medium) + env(safe-area-inset-top)) var(--ptr-space-medium) var(--ptr-space-medium);
  color: var(--ptr-kit-on-media);
  pointer-events: none;
}
.ptr-topbar > * { pointer-events: auto; }
.ptr-topbar img { display: block; height: 22px; width: auto; }

.ptr-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* brand hand-off: [data-ptr-brand] in the bar is drawn over [data-ptr-brand-spot] on the first slide and docks as the reel scrolls */
.ptr-topbar--centred { justify-content: center; }
.ptr-topbar--centred .ptr-reel__count { position: absolute; right: var(--ptr-space-medium); }
[data-ptr-brand] { display: block; transform-origin: center; }
[data-ptr-brand-spot] { display: block; margin: 0 auto; aspect-ratio: var(--ptr-brand-ratio, 2.45); width: var(--ptr-brand-spot-width, min(64vw, 360px)); }
.ptr-js:not(.ptr-brand-ready) [data-ptr-brand] { visibility: hidden; }

/* an element that steps aside on some slides (data-ptr-hide-on="id ..."), e.g. a dock over its own form */
[data-ptr-hide-on] { transition: opacity var(--ptr-kit-fast), translate var(--ptr-kit-slow) var(--ptr-kit-ease); }
[data-ptr-hide-on][data-hidden] { opacity: 0; translate: 0 16px; pointer-events: none; }

/* burst: marks thrown out from the centre like a bouquet; the first stays in the middle */
.ptr-burst { --ptr-burst-aspect: 1.25; position: relative; width: min(100%, 520px); aspect-ratio: var(--ptr-burst-aspect); margin: 0 auto; }
.ptr-burst__item {
  --ptr-burst-size: 30%;
  position: absolute;
  width: var(--ptr-burst-size);
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--ptr-radius-x-large);
  box-shadow: 0 18px 44px var(--ptr-kit-veil);
  left: calc(var(--ptr-burst-x) - var(--ptr-burst-size) / 2);
  top: calc(var(--ptr-burst-y) - var(--ptr-burst-size) * var(--ptr-burst-aspect) / 2);
  rotate: var(--ptr-burst-r);
}
.ptr-burst__item:nth-child(1) { --ptr-burst-x: 50%; --ptr-burst-y: 50%; --ptr-burst-r: 0deg; --ptr-burst-size: 32%; z-index: 2; }
.ptr-burst__item:nth-child(2) { --ptr-burst-x: 24%; --ptr-burst-y: 22%; --ptr-burst-r: -9deg; --ptr-burst-size: 26%; }
.ptr-burst__item:nth-child(3) { --ptr-burst-x: 75%; --ptr-burst-y: 20%; --ptr-burst-r: 7deg; --ptr-burst-size: 24%; }
.ptr-burst__item:nth-child(4) { --ptr-burst-x: 86%; --ptr-burst-y: 56%; --ptr-burst-r: 11deg; --ptr-burst-size: 22%; }
.ptr-burst__item:nth-child(5) { --ptr-burst-x: 64%; --ptr-burst-y: 80%; --ptr-burst-r: -5deg; --ptr-burst-size: 24%; }
.ptr-burst__item:nth-child(6) { --ptr-burst-x: 30%; --ptr-burst-y: 79%; --ptr-burst-r: 8deg; --ptr-burst-size: 25%; }
.ptr-burst__item:nth-child(7) { --ptr-burst-x: 13%; --ptr-burst-y: 52%; --ptr-burst-r: -12deg; --ptr-burst-size: 20%; }
.ptr-js [data-ptr-reveal="burst"] {
  transform: none;
  transition: opacity var(--ptr-kit-slow), left var(--ptr-kit-slow) var(--ptr-kit-ease), top var(--ptr-kit-slow) var(--ptr-kit-ease),
              scale var(--ptr-kit-slow) var(--ptr-kit-ease), rotate var(--ptr-kit-slow) var(--ptr-kit-ease);
  transition-delay: var(--ptr-reveal-delay, 0ms);
}
.ptr-js [data-ptr-reveal="burst"]:not(.is-in) { left: calc(50% - var(--ptr-burst-size) / 2); top: calc(52% - var(--ptr-burst-size) * var(--ptr-burst-aspect) / 2); scale: .3; rotate: 0deg; }
@media (prefers-reduced-motion: reduce) { .ptr-js [data-ptr-reveal="burst"] { transition: none; } }

/* mosaic: a wall of stills as a slide backdrop, columns drifting in opposite directions */
.ptr-mosaic { display: flex; gap: var(--ptr-space-small); padding: 0 var(--ptr-space-small); overflow: hidden; }
.ptr-mosaic__col { flex: 1 1 0; min-width: 0; overflow: hidden; }
.ptr-mosaic__track { display: grid; gap: var(--ptr-space-small); animation: ptr-kit-mosaic var(--ptr-mosaic-duration, 70s) linear infinite; }
.ptr-mosaic__col:nth-child(even) .ptr-mosaic__track { animation-direction: reverse; animation-duration: calc(var(--ptr-mosaic-duration, 70s) * 1.2); }
.ptr-mosaic__col:nth-child(3n) .ptr-mosaic__track { animation-duration: calc(var(--ptr-mosaic-duration, 70s) * .85); }
.ptr-reel__bg.ptr-mosaic img { position: static; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--ptr-radius-large); transform: none; transition: opacity var(--ptr-kit-slow); z-index: auto; }
.ptr-mosaic img:not([src]) { opacity: 0; }
.ptr-reel__slide:not([data-active]) .ptr-mosaic__track { animation-play-state: paused; }
.ptr-mosaic__col:nth-child(n + 4) { display: none; }
@media (min-width: 700px) { .ptr-mosaic__col:nth-child(n + 4) { display: block; } .ptr-mosaic__col:nth-child(n + 6) { display: none; } }
@media (min-width: 1200px) { .ptr-mosaic__col:nth-child(n + 6) { display: block; } }
@keyframes ptr-kit-mosaic { to { transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) { .ptr-mosaic__track { animation: none; } }

/* a contact form on a slide: the sheet's form and sent state, on a panel */
.ptr-form-panel {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: var(--ptr-space-large);
  border-radius: var(--ptr-radius-x-large);
  background: var(--ptr-bg-primary);
  color: var(--ptr-text-body);
  box-shadow: 0 24px 60px var(--ptr-kit-veil);
}
.ptr-form-panel .ptr-sheet__title { margin: 0 0 var(--ptr-space-small); }
.ptr-form-panel .ptr-field textarea { min-height: 96px; }
.ptr-form-panel .ptr-sheet__sent { display: none; text-align: center; padding: var(--ptr-space-large) 0; }
.ptr-form-panel[data-state="sent"] .ptr-sheet__sent { display: block; animation: ptr-kit-rise var(--ptr-kit-slow) var(--ptr-kit-ease); }
.ptr-form-panel[data-state="sent"] .ptr-sheet__form, .ptr-form-panel[data-state="sent"] > .ptr-sheet__title { display: none; }

/* ---------- Language picker: a corner pill opening the locales, each named in its own script ---------- */

.ptr-langpick {
  --lp-bg: var(--ptr-kit-glass); --lp-fg: var(--ptr-kit-on-media); --lp-edge: var(--ptr-kit-glass-edge); --lp-menu: var(--ptr-kit-media-dark);
  position: fixed;
  top: calc(var(--ptr-space-medium) + env(safe-area-inset-top));
  z-index: 40;
  font: var(--ptr-size-small)/1.3 var(--ptr-font-body);
}
.ptr-langpick--surface { --lp-bg: var(--ptr-bg-primary); --lp-fg: var(--ptr-text-primary); --lp-edge: var(--ptr-atom-outline); --lp-menu: var(--ptr-bg-primary); }
.ptr-langpick--end { inset-inline-end: var(--ptr-space-medium); }
.ptr-langpick--start { inset-inline-start: var(--ptr-space-medium); }
.ptr-langpick summary {
  display: flex; align-items: center; gap: var(--ptr-space-x-small);
  min-height: 36px; padding: 0 var(--ptr-space-medium) 0 var(--ptr-space-small);
  border-radius: 999px; border: var(--ptr-divider) solid var(--lp-edge); background: var(--lp-bg); color: var(--lp-fg);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  list-style: none; cursor: pointer; white-space: nowrap;
}
.ptr-langpick summary::-webkit-details-marker { display: none; }
.ptr-langpick :focus-visible { outline: 2px solid var(--ptr-atom-primary); outline-offset: 2px; }
.ptr-langpick svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.ptr-langpick ul {
  position: absolute; top: calc(100% + var(--ptr-space-small)); inset-inline-start: 0;
  min-width: 200px; max-height: min(68vh, 460px); overflow-y: auto; overscroll-behavior: contain;
  margin: 0; padding: var(--ptr-space-x-small); list-style: none;
  border-radius: var(--ptr-space-medium); border: var(--ptr-divider) solid var(--lp-edge); background: var(--lp-menu);
  box-shadow: 0 12px 36px var(--ptr-kit-veil);
}
.ptr-langpick--end ul { inset-inline-start: auto; inset-inline-end: 0; }
.ptr-langpick a {
  display: flex; align-items: center; min-height: 40px; padding: 0 var(--ptr-space-medium);
  border-radius: var(--ptr-space-small); color: var(--lp-fg); text-decoration: none; white-space: nowrap;
}
.ptr-langpick a:hover { background: color-mix(in srgb, var(--lp-fg) 10%, transparent); }
.ptr-langpick a[aria-current] { color: var(--ptr-atom-primary); font-weight: var(--ptr-weight-headline); }
.ptr-langpick a[aria-current]::after { content: "✓"; margin-inline-start: auto; padding-inline-start: var(--ptr-space-medium); }
@media (min-width: 700px) { .ptr-langpick ul { display: grid; grid-template-columns: auto auto; column-gap: var(--ptr-space-x-small); } }