/* public/clarks/style.css */
/* @shard C12a */
/* Forked-doorway splash: parchment-grey base, Sylvanian-woodland left archway,
   pitch-green stadium-tunnel right archway. CSS namespace: .clarks-* */

:root {
  --clarks-parchment:      #f5f0e8;
  --clarks-ember:          #c45a1a;
  --clarks-ember-dark:     #9a4010;
  --clarks-text:           #2a1a0e;

  --clarks-woodland-bg:    #e8f4d8;
  --clarks-woodland-edge:  #4a7a3a;
  --clarks-woodland-text:  #1e3e10;

  --clarks-stadium-bg:     #bce8a8;
  --clarks-stadium-edge:   #1a5222;
  --clarks-stadium-text:   #0a2e12;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

.clarks-body {
  min-height: 100%;
  background: var(--clarks-parchment);
  color: var(--clarks-text);
  font-family: system-ui, -apple-system, sans-serif;
  display: flex;
  flex-direction: column;
}

/* ── Skip link ──────────────────────────────────────────────────── */
.clarks-skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 200;
  background: var(--clarks-ember);
  color: #fff;
  padding: 10px 22px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
}
.clarks-skip:focus {
  left: 12px;
}

/* ── Brand bar (parchment, ember accent line at bottom) ─────────── */
.clarks-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  background: var(--clarks-parchment);
  border-bottom: 3px solid var(--clarks-ember);
}
.clarks-brand {
  display: block;
  height: 56px;
  width: auto;
  max-width: 100%;
}

/* ── Main doorway section ───────────────────────────────────────── */
.clarks-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 28px 20px 48px;
}

.clarks-tagline {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--clarks-ember-dark);
  text-align: center;
}

/* Two archways side-by-side, equal width */
.clarks-archways {
  display: flex;
  gap: 20px;
  width: 100%;
  max-width: 560px;
}

/* ── Individual doorway links (Lock 13: >=80px tap targets) ─────── */
.clarks-door {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 18px 12px 22px;
  border-radius: 20px;
  border-width: 3px;
  border-style: solid;
  text-decoration: none;
  cursor: pointer;
  /* Lock 13: min 80px on this surface (smallest hand = Ngaia's 6yo) */
  min-height: 80px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.clarks-door--woodland {
  background: var(--clarks-woodland-bg);
  border-color: var(--clarks-woodland-edge);
  color: var(--clarks-woodland-text);
}

.clarks-door--stadium {
  background: var(--clarks-stadium-bg);
  border-color: var(--clarks-stadium-edge);
  color: var(--clarks-stadium-text);
}

.clarks-door:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}
.clarks-door:focus-visible {
  outline: 3px solid var(--clarks-ember);
  outline-offset: 4px;
  transform: translateY(-3px);
}

.clarks-door-art {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  border-radius: 12px;
}

.clarks-door-name {
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
}

/* ── Living-splash creature stage ───────────────────────────────── */
.clarks-splash-stage {
  position: fixed;
  bottom: 28px;
  left: 0;
  width: 100%;
  height: 44px;
  pointer-events: none;
  overflow: hidden;
}

/* CSS-drawn hedgehog silhouette (Pip, Ngaia's hedgehog partner) */
.clarks-creature {
  position: absolute;
  bottom: 6px;
  left: 5%;
  width: 36px;
  height: 24px;
  opacity: 0;
  /* Body */
  background: #8b6030;
  border-radius: 50% 42% 40% 50% / 60% 50% 50% 40%;
  /* Spines (box-shadow), pointed nose to the right */
  box-shadow:
    3px  -10px 0 3px #7a5028,
    8px  -13px 0 3px #8b6030,
    13px -12px 0 3px #7a5028,
    18px -10px 0 3px #8b6030,
    34px   2px 0 5px #c49040;
}

/* Fired by JS when both_played:true */
.clarks-creature--run {
  opacity: 1;
  animation: clarks-creature-run 2.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes clarks-creature-run {
  0%   { left: 5%;  opacity: 0; }
  10%  { left: 8%;  opacity: 1; }
  85%  { left: 46%; opacity: 1; }
  100% { left: 50%; opacity: 0; }
}

/* Reduced-motion: fade in place, no horizontal motion */
@media (prefers-reduced-motion: reduce) {
  .clarks-door {
    transition: none;
  }
  .clarks-creature--run {
    animation: clarks-creature-fade 1.8s ease forwards;
  }
  @keyframes clarks-creature-fade {
    0%   { opacity: 0; left: 30%; }
    25%  { opacity: 1; }
    75%  { opacity: 1; }
    100% { opacity: 0; left: 30%; }
  }
}

/* ── Larger screens ─────────────────────────────────────────────── */
@media (min-width: 480px) {
  .clarks-door-name {
    font-size: 1.15rem;
  }
  .clarks-brand {
    height: 64px;
  }
}

@media (min-width: 640px) {
  .clarks-archways {
    gap: 28px;
  }
  .clarks-door {
    padding: 22px 18px 28px;
    border-radius: 24px;
  }
}