/* Apolonya · Accueil 10 — le film Apolonya, joué par le défilement. Bodoni et Jost, ivoire et or. */
.apo-z {
  --ivory: #fbf8f3; --ink: #2f2923; --ink2: #62584d; --gold: #b39358; --goldt: #85692f; --champ: #f4e7c8; --hh: 80px;
  --serif: 'Bodoni Moda', 'Didot', 'Times New Roman', serif; --sans: 'Jost', system-ui, sans-serif; --ease: cubic-bezier(.22, .61, .36, 1);
  position: relative; background: var(--ivory); color: #fff; font-family: var(--sans); font-weight: 300; -webkit-font-smoothing: antialiased;
}
.apo-z *, .apo-z *::before, .apo-z *::after { box-sizing: border-box; }
.apo-z h1, .apo-z h2, .apo-z p { margin: 0; padding: 0; }
.apo-z a { text-decoration: none; }
.apo-z img { display: block; max-width: none !important; }
.apo-z .apo-z-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* default (no script, reduced motion, film failed): a still picture, the last title and the button */
.apo-z .apo-z-stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: #d9c9a8; }
.apo-z .apo-z-media { position: absolute; inset: 0; background-size: cover; background-position: center; }
.apo-z .apo-z-canvas { display: none; }
.apo-z .apo-z-still { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; }
.apo-z .apo-z-copy { position: absolute; inset: 0; pointer-events: none; }
.apo-z .apo-z-text { position: absolute; z-index: 3; display: none; pointer-events: none; }
.apo-z .apo-z-text[data-z-last] { display: block; pointer-events: auto; }
.apo-z .apo-z-hint, .apo-z .apo-z-bar { display: none; }

/* the film: one pinned scene, the position of the scroll is the position in the film */
.apo-z.apo-z-live .apo-z-track { position: relative; }
.apo-z.apo-z-live .apo-z-stage { position: absolute; top: 0; left: 0; width: 100%; }
.apo-z.apo-z-live .apo-z-track.is-fixed .apo-z-stage { position: fixed; }
.apo-z.apo-z-live .apo-z-track.is-end .apo-z-stage { top: auto; bottom: 0; }
.apo-z.apo-z-live .apo-z-canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.apo-z.apo-z-live .apo-z-still { display: none; }
.apo-z.apo-z-live .apo-z-text { display: block; opacity: 0; visibility: hidden; will-change: opacity, transform; }
.apo-z.apo-z-live .apo-z-hint { display: block; position: absolute; z-index: 4; left: 50%; bottom: calc(52px + env(safe-area-inset-bottom)); translate: -50% 0; font: 400 .8125rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 14px rgba(20, 14, 10, .7); pointer-events: none; }
.apo-z.apo-z-live .apo-z-bar { display: block; position: absolute; z-index: 4; left: 6vw; right: 6vw; bottom: calc(26px + env(safe-area-inset-bottom)); height: 2px; background: rgba(255, 255, 255, .35); pointer-events: none; }
.apo-z .apo-z-bar i { display: block; height: 100%; background: #fff; transform-origin: 0 50%; transform: scaleX(0); }

/* the texts: real HTML over the film, each in a clear zone of the frame */
.apo-z .apo-z-text::before { content: ''; position: absolute; z-index: -1; inset: -70px -90px; background: radial-gradient(ellipse at 45% 45%, rgba(20, 14, 10, .5), rgba(20, 14, 10, 0) 70%); pointer-events: none; }
.apo-z .apo-z-top-center { left: 50%; top: calc(var(--hh) + 7vh); translate: -50% 0; width: min(680px, 90vw); text-align: center; }
.apo-z .apo-z-top-left { left: 5vw; top: calc(var(--hh) + 8vh); width: min(460px, 42vw); }
.apo-z .apo-z-top-right { right: 5vw; top: calc(var(--hh) + 8vh); width: min(460px, 42vw); text-align: right; }
.apo-z .apo-z-left-end { left: 4vw; top: calc(var(--hh) + 9vh); width: min(23vw, 340px); min-width: 250px; }
.apo-z .apo-z-pre { font: 400 .8125rem/1 var(--sans); letter-spacing: .42em; text-transform: uppercase; color: var(--champ); text-shadow: 0 1px 12px rgba(20, 14, 10, .6); }
.apo-z .apo-z-h { margin-top: 16px; font-family: var(--serif) !important; font-weight: 400 !important; font-size: clamp(2rem, 1rem + 3.4vw, 4.6rem) !important; line-height: 1.06 !important; letter-spacing: -.012em; text-transform: none !important; color: #fff !important; text-shadow: 0 2px 26px rgba(20, 14, 10, .45); }
.apo-z .apo-z-left-end .apo-z-h { font-size: clamp(1.7rem, .9rem + 2.3vw, 3.2rem) !important; margin-top: 0; }
.apo-z .apo-z-p { margin-top: 16px; font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem); line-height: 1.55; color: #fff; text-shadow: 0 1px 16px rgba(20, 14, 10, .6); }
.apo-z .apo-z-btn { display: inline-flex; align-items: center; margin-top: 26px; min-height: 52px; padding: 0 26px; border: 1px solid var(--goldt); background: var(--goldt); color: #fff !important; font: 400 .8125rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; border-radius: 0 !important; transition: background .3s, color .3s; }
.apo-z .apo-z-btn:hover { background: var(--ivory); color: var(--goldt) !important; border-color: var(--ivory); }
.apo-z :focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* narrow or tall screens: the whole 16:9 film on top, the texts in their own space below */
@media (max-aspect-ratio: 5/4) {
  .apo-z.apo-z-live .apo-z-stage { display: flex; flex-direction: column; justify-content: center; padding-top: var(--hh); background: var(--ivory); }
  .apo-z.apo-z-live .apo-z-media { position: relative; inset: auto; flex: none; width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .apo-z.apo-z-live .apo-z-canvas { height: 100%; }
  .apo-z.apo-z-live .apo-z-copy { position: relative; inset: auto; flex: none; height: clamp(210px, 34svh, 320px); margin-top: 26px; }
  .apo-z.apo-z-live .apo-z-text { left: max(22px, env(safe-area-inset-left)) !important; right: max(22px, env(safe-area-inset-right)); top: 0 !important; width: auto !important; min-width: 0; translate: 0 0 !important; text-align: left; }
  .apo-z.apo-z-live .apo-z-text::before { display: none; }
  .apo-z.apo-z-live .apo-z-pre { color: var(--goldt); text-shadow: none; }
  .apo-z.apo-z-live .apo-z-h, .apo-z.apo-z-live .apo-z-left-end .apo-z-h { color: var(--ink) !important; text-shadow: none; font-size: clamp(1.8rem, 1.2rem + 3.6vw, 2.6rem) !important; }
  .apo-z.apo-z-live .apo-z-p { color: var(--ink2); text-shadow: none; }
  .apo-z.apo-z-live .apo-z-hint { bottom: 46px; color: var(--ink2); text-shadow: none; white-space: nowrap; letter-spacing: .22em; font-size: .75rem; }
  .apo-z.apo-z-live .apo-z-bar { background: rgba(47, 41, 35, .18); }
  .apo-z.apo-z-live .apo-z-bar i { background: var(--goldt); }
  .apo-z.apo-z-live .apo-z-btn { margin-top: 22px; }
}
@media (max-aspect-ratio: 5/4) {
  .apo-z:not(.apo-z-live) .apo-z-text[data-z-last] { left: 22px; right: 22px; top: auto; bottom: 90px; width: auto; }
}
.apo-z:not(.apo-z-live) .apo-z-text[data-z-last] { top: auto; bottom: 12vh; left: 5vw; width: min(520px, 90vw); }
@media (prefers-reduced-motion: reduce) {
  .apo-z .apo-z-btn { transition: none; }
}