/* =============================================================
   WE DO GYMS — shared site styles
   Extracted from the original index.html so every page inherits
   the same dark-theme design system. Page-specific styles
   stay inline on the page that uses them.
   ============================================================= */

:root { color-scheme: dark; }
html { scroll-behavior: smooth; }
body {
  background-color: #0A0A0A;
  color: #F5F2EB;
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: #F5F2EB; color: #0A0A0A; }

/* Layered grain — adds tactile depth across the page */
.grain { position: relative; }
.grain::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
  opacity: 0.06;
  mix-blend-mode: overlay;
}

/* Reveal on scroll — only transform + opacity per design rules */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1), transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 80ms; }
.reveal-delay-2 { transition-delay: 160ms; }
.reveal-delay-3 { transition-delay: 240ms; }
.reveal-delay-4 { transition-delay: 320ms; }

/* Display headings */
.display { font-family: 'Inter', sans-serif; font-weight: 400; letter-spacing: 0.02em; line-height: 1.08; text-transform: uppercase; }
.eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: rgba(245, 242, 235, 0.7);
}
.rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245,242,235,0.18), transparent);
}
.rule-tight { background: rgba(245,242,235,0.08); }

/* Layered, brass-tinted shadow for elevated surfaces */
.lift {
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.04) inset,
    0 24px 60px -28px rgba(245,242,235,0.18),
    0 12px 28px -12px rgba(0,0,0,0.55);
}
.lift-soft {
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.03) inset,
    0 18px 40px -22px rgba(0,0,0,0.5);
}

/* Hero atmosphere — layered radial gradients */
.atmosphere {
  background:
    radial-gradient(900px 600px at 12% 10%, rgba(245,242,235,0.10), transparent 60%),
    radial-gradient(1100px 700px at 88% 92%, rgba(245,242,235,0.06), transparent 65%),
    radial-gradient(700px 500px at 50% 50%, rgba(255,255,255,0.02), transparent 70%),
    #0A0A0A;
}
.atmosphere-light {
  background:
    radial-gradient(800px 500px at 10% 0%, rgba(245,242,235,0.10), transparent 60%),
    radial-gradient(900px 600px at 100% 100%, rgba(245,242,235,0.05), transparent 65%),
    #0A0A0A;
}

/* Imagery treatment — gradient overlay + multiply layer */
.img-treat { position: relative; overflow: hidden; }
.img-treat > img { transition: transform 1400ms cubic-bezier(0.22, 1, 0.36, 1), filter 1400ms cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }
.img-treat::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.65) 100%);
  z-index: 2;
  pointer-events: none;
}
.img-treat::after {
  content: '';
  position: absolute; inset: 0;
  background: #0A0A0A;
  mix-blend-mode: multiply;
  opacity: 0.18;
  z-index: 1;
  pointer-events: none;
}
.img-treat:hover > img { transform: scale(1.04); }
.img-treat.is-bright::before { background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.32) 100%); }
.img-treat.is-bright::after { opacity: 0.05; }

/* Hero parallax target */
.parallax-hero { will-change: transform; }

/* Buttons */
.btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 18px 32px;
  background: #F5F2EB;
  color: #0A0A0A;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid rgba(245,242,235,0.6);
  transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1), background-color 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-primary:hover { background: #FFFFFF; transform: translateY(-1px); }
.btn-primary:focus-visible { outline: 2px solid #F5F2EB; outline-offset: 4px; }
.btn-primary:active { transform: translateY(0); background: #EDE8DC; }
.btn-primary .arrow { transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1); }
.btn-primary:hover .arrow { transform: translateX(4px); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 18px 32px;
  color: #F5F2EB;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid rgba(245,242,235,0.22);
  background: transparent;
  transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1), background-color 480ms cubic-bezier(0.22, 1, 0.36, 1), border-color 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-ghost:hover { background: rgba(245,242,235,0.05); border-color: rgba(245,242,235,0.4); transform: translateY(-1px); }
.btn-ghost:focus-visible { outline: 2px solid #F5F2EB; outline-offset: 4px; }
.btn-ghost:active { transform: translateY(0); background: rgba(245,242,235,0.02); }
.btn-ghost .arrow { transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1); }
.btn-ghost:hover .arrow { transform: translateX(4px); }

/* Underline link */
.ulink {
  position: relative;
  display: inline-block;
  color: #F5F2EB;
  transition: color 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ulink::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: currentColor;
  transform-origin: left center;
  transform: scaleX(1);
  transition: transform 540ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ulink:hover::after { transform: scaleX(0); transform-origin: right center; }
.ulink:hover { color: #F5F2EB; }
.ulink:focus-visible { outline: 2px solid #F5F2EB; outline-offset: 4px; }

/* Nav link */
.nav-link {
  position: relative;
  color: #F5F2EB;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 8px 0;
  transition: color 360ms cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 2px;
  width: 100%;
  height: 1px;
  background: #F5F2EB;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 540ms cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-link:hover { color: #F5F2EB; }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.is-active::after { transform: scaleX(1); }
.nav-link:focus-visible { outline: 2px solid #F5F2EB; outline-offset: 4px; }

/* Logo wordmark */
.wordmark {
  font-family: 'Inter', sans-serif;
  font-weight: 200;
  letter-spacing: 0.32em;
  font-size: 14px;
  color: #F5F2EB;
  text-transform: uppercase;
}
.wordmark .heavy { font-weight: 600; }

/* Mobile drawer */
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(420px, 88vw);
  background: #0A0A0A;
  border-left: 1px solid rgba(245,242,235,0.08);
  transform: translateX(100%);
  transition: transform 640ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 90;
  display: flex;
  flex-direction: column;
}
.drawer.is-open { transform: translateX(0); }
.drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(10,10,10,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 540ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 80;
}
.drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }

/* Form inputs */
.field {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(245,242,235,0.18);
  color: #F5F2EB;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0.01em;
  padding: 14px 0;
  width: 100%;
  transition: border-color 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
.field::placeholder { color: rgba(245,242,235,0.4); }
.field:focus { outline: none; border-bottom-color: #F5F2EB; }
.field-label {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(245,242,235,0.55);
  margin-bottom: 8px;
}
select.field {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23F5F2EB' stroke-width='1' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 24px;
}
select.field option { background: #141414; color: #F5F2EB; }
textarea.field { resize: vertical; min-height: 120px; }
.field-error { color: #E07F6A; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; margin-top: 8px; display: none; }
.field.is-invalid { border-bottom-color: #E07F6A; }
.field.is-invalid + .field-error { display: block; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

body.modal-open { overflow: hidden; }