/* Chromium on Windows renders regional-indicator pairs as letters (for example
   "ES") instead of country flags. This subset is limited to flag codepoints so
   the rest of the page keeps using the normal rounded system stack. */
@font-face {
  font-family: "Twemoji Country Flags";
  src: url("/outfeet/assets/fonts/TwemojiCountryFlags.9f04f14429bb.woff2") format("woff2");
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067,
    U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
  font-display: swap;
}

:root {
  color: #111114;
  background: #fafafa;
  font-family: "Twemoji Country Flags", ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", Quicksand, "Arial Rounded MT", "Arial Rounded MT Bold", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

html,
body { min-width: 320px; min-height: 100%; }

html { background: #fafafa; }

body {
  min-height: 100svh;
  margin: 0;
  overflow: hidden;
  background: #fafafa;
}

button,
a,
select,
option { font: inherit; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 0.75rem;
  left: 0.75rem;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.65rem 1rem;
  border: 2px solid currentColor;
  border-radius: 999px;
  color: #111114;
  background: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-180%);
  transition: transform 140ms ease;
}

.skip-link:focus { transform: translateY(0); }

:focus-visible {
  outline: 3px solid #111114;
  outline-offset: 4px;
}

main {
  position: relative;
  display: grid;
  min-height: 100svh;
  place-items: center;
  padding: 24px 24px calc(100px + env(safe-area-inset-bottom));
}

.hero {
  position: relative;
  z-index: 3;
  width: min(560px, 100%);
  padding: 24px 0;
  text-align: center;
}

.hero-copy { margin: 0 auto; }

.app-icon {
  display: block;
  width: 88px;
  height: 88px;
  margin: 0 auto;
  border-radius: 21px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}

h1 {
  margin: 22px 0 6px;
  color: #111114;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
}

.tagline {
  margin: 0;
  color: #111114;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.55;
}

.hero-lede {
  max-width: 26em;
  margin: 18px auto 0;
  color: #6b7280;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
}

.store-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

.store-badge {
  display: flex;
  flex: 1 1 150px;
  max-width: 172px;
  min-height: 60px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 11px;
  color: #fff;
  background: #050505;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.13);
  text-align: left;
}

.store-icon { flex: 0 0 26px; width: 26px; height: 26px; }
.store-copy { display: grid; gap: 5px; }

.store-badge small {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.store-badge strong {
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.wardrobe {
  position: fixed;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.garment {
  --drag-x: 0px;
  --drag-y: 0px;
  --drag-tilt: 0deg;
  --float: 10px;
  --float-duration: 6.2s;
  --float-delay: -1.7s;
  --intro-delay: 40ms;
  --rotate: 0deg;
  appearance: none;
  position: absolute;
  width: var(--size, 160px);
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 22%;
  color: inherit;
  background: transparent;
  cursor: grab;
  line-height: 0;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  transform: translate3d(var(--drag-x), var(--drag-y), 0);
  -webkit-user-select: none;
}

.garment::before {
  position: absolute;
  z-index: -1;
  right: 19%;
  bottom: 11%;
  left: 19%;
  height: 11%;
  border-radius: 50%;
  background: rgba(15, 18, 22, 0.18);
  content: "";
  filter: blur(13px);
  opacity: 0.55;
  transform: scaleX(0.82);
}

.garment-float {
  display: block;
  width: 100%;
  height: 100%;
  animation: garment-float var(--float-duration) ease-in-out var(--float-delay) infinite alternate;
  transform-origin: 50% 65%;
}

.garment img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 8px rgba(10, 12, 14, 0.12));
  pointer-events: none;
  transform: rotate(var(--drag-tilt));
  transition: filter 140ms ease, transform 140ms ease;
  user-select: none;
}

.garment:hover img,
.garment:focus-visible img { filter: drop-shadow(0 12px 12px rgba(10, 12, 14, 0.18)); }

.garment:focus-visible {
  outline: none;
  background: transparent;
}

.garment:focus-visible img {
  filter: drop-shadow(0 0 2px #111114) drop-shadow(0 10px 10px rgba(10, 12, 14, 0.14));
}

.garment.is-dragging {
  z-index: 4;
  cursor: grabbing;
}

.garment.is-dragging .garment-float,
.garment.is-keyboard-moving .garment-float,
.garment.is-nudging .garment-float { animation-play-state: paused; }

.garment.is-dragging img {
  filter: drop-shadow(0 16px 16px rgba(10, 12, 14, 0.2));
  transform: rotate(var(--drag-tilt)) scale(1.035);
}

.garment.is-returning {
  transition: transform 720ms cubic-bezier(0.18, 1.55, 0.33, 1);
}

.garment--dress {
  --size: 300px;
  --rotate: -8deg;
  --float-duration: 7.3s;
  --intro-delay: 40ms;
  top: -62px;
  left: -64px;
}

.garment--handbag {
  --size: 120px;
  --rotate: 9deg;
  --float: 8px;
  --float-duration: 5.1s;
  --intro-delay: 90ms;
  top: 25%;
  left: -22px;
}

.garment--denim {
  --size: 230px;
  --rotate: 8deg;
  --float-duration: 6.8s;
  --intro-delay: 130ms;
  top: 46%;
  left: -98px;
}

.garment--trench {
  --size: 260px;
  --rotate: -7deg;
  --float-duration: 8.1s;
  --intro-delay: 180ms;
  bottom: -125px;
  left: -48px;
}

.garment--shoes {
  --size: 120px;
  --rotate: 7deg;
  --float: 7px;
  --float-duration: 5.7s;
  --intro-delay: 220ms;
  bottom: -10px;
  left: 24%;
}

.garment--cap {
  --size: 105px;
  --rotate: -8deg;
  --float: 8px;
  --float-duration: 5.4s;
  --intro-delay: 260ms;
  top: -23px;
  left: 35%;
}

.garment--striped {
  --size: 150px;
  --rotate: 7deg;
  --float-duration: 6.1s;
  --intro-delay: 300ms;
  top: -76px;
  right: 29%;
}

.garment--rain {
  --size: 185px;
  --rotate: 9deg;
  --float-duration: 7.7s;
  --intro-delay: 340ms;
  top: -51px;
  right: -55px;
}

.garment--sweater {
  --size: 205px;
  --rotate: -8deg;
  --float-duration: 6.5s;
  --intro-delay: 380ms;
  top: 25%;
  right: -77px;
}

.garment--red-shoes {
  --size: 190px;
  --rotate: -9deg;
  --float-duration: 5.9s;
  --intro-delay: 420ms;
  top: 52%;
  right: -76px;
}

.garment--cardigan {
  --size: 175px;
  --rotate: 8deg;
  --float-duration: 7.2s;
  --intro-delay: 360ms;
  right: 13%;
  bottom: -77px;
}

.garment--skirt {
  --size: 205px;
  --rotate: -7deg;
  --float-duration: 7.9s;
  --intro-delay: 310ms;
  right: -20px;
  bottom: -119px;
}

.garment--top {
  --size: 115px;
  --rotate: 8deg;
  --float: 7px;
  --float-duration: 4.9s;
  --intro-delay: 270ms;
  bottom: -48px;
  left: 44%;
}

.utility-links {
  position: fixed;
  z-index: 5;
  right: 16px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  left: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
}

.utility-links a,
.utility-links button,
.language-picker {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 6px 13px;
  border: 0;
  border-radius: 999px;
  color: #54545c;
  background: rgba(239, 239, 242, 0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
  pointer-events: auto;
  text-decoration: none;
}

.language-picker { padding: 0; }

.language-picker select {
  min-height: 32px;
  max-width: 168px;
  padding: 6px 28px 6px 13px;
  border: 0;
  border-radius: 999px;
  color: #54545c;
  background: transparent;
  cursor: pointer;
  font-family: "Twemoji Country Flags", ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", Quicksand, "Arial Rounded MT", "Arial Rounded MT Bold", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
}

.language-picker option {
  font-family: "Twemoji Country Flags", ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", Quicksand, "Arial Rounded MT", "Arial Rounded MT Bold", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

.language-picker select:hover { color: #111114; }

.language-picker select:focus-visible { outline-offset: -2px; }

.utility-links .utility-status {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
  color: #6b6b72;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
}

.utility-status::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5b7f2b;
  content: "";
}

.utility-links button { cursor: pointer; }

.utility-links a:hover,
.utility-links button:hover,
.language-picker:hover { color: #111114; background: rgba(229, 229, 234, 0.94); }

html[dir="rtl"] .store-badge { text-align: right; }

html[dir="rtl"] .language-picker select { padding-right: 13px; padding-left: 28px; }

body.is-intro .app-icon,
body.is-intro h1 {
  animation: center-enter 520ms ease-out both;
}

body.is-intro .tagline,
body.is-intro .hero-lede,
body.is-intro .store-badge,
body.is-intro .utility-links {
  animation: copy-enter 520ms ease-out both;
}

body.is-intro .tagline { animation-delay: 840ms; }
body.is-intro .hero-lede { animation-delay: 940ms; }
body.is-intro .store-badge { animation-delay: 1.04s; }
body.is-intro .utility-links { animation-delay: 1.14s; }

body.is-intro .garment-float {
  animation: garment-enter 680ms cubic-bezier(0.18, 1.18, 0.32, 1) var(--intro-delay) both,
    garment-float var(--float-duration) ease-in-out calc(var(--intro-delay) + 680ms + var(--float-delay)) infinite alternate;
}

@keyframes center-enter {
  from { opacity: 0; scale: 0.92; }
  to { opacity: 1; scale: 1; }
}

@keyframes copy-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes garment-enter {
  from { opacity: 0; scale: 0.7; }
  to { opacity: 1; scale: 1; }
}

@keyframes garment-float {
  from { transform: translateY(calc(var(--float) * -0.45)) rotate(calc(var(--rotate) - 1deg)); }
  to { transform: translateY(var(--float)) rotate(calc(var(--rotate) + 1deg)); }
}

@media (max-width: 980px) {
  .garment--dress { left: -115px; }
  .garment--rain { right: -100px; }
  .garment--denim { left: -145px; }
  .garment--sweater { right: -130px; }
  .garment--red-shoes { right: -120px; }
  .garment--trench { left: -100px; }
  .garment--skirt { right: -80px; }
  .garment--handbag,
  .garment--top { display: none; }
}

@media (max-width: 760px) {
  main { padding: 90px 24px calc(132px + env(safe-area-inset-bottom)); }

  .hero { padding: 0; transform: translateY(-20px); }

  .hero-copy { max-width: 320px; }

  .hero-lede { max-width: 21em; }

  .garment { display: none; }

  .garment--sweater,
  .garment--cap,
  .garment--red-shoes,
  .garment--handbag,
  .garment--striped { display: block; }

  .garment--sweater {
    --size: 190px;
    top: -65px;
    right: auto;
    left: -69px;
  }

  .garment--cap {
    --size: 100px;
    top: -22px;
    right: -29px;
    left: auto;
  }

  .garment--red-shoes {
    --size: 135px;
    top: 56%;
    right: -82px;
  }

  .garment--handbag {
    --size: 125px;
    top: auto;
    right: -31px;
    bottom: -19px;
    left: auto;
  }

  .garment--striped {
    --size: 180px;
    top: auto;
    right: auto;
    bottom: -69px;
    left: -76px;
  }
}

@media (max-width: 420px) {
  main { padding-right: 20px; padding-left: 20px; }

  h1 { font-size: 40px; }

  .tagline { font-size: 20px; }

  .utility-links { gap: 6px; }

  .utility-links a,
  .utility-links button,
  .language-picker { min-height: 30px; padding: 5px 11px; font-size: 12px; }

  .language-picker { padding: 0; }

  .language-picker select {
    min-height: 30px;
    max-width: 132px;
    padding: 5px 24px 5px 11px;
    font-size: 12px;
  }

  html[dir="rtl"] .language-picker select { padding-right: 11px; padding-left: 24px; }

  .utility-links .utility-status { min-height: 30px; padding: 5px 4px; font-size: 12px; }
}

@media (max-height: 620px) {
  body { overflow-y: auto; }
  main { min-height: 680px; }
  .utility-links { position: absolute; bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .garment-float { animation: none; transform: rotate(var(--rotate)); }
}

@media (forced-colors: active) {
  .store-badge,
  .utility-links a,
  .utility-links button,
  .language-picker { border: 1px solid ButtonText; }

  .utility-status::before { border: 1px solid ButtonText; background: ButtonFace; }

  .garment:focus-visible { outline: 3px solid ButtonText; outline-offset: 3px; }

  .garment:focus-visible img { filter: none; }
}