/* Folk Keep loader v12: deliberate reveal, delayed film and a centered reverse-stamp exit. */

.folkkeep-loader {
  overflow: hidden;
  padding: 12px;
  background: transparent;
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
  transition: none;
  isolation: isolate;
}

.folkkeep-loader::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    radial-gradient(circle at 50% 48%, rgb(20 14 10 / 5%) 0 20%, rgb(10 8 7 / 28%) 52%, rgb(7 6 5 / 68%) 100%),
    rgb(8 7 6 / 22%);
  content: "";
  opacity: 1;
  pointer-events: none;
  transition: none;
}

.folkkeep-loader__panel {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  width: 100%;
  min-height: 100%;
  place-items: center;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

  .folkkeep-loader__emblem {
    --emblem-main-size: clamp(350px, 34vw, 500px);
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: var(--emblem-main-size);
  aspect-ratio: 1.08;
  place-items: center;
  visibility: hidden;
  transform: translate3d(calc(-50% - 90vw), calc(-50% + 68vh), 0) rotate(-11deg) scale(.74);
  transform-origin: 48% 52%;
  will-change: transform;
}

.folkkeep-loader__ring-track,
.folkkeep-loader__title-track {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  will-change: transform, clip-path;
}

.folkkeep-loader__ring,
.folkkeep-loader__title {
  display: block;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  image-rendering: auto;
}

.folkkeep-loader__ring {
  z-index: 1;
  width: 88%;
  height: 88%;
  filter: drop-shadow(0 18px 16px rgb(0 0 0 / 56%));
  animation: folkkeep-timber-ring 7.2s linear infinite;
  will-change: transform;
}

.folkkeep-loader__title {
  z-index: 2;
  width: 100%;
  height: auto;
  filter:
    drop-shadow(0 4px 1px rgb(17 9 5 / 54%))
    drop-shadow(0 18px 18px rgb(0 0 0 / 48%));
  transform: translateZ(0) scale(1.04);
}

html[data-frame-ready="true"] .folkkeep-loader__emblem {
  visibility: visible;
  animation: folkkeep-emblem-stamp 560ms cubic-bezier(.18, .9, .24, 1.18) 620ms both;
}

.folkkeep-loader__fallback {
  position: relative;
  z-index: 3;
  margin-top: -46px;
  padding: 7px 10px;
  border-radius: 5px;
  background: rgb(19 12 9 / 88%);
}

/* The future film window is the only layer that dissolves. */
.scene::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    radial-gradient(ellipse at 34% 38%, rgb(93 78 66 / 16%), transparent 31%),
    radial-gradient(ellipse at 72% 63%, rgb(77 64 55 / 13%), transparent 35%),
    linear-gradient(112deg, #080909 0%, #111312 47%, #070808 100%);
  box-shadow: inset 0 0 110px rgb(0 0 0 / 80%);
  content: "";
  opacity: 1;
  pointer-events: none;
  transition: none;
}

html[data-load-state="ready"] .scene::after {
  opacity: 0;
  visibility: hidden;
  transition: opacity 560ms ease 520ms, visibility 0s linear 1080ms;
}

/* Beams travel from outside the scene and seat one after another. */
.portal-frame {
  opacity: 1;
  visibility: hidden;
  transition: none;
}

html[data-frame-ready="true"] .portal-frame {
  opacity: 1;
  visibility: visible;
  transition: none;
}

.portal-rail {
  opacity: 1;
  visibility: hidden;
  will-change: transform;
}

.portal-rail--top { transform: translate3d(0, -132%, 0); }
.portal-rail--right { transform: translate3d(132%, 0, 0); }
.portal-rail--bottom { transform: translate3d(0, 132%, 0); }
.portal-rail--left { transform: translate3d(-132%, 0, 0); }

html[data-frame-ready="true"] .portal-rail {
  visibility: visible;
  animation-duration: 170ms;
  animation-timing-function: cubic-bezier(.16, .84, .24, 1.18);
  animation-fill-mode: both;
}

html[data-frame-ready="true"] .portal-rail--top {
  animation-name: folkkeep-rail-top-seat;
  animation-delay: 0ms;
}

html[data-frame-ready="true"] .portal-rail--right {
  animation-name: folkkeep-rail-right-seat;
  animation-delay: 180ms;
}

html[data-frame-ready="true"] .portal-rail--bottom {
  animation-name: folkkeep-rail-bottom-seat;
  animation-delay: 360ms;
}

html[data-frame-ready="true"] .portal-rail--left {
  animation-name: folkkeep-rail-left-seat;
  animation-delay: 540ms;
}

/* The surroundings slide and seat like physical pieces after the rails. */
.wood-surround,
.portal-gaps,
.ambient-shade,
.ambient-backdrop {
  opacity: 1;
  visibility: hidden;
  transition: none;
}

html[data-frame-ready="true"] .wood-surround,
html[data-frame-ready="true"] .ambient-shade {
  visibility: visible;
  animation: folkkeep-surround-slide-left 430ms cubic-bezier(.16, .84, .24, 1.08) 710ms both;
}

html[data-frame-ready="true"] .portal-gaps {
  visibility: visible;
}

.portal-gap--left { transform: translate3d(-108%, 0, 0); }
.portal-gap--right { transform: translate3d(108%, 0, 0); }
.portal-gap--top { transform: translate3d(0, -108%, 0); }
.portal-gap--bottom { transform: translate3d(0, 108%, 0); }

html[data-frame-ready="true"] .portal-gap {
  animation-duration: 300ms;
  animation-timing-function: cubic-bezier(.16, .84, .24, 1.1);
  animation-fill-mode: both;
}

html[data-frame-ready="true"] .portal-gap--left {
  animation-name: folkkeep-gap-left-seat;
  animation-delay: 710ms;
}

html[data-frame-ready="true"] .portal-gap--right {
  animation-name: folkkeep-gap-right-seat;
  animation-delay: 790ms;
}

html[data-frame-ready="true"] .portal-gap--top {
  animation-name: folkkeep-gap-top-seat;
  animation-delay: 870ms;
}

html[data-frame-ready="true"] .portal-gap--bottom {
  animation-name: folkkeep-gap-bottom-seat;
  animation-delay: 950ms;
}

@media (orientation: portrait) {
  html[data-frame-ready="true"] .ambient-backdrop {
    opacity: 1;
    visibility: visible;
    animation: folkkeep-surround-slide-right 430ms cubic-bezier(.16, .84, .24, 1.08) 710ms both;
  }
}

@media (orientation: landscape) {
  .ambient-backdrop,
  html[data-frame-ready="true"] .ambient-backdrop,
  html[data-load-state="ready"] .ambient-backdrop {
    opacity: 0;
    visibility: hidden;
    animation: none;
  }
}

/* The illustration is composited first; the dark veil then clears over it. */
html[data-load-state="ready"] .folkkeep-loader {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: none;
  pointer-events: none;
}

html[data-load-state="ready"] .folkkeep-loader::before {
  opacity: 0;
  transition: opacity 560ms ease 520ms;
}

/* Drop the temporary compositor layers after assembly so the wood is rasterized at final size. */
html[data-load-state="ready"] .portal-rail {
  animation: none;
  transform: none;
  will-change: auto;
}

html[data-load-state="ready"] .folkkeep-loader__emblem {
  animation: folkkeep-emblem-unstamp 660ms cubic-bezier(.18, .82, .24, 1) 1900ms both;
  transform-origin: 50% 50%;
}

html[data-intro-complete="true"] .folkkeep-loader {
  display: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

html[data-intro-complete="true"] .folkkeep-loader::before {
  opacity: 0;
  transition: none;
}

html[data-intro-complete="true"] .folkkeep-loader__emblem {
  top: 50%;
  left: 50%;
  width: var(--emblem-main-size);
  opacity: 0;
  visibility: hidden;
  animation: none;
  transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(.34);
}

html[data-intro-complete="true"] .folkkeep-loader__ring,
html[data-intro-complete="true"] .folkkeep-loader__ring-track,
html[data-intro-complete="true"] .folkkeep-loader__title-track {
  animation: none;
  will-change: auto;
}

html[data-intro-complete="true"] .scene {
  will-change: auto;
}

/* The illustration is already opaque before the veil begins to dissolve. */
.scene-art {
  opacity: 0;
  visibility: hidden;
  transition: none;
}

html[data-load-state="ready"] .scene-art {
  opacity: 1;
  visibility: visible;
  transition: none;
}

/* Keep YouTube completely out of the reveal until the dark veil has cleared. */
.cinema-screen {
  opacity: 0;
  visibility: hidden;
  transition: none;
}

html[data-load-state="ready"] .cinema-screen {
  opacity: 1;
  visibility: visible;
  transition: opacity 220ms ease 1080ms, visibility 0s linear 1080ms;
}

/* Navigation remains solid and each plaque springs mechanically from below. */
.folkkeep-nav {
  opacity: 1;
  visibility: hidden;
  transition: none;
}

html[data-load-state="ready"] .folkkeep-nav {
  opacity: 1;
  visibility: visible;
  transition: none;
}

html[data-load-state="ready"] .folkkeep-nav > .folkkeep-plaque {
  animation: folkkeep-plaque-seat 390ms cubic-bezier(.16, .92, .28, 1.22) backwards;
}

html[data-load-state="ready"] .folkkeep-nav > .folkkeep-plaque:nth-child(1) { animation-delay: 1120ms; }
html[data-load-state="ready"] .folkkeep-nav > .folkkeep-plaque:nth-child(2) { animation-delay: 1200ms; }
html[data-load-state="ready"] .folkkeep-nav > .folkkeep-plaque:nth-child(3) { animation-delay: 1280ms; }
html[data-load-state="ready"] .folkkeep-nav > .folkkeep-plaque:nth-child(4) { animation-delay: 1360ms; }
html[data-load-state="ready"] .folkkeep-nav > .folkkeep-plaque:nth-child(5) { animation-delay: 1440ms; }

@keyframes folkkeep-timber-ring {
  to { transform: rotate(1turn); }
}

@keyframes folkkeep-emblem-stamp {
  0% {
    transform: translate3d(calc(-50% - 90vw), calc(-50% + 68vh), 0) rotate(-11deg) scale(.74);
  }
  58% {
    transform: translate3d(-50%, -50%, 0) rotate(1.2deg) scale(.89);
  }
  76% {
    transform: translate3d(-50%, calc(-50% - 10px), 0) rotate(-.45deg) scale(1.055);
  }
  100% {
    transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1);
  }
}

@keyframes folkkeep-rail-top-seat {
  0% { transform: translate3d(0, -132%, 0); }
  76% { transform: translate3d(0, 3%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes folkkeep-rail-right-seat {
  0% { transform: translate3d(132%, 0, 0); }
  76% { transform: translate3d(-3%, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes folkkeep-rail-bottom-seat {
  0% { transform: translate3d(0, 132%, 0); }
  76% { transform: translate3d(0, -3%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes folkkeep-rail-left-seat {
  0% { transform: translate3d(-132%, 0, 0); }
  76% { transform: translate3d(3%, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes folkkeep-surround-slide-left {
  0% { transform: translate3d(-104%, 0, 0); }
  78% { transform: translate3d(1.4%, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes folkkeep-surround-slide-right {
  0% { transform: translate3d(104%, 0, 0); }
  78% { transform: translate3d(-1.4%, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes folkkeep-gap-left-seat {
  0% { transform: translate3d(-108%, 0, 0); }
  78% { transform: translate3d(3%, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes folkkeep-gap-right-seat {
  0% { transform: translate3d(108%, 0, 0); }
  78% { transform: translate3d(-3%, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes folkkeep-gap-top-seat {
  0% { transform: translate3d(0, -108%, 0); }
  78% { transform: translate3d(0, 3%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes folkkeep-gap-bottom-seat {
  0% { transform: translate3d(0, 108%, 0); }
  78% { transform: translate3d(0, -3%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes folkkeep-emblem-unstamp {
  0%, 16% {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1);
  }
  34% {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) rotate(-.5deg) scale(.92);
  }
  52% {
    opacity: 1;
    transform: translate3d(-50%, calc(-50% - 8px), 0) rotate(.35deg) scale(1.045);
  }
  76% {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(.72);
  }
  100% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(.34);
  }
}

@keyframes folkkeep-plaque-seat {
  0% { transform: translate3d(0, 180px, 0) rotate(-4deg) scale(.82); }
  72% { transform: translate3d(0, -12px, 0) rotate(1deg) scale(1.025); }
  100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
}

@media (max-width: 520px) {
  .folkkeep-loader__panel {
    min-height: min(66vh, 430px);
  }

    .folkkeep-loader__emblem {
      --emblem-main-size: min(52vw, 216px);
  }

  .folkkeep-loader__ring {
    width: 84%;
    height: 84%;
  }

  .folkkeep-loader__title {
    width: 102%;
  }

  html[data-load-state="ready"] .folkkeep-nav > .folkkeep-plaque {
    animation-duration: 340ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  .folkkeep-loader__ring,
  html[data-load-state="ready"] .folkkeep-loader,
  html[data-frame-ready="true"] .portal-rail,
  html[data-frame-ready="true"] .wood-surround,
  html[data-frame-ready="true"] .portal-gaps,
  html[data-frame-ready="true"] .ambient-shade,
  html[data-frame-ready="true"] .ambient-backdrop,
  html[data-frame-ready="true"] .folkkeep-loader__emblem,
  html[data-load-state="ready"] .folkkeep-loader__emblem,
  html[data-load-state="ready"] .folkkeep-loader__ring-track,
  html[data-load-state="ready"] .folkkeep-loader__title-track,
  html[data-load-state="ready"] .folkkeep-nav > .folkkeep-plaque {
    animation: none;
  }

  html[data-load-state="ready"] .folkkeep-loader {
    opacity: 1;
    visibility: visible;
    transition: none;
  }

  html[data-load-state="ready"] .folkkeep-loader::before {
    opacity: 0;
    transition: none;
  }

  html[data-load-state="ready"] .folkkeep-loader__emblem {
    top: 50%;
    left: 50%;
    width: var(--emblem-main-size);
    opacity: 0;
    visibility: hidden;
    transform: translate3d(-50%, -50%, 0) scale(.72);
  }

  html[data-load-state="ready"] .cinema-screen {
    opacity: 1;
    visibility: visible;
    transition: none;
  }

  html[data-frame-ready="true"] .portal-rail,
  html[data-frame-ready="true"] .wood-surround,
  html[data-frame-ready="true"] .portal-gaps,
  html[data-frame-ready="true"] .ambient-shade,
  html[data-frame-ready="true"] .ambient-backdrop {
    clip-path: none;
    transform: none;
  }
}