/* The card is a filing jacket. Its projecting tab and bottom leaves read as
   physical pieces at rest, and come into register as the card arrives. */
.panel-parallax { position: relative; isolation: isolate; }
.panel-parallax::before, .panel-parallax::after {
  content: ""; pointer-events: none; z-index: -1;
  position: absolute; inset: 12px 6px -4px;
  background: #eff1f1; border: 1px solid #cbd0d0; border-radius: 4px;
}
.panel-parallax::before { inset: 18px 12px -7px; background: #f5f6f6; border-color: #d3d7d7; }
.access-panel { position: relative; }
.index-tab {
  position: absolute; right: 24px; top: -7px; width: 47px; height: 7px;
  display: flex; align-items: center; justify-content: flex-end; gap: 3px;
  padding-right: 7px; color: #707a7c; background: #7c8587; pointer-events: none;
  clip-path: polygon(0 100%, 7px 0, 100% 0, 100% 100%);
}
.index-tab::before { content: ""; position: absolute; inset: 1px 1px 0 2px; background: #e5e8e9; clip-path: inherit; }
.index-tab i { position: relative; width: 1px; height: 3px; background: currentColor; }
.index-tab i:last-child { height: 4px; color: #8e7650; }
.field label, .input-wrap svg { transition: color .22s, stroke .22s; }
.input-wrap::after {
  content: ""; position: absolute; pointer-events: none; bottom: 1px; left: 2px; right: 2px;
  height: 2px; background: linear-gradient(to right, #505d62 calc(100% - 8px), #aa9166 calc(100% - 8px));
  transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.18,.71,.23,1);
}
.field:focus-within .input-wrap::after, .demo-readout:focus-within::after { transform: scaleX(1); }
.field:focus-within label { color: #202b30; }
.field:focus-within .input-wrap svg { stroke: #34464e; }
input:focus, .demo-value:focus { border-color: #718088; box-shadow: none; }
input:focus-visible { outline-color: #85939a; outline-offset: 2px; outline-width: 1px; }
.input-wrap:has(input:not(:placeholder-shown)) svg { stroke: #33434a; }
.input-wrap:has(input[aria-invalid="true"])::after {
  transform: scaleX(1); background: #955644;
}
input[aria-invalid="true"] { border-color: #a97062; }
[data-error]:not(:empty) { border-left: 2px solid #97634e; background: #f5eeee; padding: 7px 10px; }
[data-entry-error="1"] .index-tab { color: #92644a; }
.submit { position: relative; isolation: isolate; overflow: hidden; }
.submit::before {
  content: ""; position: absolute; pointer-events: none;
  left: 0; right: 0; bottom: 0; height: 2px; background: #b5a37c;
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .31s var(--ease);
}
.submit:focus-visible::before { transform: scaleX(1); }
.submit:focus-visible .submit-arrow { transform: translateX(3px); }
.submit .submit-arrow { transition: transform .32s var(--ease); }
.submit:active { transform: translateY(1px); }
@media (hover: hover) {
  .submit:hover { background: #2f3e3e; }
  .submit:hover::before { transform: scaleX(1); }
  .submit:hover .submit-arrow { transform: translateX(4px); }
}
@keyframes om-entry-leaf {
  from { transform: translateY(-9px) perspective(650px) rotateX(6deg); }
  to { transform: none; }
}
@keyframes om-entry-panel {
  from { opacity: .55; transform: perspective(680px) translateY(8px) rotateX(-7deg); }
  to { opacity: 1; transform: none; }
}
@keyframes om-entry-tab {
  from { transform: translate(12px,4px); } to { transform: none; }
}
@keyframes om-entry-collate { from { transform: translate(-7px,7px); } to { transform: none; } }
@keyframes om-entry-type { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes om-entry-send { from { transform: translateX(-108%); } to { transform: translateX(108%); } }
@keyframes om-entry-error { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion-paused="true"]) .access-panel {
    transform-origin: 64% 12%; animation: om-entry-panel .58s var(--ease) backwards;
  }
  html:not([data-motion-paused="true"]) .panel-parallax::before {
    animation: om-entry-collate .7s var(--ease) .09s backwards;
  }
  html:not([data-motion-paused="true"]) .panel-parallax::after {
    animation: om-entry-leaf .53s var(--ease) .05s backwards;
  }
  html:not([data-motion-paused="true"]) .index-tab {
    animation: om-entry-tab .65s var(--ease) .10s backwards;
  }
  html:not([data-motion-paused="true"]) .access-panel h2,
  html:not([data-motion-paused="true"]) .form-description {
    animation: om-entry-type .43s var(--ease) .08s backwards;
  }
  html:not([data-motion-paused="true"]) [data-error]:not(:empty) { animation: om-entry-error .3s ease-out both; }
  html.om-entry-sending:not([data-motion-paused="true"]) .submit::before {
    height: 2px; opacity: .95;
    background: linear-gradient(90deg, transparent, #e7dec4 48%, transparent);
    animation: om-entry-send .98s linear infinite;
  }
}
@media (max-width: 1040px) { .index-tab { right: 18px; } }
@media (max-height: 490px) { .panel-parallax::before { bottom: -4px; } .panel-parallax::after { bottom: -2px; } }
html[data-motion-paused="true"] .input-wrap::after,
html[data-motion-paused="true"] .submit, html[data-motion-paused="true"] .submit::before,
html[data-motion-paused="true"] .submit .submit-arrow { transition: none; }

/* Optional same-origin document handoff; native form navigation is unchanged. */
@view-transition { navigation: auto; }