/* Joyce Beauty Makeup Artistry: theme tokens, motion, states and responsive rules.
   Layout and type live inline on the elements; this file holds the colour
   tokens for the two themes and what inline styles cannot express
   (keyframes, hover, focus, media queries). */

/* ---------- Theme tokens: daylight by default.
   Joyce's palette: Warm Ivory #F7F1EA (ground), Champagne Pink #E8C7C3 (signature accent,
   buttons, soft grounds), Blush Nude #D9B9A8 (secondary grounds), Rose Taupe #B88D79
   (details and borders). The cocoa text colours are derived so that text passes 4.5:1. ---------- */
.jm-root {
  --bg: #F7F1EA;
  --bg-0: rgba(247, 241, 234, 0);
  --fg: #2B1F1A;
  --fg-soft: #57433A;
  --fg-mute: #7A6258;
  --line: rgba(184, 141, 121, 0.38);
  --line-strong: rgba(87, 60, 48, 0.62);
  --surface: rgba(253, 250, 246, 0.86);
  --surface-solid: #FDFAF6;
  --sand: #E8C7C3;
  --taupe: #D9B9A8;
  --field: rgba(255, 255, 255, 0.72);
  --band: rgba(232, 199, 195, 0.46);
  --scrim: rgba(247, 241, 234, 0.92);
  --gilt: #8A5F4E;
  --frame: rgba(184, 141, 121, 0.62);
  --hatch: rgba(43, 31, 26, 0.05);
  --outline: rgba(138, 95, 78, 0.6);
  --hover: rgba(232, 199, 195, 0.38);
  --glare: rgba(232, 199, 195, 0.4);
  --chip: rgba(253, 250, 246, 0.86);
  --card-shadow: 0 34px 70px -44px rgba(110, 70, 55, 0.42);
  --btn-bg: #E8C7C3;
  --btn-fg: #2B1F1A;
  --btn-line: rgba(138, 95, 78, 0.78);
  --btn-shadow: rgba(110, 70, 55, 0.45);
  --nav-bg: rgba(247, 241, 234, 0.82);
  --rouge: #E8C7C3;
  --rouge-ink: var(--ink-day, #9C5C54);
  --on-accent: #2B1F1A;
  color-scheme: light;
}

/* ---------- Evening ---------- */
.jm-root[data-theme="dark"] {
  --bg: #1A1412;
  --bg-0: rgba(26, 20, 18, 0);
  --fg: #F7F1EA;
  --fg-soft: #DDD0C6;
  --fg-mute: #B3A197;
  --line: rgba(232, 199, 195, 0.16);
  --line-strong: rgba(247, 241, 234, 0.5);
  --surface: rgba(36, 28, 25, 0.88);
  --surface-solid: #241C19;
  --sand: #2E2320;
  --taupe: #9A7F72;
  --field: rgba(26, 20, 18, 0.55);
  --band: rgba(46, 33, 31, 0.72);
  --scrim: rgba(26, 20, 18, 0.92);
  --gilt: #D9B9A8;
  --frame: rgba(217, 185, 168, 0.4);
  --hatch: rgba(247, 241, 234, 0.05);
  --outline: rgba(232, 199, 195, 0.46);
  --hover: rgba(247, 241, 234, 0.08);
  --glare: rgba(247, 241, 234, 0.16);
  --chip: rgba(26, 20, 18, 0.74);
  --card-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  --btn-bg: #E8C7C3;
  --btn-fg: #1A1412;
  --btn-line: rgba(232, 199, 195, 0.9);
  --btn-shadow: rgba(0, 0, 0, 0.6);
  --nav-bg: rgba(26, 20, 18, 0.74);
  --rouge-ink: var(--rouge);
  color-scheme: dark;
}

html { background: #F7F1EA; scroll-behavior: smooth; }
html[data-theme="dark"] { background: #1A1412; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: transparent;
  font-family: 'Jost', 'Century Gothic', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.jm-root ::selection { background: var(--fg); color: var(--bg); }
.jm-root :focus-visible { outline: 2px solid var(--gilt); outline-offset: 3px; }

/* While the theme is switching, everything cross-fades together. */
.jm-theming, .jm-theming * {
  transition: background-color .7s ease, color .7s ease, border-color .7s ease, box-shadow .7s ease !important;
}

/* Sticky navigation picks up a frosted bar once the page has moved. */
.jm-nav { border-bottom: 1px solid transparent; transition: background-color .4s, border-color .4s; }
.jm-nav.is-stuck {
  background-color: var(--nav-bg);
  border-bottom-color: var(--line);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
}
.jm-ico-sun { display: none; }
.jm-root[data-theme="dark"] .jm-ico-sun { display: block; }
.jm-root[data-theme="dark"] .jm-ico-moon { display: none; }

/* Scroll reveal: elements are visible by default; the page script adds
   .jm-pre only to elements still below the fold, then removes it. */
.jm-rev {
  transition: opacity 1.2s cubic-bezier(.16, .84, .24, 1), transform 1.2s cubic-bezier(.16, .84, .24, 1);
  transition-delay: var(--d, 0ms);
}
.jm-pre { opacity: 0 !important; transform: perspective(900px) translate3d(0, 64px, -80px) rotateX(10deg) !important; }
.jm-d1 { --d: 90ms; }
.jm-d2 { --d: 180ms; }
.jm-d3 { --d: 270ms; }

/* Page progress hairline (the script sets --pg on the page root). */
.jm-progress { position: fixed; z-index: 6; top: 0; left: 0; width: 100%; height: 2px; background: var(--gilt); transform: scaleX(var(--pg, 0)); transform-origin: left center; pointer-events: none; }

/* Links and buttons */
a.jm-link { color: var(--fg); text-decoration: none; position: relative; }
a.jm-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
a.jm-link:hover::after { transform: scaleX(1); transform-origin: left; }
/* Her rose-gold script is pale by design; in daylight it is deepened a little so it reads, most of all when small. */
.jm-foil { filter: brightness(.84) saturate(1.25); }
.jm-foil-sm { filter: brightness(.66) saturate(1.4); }
.jm-root[data-theme="dark"] .jm-foil, .jm-root[data-theme="dark"] .jm-foil-sm { filter: none; }
a.jm-home { display: inline-flex; align-items: center; min-height: 44px; transition: opacity .35s; }
a.jm-home:hover { opacity: .78; }

.jm-btn { transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, background-color .35s, color .35s; }
.jm-btn:hover { transform: translate3d(0, -2px, 0); box-shadow: 0 18px 40px -18px var(--btn-shadow); }
.jm-btn:active { transform: scale(.98); }
.jm-ghost { transition: background-color .35s, border-color .35s; }
.jm-ghost:hover { background-color: var(--hover); border-color: var(--fg); }

/* Service cards: pointer-driven 3D tilt (the script sets --rx/--ry/--gx/--gy). */
.jm-card {
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  box-shadow: var(--card-shadow);
  transition: transform .6s cubic-bezier(.2, .8, .2, 1), border-color .4s;
  will-change: transform;
}
.jm-card.is-live { transition: transform .08s linear, border-color .4s; }
.jm-card:hover { border-color: var(--gilt); }
.jm-glare {
  opacity: 0; transition: opacity .4s;
  background: radial-gradient(440px circle at var(--gx, 50%) var(--gy, 50%), var(--glare), rgba(247, 241, 234, 0) 60%);
}
.jm-card:hover .jm-glare { opacity: 1; }
.jm-lift { transform: translateZ(42px); }
.jm-lift-sm { transform: translateZ(22px); }
.jm-form { box-shadow: var(--card-shadow); }

/* Looks: a ring of nine photographs in real 3D space; the script turns it with scroll and drag. */
.jm-ring-stage { perspective: 1800px; perspective-origin: 50% 42%; cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.jm-ring {
  transform-style: preserve-3d;
  transform: translateZ(-440px) rotateX(-4deg) rotateY(var(--ring, 0deg));
  will-change: transform;
}
.jm-panel { transition: border-color .4s; -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: var(--card-shadow); }
.jm-panel:hover { border-color: var(--gilt); }
.jm-panel img { pointer-events: none; -webkit-user-drag: none; -webkit-user-select: none; user-select: none; }
.jm-hatch { background-image: repeating-linear-gradient(135deg, var(--hatch) 0 1px, rgba(247, 241, 234, 0) 1px 14px); }

/* Kind words */
.jm-quote { box-shadow: var(--card-shadow); }

/* Process: the rule fills as the section passes through the viewport. */
.jm-fill { transform: scaleX(var(--fill, 1)); transform-origin: left center; }

/* Form */
.jm-field { transition: border-color .3s, background-color .3s; }
.jm-field:focus { outline: none; border-color: var(--gilt); background-color: var(--surface-solid); }
.jm-field::placeholder { color: var(--fg-mute); }
select.jm-field option { background: var(--surface-solid); color: var(--fg); }

/* Questions: native disclosure, with a plus that turns into a minus. */
.jm-faq summary::-webkit-details-marker { display: none; }
.jm-faq-mark::before, .jm-faq-mark::after { content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 1.5px; background: var(--gilt); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.jm-faq-mark::after { transform: rotate(90deg); }
.jm-faq[open] .jm-faq-mark::after { transform: rotate(0deg); }
.jm-faq summary:hover { color: var(--rouge-ink) !important; }

/* Outlined display type and frosted surfaces (vendor-prefixed, so kept here). */
.jm-outline { color: transparent; -webkit-text-stroke: 1px var(--outline); }
.jm-glass { -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); }

/* Hero portraits: two or three real client photographs, one slow cross-fade.
   Each picture holds for seven seconds and fades over one and a half; the first fades in on load. */
.jm-fade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; animation: jm-xfade 21s ease-in-out infinite; will-change: opacity; }
.jm-fade img:nth-child(2) { animation-delay: 7s; }
.jm-fade img:nth-child(3) { animation-delay: 14s; }
@keyframes jm-xfade { 0% { opacity: 0; } 7.2% { opacity: 1; } 33.3% { opacity: 1; } 40.5% { opacity: 0; } 100% { opacity: 0; } }
/* Five portraits, one per look: a 35-second cycle, seven seconds each, 1.5-second fades; the caption under the frame changes with the picture. */
.jm-fade-5 img, .jm-fade-cap span { animation: jm-xfade5 35s ease-in-out infinite; }
.jm-fade-5 img:nth-child(2), .jm-fade-cap span:nth-child(2) { animation-delay: 7s; }
.jm-fade-5 img:nth-child(3), .jm-fade-cap span:nth-child(3) { animation-delay: 14s; }
.jm-fade-5 img:nth-child(4), .jm-fade-cap span:nth-child(4) { animation-delay: 21s; }
.jm-fade-5 img:nth-child(5), .jm-fade-cap span:nth-child(5) { animation-delay: 28s; }
.jm-fade-cap span { position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap; }
@keyframes jm-xfade5 { 0% { opacity: 0; } 4.3% { opacity: 1; } 20% { opacity: 1; } 24.3% { opacity: 0; } 100% { opacity: 0; } }

/* Hero mosaic: six close-ups, fading in one after another on load. */
.jm-mosaic .jm-tile { animation: jm-rise 1.2s cubic-bezier(.16, .84, .24, 1) both; }
.jm-mosaic .jm-tile:nth-child(2) { animation-delay: .12s; } .jm-mosaic .jm-tile:nth-child(3) { animation-delay: .24s; }
.jm-mosaic .jm-tile:nth-child(4) { animation-delay: .36s; } .jm-mosaic .jm-tile:nth-child(5) { animation-delay: .48s; } .jm-mosaic .jm-tile:nth-child(6) { animation-delay: .6s; }

/* Ambient motion */
@keyframes jm-rise { from { opacity: 0; transform: translate3d(0, 34px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
.jm-rise { animation: jm-rise 1.4s cubic-bezier(.16, .84, .24, 1) both; }
.jm-rise-2 { animation-delay: .15s; }
.jm-rise-3 { animation-delay: .3s; }
.jm-rise-4 { animation-delay: .45s; }

/* Tablet width: the menu links step aside for the name and the booking button. */
@media (max-width: 1180px) {
  .jm-hide-md { display: none !important; }
}

/* Phone width */
@media (max-width: 860px) {
  .jm-hide-sm { display: none !important; }
  .jm-hero-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 48px !important; }
  .jm-hero-pic { max-width: 420px !important; justify-self: start !important; }
  .jm-details-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .jm-stack-sm { flex-direction: column !important; align-items: flex-start !important; }
}

/* Small phones: the logo, the theme button and the booking button share one row. */
@media (max-width: 560px) {
  .jm-details-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (max-width: 480px) {
  .jm-nav { gap: 10px !important; }
  .jm-home img { height: 38px !important; }
  .jm-nav .jm-btn { padding: 0 14px !important; font-size: 13px !important; letter-spacing: 0.12em !important; }
}

@media (max-width: 350px) {
  .jm-nav { padding: 0 14px !important; gap: 8px !important; }
  .jm-home img { height: 32px !important; }
  .jm-nav .jm-btn { padding: 0 10px !important; font-size: 12px !important; letter-spacing: 0.08em !important; }
}

@media (prefers-reduced-motion: reduce) {
  .jm-rise, .jm-mosaic .jm-tile { animation: none !important; }
  .jm-fade img, .jm-fade-cap span { animation: none !important; opacity: 0 !important; }
  .jm-fade img:first-child, .jm-fade-cap span:first-child { opacity: 1 !important; }
  .jm-rev, .jm-card, .jm-btn { transition: none !important; }
  .jm-pre { opacity: 1 !important; transform: none !important; }
}