/* Log in and Sign up: what Kordi is, beside the form.
 * Loaded after account.css, and only by login.html and register.html. The
 * left panel carries the home page's headline and line above two slow columns
 * of real product captures (assets/public/auth/); the form on the right is
 * unchanged. The captures are decoration: aria-hidden and inert in the
 * markup, still under prefers-reduced-motion, paused by the round button
 * (auth-story.js), and left out on phones, where only the two lines show. */

.x-story { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(400px, .88fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "copy form" "reel form"; min-height: max(640px, calc(100vh - 68px)); padding: 8px 24px 24px; }

/* The panel behind the story, with faint leaves toned to the page. */
.x-story-panel { position: relative; grid-area: 1 / 1 / 3 / 2; overflow: hidden; border-radius: 24px; background: var(--paper-alt); }
.x-story-leaf { position: absolute; height: auto; pointer-events: none; }
.x-story-leaf-sprig { top: -18px; right: -28px; width: 300px; transform: rotate(-8deg); }
.x-story-leaf-fern { bottom: -30px; left: -46px; width: 190px; transform: rotate(14deg); opacity: .8; }

/* The home page's headline and line. */
.x-story-copy { position: relative; z-index: 1; grid-area: copy; padding: clamp(40px, 5vw, 64px) clamp(32px, 4.5vw, 64px) 28px; }
.x-story-headline { margin: 0; color: var(--ink); font-family: var(--display); font-size: clamp(2.25rem, 1.2rem + 2.6vw, 3.75rem); font-weight: 600; line-height: 1.06; letter-spacing: -.05em; text-wrap: balance; }
.x-story-headline span { color: var(--cardinal); white-space: nowrap; }
.x-story-line { max-width: 40ch; margin: 18px 0 0; color: var(--muted); font-size: clamp(1rem, .95rem + .3vw, 1.1875rem); line-height: 1.55; text-wrap: pretty; }

/* The form keeps account.css's .x-auth column; the story carries the big type. */
.x-story > .x-auth { grid-area: form; justify-content: center; padding: 40px clamp(24px, 4vw, 72px); }
.x-story .x-auth-card { width: min(100%, 400px); }
.x-story > .x-auth > .x-auth-foot { width: min(100%, 400px); margin-top: 32px; }
.interior-page .x-story .x-auth-card h1 { margin-bottom: 28px; font-size: clamp(1.75rem, 1.4rem + .9vw, 2.25rem); font-weight: 600; line-height: 1.15; letter-spacing: -.035em; }

/* Two columns of captures, each track holding its set twice so moving it by
 * half its height loops without a seam (the bottom padding equals the gap).
 * Every image declares its size, so nothing moves while they load. */
.x-story-reel { position: relative; z-index: 1; grid-area: reel; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; min-height: 360px; margin: 0 clamp(32px, 4.5vw, 64px); overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%); }
.x-story-col { position: relative; min-width: 0; }
.x-story-track { position: absolute; inset: 0 0 auto; display: grid; gap: 20px; padding-bottom: 20px; }
.x-story-track img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 12px; background: #fff; box-shadow: 0 1px 2px #1918170a, 0 12px 32px #19181712; }
@keyframes x-story-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes x-story-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.x-story-col:first-child .x-story-track { animation: x-story-up 110s linear infinite; }
.x-story-col:last-child .x-story-track { animation: x-story-down 130s linear -48s infinite; }
.x-story-paused .x-story-col .x-story-track { animation-play-state: paused; }

/* Pause and play. */
.x-story-motion { position: relative; z-index: 3; grid-area: reel; align-self: end; justify-self: end; display: grid; place-items: center; width: 36px; height: 36px; margin: 0 18px 18px 0; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: var(--paper); color: var(--muted); cursor: pointer; transition: color 120ms ease, border-color 120ms ease; }
.x-story-motion:hover { color: var(--ink); border-color: var(--rule-strong); }
.x-story-motion:focus-visible { outline: 2px solid var(--cardinal); outline-offset: 2px; }
.x-story-motion svg { width: 14px; height: 14px; }
.x-story-motion .x-story-play, .x-story-paused .x-story-motion .x-story-pause { display: none; }
.x-story-paused .x-story-motion .x-story-play { display: block; }

@media (prefers-reduced-motion: reduce) {
  .x-story-track { animation: none !important; }
  .x-story-motion { display: none; }
}

/* Narrower windows keep one column of captures. */
@media (max-width: 1100px) {
  .x-story { grid-template-columns: minmax(0, 1fr) minmax(380px, 1fr); }
  .x-story-reel { grid-template-columns: 1fr; }
  .x-story-col:last-child { display: none; }
}

/* Phones and small tablets: no captures and no motion, the two lines above the form. */
@media (max-width: 760px) {
  .x-story { display: block; min-height: 0; padding: 0; }
  .x-story-panel, .x-story-reel, .x-story-motion { display: none; }
  .x-story-copy { padding: 28px 16px 0; text-align: center; }
  .x-story-headline { font-size: clamp(1.625rem, 7.4vw, 2rem); letter-spacing: -.045em; }
  .x-story-line { max-width: 32ch; margin: 8px auto 0; font-size: .9375rem; line-height: 1.5; }
  .x-story > .x-auth { padding: 28px 16px 40px; }
  .interior-page .x-story .x-auth-card h1 { margin-bottom: 20px; font-size: 1.375rem; }
}