/* Khmer Bowl · shared components. Loaded after tokens.css on every page. */

/* ---------- header ---------- */
.site-head{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;
  justify-content:space-between;gap:var(--space-4);padding:var(--space-4) var(--edge);
  transition:background var(--dur-section) var(--ease-standard),padding var(--dur-section);
  background:linear-gradient(180deg,rgba(18,12,7,.75),rgba(18,12,7,0))}
.site-head.is-solid{background:rgba(18,12,7,.94);padding-block:var(--space-3);
  border-bottom:1px solid var(--coal-line);backdrop-filter:blur(8px)}
.brand{display:flex;align-items:center;gap:var(--space-3);text-decoration:none;color:var(--cream)}
.brand img{width:38px;height:38px}
.brand b{font-family:var(--font-display);font-weight:600;font-size:var(--ms-1);letter-spacing:-.01em}
.site-nav{display:flex;gap:var(--space-6);list-style:none;margin:0;padding:0;font-size:.8rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.site-nav a{color:inherit;text-decoration:none;transition:color var(--dur-element)}
.site-nav a:hover,.site-nav a[aria-current]{color:var(--cream)}
.head-actions{display:flex;align-items:center;gap:var(--space-3)}
.menu-toggle{display:none;background:none;border:0;color:var(--cream);cursor:pointer;padding:8px}

.btn-red,.btn-ghost{font-family:var(--font-text);font-weight:600;font-size:.8rem;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;border-radius:var(--r-pill);padding:12px 22px;
  display:inline-block;transition:transform var(--dur-element) var(--ease-standard),
  background var(--dur-element),border-color var(--dur-element)}
.btn-red{color:var(--cream);background:var(--red);border:1px solid var(--red)}
.btn-red:hover{transform:translateY(-2px);background:var(--red-deep);border-color:var(--red-deep)}
.btn-ghost{color:var(--cream);border:1px solid var(--coal-line);background:transparent}
.btn-ghost:hover{transform:translateY(-2px);border-color:var(--gold)}
.btn-lg{padding:16px 30px;font-size:.86rem}

/* mobile menu */
.mobile-menu{position:fixed;inset:0;z-index:39;background:var(--night);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--space-5);opacity:0;visibility:hidden;
  transition:opacity var(--dur-section) var(--ease-standard),visibility var(--dur-section)}
.mobile-menu.open{opacity:1;visibility:visible}
.mobile-menu a{font-family:var(--font-display);font-size:var(--ms-4);color:var(--cream);text-decoration:none}
.mobile-menu a em{font-style:italic;color:var(--gold-lit)}

/* ---------- sections ---------- */
main{display:block}
.section{padding:var(--section-y) 0}
.section.center,.center{text-align:center}
.measure{max-width:var(--measure);margin-inline:auto}
.eyebrow-kh{font-family:var(--font-display);font-style:italic;color:var(--gold-lit);
  font-size:var(--ms-2);letter-spacing:.01em}
h1,h2,h3{color:var(--cream)}
.section h2{font-size:clamp(2.2rem,5.5vw,var(--ms-6));line-height:1.02;letter-spacing:-.02em;margin:0 auto}
.section h2 em{font-style:italic;font-weight:900;color:var(--gold-lit)}
.section p.lede{max-width:52ch;margin:var(--space-5) auto 0;color:var(--text-muted);font-size:var(--ms-1)}
.section .kh-sub{margin-bottom:var(--space-4)}

/* reveal · one verb: rise */
.rise{opacity:0;transform:translateY(24px)}
.rise.in{opacity:1;transform:none;transition:opacity var(--dur-cinematic) var(--ease-expressive),
  transform var(--dur-cinematic) var(--ease-expressive)}

/* ---------- reusable counter / laminate band ---------- */
.laminate-band{position:relative;background-color:#241610;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg fill='none' stroke='%23b78f52' stroke-opacity='0.14' stroke-width='1.4'%3E%3Cpath d='M10 20 q10 -12 20 0 t20 0'/%3E%3Cpath d='M45 55 q10 -12 20 0 t20 0'/%3E%3Cpath d='M-5 65 q10 -12 20 0 t20 0'/%3E%3C/g%3E%3C/svg%3E");
  border-block:1px solid var(--coal-line)}

/* ---------- signature cards (editorial, not a tile grid) ---------- */
.sig-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);margin-top:var(--space-8)}
.sig{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;border:1px solid var(--coal-line)}
.sig img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-cinematic) var(--ease-expressive)}
.sig:hover img{transform:scale(1.05)}
.sig figcaption{position:absolute;left:0;right:0;bottom:0;padding:var(--space-5);
  background:linear-gradient(180deg,rgba(18,12,7,0),rgba(18,12,7,.86))}
.sig h3{font-family:var(--font-display);font-size:var(--ms-3);margin:0}
.sig h3 .kh{display:block;font-style:italic;font-weight:340;color:var(--gold-lit);font-size:var(--ms-1)}
.sig p{margin:var(--space-2) 0 0;color:var(--cream-dim);font-size:.92rem}
:root{--gutter:clamp(1.25rem,0.8rem + 2vw,3rem)}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--coal-line);padding:var(--section-y) var(--edge) var(--space-8);
  text-align:center;background-color:#150e08}
.site-foot .flogo{width:64px;height:64px;margin:0 auto var(--space-5)}
.site-foot .frow{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-3) var(--space-6);
  color:var(--text-muted);font-size:.95rem}
.site-foot a{color:var(--gold-lit);text-decoration:none}
.site-foot .socials{display:flex;gap:var(--space-4);justify-content:center;margin:var(--space-6) 0}
.site-foot .socials a{color:var(--cream);font-size:1.2rem}
.site-foot .credit{margin-top:var(--space-7);color:var(--text-muted);font-size:.82rem;
  border-top:1px solid var(--coal-line);padding-top:var(--space-5)}
.site-foot .credit a{color:var(--gold-lit)}

/* install button */
.install{display:none;background:none;border:1px solid var(--coal-line);color:var(--cream);
  border-radius:var(--r-pill);padding:10px 18px;font-family:var(--font-text);font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.install.show{display:inline-block}

@media (max-width:820px){
  .site-nav{display:none}
  .menu-toggle{display:block}
  .head-actions .btn-red{display:none}
  .sig-row{grid-template-columns:1fr;max-width:26rem;margin-inline:auto}
}
@media (prefers-reduced-motion:reduce){
  .rise{opacity:1!important;transform:none!important}
  *{scroll-behavior:auto!important}
}

/* ---------- living background canvas ---------- */
#alive{position:fixed;inset:0;z-index:0;pointer-events:none}
.site-head,.mobile-menu{z-index:40}
main,.site-foot{position:relative;z-index:1}

/* ---------- reactive cursor (glow ring; native cursor stays for usability) ---------- */
.cursor{position:fixed;top:0;left:0;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--gold-lit);pointer-events:none;z-index:9999;opacity:0;mix-blend-mode:screen;
  transition:opacity .3s,width .25s,height .25s,background .25s,border-color .25s;
  box-shadow:0 0 18px 2px rgba(216,176,113,.35)}
.cursor.is-active{width:48px;height:48px;background:rgba(216,176,113,.10);border-color:var(--gold-foil)}
@media (pointer:coarse){.cursor{display:none}}

/* ---------- gold shimmer (foil sweep across the gold display words) ---------- */
.shimmer{background:linear-gradient(110deg,var(--gold) 0%,var(--gold) 38%,var(--gold-foil) 50%,var(--gold) 62%,var(--gold) 100%);
  background-size:280% 100%;-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;animation:shimmer 7s linear infinite}
@keyframes shimmer{0%{background-position:180% 0}100%{background-position:-90% 0}}
@media (prefers-reduced-motion:reduce){.shimmer{animation:none;-webkit-text-fill-color:var(--gold-lit);color:var(--gold-lit)}}

/* ---------- bilingual night-market ticker ---------- */
.ticker{overflow:hidden;white-space:nowrap;border-block:1px solid var(--coal-line);
  background-color:#1a1009;padding:var(--space-5) 0}
.ticker-track{display:inline-flex;align-items:center;will-change:transform;animation:ticker 42s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker i{font-family:var(--font-display);font-style:italic;font-size:clamp(1.4rem,3.2vw,var(--ms-4));
  color:var(--cream);padding:0 var(--space-5);white-space:nowrap}
.ticker i.kh{color:var(--gold-lit)}
.ticker b{width:6px;height:6px;border-radius:50%;background:var(--red);display:inline-block;flex:0 0 auto}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none;transform:none}}

/* ---------- scarce jewel accents (the second direction) ---------- */
.sig{transition:border-color var(--dur-section) var(--ease-standard),box-shadow var(--dur-section)}
.sig:hover{border-color:color-mix(in srgb,var(--jade) 60%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--jade) 30%,transparent),0 20px 40px rgba(0,0,0,.5)}
.site-nav a:hover{color:var(--jade)}
.eyebrow-kh{color:var(--gold-lit)}
.laminate-band .eyebrow-kh{color:var(--jade)}