/* ==========================================================================
   Modern, mobile-first stylesheet - L Jay Style Hair Salon
   ========================================================================== */

/* ---------- Variables & Theme ---------- */
:root {
  color-scheme: light;

  --color-bg: #faf5f0;
  --color-card: #ffffff;
  --color-text: #222222;
  --color-muted: #6b6b6b;
  --color-accent: #5a3e2b;
  --color-accent-light: #7a543e;
  --color-border: #e9e5e1;
  --color-glass: rgba(250, 245, 240, 0.45);

  --shadow-soft: 0 8px 20px rgba(0, 0, 0, 0.08);
  --shadow-strong: 0 20px 45px rgba(0, 0, 0, 0.3);

  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-sm: 6px;
  --radius-circle: 999px;

  --font-sans: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* motion tokens (0 duration when reduced motion is requested) */
  --motion-duration: 300ms;
  --motion-ease: ease;
  --motion-slow: 600ms;

  --collage-width-desktop: 960px;
  --collage-height-desktop: 560px;
}

/* Respect user preference to reduce motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration: 0ms;
    --motion-slow: 0ms;
  }
  html { scroll-behavior: auto; }

  /* Disable all motion for reduced-motion users (catch-all for hardcoded durations) */
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Global reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  font-size: 16px;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 { color: var(--color-accent); font-weight: 600; margin: 0 0 0.5rem; }
p { margin: 0 0 0.75rem; color: var(--color-muted); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* Accessible focus styles - visible but subtle */
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}
:focus { outline: 3px solid rgba(90, 62, 43, 0.12); outline-offset: 3px; }

/* ---------- Utility ---------- */
.container { width: min(92%, 1200px); margin-inline: auto; }

/* ---------- Splash Screen ---------- */
@keyframes splashFadeIn {
  0% { opacity: 0; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes splashFadeOut {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.92); }
}
/* No-JS fallback: auto-dismiss the splash after a brief hold */
@keyframes splashAutoHide {
  0%, 88% { opacity: 1; pointer-events: auto; }
  100% { opacity: 0; pointer-events: none; }
}

.splash-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  z-index: 9999;
  animation: splashFadeIn 0.6s ease-out both,
             splashAutoHide 3.4s ease-out 0.6s forwards;
  pointer-events: auto;
}
.splash-screen.hide {
  animation: splashFadeOut 0.5s ease-out both;
  pointer-events: none;
}
.splash-logo {
  height: 240px;
  width: auto;
  max-width: 500px;
  animation: splashFadeIn 0.8s ease-out 0.25s both;
  opacity: 0;
}

/* Reduced-motion users: skip animations, dismiss splash quickly */
@media (prefers-reduced-motion: reduce) {
  .splash-screen { animation: splashAutoHide 0.5s ease-out 0.1s forwards; }
  .splash-screen.hide { animation: none; opacity: 0; pointer-events: none; }
  .splash-logo { animation: none; opacity: 1; }
}

/* ---------- Header ---------- */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background-color: var(--color-card);
  background: color-mix(in srgb, var(--color-card) 82%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
  height: 80px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.logo { height: 90px; width: auto; max-width: 200px; display: block; }

.lang-switch {
  display: flex;
  gap: 0.5rem;
}
.lang-switch button {
  appearance: none;
  background: transparent;
  border: 1px solid var(--color-border);
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-text);
  font-weight: 600;
  font-size: 0.9rem;
  transition: background-color var(--motion-duration) var(--motion-ease),
              color var(--motion-duration) var(--motion-ease),
              box-shadow var(--motion-duration) var(--motion-ease);
}
.lang-switch button:hover,
.lang-switch button:focus-visible {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}
.lang-switch button.active {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

/* ---------- Hero ---------- */
.hero {
  display: grid;
  place-items: center;
  min-height: 55vh;
  padding: 2.5rem 1rem;
  background-color: var(--color-accent);
  background: linear-gradient(160deg,
              color-mix(in srgb, var(--color-accent) 88%, transparent) 0%,
              color-mix(in srgb, var(--color-accent-light) 60%, transparent) 100%);
  position: relative;
  overflow: hidden;
}
.hero-overlay {
  position: relative;
  z-index: 1;
  background-color: var(--color-card);
  background: color-mix(in srgb, var(--color-card) 78%, transparent);
  padding: 1.5rem 2rem;
  border-radius: var(--radius-xl);
  text-align: center;
  box-shadow: var(--shadow-strong);
  backdrop-filter: blur(8px);
  max-width: 720px;
  margin-inline: auto;
}
.hero-text {
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0;
}

/* ---------- Collage (gallery) ---------- */
.collage {
  padding: 3rem 1rem;
  background-color: var(--color-bg);
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
}

.collage-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 640px;
  margin: 0 auto 1.5rem;
  padding: 1.25rem 1.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: #fff;
  background: var(--color-accent);
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 260ms ease;
  text-align: center;
  box-shadow: var(--shadow-soft);
}
.collage-toggle::after {
  content: "▼";
  font-size: 1rem;
  transition: transform 260ms ease;
}
.collage-toggle[aria-expanded="true"]::after {
  transform: rotate(-180deg);
}
.collage-toggle:hover {
  background: var(--color-accent-light);
  box-shadow: var(--shadow-strong);
  transform: translateY(-2px);
}
.collage-toggle:active {
  transform: translateY(0);
}
.collage-toggle:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.4);
  outline-offset: 2px;
}

.collage-content {
  max-height: 5000px;
  overflow: visible;
  opacity: 1;
  transition: max-height var(--motion-slow) var(--motion-ease),
              opacity var(--motion-slow) var(--motion-ease);
  padding: 0.5rem 0;
}
.collage-content[aria-hidden="true"] {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0;
}

.collage-container {
  /* Pinterest-style masonry. Layout is computed by JS (shortest-column
     packing); cards run with a placeholder ratio immediately, then adopt
     each photo's real ratio as it loads. CSS columns are intentionally NOT
     used because they rebalance asynchronously as images decode, which
     caused hover flicker and large gaps. */
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

/* Cards */
.collage-item {
  display: block;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  position: relative;
  /* Pinterest-style: each card keeps its photo's real aspect ratio so the
     feed is organic (varied heights). The ratio below is only a loading
     placeholder; JS overwrites it with the image's true ratio on load. */
  aspect-ratio: 4 / 5;
  transition: transform 220ms ease, box-shadow 220ms ease;
  /* Promote to its own composite layer so the hover transform never
     triggers repaint of neighbouring items. */
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.collage-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Hover interaction (desktop) */
@media (hover: hover) {
  .collage-item:hover {
    transform: scale(1.03);
    box-shadow: var(--shadow-strong);
  }
}

/* Masonified items are absolutely positioned by JS */
.collage-item.masonry { position: absolute; }

/* ---------- Services ---------- */
.services {
  padding: 3rem 1rem;
  background: var(--color-card);
}
.services h2 {
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  position: relative;
}
.services h2::after {
  content: "";
  position: absolute;
  bottom: -0.6rem;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 2px;
  background: var(--color-accent);
}
.services ul {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  gap: 0.75rem;
}
.service-item { list-style: none; }
.service-details {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-card);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: box-shadow var(--motion-duration) var(--motion-ease),
              border-color var(--motion-duration) var(--motion-ease);
}
.service-details[open] {
  box-shadow: var(--shadow-strong);
  border-color: var(--color-accent);
}
.service-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--color-text);
}
.service-summary::-webkit-details-marker { display: none; }
.service-name { flex: 1; }
.service-summary::after {
  content: "▼";
  font-size: 0.85rem;
  color: var(--color-muted);
  transition: transform var(--motion-duration) var(--motion-ease);
}
.service-details[open] .service-summary::after {
  transform: rotate(-180deg);
}
.service-info {
  padding: 0 1.1rem 0.9rem;
  border-top: 1px solid var(--color-border);
}
.service-desc {
  color: var(--color-muted);
  margin: 0.75rem 0;
  font-weight: 400;
}

/* ---------- Contacts ---------- */
.contacts {
  padding: 3rem 1rem;
  text-align: center;
  background: var(--color-bg);
}
.contacts h2 {
  margin-bottom: 1rem;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  position: relative;
}
.contacts h2::after {
  content: "";
  position: absolute;
  bottom: -0.6rem;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 2px;
  background: var(--color-accent);
}
.contact-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
  max-width: 900px;
  margin: 2.5rem auto 0;
  list-style: none;
  padding: 0;
}
.contact-list li {
  display: flex;
}
.contact-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  text-align: left;
  width: 100%;
  height: 100%;
  padding: 1.4rem 1.3rem;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  transition: transform var(--motion-duration) var(--motion-ease),
              box-shadow var(--motion-duration) var(--motion-ease),
              border-color var(--motion-duration) var(--motion-ease);
}
@media (hover: hover) {
  .contact-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-strong);
    border-color: var(--color-accent);
  }
}
.contact-card:hover .contact-value { color: var(--color-accent); }
.contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-circle);
  background: var(--color-accent);
  color: #fff;
  margin-bottom: 0.75rem;
}
.contact-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.contact-label {
  color: var(--color-muted);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.contact-value {
  color: var(--color-text);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.45;
  word-break: break-word;
  transition: color var(--motion-duration) var(--motion-ease);
}

.map iframe {
  width: 100%;
  height: 320px;
  border: 0;
  border-radius: var(--radius-xl);
  margin-top: 1.5rem;
  box-shadow: var(--shadow-soft);
}

/* ---------- Footer ---------- */
footer {
  text-align: center;
  padding: 1.25rem 1rem;
  background-color: var(--color-bg);
  background: color-mix(in srgb, var(--color-bg) 85%, transparent);
  font-size: 0.9rem;
  color: var(--color-muted);
  backdrop-filter: blur(6px);
}

/* ---------- FAB (Floating Action Button) ---------- */
.fab-container {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 1rem;
  z-index: 1000;
  pointer-events: none;
}
.fab-button {
  appearance: none;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-circle);
  background-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 82%, transparent);
  border: 2px solid rgba(255, 255, 255, 0.35);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-strong);
  transition: all 260ms ease;
  padding: 0;
  backdrop-filter: blur(8px);
  pointer-events: auto;
}
.fab-button img { width: 70%; height: 70%; object-fit: contain; }
.fab-button:hover {
  background: var(--color-accent);
  transform: scale(1.1);
}
.fab-button:active { transform: scale(0.95); }
.fab-button:focus-visible {
  outline: 3px solid rgba(90, 62, 43, 0.3);
  outline-offset: 2px;
}

.fab-menu {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
  padding: 0.75rem;
  background: var(--color-glass);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(250, 245, 240, 0.4);
}
.fab-menu.active {
  opacity: 1;
  pointer-events: auto;
}

.fab-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 80%, transparent);
  color: #fff;
  border-radius: var(--radius-circle);
  text-decoration: none;
  box-shadow: var(--shadow-soft);
  font-weight: 500;
  font-size: 0.95rem;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  opacity: 0;
  transform: translateX(16px);
  transition:
    opacity 280ms ease,
    transform 280ms ease,
    background-color 200ms ease,
    box-shadow 200ms ease,
    color 200ms ease;
}
/* Staggered reveal of menu items when the FAB menu opens */
.fab-menu.active .fab-item {
  opacity: 1;
  transform: translateX(0);
}
.fab-menu.active .fab-item:nth-child(1) { transition-delay: 0ms; }
.fab-menu.active .fab-item:nth-child(2) { transition-delay: 50ms; }
.fab-menu.active .fab-item:nth-child(3) { transition-delay: 100ms; }
.fab-menu.active .fab-item:nth-child(4) { transition-delay: 150ms; }
.fab-item:hover {
  background: var(--color-accent);
  transform: translateX(-5px);
  box-shadow: var(--shadow-strong);
}
.fab-item:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.4);
  outline-offset: 2px;
}
.fab-label { display: block; }

/* Mobile FAB tweaks */
@media (max-width: 480px) {
  .fab-container { bottom: 1.5rem; right: 1.5rem; }
  .fab-button { width: 56px; height: 56px; }
  .fab-item { padding: 0.65rem 0.85rem; font-size: 0.9rem; gap: 0.5rem; }
}

/* ---------- Image Modal ---------- */
#img-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.92);
  z-index: 9999;
  padding: 1.25rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}
#img-modal.active {
  opacity: 1;
  pointer-events: auto;
}
#img-modal .modal-img {
  max-width: 95%;
  max-height: 90vh;
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
  object-fit: contain;
  z-index: 1;
}

/* Navigation / close buttons */
.modal-btn {
  position: fixed;
  z-index: 10000;
  appearance: none;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-circle);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  transition: background-color 200ms ease, color 200ms ease, transform 200ms ease;
}
.modal-btn:hover { background: rgba(255, 255, 255, 0.2); transform: scale(1.1); }
.modal-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.modal-btn svg { width: 20px; height: 20px; }

.modal-close { top: 1.5rem; right: 1.5rem; }
.modal-prev { top: 50%; left: 1.5rem; transform: translateY(-50%); }
.modal-next { top: 50%; right: 1.5rem; transform: translateY(-50%); }

@media (prefers-reduced-motion: reduce) {
  .modal-btn:hover { transform: none; }
}

/* ---------- Scroll reveal animations ---------- */
/* Only hide content for animation when JS is enabled (no-JS = content visible) */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--motion-slow) var(--motion-ease),
    transform var(--motion-slow) var(--motion-ease);
}
.js [data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Small visual tweaks ---------- */
@media (max-width: 420px) {
  .hero-overlay { padding: 1rem; }
  .lang-switch button { padding: 0.3rem 0.5rem; font-size: 0.8rem; }
  .collage { padding: 2rem 1rem; }
}

@media (max-width: 1024px) and (min-width: 768px) {
  .hero { min-height: 48vh; }
}