/* Art House — base: reset, fonts, keyframes, shared interactions */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  font-family: var(--font-body);
  color: var(--navy);
  overflow-x: clip;
}

a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--gold); }
::selection { background: var(--gold); color: var(--white); }

img, svg, video { max-width: 100%; }
button { font-family: inherit; }

h1, h2, h3, h4, blockquote, figure, p { margin: 0; }

/* headings pick the language heading font */
h1, h2, h3, .h-font { font-family: var(--font-head); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

/* ---------- keyframes (ported 1:1 from the design) ---------- */
@keyframes ahShine { 0% { transform: translateX(-80%) skewX(-16deg); } 100% { transform: translateX(240%) skewX(-16deg); } }
@keyframes ahFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ahRise { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ahBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(9px); } }
@keyframes ahPulse { 0% { transform: scale(1); opacity: 0.8; } 70% { transform: scale(2.6); opacity: 0; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes ahGlow { 0%, 100% { opacity: 0.22; } 50% { opacity: 0.5; } }
@keyframes ahStreakA { 0% { transform: translateX(-300px); } 100% { transform: translateX(1900px); } }
@keyframes ahStreakB { 0% { transform: translateX(1900px); } 100% { transform: translateX(-300px); } }
@keyframes ahBillboard { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } }

/* ---------- shared interaction helpers ---------- */
.ah-btn {
  transition: transform 0.18s var(--ease-out), background-color var(--dur-fast) ease,
    color var(--dur-fast) ease, border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.ah-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-btn); }
.ah-btn:active { transform: translateY(0) scale(0.97); }

.ah-img { transition: transform 0.5s var(--ease-out); }
.ah-sol:hover .ah-img { transform: scale(1.07); }

.ah-arrow { transition: transform 0.25s var(--ease-out); }
[dir='ltr'] .ah-arrow { transform: scaleX(1); }
[dir='rtl'] .ah-arrow { transform: scaleX(-1); }
[dir='ltr'] .ah-sol:hover .ah-arrow { transform: translateX(8px) scaleX(1); }
[dir='rtl'] .ah-sol:hover .ah-arrow { transform: translateX(-8px) scaleX(-1); }

.ah-lift { transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease, border-color 0.3s ease; }
.ah-lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }

.ah-photo { transition: transform 0.6s var(--ease-out); }
.ah-photo:hover { transform: scale(1.03); }

/* directional arrow glyph that mirrors in RTL */
.arrow-flip { transform: scaleX(1); }
[dir='rtl'] .arrow-flip { transform: scaleX(-1); }

/* pill CTA (navy) & ghost variants used across sections */
.btn {
  display: inline-block;
  border-radius: 4px;
  font-weight: 700;
  transition: all var(--dur-fast) ease;
  cursor: pointer;
}
.btn--primary { background: var(--navy); border: 1px solid var(--gold); color: var(--white); }
.btn--primary:hover { background: var(--gold); color: var(--navy); }
.btn--ghost-navy { background: transparent; border: 1px solid var(--navy); color: var(--navy); }
.btn--ghost-navy:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }
/* the high-contrast "pop" button for dark sections (navy/white/grey brand) */
.btn--gold { background: var(--white); border: 1px solid var(--white); color: var(--navy); font-weight: 800; }
.btn--gold:hover { background: var(--light); border-color: var(--light); color: var(--navy); }
.btn--ghost-white { background: transparent; border: 1px solid rgba(255, 255, 255, 0.55); color: var(--white); }
.btn--ghost-white:hover { background: var(--white); border-color: var(--white); color: var(--navy); }

/* section scaffolding */
.section { padding: var(--sec-pad) var(--pad-x); }
.section__inner { max-width: var(--max-w); margin: 0 auto; }
.sec-head { display: flex; flex-direction: column; gap: 8px; }
.sec-title { font-size: clamp(1.7rem, 3.2vw, 2.6rem); font-weight: 800; color: var(--navy); }
.sec-tagline {
  font-family: var(--font-latin);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-mute);
}
.gold-rule { width: 64px; height: 2px; background: var(--gold); }
.kicker {
  font-family: var(--font-accent);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- reveal-on-scroll (progressive enhancement: hidden only when JS runs) ---------- */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--rv-dist, 36px));
  filter: blur(6px);
}
html.js [data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition:
    opacity var(--dur-slow) var(--ease-out) var(--rv-delay, 0s),
    transform var(--dur-slow) var(--ease-out) var(--rv-delay, 0s),
    filter var(--dur-slow) ease var(--rv-delay, 0s);
}

/* select chevron, direction aware */
.select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238A8C8F' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 12px;
}
[dir='ltr'] .select { background-position: right 16px center; padding-inline-end: 38px; }
[dir='rtl'] .select { background-position: left 16px center; padding-inline-end: 38px; }

/* touch + reduced motion guards (ported from the design) */
@media (hover: none) {
  .ah-btn:hover, .ah-lift:hover { transform: none; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ah-btn, .ah-lift, .ah-img, .ah-arrow, .ah-photo { transition: none !important; }
  html.js [data-reveal] { opacity: 1; transform: none; filter: none; }
  *[style*='animation'], .anim { animation: none !important; }
}