/* Hallmark · macrostructure: Photographic · tone: quiet sharp · anchor hue: KARAKARA red · nav: none · footer: Ft1 Hairline · enrichment: supplied background artwork */
/* V4 — V3 plus a phone-only typography pass: larger sizes, heavier weights, tighter tracking. Assets and data unchanged. */

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

html {
  min-width: 320px;
  background: var(--color-page);
  overflow-x: clip;
  color-scheme: dark;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: clip;
  background: var(--color-page);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  font-synthesis-weight: none;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a,
button {
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  border: 0;
}

[hidden] {
  display: none !important;
}

/* ---------------------------------------------------------------- *
 * Background — the supplied artwork stays the loudest thing here.
 * The outer frame drifts (micro parallax); the inner layer holds
 * the image and its one-time settle scale.
 * ---------------------------------------------------------------- */

.site-background {
  position: fixed;
  z-index: 0;
  inset: -1.5%;
  overflow: hidden;
  background-color: var(--color-page);
  pointer-events: none;
  will-change: transform;
  animation: bg-drift 30s var(--ease-soft) infinite alternate;
}

.site-background__image {
  position: absolute;
  inset: 0;
  background-image: url("assets/background.png");
  background-position: center 34%;
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(1.045);
  transform-origin: center 42%;
  animation: bg-settle 1400ms var(--ease-soft) both;
}

/* Layered, very weak scrims. Top: just enough for the mark.
   Centre: almost nothing. Bottom: enough for the store block. */
.site-scrim {
  position: fixed;
  z-index: 1;
  inset: 0;
  background-image:
    linear-gradient(
      to bottom,
      var(--scrim-top) 0%,
      var(--scrim-top-mid) 18%,
      var(--scrim-center) 40%,
      var(--scrim-center) 52%,
      var(--scrim-bottom-mid) 76%,
      var(--scrim-bottom) 100%
    ),
    radial-gradient(
      120% 78% at 50% 108%,
      oklch(4% 0.014 26 / 0.44) 0%,
      oklch(4% 0.014 26 / 0.14) 46%,
      transparent 72%
    );
  pointer-events: none;
}

/* ---------------------------------------------------------------- *
 * Page frame — optical centre, not mathematical centre.
 * ---------------------------------------------------------------- */

.page {
  position: relative;
  z-index: 2;
  display: grid;
  width: min(100%, 24.375rem); /* 390px reference width */
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
  padding:
    calc(var(--space-6) + env(safe-area-inset-top)) var(--space-5)
    calc(var(--space-5) + env(safe-area-inset-bottom));
  grid-template-rows: minmax(0, 0.86fr) auto minmax(0, 1fr);
}

.main-block {
  position: relative;
  z-index: 0;
  width: 100%;
  grid-row: 2;
  align-self: center;
  isolation: isolate;
}

/* Local, soft halo — readability without a card. */
.main-block::before {
  position: absolute;
  z-index: -1;
  inset: -5rem -4rem -6rem;
  background:
    radial-gradient(
      ellipse 62% 46% at 50% 72%,
      var(--scrim-halo) 0%,
      oklch(5% 0.014 26 / 0.28) 55%,
      transparent 82%
    ),
    radial-gradient(
      ellipse 80% 66% at 50% 50%,
      oklch(5% 0.014 26 / 0.3) 0%,
      oklch(5% 0.014 26 / 0.12) 58%,
      transparent 84%
    );
  content: "";
  filter: blur(16px);
  pointer-events: none;
}

/* ---------------------------------------------------------------- *
 * Hero — mark, then place.
 * ---------------------------------------------------------------- */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  text-align: center;
}

.logo-wrap {
  display: grid;
  width: min(10.25rem, 44vw);
  aspect-ratio: 1;
  place-items: center;
  filter: drop-shadow(var(--shadow-logo));
  animation: rise-in 600ms var(--ease-out) 60ms backwards;
}

.logo-wrap img {
  display: block;
  width: 100%;
  height: auto;
}

/* SIEM REAP — small, widely tracked, two hairlines and nothing else. */
.locale {
  display: flex;
  width: 100%;
  max-width: 15rem;
  margin: 0;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  animation: rise-in 580ms var(--ease-out) 160ms backwards;
}

.locale__rule {
  display: block;
  height: 1px;
  flex: 1 1 auto;
  min-width: 1.25rem;
  max-width: 3.25rem;
  background: linear-gradient(to right, transparent, var(--line-soft));
}

.locale__rule:last-child {
  background: linear-gradient(to left, transparent, var(--line-soft));
}

.locale__text {
  color: var(--color-ink);
  text-shadow: var(--text-shadow-soft);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  line-height: 1;
  text-indent: var(--tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- *
 * Store info — on the background, never inside a box.
 * ---------------------------------------------------------------- */

.store-section {
  width: 100%;
  margin-top: var(--space-7);
}

.store-info {
  width: 100%;
  text-align: center;
}

.store-header {
  position: relative;
  display: flex;
  min-width: 0;
  padding-top: var(--space-5);
  align-items: center;
  justify-content: center;
  animation: rise-in 560ms var(--ease-out) 255ms backwards;
}

/* One hairline separates place from details. */
.store-header::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  max-width: 15rem;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--line-soft) 22%, var(--line-soft) 78%, transparent);
  content: "";
  transform: translateX(-50%);
}

.store-name {
  max-width: 100%;
  margin: 0;
  color: var(--color-ink);
  text-shadow: var(--text-shadow-soft);
  font-size: var(--text-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  line-height: 1;
  text-indent: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.store-meta {
  margin-top: var(--space-4);
  color: var(--color-ink-soft);
  text-shadow: var(--text-shadow-soft);
  font-size: var(--text-body);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.012em;
  line-height: 1.4;
  animation: rise-in 540ms var(--ease-out) 335ms backwards;
}

.store-address {
  margin-top: var(--space-1);
  color: var(--color-muted);
  text-shadow: var(--text-shadow-soft);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.45;
  animation: rise-in 520ms var(--ease-out) 395ms backwards;
}

/* ---------------------------------------------------------------- *
 * Actions
 * ---------------------------------------------------------------- */

.store-actions {
  display: grid;
  width: 100%;
  margin-top: var(--space-6);
  grid-template-columns: repeat(var(--action-count, 2), minmax(0, 1fr));
  gap: 0.5rem;
}

.action-button {
  position: relative;
  display: inline-flex;
  min-width: 0;
  min-height: 3.125rem;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 0.5rem;
  gap: 0.4rem;
  border: 1px solid var(--color-button-border);
  border-radius: var(--radius-button);
  cursor: pointer;
  font-size: var(--text-button);
  font-weight: 600;
  letter-spacing: var(--tracking-button);
  line-height: 1;
  text-align: center;
  text-indent: var(--tracking-button);
  text-transform: uppercase;
  transition:
    background-color var(--dur-short) var(--ease-out),
    border-color var(--dur-short) var(--ease-out),
    box-shadow var(--dur-mid) var(--ease-out),
    transform var(--dur-tap) var(--ease-out);
}

.action-button > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-button--dark {
  background: var(--color-button-dark);
  color: var(--color-ink);
}

.action-button--menu {
  border-color: transparent;
  background: var(--color-button-menu);
  box-shadow: var(--shadow-menu);
  color: var(--color-on-accent);
  font-weight: 700;
}

.action-button--foodpanda {
  border-color: var(--line-soft);
  background: var(--color-button-ghost);
  color: var(--color-ink-soft);
  font-weight: 500;
}

.action-button__ext {
  font-size: 0.6875rem;
  line-height: 1;
  opacity: 0.62;
  transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out);
}

.foodpanda-link {
  width: 100%;
  margin-top: 0.5rem;
  min-height: 2.875rem;
}

/* --- interaction: hover / active / focus-visible, all three --- */

@media (hover: hover) and (pointer: fine) {
  .action-button--dark:hover {
    border-color: var(--color-button-border-hover);
    background: var(--color-button-dark-hover);
    transform: translateY(-1px);
  }

  .action-button--menu:hover {
    background: var(--color-button-menu-hover);
    box-shadow: 0 0.65rem 1.9rem oklch(40% 0.16 29 / 0.36);
    transform: translateY(-1px);
  }

  .action-button--foodpanda:hover {
    border-color: var(--color-button-border-hover);
    background: var(--color-button-ghost-hover);
    color: var(--color-ink);
  }

  .action-button--foodpanda:hover .action-button__ext {
    opacity: 1;
    transform: translate(1px, -1px);
  }
}

.action-button--dark:active {
  background: var(--color-button-dark-active);
  transform: scale(0.975);
}

.action-button--menu:active {
  background: var(--color-button-menu-active);
  box-shadow: 0 0.25rem 0.9rem oklch(40% 0.16 29 / 0.24);
  transform: scale(0.975);
}

.action-button--foodpanda:active {
  background: var(--color-button-ghost-hover);
  transform: scale(0.98);
}

.action-button:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
}

.store-actions .action-button {
  animation: rise-in 500ms var(--ease-out) 465ms backwards;
}

.store-actions .action-button:nth-child(2) {
  animation-delay: 505ms;
}

.store-actions .action-button:nth-child(3) {
  animation-delay: 545ms;
}

.foodpanda-link {
  animation: rise-in 500ms var(--ease-out) 585ms backwards;
}

/* ---------------------------------------------------------------- *
 * Socials (only rendered when URLs exist) + footer
 * ---------------------------------------------------------------- */

.social-row {
  display: flex;
  margin-top: var(--space-4);
  justify-content: center;
  gap: var(--space-2);
  animation: rise-in 500ms var(--ease-out) 620ms backwards;
}

.social-link {
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--color-muted);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}

.social-link:hover {
  border-color: var(--color-button-border-hover);
  color: var(--color-ink);
}

.social-link:active {
  transform: scale(0.98);
}

.social-link:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
}

.footer {
  grid-row: 3;
  text-shadow: var(--text-shadow-soft);
  align-self: end;
  margin: 0;
  padding-top: var(--space-5);
  color: var(--color-footer);
  font-size: var(--text-label);
  font-weight: 400;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
  animation: rise-in 480ms var(--ease-out) 640ms backwards;
}

/* ---------------------------------------------------------------- *
 * Motion — one settle on load, then stillness.
 * ---------------------------------------------------------------- */

@keyframes bg-settle {
  from {
    transform: scale(1.092);
  }
  to {
    transform: scale(1.045);
  }
}

@keyframes bg-drift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, -0.5%, 0);
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* ---------------------------------------------------------------- *
 * Larger viewports — the same phone-sized brand page, held steady.
 * ---------------------------------------------------------------- */

@media (min-width: 30rem) {
  .page {
    width: min(100%, 25.5rem);
    padding-top: var(--space-7);
    padding-bottom: var(--space-6);
  }

  .logo-wrap {
    width: 11rem;
  }
}

@media (min-width: 64rem) {
  .site-background__image {
    background-position: center 30%;
  }

  /* Wider surroundings read brighter, so the halo needs a longer, softer falloff. */
  .main-block::before {
    inset: -7rem -7.5rem -8rem;
    filter: blur(28px);
  }

  .site-scrim {
    background-image:
      linear-gradient(
        to bottom,
        var(--scrim-top) 0%,
        var(--scrim-top-mid) 18%,
        var(--scrim-center) 40%,
        var(--scrim-center) 52%,
        var(--scrim-bottom-mid) 76%,
        var(--scrim-bottom) 100%
      ),
      radial-gradient(
        60% 100% at 50% 60%,
        oklch(4% 0.014 26 / 0.34) 0%,
        oklch(4% 0.014 26 / 0.1) 55%,
        transparent 78%
      );
  }
}

/* ---------------------------------------------------------------- *
 * V4 — phones only (< 480px). Nothing here reaches the tablet and
 * desktop rules above, which keep the V3 scale untouched.
 * Bigger sizes, one weight step up, tighter tracking so the extra
 * size does not push uppercase lines into ellipsis.
 * ---------------------------------------------------------------- */

@media (max-width: 29.9375rem) {
  :root {
    --text-label: 0.75rem;    /* was 0.625rem  — SIEM REAP / footer / socials */
    --text-eyebrow: 0.8125rem; /* was 0.6875rem — store name */
    --text-body: 0.9375rem;   /* was 0.8125rem — hours */
    --text-button: 0.8125rem; /* was 0.6875rem — actions */

    --tracking-label: 0.26em;
    --tracking-eyebrow: 0.22em;
    --tracking-button: 0.06em;
  }

  .locale__text {
    font-weight: 600;
  }

  .store-name {
    font-weight: 700;
  }

  .store-meta {
    font-weight: 500;
  }

  .store-address {
    color: var(--color-ink-soft);
    font-size: 0.875rem; /* was 0.75rem */
    font-weight: 500;
  }

  .action-button {
    min-height: 3.375rem;
    padding: 0.75rem 0.375rem;
    font-weight: 700;
  }

  .action-button--foodpanda {
    font-weight: 600;
  }

  .action-button__ext {
    font-size: 0.8125rem; /* was 0.6875rem */
    opacity: 0.78;
  }

  .social-link {
    font-weight: 600;
    letter-spacing: 0.12em;
  }

  .footer {
    color: var(--color-muted);
    font-size: 0.6875rem; /* was 0.625rem */
    font-weight: 500;
    letter-spacing: 0.12em;
  }

  /* Larger text needs a slightly firmer ground to stay crisp over the photo. */
  .locale__text,
  .store-name,
  .store-meta,
  .store-address {
    text-shadow: 0 1px 2px oklch(4% 0.012 26 / 0.7), 0 0.5rem 1.75rem oklch(4% 0.012 26 / 0.55);
  }

  /* --- the tightening ---------------------------------------------
     Bigger type on a phone only reads as bigger if the gaps shrink
     with it. Everything below pulls mark, place, details and actions
     into one dense block, so the page gains weight instead of length.
     ---------------------------------------------------------------- */

  .page {
    padding-inline: var(--space-4);
    /* The block lost height when it tightened, so re-balance the
       optical centre instead of leaving it riding high. */
    grid-template-rows: minmax(0, 0.95fr) auto minmax(0, 1fr);
  }

  /* ~130% of the V3 mark. At this size the lockup's own
     "KARA KARA SPICY RAMEN" line becomes readable on a phone, which is
     the whole point; past ~140% the circle crowds the column edges and
     starts covering the artwork it is supposed to sit in. */
  .logo-wrap {
    width: min(14.25rem, 59vw);
  }

  .hero {
    gap: var(--space-4);
  }

  .locale {
    max-width: 13rem;
  }

  .locale__rule {
    max-width: 2.5rem;
  }

  .store-section {
    margin-top: var(--space-5);
  }

  .store-header {
    padding-top: var(--space-4);
  }

  /* One accent-cored hairline instead of a neutral one — the only
     colour in the type block, and it ties the rule to the mark. */
  .store-header::before {
    max-width: 12rem;
    background: linear-gradient(
      to right,
      transparent,
      var(--line-soft) 18%,
      var(--color-accent-strong) 50%,
      var(--line-soft) 82%,
      transparent
    );
    opacity: 0.85;
  }

  .store-meta {
    margin-top: var(--space-3);
  }

  .store-address {
    margin-top: 0.125rem;
  }

  .store-actions {
    margin-top: var(--space-5);
    gap: 0.375rem;
  }

  .foodpanda-link {
    margin-top: 0.375rem;
    min-height: 3rem;
  }

  /* The tighter cluster wants a tighter halo behind it. */
  .main-block::before {
    inset: -3.5rem -2.5rem -4rem;
    filter: blur(14px);
  }

  /* The primary action carries the accent, so let it read as primary. */
  .action-button--menu {
    box-shadow: 0 0.5rem 1.5rem oklch(40% 0.16 29 / 0.34), inset 0 1px 0 oklch(99% 0.005 85 / 0.18);
  }

  .social-row {
    margin-top: var(--space-3);
  }

  .footer {
    padding-top: var(--space-4);
  }
}

/* Short viewports — keep everything above the fold. */
@media (max-height: 43.75rem) {
  .page {
    padding-top: var(--space-5);
    padding-bottom: var(--space-4);
  }

  .logo-wrap {
    width: min(8.75rem, 38vw);
  }

  .hero {
    gap: var(--space-4);
  }

  .store-section {
    margin-top: var(--space-5);
  }

  .store-actions {
    margin-top: var(--space-5);
  }
}

/* Short phones — the rule above would drop the mark back below the V3
   size, which reads as a bug next to the taller phones. Scale it down
   from the V4 size instead, still comfortably above the fold. */
@media (max-width: 29.9375rem) and (max-height: 43.75rem) {
  .logo-wrap {
    width: min(11.5rem, 46vw);
  }
}

/* ---------------------------------------------------------------- *
 * Reduced motion — no entrance, no settle, no drift. Function intact.
 * ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .site-background,
  .site-background__image,
  .logo-wrap,
  .locale,
  .store-header,
  .store-meta,
  .store-address,
  .store-actions .action-button,
  .foodpanda-link,
  .social-row,
  .footer {
    animation: none !important;
  }

  .site-background__image {
    transform: scale(1.045);
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .action-button:active {
    transform: none;
  }
}