/* yamart.org visitor welcome (visitors/routes.ts; owner, 2026-11-07). No JavaScript anywhere: the ENTER panel
   fades in after the 5-second film by a CSS animation. Palette from the showcase (adire indigo, kola, palm oil). */
:root { --indigo: #1b2470; --night: #0c1030; --surface: #151a45; --ink: #f3f4fb; --muted: #c9cdf0; --palm: #b93d0b; --palm-soft: #e8a07a; --kola: #a3214f; --line: #2f3780; --okra: #1d7444; }
* { box-sizing: border-box; margin: 0; }
html { background: var(--night); color: var(--ink); font: 400 17px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-text-size-adjust: 100%; }
body { min-height: 100dvh; }
a { color: var(--palm-soft); }
:focus-visible { outline: 3px solid var(--palm-soft); outline-offset: 3px; border-radius: 6px; }
.brand { font: 700 15px/1 system-ui, sans-serif; letter-spacing: .32em; color: var(--palm-soft); }
h1 { font-size: clamp(28px, 5vw, 44px); line-height: 1.1; margin: 14px 0 10px; letter-spacing: -.01em; }
.lede { color: var(--muted); font-size: 18px; max-width: 42ch; }
.small { color: var(--muted); font-size: 14px; margin-top: 18px; }

/* the welcome: film full screen, then ENTER */
.welcome { position: fixed; inset: 0; display: grid; place-items: end center; background: var(--night); overflow: hidden; }
.film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.after { position: relative; text-align: center; padding: 32px 24px; border-radius: 28px; background: rgb(12 16 48 / 78%); backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(16px); animation: after .9s ease 5s forwards; max-width: 640px; margin: 0 16px 4vh; }
.after .lede { margin: 0 auto 26px; }
@keyframes after { to { opacity: 1; transform: none; } }
.enter { display: inline-flex; align-items: center; justify-content: center; min-height: 58px; padding: 0 38px; border-radius: 999px; background: var(--palm); color: #fff;
  font-weight: 700; font-size: 19px; text-decoration: none; letter-spacing: .02em; }
.enter:hover { background: #d14810; }
/* Owner, 2026-11-09: two ways in. BEGIN (new: register) leads; ENTER SITE (registered) sits beside it, outlined. */
.ctas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.ctas .enter { min-width: 180px; }
.enter.alt { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--palm-soft); }
.enter.alt:hover { background: rgb(232 160 122 / 16%); }
@media (max-width: 420px) { .ctas .enter { flex: 1 1 100%; } }
.go { margin-top: 26px; }
/* portrait phones: show the whole film (the wordmark sits in its middle), on the same indigo */
@media (orientation: portrait) { .film { object-fit: contain; } .after { margin-bottom: 9vh; } }
.after h1 { font-size: clamp(24px, 4vw, 34px); display: grid; }
/* Owner, 2026-11-08: REMARKABLY BUILT flashes, then SIGNATURE DESIGN appears and stays. Both share one place, so
   nothing moves. The panel arrives at 5 s. */
.after h1 > span { grid-area: 1 / 1; }
.after h1 .flash { opacity: 0; animation: flash 1.7s ease 5.3s both; }
.after h1 .stay { opacity: 0; animation: stay .9s ease 7s forwards; }
@keyframes flash { 0% { opacity: 0; } 18% { opacity: 1; } 72% { opacity: 1; } 100% { opacity: 0; } }
@keyframes stay { to { opacity: 1; } }
.skip { position: absolute; right: 22px; top: 18px; color: var(--muted); font-size: 15px; padding: 10px; }
@media (prefers-reduced-motion: reduce) { .after { animation-duration: .01s; } .after h1 .flash { display: none; } .after h1 .stay { opacity: 1; animation: none; } }

/* the form and the code page */
.panel { max-width: 560px; margin: 0 auto; padding: clamp(32px, 7vw, 72px) 22px 48px; }
form { display: grid; gap: 16px; margin-top: 26px; }
.two { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
label { display: grid; gap: 6px; font-weight: 600; font-size: 15px; }
input, select { font: inherit; color: var(--ink); background: var(--surface); border: 2px solid var(--line); border-radius: 12px; min-height: 52px; padding: 0 14px; }
input:focus, select:focus { border-color: var(--palm-soft); outline: none; }
input.code { font: 700 30px/1 ui-monospace, Consolas, monospace; letter-spacing: .4em; text-align: center; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; color: var(--muted); font-size: 14px; }
.consent input { min-height: 0; width: 22px; height: 22px; margin-top: 1px; flex: none; accent-color: var(--palm); }
.hide { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
button { font: 700 18px/1 system-ui, sans-serif; min-height: 56px; border: 0; border-radius: 999px; background: var(--palm); color: #fff; cursor: pointer; margin-top: 6px; }
button:hover { background: #d14810; }
.problem { margin-top: 18px; padding: 12px 16px; border-radius: 12px; background: rgb(163 33 79 / 25%); border: 1px solid var(--kola); }
@media (max-width: 480px) { .two:not(.keep) { grid-template-columns: 1fr; } }
/* Country and City share a row on every screen (owner, 2026-11-08). */
.two > label { min-width: 0; }
.two.keep { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.two input, .two select { width: 100%; min-width: 0; box-sizing: border-box; }
select { width: 100%; min-width: 0; text-overflow: ellipsis; }