/* Glowing Foot Spa: the signature shapes, built on tokens.css.
   Every shape here comes from the G logo or from a reflexology chart (STYLE-GUIDE.md §5).
   Load after tokens.css. Class names start with gf-. */

/* ---------------------------------------------------------------- type roles (§3) */
.gf-display { font: var(--fw-display) var(--fs-display) / var(--lh-display) var(--font-head); letter-spacing: var(--track-display); color: var(--heading); }
.gf-h2      { font: var(--fw-display) var(--fs-h2) / var(--lh-heading) var(--font-head); letter-spacing: -0.01em; color: var(--heading); }
.gf-h3      { font: var(--fw-strong) var(--fs-h3) / 1.25 var(--font); color: var(--text-strong); }
.gf-lead    { font: var(--fw-regular) var(--fs-lead) / 1.55 var(--font); color: var(--text); max-width: 34em; }
.gf-body    { font: var(--fw-regular) var(--fs-body) / var(--lh-body) var(--font); color: var(--text); max-width: 36em; }
.gf-small   { font: var(--fw-regular) var(--fs-small) / 1.5 var(--font); color: var(--text-muted); }
.gf-number  { font: var(--fw-regular) var(--fs-number) / 1 var(--font); font-variant-numeric: tabular-nums lining-nums; color: var(--text-strong); }
.gf-subhead { font: var(--fw-strong) var(--fs-label) / 1.2 var(--font); letter-spacing: var(--track-label); }

/* ---------------------------------------------------------------- wordmark and lockup (§5.1) */
.gf-lockup { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
.gf-lockup img, .gf-lockup svg { height: 40px; width: auto; display: block; }
.gf-wordmark {
  font: var(--fw-strong) 17px / 1 var(--font-head);
  letter-spacing: var(--track-wordmark);
  margin-right: calc(-1 * var(--track-wordmark));   /* no trailing gap after the last letter */
  text-transform: uppercase;
  color: var(--text-strong);
  white-space: nowrap;
}
.gf-lockup--stacked { flex-direction: column; gap: 18px; }
.gf-lockup--stacked img, .gf-lockup--stacked svg { height: 96px; }

/* ---------------------------------------------------------------- point marker (§5.4): ring + dot, from the logo's ring in ring */
.gf-point {
  display: inline-block;
  flex: none;
  width: var(--point);
  height: var(--point);
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  background: radial-gradient(circle, var(--accent) 0 2px, transparent 2.6px);
}
.gf-point--small { --point: 8px; border-width: 1px; background: radial-gradient(circle, var(--accent) 0 1.25px, transparent 1.75px); }

/* ---------------------------------------------------------------- buttons and links (§5.9): the G's crossbar, cut at 45 degrees bottom right */
@property --gf-fill { syntax: "<color>"; inherits: true; initial-value: transparent; }

.gf-btn {
  --gf-fill: var(--btn-bg);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: var(--button-h);
  padding: 0 calc(28px + var(--cut) / 2) 0 28px;
  border: 0;
  background: none;
  color: var(--btn-text);
  font: var(--fw-strong) 17px / 1 var(--font);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: --gf-fill var(--dur-ui) var(--ease-calm), color var(--dur-ui) var(--ease-calm), transform 120ms var(--ease-calm);
}
.gf-btn:active { transform: translateY(1px); }
.gf-btn::before {                       /* the shape lives on a layer, so the focus ring is not clipped */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--gf-fill);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
}
.gf-btn:hover { --gf-fill: var(--btn-bg-hover); color: var(--btn-text-hover); }
.gf-btn:focus-visible { outline: var(--line-glow) solid var(--focus); outline-offset: 4px; }
.gf-btn svg { width: 18px; height: 18px; transition: transform var(--dur-ui) var(--ease-calm); }
.gf-btn:hover svg { transform: translateX(4px); }

/* Line button: the same cut, drawn as a 1.5 px line */
.gf-btn--line { --gf-fill: var(--text-strong); color: var(--text-strong); }
.gf-btn--line::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  z-index: -1;
  background: var(--bg);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut) + 0.9px), calc(100% - var(--cut) + 0.9px) 100%, 0 100%);
}
.gf-btn--line:hover { --gf-fill: var(--accent); color: var(--accent); }
[data-ground="golden"] .gf-btn--line:hover { --gf-fill: var(--night); color: var(--night); }

.gf-btn--small { --button-h: 46px; --cut: 14px; padding: 0 calc(20px + var(--cut) / 2) 0 20px; font-size: 15px; }

.gf-link {
  color: var(--text-strong);
  font: var(--fw-strong) 17px / 1 var(--font);
  text-decoration: none;
  padding-bottom: 7px;
  /* a 1 px underline; on hover a 2 px line of light sweeps across it, rather than the line jumping */
  background:
    linear-gradient(var(--accent-line), var(--accent-line)) left bottom / 0 var(--line-glow) no-repeat,
    linear-gradient(var(--accent), var(--accent)) left bottom / 100% var(--line-hair) no-repeat;
  transition: background-size 320ms var(--ease-calm);
}
.gf-link:hover { background-size: 100% var(--line-glow), 100% var(--line-hair); }

/* ---------------------------------------------------------------- tag (§5.10): caption on a photo, small crossbar cut */
.gf-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 calc(12px + var(--cut-tag) / 2) 0 12px;
  background: var(--gold);
  color: var(--night);
  font: var(--fw-strong) 14px / 1 var(--font);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-tag)), calc(100% - var(--cut-tag)) 100%, 0 100%);
}

/* ---------------------------------------------------------------- halo (§5.2): the logo's open ring, a 2 px line at any size
   <svg class="gf-halo" viewBox="0 0 200 200" aria-hidden="true"><path d="M152.94 16.35A99 99 0 1 0 183.39 153.35"/></svg>
   It always opens to the right, as in the logo. Never rotate, mirror or close it.
   Add .is-drawing (when it scrolls into view) and it draws itself once, from its upper end round the left.
   The draw is a turning mask, not a dash, so it looks the same at every size. */
@property --gf-sweep { syntax: "<angle>"; inherits: false; initial-value: 272deg; }

.gf-halo { display: block; overflow: visible; color: var(--accent-line); pointer-events: none; }
.gf-halo path { fill: none; stroke: currentColor; stroke-width: var(--line-glow); vector-effect: non-scaling-stroke; }
.gf-halo.is-drawing {
  --gf-sweep: 0deg;
  /* the arc runs clockwise from its lower end (122.61 deg from the top) to its upper end (392.33 deg);
     the mask starts 1.61 deg early so the lower end stays hidden until the sweep reaches it */
  -webkit-mask-image: conic-gradient(from 121deg, transparent 0 calc(271.33deg - var(--gf-sweep)), #000 0);
  mask-image: conic-gradient(from 121deg, transparent 0 calc(271.33deg - var(--gf-sweep)), #000 0);
  animation: gf-draw var(--dur-halo) var(--ease-calm) forwards;
}
@keyframes gf-draw { to { --gf-sweep: 272deg; } }

/* ---------------------------------------------------------------- basin (§5.3): a round photo, optionally inside a halo
   <figure class="gf-basin"><img …><svg class="gf-halo" …></svg></figure> */
.gf-basin { position: relative; aspect-ratio: 1; margin: 0; --halo-ratio: 1.25; }
.gf-basin > img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.gf-basin > .gf-halo {
  position: absolute;
  inset: calc((1 - var(--halo-ratio)) / 2 * 100%);
  width: calc(var(--halo-ratio) * 100%);
  height: calc(var(--halo-ratio) * 100%);
}
.gf-basin--logo { --halo-ratio: 1.778; }   /* the logo's own proportion: halo radius = 1.778 x the G */

/* ---------------------------------------------------------------- callout (§5.5): point, leader line, label, as on a chart */
.gf-callout { display: inline-flex; align-items: center; }
.gf-callout__line { display: block; width: var(--leader, 96px); height: var(--line-hair); background: var(--accent-line); opacity: 0.8; }
.gf-callout__text {
  padding-left: 12px;
  font: var(--fw-strong) 14px / 1.3 var(--font);
  color: var(--text-strong);
  white-space: nowrap;
}
.gf-callout--left { flex-direction: row-reverse; }
.gf-callout--left .gf-callout__text { padding: 0 12px 0 0; }

/* ---------------------------------------------------------------- lamp wash (§5.11): one soft light on white, at most once a page */
.gf-lamp {
  position: absolute;
  width: min(900px, 120vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(234, 200, 123, 0.18), rgba(234, 200, 123, 0));
  pointer-events: none;
}

/* ---------------------------------------------------------------- treatment menu (§5.12) */
.gf-menu { border-bottom: var(--line-hair) solid var(--line); }
.gf-menu__row {
  display: grid;
  grid-template-columns: 28px 1fr repeat(var(--menu-cols, 2), minmax(84px, 120px));
  align-items: center;
  gap: 0 var(--gutter);
  padding: 22px 0;
  border-top: var(--line-hair) solid var(--line);
}
.gf-menu__name { font: var(--fw-strong) 22px / 1.25 var(--font); color: var(--text-strong); }
.gf-menu__note { font: var(--fw-regular) 16px / 1.45 var(--font); color: var(--text-muted); margin-top: 4px; }
.gf-menu__price { font: var(--fw-regular) var(--fs-number) / 1 var(--font); font-variant-numeric: tabular-nums lining-nums; color: var(--text-strong); text-align: right; }
.gf-menu__head { font: var(--fw-strong) 16px / 1 var(--font); color: var(--text-muted); text-align: right; }

/* ---------------------------------------------------------------- hours (§5.13): today is marked with a point */
.gf-hours { display: grid; grid-template-columns: 20px auto 1fr; gap: 14px 12px; align-items: center; }
.gf-hours__day { font: var(--fw-strong) 16px / 1 var(--font); color: var(--text-muted); }
.gf-hours__time { font: var(--fw-regular) 17px / 1 var(--font); font-variant-numeric: tabular-nums; color: var(--text); text-align: right; }
.gf-hours [aria-current="date"] { color: var(--text-strong); }

/* ---------------------------------------------------------------- fields (§5.14) */
.gf-field { display: grid; gap: 10px; }
.gf-field > label { font: var(--fw-strong) 16px / 1 var(--font); color: var(--text-muted); }
.gf-field input, .gf-field select, .gf-field textarea {
  height: var(--field-h);
  padding: 0 16px;
  border: var(--line-hair) solid var(--edge);
  border-radius: 0;
  background: var(--surface);
  color: var(--text-strong);
  font: var(--fw-regular) 17px / 1.4 var(--font);
  transition: border-color var(--dur-ui) var(--ease-calm), box-shadow var(--dur-ui) var(--ease-calm);
}
[data-ground="white"] .gf-field :is(input, select, textarea) { background: var(--white); }
.gf-field textarea { height: auto; min-height: 120px; padding: 14px 16px; resize: vertical; }
.gf-field :is(input, select, textarea):focus { outline: none; border-color: var(--focus); box-shadow: inset 0 0 0 1px var(--focus); }
.gf-field__error { font: var(--fw-regular) 16px / 1.4 var(--font); color: var(--text); }
.gf-field__error::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: middle; }

/* ---------------------------------------------------------------- motion (§9) */
@media (prefers-reduced-motion: reduce) {
  .gf-halo.is-drawing { animation: none; --gf-sweep: 272deg; }
  .gf-btn, .gf-btn svg, .gf-link, .gf-field :is(input, select, textarea) { transition: none; }
}