/* Entrance loader, "The Dip": the brand mark on cream, chocolate rising with the real loading progress
   (whatever it covers turns cream, as if dipped), then the whole sheet lifts off dripping to reveal the page.
   Shown on a fresh load only; the inline <head> script adds html.ld-on (see assets/js/loader.js). */
:root { --choc: #2B1610; --choc-milk: #6E3B25; --cream: #FBF1E6; }

.ld { display: none; }
html.ld-on .ld { display: block; position: fixed; inset: 0; z-index: 200; overflow: hidden; animation: ld-bail 0s 9s forwards; }
/* Safety net: if loader.js never runs, the cover still goes away on its own. */
@keyframes ld-bail { to { visibility: hidden; } }
html.ld-lock, html.ld-lock body { overflow: hidden; }
html.ld-on .ld.is-lifting { pointer-events: none; }
.ld-paper { position: absolute; inset: 0; background: var(--base); }
.ld.is-full .ld-paper, .ld.is-full > .ld-stage { visibility: hidden; }

.ld-stage {
  position: absolute; left: 0; top: 0; width: 100%; height: 100vh; height: 100dvh;
  display: grid; place-items: center; color: var(--ink);
}
.ld-center { display: grid; justify-items: center; gap: clamp(6px, 1.2vw, 14px); padding-inline: 16px; }
.ld-berry { width: clamp(52px, 6vw, 84px); height: auto; color: var(--red); overflow: visible; }
.ld-word {
  display: flex; overflow: hidden; line-height: .86; padding-bottom: .04em;
  font: 900 clamp(60px, 14.5vw, 232px) var(--font-display); text-transform: uppercase; letter-spacing: -.005em;
}
.ld-word span { display: block; }
html[lang="ckb"] .ld-word { font: 900 clamp(52px, 11vw, 168px) / 1.25 var(--font-ku); text-transform: none; letter-spacing: 0; }
.ld-tag { font: 700 clamp(11px, 1.1vw, 15px) var(--font-body); letter-spacing: .32em; text-transform: uppercase; text-align: center; }
html[lang="ckb"] .ld-tag { font: 700 clamp(13px, 1.3vw, 17px) var(--font-ku); letter-spacing: 0; }
.ld-corner { position: absolute; bottom: clamp(18px, 3vw, 40px); }
.ld-count {
  inset-inline-end: clamp(18px, 3vw, 44px); display: flex; align-items: baseline; gap: 4px; direction: ltr;
  font: 900 clamp(40px, 5vw, 76px) / 1 var(--font-display); font-variant-numeric: tabular-nums;
}
.ld-count small { font-size: .42em; }
.ld-place { inset-inline-start: clamp(18px, 3vw, 44px); font: 700 clamp(11px, 1vw, 14px) / 1.5 var(--font-body); letter-spacing: .2em; text-transform: uppercase; }
html[lang="ckb"] .ld-place { font: 700 clamp(12px, 1.1vw, 15px) / 1.6 var(--font-ku); letter-spacing: 0; }

/* Chocolate: a wave on top, solid below. The wave scrolls sideways; loader.js raises the layers. */
.ld-lift { position: absolute; inset: 0; will-change: transform; }
.ld-choc {
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='26' viewBox='0 0 260 26'%3E%3Cpath d='M0 13 C32 2 98 2 130 13 S228 24 260 13 V26 H0Z'/%3E%3C/svg%3E");
  position: absolute; left: 0; right: 0; top: -26px; height: calc(100% + 26px);
  transform: translate3d(0, 110vh, 0); will-change: transform;
  -webkit-mask: var(--wave) 0 0 / 260px 26px repeat-x, linear-gradient(#000, #000) 0 25px / 100% 100% no-repeat;
          mask: var(--wave) 0 0 / 260px 26px repeat-x, linear-gradient(#000, #000) 0 25px / 100% 100% no-repeat;
  animation: ld-wave 1.6s linear infinite;
}
.ld-choc--milk { background: var(--choc-milk); animation-duration: 2.3s; animation-direction: reverse; }
.ld-choc--dark { background: var(--choc); }
/* The stage's copy inside the chocolate: cream, held still while the chocolate rises past it. */
.ld-choc .ld-stage { top: 26px; color: var(--cream); }
.ld-choc .ld-berry { color: var(--cream); }
@keyframes ld-wave { to { -webkit-mask-position: 260px 0, 0 25px; mask-position: 260px 0, 0 25px; } }
/* Drips hang from the chocolate's bottom edge and stretch as it lifts away. */
.ld-drips { position: absolute; left: 0; top: 100%; width: 100%; height: 260px; margin-top: -1px; overflow: visible; fill: var(--choc); }
/* Lift-off (easeInOutQuart, easings.net). */
.ld.is-lifting .ld-lift { transform: translate3d(0, calc(-100vh - 300px), 0); transition: transform 1.15s cubic-bezier(.76, 0, .24, 1); }

/* The mark arrives: the berry draws itself, the name rises letter by letter, the small print fades up.
   Both copies of the stage run the same delays, so they stay in step. */
.ld-berry path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ld-draw .9s cubic-bezier(.77, 0, .175, 1) forwards; }
.ld-berry path:nth-child(2) { animation-delay: .12s; }
.ld-berry path:nth-child(3) { animation-delay: .24s; }
.ld-word span { animation: ld-rise .9s cubic-bezier(.23, 1, .32, 1) both; animation-delay: calc(.15s + var(--i, 0) * 40ms); }
.ld-tag, .ld-corner { animation: ld-up .7s cubic-bezier(.23, 1, .32, 1) both; }
.ld-tag { animation-delay: .45s; }
.ld-place { animation-delay: .51s; }
.ld-count { animation-delay: .57s; }
@keyframes ld-draw { to { stroke-dashoffset: 0; } }
@keyframes ld-rise { from { transform: translateY(105%); } }
@keyframes ld-up { from { opacity: 0; transform: translateY(12px); } }

/* Reduced motion: no rising chocolate or lift; the mark simply shows, and the cover fades away. */
@media (prefers-reduced-motion: reduce) {
  .ld-lift { display: none; }
  .ld-berry path { stroke-dashoffset: 0; }
  html.ld-on .ld { transition: opacity .4s ease; }
  html.ld-on .ld.is-lifting { opacity: 0; }
}