/*
 * Guest landing, /guest entry step. Paper editorial on fo-ui-kit tokens.
 * The arch is glass fruit (photo + frosted berries). Cart, shop, and checkout chrome never read it.
 * Motion is GSAP: loader 880ms, enter 640ms power3.out, stagger 60ms, fade 320ms.
 * Reduced motion removes every animation and transform.
 */

.guest-store.guest-landing {
  --gl-gutter: clamp(20px, 4.5vw, 64px);
  --gl-max: 1320px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100svh;
  padding: 0 var(--gl-gutter) calc(28px + env(safe-area-inset-bottom, 0px));
  background: var(--bg-canvas);
  color: var(--fg-default);
  font-family: var(--font-dm-sans), "DM Sans", var(--fb-font-body);
}

.gl-bar,
.gl-hero,
.gl-steps {
  width: min(100%, var(--gl-max));
  margin-inline: auto;
}

.gl-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
  border-bottom: var(--fb-stroke-hair) solid var(--border-hairline);
}

.gl-bar-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 14px;
}

.gl-bar-prompt {
  display: none;
  color: var(--fg-muted);
}

.gl-bar-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  color: var(--fg-default);
  font-size: 15px;
  font-weight: 650;
  text-decoration: underline;
  text-decoration-thickness: var(--fb-stroke-hair);
  text-underline-offset: 0.3em;
  transition: color var(--fb-dur-fast) var(--fb-ease-out);
}

.gl-bar-link:hover { color: var(--accent-text); }

.gl-hero {
  display: grid;
  gap: 28px;
  align-content: center;
  padding-block: 24px 40px;
}

.gl-copy { min-width: 0; }

.gl-gate {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  margin: 0;
  padding: 6px 14px 6px 11px;
  border-radius: var(--fb-radius-pill);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.gl-lock {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.gl-title {
  margin: 22px 0 0;
  font-family: var(--font-instrument), var(--fb-font-display);
  font-size: clamp(3.25rem, 1rem + 7.4vw, 8.75rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--fg-default);
}

.gl-title span,
.gl-title em { display: block; }

.gl-title em {
  font-style: italic;
  color: var(--accent-text);
  letter-spacing: -0.03em;
}

.guest-landing .guest-lead {
  max-width: 36ch;
  margin: clamp(20px, 3.2svh, 32px) 0 0;
  color: var(--fg-secondary);
  font-size: clamp(1.0625rem, 0.96rem + 0.4vw, 1.25rem);
  line-height: 1.5;
  text-wrap: pretty;
}

.gl-actions {
  display: grid;
  gap: 12px;
  margin-top: clamp(28px, 4.4svh, 44px);
}

.gl-signed-in {
  margin: 0;
  color: var(--fg-secondary);
  font-size: 16px;
  line-height: 1.4;
}

button.gl-cta {
  font-family: inherit;
  cursor: pointer;
}

.gl-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 28px;
  border: var(--fb-stroke-hair) solid transparent;
  border-radius: var(--fb-radius-pill);
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-decoration: none;
  transition:
    transform var(--fb-dur-fast) var(--fb-ease-out),
    box-shadow var(--fb-dur-fast) var(--fb-ease-out),
    background-color var(--fb-dur-fast) var(--fb-ease-out),
    border-color var(--fb-dur-fast) var(--fb-ease-out);
}

.gl-cta--primary {
  background: var(--accent-fill);
  color: var(--fg-on-accent);
}

.gl-cta--primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--fo-elevation-hover);
}

.gl-cta-arrow {
  display: inline-block;
  transition: transform var(--fb-dur-fast) var(--fb-ease-out);
}

.gl-cta--primary:hover .gl-cta-arrow { transform: translateX(3px); }

.gl-cta--quiet {
  background: transparent;
  color: var(--fg-default);
  border-color: var(--border-strong);
}

.gl-cta--quiet:hover {
  background: var(--bg-surface);
  border-color: var(--fg-default);
}

.gl-cta:active { transform: translateY(0); }

.gl-cta:focus-visible,
.gl-bar-link:focus-visible,
.guest-landing .guest-brand:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 3px;
  border-radius: var(--fb-radius-pill);
}

.gl-arch {
  position: relative;
  order: -1;
  width: min(100%, 420px);
  aspect-ratio: 4 / 5;
  max-height: 42svh;
  justify-self: center;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--fb-radius-pill) var(--fb-radius-pill) var(--fb-radius-sheet) var(--fb-radius-sheet);
  background: var(--bg-sunken);
  box-shadow: var(--shadow-float);
}

.gl-arch-wash,
.gl-arch-photo,
.gl-glass,
.gl-arch-sheen {
  position: absolute;
  pointer-events: none;
}

.gl-arch-wash {
  inset: -12%;
  background:
    radial-gradient(circle at 28% 24%, var(--fb-coral-300), transparent 46%),
    radial-gradient(circle at 72% 58%, var(--fb-violet), transparent 42%),
    radial-gradient(circle at 48% 88%, var(--fb-sky), transparent 40%);
  opacity: 0.55;
}

.gl-arch-photo {
  inset: 10% 8% 8%;
  width: 84%;
  height: 82%;
  margin: auto;
  object-fit: contain;
  filter: saturate(1.05);
}

.gl-glass {
  border-radius: var(--fb-radius-pill);
  border: var(--fb-stroke-hair) solid color-mix(in srgb, var(--fb-white) 72%, transparent);
  background: color-mix(in srgb, var(--fb-white) 18%, transparent);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.gl-glass::before,
.gl-glass::after {
  content: "";
  position: absolute;
  border-radius: var(--fb-radius-pill);
  pointer-events: none;
}

.gl-glass::before {
  left: 16%;
  top: 10%;
  width: 42%;
  height: 22%;
  background: color-mix(in srgb, var(--fb-white) 78%, transparent);
  filter: blur(1px);
}

.gl-glass::after {
  right: 18%;
  bottom: 16%;
  width: 18%;
  height: 12%;
  background: color-mix(in srgb, var(--fb-white) 55%, transparent);
}

.gl-glass--berry {
  width: 48%;
  aspect-ratio: 1;
  left: 12%;
  top: 14%;
  background: color-mix(in srgb, var(--fb-coral-500) 28%, transparent);
}

.gl-glass--citrus {
  width: 36%;
  aspect-ratio: 1;
  right: 8%;
  top: 36%;
  background: color-mix(in srgb, var(--fb-amber) 34%, transparent);
}

.gl-glass--plum {
  width: 30%;
  aspect-ratio: 1;
  left: 30%;
  bottom: 10%;
  background: color-mix(in srgb, var(--fb-violet) 30%, transparent);
}

.gl-arch-sheen {
  inset: 0;
  background: linear-gradient(
    118deg,
    color-mix(in srgb, var(--fb-white) 42%, transparent) 0%,
    transparent 36%,
    transparent 62%,
    color-mix(in srgb, var(--fb-white) 18%, transparent) 100%
  );
}

.gl-loader {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 30;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 18px;
  background: var(--bg-canvas);
}

.guest-landing.is-booting .gl-loader { display: flex; }

.gl-loader-mark {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: var(--fb-radius-input);
  background: var(--accent-fill);
  color: var(--fg-on-accent);
  font-size: 22px;
  font-weight: 800;
  box-shadow: var(--shadow-float);
}

.gl-loader-line {
  width: 112px;
  height: 2px;
  overflow: hidden;
  border-radius: var(--fb-radius-pill);
  background: var(--border-hairline);
}

.gl-loader-line span {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left center;
  background: var(--accent-fill);
}

.gl-steps {
  padding-top: 22px;
  border-top: var(--fb-stroke-hair) solid var(--border-hairline);
}

.gl-steps ol {
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gl-steps li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 12px;
  row-gap: 2px;
}

.gl-step-n {
  grid-row: span 2;
  padding-top: 2px;
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.gl-steps strong {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.gl-steps p {
  max-width: 34ch;
  margin: 0;
  color: var(--fg-muted);
  font-size: 14px;
  line-height: 1.45;
}


@media (min-width: 640px) {
  .gl-bar-prompt { display: inline; }
  .gl-actions {
    display: flex;
    flex-wrap: wrap;
  }
}

@media (min-width: 720px) {
  .gl-bar { min-height: 88px; }
  .gl-steps ol {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(24px, 4vw, 64px);
  }
}

@media (min-width: 960px) {
  .gl-hero {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    align-items: center;
    gap: clamp(40px, 5vw, 96px);
    padding-block: clamp(32px, 6svh, 72px);
  }

  .gl-arch {
    order: 0;
    justify-self: end;
    width: auto;
    height: min(62svh, 640px);
    max-height: none;
    max-width: 100%;
  }
}

/* Phone only. Full width plus 42svh squashes the arch, so the berries clip and fill the screen. */
@media (max-width: 480px) {
  .gl-arch {
    width: min(68%, 240px);
    max-height: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gl-cta,
  .gl-cta-arrow,
  .gl-bar-link { transition: none; }

  .gl-cta--primary:hover,
  .gl-cta--primary:hover .gl-cta-arrow { transform: none; }

  .gl-glass { backdrop-filter: none; -webkit-backdrop-filter: none; }

  .guest-landing.is-booting .gl-loader { display: none; }
}