/* The mark is the user's outlined SVG, not a font or a redrawn approximation. */
.brand-entry { display: none; }

.form-trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-privacy { color: var(--muted); font-size: 14px; line-height: 1.7; margin: 28px 0; max-width: 70ch; }
.form-status:not(:empty) { border-top: 1px solid var(--rule); margin-top: 28px; padding: 22px 0; }
.form-status strong { display: block; font-weight: 500; }
.form-status span { display: block; color: var(--muted); margin-top: 6px; font-size: 14px; }
.form-status.is-error strong { color: var(--orange-text); }
.form-status:focus-visible { outline: 2px solid var(--orange); outline-offset: 6px; }
.drop-zone [data-file-summary] { display: block; color: var(--orange-text); overflow-wrap: anywhere; }
.drop-zone [data-file-summary]:empty { display: none; }
.project-form[aria-busy="true"] fieldset { opacity: .7; }

.process-track[data-journey] > div::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
}
.process-track[data-journey="1"] > div::before { transform: scaleX(.5); }
.process-track[data-journey="2"] > div::before { transform: scaleX(1); }
.process-track[data-journey] i { position: relative; z-index: 1; }
.process-track[data-journey="1"] i:nth-child(2),
.process-track[data-journey="2"] i { background: var(--orange); }

@media (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  .process-track[data-journey] > div::before {
    transition: transform 650ms cubic-bezier(.22,1,.36,1);
  }
  .process-track[data-journey] i { transition: background 250ms; }
  [data-brand-entry] .cursor { visibility: hidden; }
  [data-brand-entry] body.has-cursor { cursor: auto; }
  [data-brand-entry] .has-cursor :is(a, button) { cursor: pointer; }
  [data-brand-entry] .brand-entry {
    display: grid;
    place-items: center;
    position: fixed;
    inset: 0;
    z-index: 10000;
    pointer-events: none;
    background: var(--light, #f6f4f0);
    color: var(--dark, #1a1a1a);
    animation: dohs-entry-away 620ms cubic-bezier(.76,0,.24,1) 940ms both;
    contain: layout paint;
  }
  .brand-entry__mark {
    width: min(58vw, 310px);
    animation: dohs-mark-release 330ms cubic-bezier(.4,0,.2,1) 920ms both;
  }
  .brand-entry__mark svg { display: block; width: 100%; height: auto; overflow: visible; }
  .brand-entry__letter, .brand-entry__dot {
    transform-box: fill-box;
    transform-origin: center;
  }
  .brand-entry__letter {
    animation: dohs-letter-unfurl 470ms cubic-bezier(.22,1,.36,1) var(--letter-delay) both;
  }
  .brand-entry__dot {
    animation: dohs-mark-dot 700ms cubic-bezier(.22,1,.36,1) both;
  }
  :is([data-brand-entry="pending"], [data-brand-entry="playing"])
    :is(.hero-kicker, .hero-title, .hero-summary > p, .hero-summary > .button, .hero .scroll-link, .scroll-icon) {
    animation-play-state: paused;
  }

  /* Progressive enhancement. Unsupported browsers keep native navigation and
     the existing page arrivals, without any delayed-click fallback. */
  @view-transition { navigation: auto; }
  /* A named header creates a permanent backdrop root and blocks its glass from
     sampling the page. Keep the existing root transition, without a second
     named capture around the optical navigation. */
  ::view-transition { pointer-events: none; }
  ::view-transition-group(root) {
    animation-duration: 520ms;
    animation-timing-function: cubic-bezier(.22,1,.36,1);
  }
  ::view-transition-old(root) {
    animation: dohs-page-out 220ms cubic-bezier(.4,0,1,1) both;
  }
  ::view-transition-new(root) {
    animation: dohs-page-in 520ms cubic-bezier(.22,1,.36,1) both;
  }
  [data-page-arrival] :is(.hero-kicker, .hero-title, .hero-summary > p,
    .hero-summary > .button, .hero .scroll-link, .page-heading > *) {
    animation: none;
  }
}

@keyframes dohs-mark-dot {
  0% { opacity: 0; transform: translate(-968%,-400%) scale(.35,1.3); }
  18% { opacity: 1; transform: translate(-968%,-95%) scale(1.32,.74); }
  31% { opacity: 1; transform: translate(-968%,-155%) scale(.9,1.1); }
  42% { opacity: 1; transform: translate(-910%,-95%) scale(1.05,.96); }
  73% { opacity: 1; transform: translate(0,0) scale(1.24,.86); }
  87% { opacity: 1; transform: translate(-12%,0) scale(.96,1.04); }
  100% { opacity: 1; transform: translate(0,0) scale(1); }
}
@keyframes dohs-letter-unfurl {
  0% { opacity:0; transform:translate(var(--letter-x),var(--letter-y)) scale(.035,.08); }
  24% { opacity:1; }
  72% { opacity:1; transform:translate(0,-1.5%) scale(1.025,.99); }
  88% { transform:translate(0,.4%) scale(.997,1.005); }
  100% { opacity:1; transform:translate(0,0) scale(1); }
}
@keyframes dohs-mark-letters {
  from { opacity: 0; transform: translateY(10%); clip-path: inset(100% -2% -3%); }
  to { opacity: 1; transform: translateY(0); clip-path: inset(-3% -2% -3%); }
}
@keyframes dohs-mark-studio {
  from { opacity: 0; transform: translateY(28%); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes dohs-mark-release {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-12px) scale(.985); }
}
@keyframes dohs-entry-away {
  from { clip-path: inset(0); }
  to { clip-path: inset(0 0 100%); }
}
@keyframes dohs-page-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-12px); }
}
@keyframes dohs-page-in {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  @view-transition { navigation: none; }
  .brand-entry { display: none !important; }
}
@media print { .brand-entry { display: none !important; } }