@media (prefers-reduced-motion: no-preference) {
  .velnor-page-entering > main {
    animation: velnor-soft-in 420ms cubic-bezier(.22, .68, .3, 1) both;
  }

  :root[data-velnor-route] {
    --route-cut: clamp(22px, 5.6vw, 80px);
    --route-close: 195ms;
    --route-open: 320ms;
  }

  :root[data-velnor-route]::before,
  :root[data-velnor-route]::after {
    position: fixed;
    z-index: 20;
    inset: calc(-2px - var(--route-cut)) 0;
    pointer-events: none;
    content: '';
  }

  :root[data-velnor-route]::before {
    background: #d5b47e;
    clip-path: polygon(0 0, 50% var(--route-cut), 100% 0, 100% 100%, 50% calc(100% - var(--route-cut)), 0 100%);
  }

  :root[data-velnor-route]::after {
    z-index: 21;
    background: url("favicon.svg") center / clamp(2.5rem, 5vw, 4.4rem) no-repeat,
                radial-gradient(ellipse at center, #1d150d 0%, #0d0b09 54%);
    clip-path: polygon(0 1px, 50% calc(var(--route-cut) + 1px), 100% 1px, 100% calc(100% - 1px), 50% calc(100% - var(--route-cut) - 1px), 0 calc(100% - 1px));
  }

  :root[data-velnor-route="closing"]::before,
  :root[data-velnor-route="closing"]::after {
    animation: velnor-route-close var(--route-close) cubic-bezier(.52,.04,.87,.38) both;
  }

  :root[data-velnor-route="opening"]::before,
  :root[data-velnor-route="opening"]::after {
    animation: velnor-route-open var(--route-open) cubic-bezier(.13,.64,.32,1) both;
  }

  :root[data-velnor-route="opening"] main {
    animation: velnor-route-content var(--route-open) cubic-bezier(.16,.62,.28,1) both;
  }

  @media (max-width: 670px) {
    :root[data-velnor-route] {
      --route-cut: 17px;
      --route-close: 145ms;
      --route-open: 235ms;
    }
  }

  .velnor-reveal-pending {
    opacity: 0;
    translate: 0 22px;
  }

  .velnor-revealed {
    animation: velnor-reveal 660ms cubic-bezier(.22, .68, .3, 1) var(--velnor-reveal-delay, 0ms) both;
  }

  .velnor-reveal-pending:focus-within,
  .velnor-revealed:focus-within,
  .velnor-reveal-pending:target,
  .velnor-revealed:target {
    opacity: 1;
    translate: none;
    animation: none;
  }

  .velnor-intro[open] {
    position: fixed;
    inset: 0;
    display: grid;
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: none;
    max-block-size: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: transparent;
    color: #f6e8cf;
  }

  .velnor-intro::backdrop { background: transparent; }

  .velnor-intro-visual {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
  }

  .velnor-intro-slice {
    position: absolute;
    inset-inline: 0;
    background: #0b0a09;
    animation-duration: 590ms;
    animation-timing-function: cubic-bezier(.74, 0, .24, 1);
    animation-fill-mode: both;
  }

  .velnor-intro-slice:first-child {
    inset-block: 0 66%;
    border-block-end: 1px solid #b28a4d38;
    animation-name: velnor-slice-top;
    animation-delay: 850ms;
  }

  .velnor-intro-slice-center {
    inset-block: 32.9% 32.9%;
    background: radial-gradient(ellipse at center, #251b10, #100e0b 59%, #0b0a09);
    border-inline-end: 1px solid #bc945d;
    animation-name: velnor-slice-center;
    animation-delay: 940ms;
  }

  .velnor-intro-slice:nth-child(3) {
    inset-block: 66% 0;
    border-block-start: 1px solid #b28a4d38;
    animation-name: velnor-slice-bottom;
    animation-delay: 875ms;
  }

  .velnor-intro-identity {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: .32rem;
    padding-inline: 1rem;
    text-align: center;
    animation: velnor-identity 1260ms cubic-bezier(.22, .68, .3, 1) both;
  }

  .velnor-intro-mark {
    display: block;
    width: clamp(4.25rem, 8vw, 6rem);
    height: auto;
    filter: drop-shadow(0 0 21px #b1814440);
  }

  .velnor-intro-wordmark {
    padding-inline-start: .26em;
    font-family: var(--display, Georgia, serif);
    font-size: clamp(2.3rem, 6vw, 5rem);
    letter-spacing: .26em;
    line-height: 1;
  }

  .velnor-intro-rule {
    width: clamp(4rem, 12vw, 9rem);
    height: 1px;
    margin-block: .55rem .25rem;
    background: linear-gradient(90deg, transparent, #c9a467, transparent);
    animation: velnor-intro-rule 750ms 110ms cubic-bezier(.22, .68, .3, 1) both;
  }

  .velnor-intro-caption {
    padding-inline-start: .2em;
    color: #e0bf88;
    font-size: clamp(.57rem, 1.7vw, .68rem);
    font-weight: 620;
    letter-spacing: .2em;
    text-transform: uppercase;
  }

  .velnor-intro-skip {
    position: absolute;
    inset-inline-end: max(1.25rem, env(safe-area-inset-right));
    inset-block-end: max(1.25rem, env(safe-area-inset-bottom));
    min-height: 44px;
    padding: .6rem .85rem;
    border: 1px solid #aa8450;
    background: #17130f;
    color: #f6e8cf;
    font-size: .75rem;
  }

  .velnor-intro-skip:hover { background: #302417; }
  .velnor-intro-skip span { margin-inline-start: .4rem; }

  .velnor-home-opening .signature-label,
  .velnor-home-opening .signature-detail,
  .velnor-home-opening .signature-art img {
    animation: velnor-hero-arrive 520ms cubic-bezier(.22, .68, .3, 1) var(--velnor-hero-delay, 860ms) both;
  }

  .velnor-home-opening .signature-copy h1 > span {
    animation: velnor-title-line 520ms cubic-bezier(.22, .68, .3, 1) var(--velnor-title-delay, 890ms) both;
  }
  .velnor-home-opening .signature-copy h1 > span + span { --velnor-title-delay: 930ms; }
  .velnor-home-opening .signature-detail { --velnor-hero-delay: 970ms; }
  .velnor-home-opening .signature-art img { --velnor-hero-delay: 880ms; }
}

@keyframes velnor-soft-in {
  from { opacity: .75; translate: 0 8px; }
  to { opacity: 1; translate: none; }
}

@keyframes velnor-route-close {
  from { transform: translateY(102%); }
  to { transform: translateY(0); }
}

@keyframes velnor-route-open {
  from { transform: translateY(0); }
  to { transform: translateY(-102%); }
}

@keyframes velnor-route-content {
  from { translate: 0 9px; }
  to { translate: none; }
}

@keyframes velnor-reveal {
  from { opacity: 0; translate: 0 22px; }
  to { opacity: 1; translate: none; }
}

@keyframes velnor-slice-top { to { transform: translateY(-103%); } }
@keyframes velnor-slice-center { to { transform: translateX(102%); } }
@keyframes velnor-slice-bottom { to { transform: translateY(103%); } }

@keyframes velnor-identity {
  0% { opacity: 0; clip-path: inset(100% 0 0); transform: translateY(12px); }
  33%, 68% { opacity: 1; clip-path: inset(0); transform: translateY(0); }
  100% { opacity: 0; clip-path: inset(0 0 100%); transform: translateY(-12px); }
}

@keyframes velnor-intro-rule {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes velnor-hero-arrive {
  from { opacity: .18; translate: 0 14px; }
  to { opacity: 1; translate: none; }
}

@keyframes velnor-title-line {
  from { clip-path: inset(100% -.15em -.26em -.12em); translate: 0 .25em; }
  to { clip-path: inset(-.2em -.15em -.26em -.12em); translate: none; }
}

@media print {
  .velnor-intro[open] { display: none; }

  .velnor-reveal-pending,
  .velnor-revealed {
    opacity: 1;
    translate: none;
    animation: none;
  }
}