/* Preloader — the SP mark in a ring; the ring fills with the real load, then opens like an iris onto the site */
@property --hole { syntax: '<length>'; inherits: true; initial-value: 0px; }
.pl {
  --hole: 0px; --ringd: clamp(150px, 20vmin, 210px);
  position: fixed; inset: 0; z-index: 9999; color: #fff; overflow: hidden; font-family: var(--font);
  background: #050404;
  /* the iris: everything outside the hole stays black, inside it the site shows through */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent var(--hole), #000 calc(var(--hole) + 1px));
          mask-image: radial-gradient(circle at 50% 50%, transparent var(--hole), #000 calc(var(--hole) + 1px));
}
.pl-skip .pl, .no-js .pl { display: none; }
.pl::before { content: ''; position: absolute; inset: 0; background: radial-gradient(40% 40% at 50% 50%, rgba(225, 29, 52, .22), transparent 70%); opacity: 0; transition: opacity 1.2s ease; }
.pl.is-live::before { opacity: 1; }

.pl__ascii { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; transition: opacity .6s ease; }
.pl__core { position: absolute; left: 50%; top: 50%; width: var(--ringd); height: var(--ringd); margin: calc(var(--ringd) / -2) 0 0 calc(var(--ringd) / -2); display: grid; place-items: center; transform-origin: 50% 50%; will-change: transform; }
.pl__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.pl__track { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 1px; }
.pl__arc { fill: none; stroke: #fff; stroke-width: 2px; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 6px rgba(255, 90, 105, .7)); }
.pl__sp { position: relative; width: 52%; aspect-ratio: 457 / 250; }
.pl__sp img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; user-select: none; }
.pl__sp-dim { opacity: .16; }
.pl__sp-lit { clip-path: inset(0 100% 0 0); }

.pl__line { position: absolute; bottom: clamp(22px, 4.4vh, 44px); margin: 0; font-family: var(--dot); font-variation-settings: 'ROND' 100; font-weight: 700; font-size: clamp(.78rem, 1vw, .95rem); letter-spacing: .14em; color: rgba(255, 255, 255, .7); }
.pl__line--l { left: clamp(18px, 3.4vw, 48px); }
.pl__line--r { right: clamp(18px, 3.4vw, 48px); }
.pl__line i { font-style: normal; opacity: .4; margin: 0 .4em; }
.pl__pct { position: absolute; left: 50%; top: calc(50% + var(--ringd) / 2 + clamp(20px, 4vh, 36px)); transform: translateX(-50%); font-family: var(--dot); font-variation-settings: 'ROND' 100; font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.6rem); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.pl__pct em { font-style: normal; opacity: .5; margin-inline-start: 2px; font-size: .6em; }
.pl__pct b { font-weight: 800; }
html.is-rtl .pl__line--l { left: auto; right: clamp(18px, 3.4vw, 48px); }
html.is-rtl .pl__line--r { right: auto; left: clamp(18px, 3.4vw, 48px); }

/* finish: the ring closes, the mark lights up, then the iris opens */
.pl.is-done .pl__line, .pl.is-done .pl__pct { opacity: 0; transition: opacity .35s ease; }
.pl.is-done .pl__sp-lit { filter: drop-shadow(0 0 14px rgba(255, 255, 255, .55)); }
.pl.is-open { --hole: calc(var(--ringd) / 2 - 1px); transition: --hole .7s cubic-bezier(.65, 0, .25, 1); }
.pl.is-out { --hole: var(--hole-far, 160vmax); transition: --hole 1.15s cubic-bezier(.75, 0, .2, 1); }
.pl.is-out .pl__core { transition: transform 1.15s cubic-bezier(.75, 0, .2, 1); transform: scale(var(--sc, 30)); }
.pl.is-out .pl__sp { transition: opacity .3s ease .08s; opacity: 0; }
.pl.is-out .pl__ascii { opacity: 0; }
.pl.is-out::before { opacity: 0; }

@media (max-width: 860px) {
  .pl__line--l { bottom: 8vh; } .pl__line--r { display: none; }
  .pl__line--l { left: 50%; transform: translateX(-50%); right: auto; white-space: nowrap; }
  html.is-rtl .pl__line--l { left: 50%; right: auto; }
}