/* ============================================================
   ARTinez v2 — Base design system
   Dark premium / Gold accent / Cormorant + Inter + Dancing Script
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: #c9a35c #0a0a12;
}

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 400;
  line-height: 1.55;
  color: #e8e8ef;
  background: #050509;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: .005em;
}

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ----------------------------------------------------------
   Design tokens
---------------------------------------------------------- */
:root {
  /* Colour */
  --bg-0: #050509;
  --bg-1: #0a0a12;
  --bg-2: #11111b;
  --bg-3: #1a1a26;
  --line: rgba(255,255,255,.06);
  --line-strong: rgba(255,255,255,.12);

  --text: #e8e8ef;
  --text-mute: #a8a8b8;
  --text-dim: #7a7a8c;

  --gold-1: #ffd089;
  --gold-2: #d4af37;
  --gold-3: #c9a35c;
  --gold-4: #8a6a35;
  --gold-grad: linear-gradient(135deg, #d4af37 0%, #f4d97a 50%, #b8902a 100%);

  /* Typography */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-script: 'Dancing Script', cursive;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Spacing */
  --gutter: clamp(20px, 5vw, 40px);
  --section-y: clamp(80px, 12vw, 160px);

  /* Radius */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;

  /* Motion */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-soft: cubic-bezier(.4, .0, .2, 1);
  --d-fast: 180ms;
  --d-base: 320ms;
  --d-slow: 620ms;
  --d-slower: 1100ms;

  /* Glow */
  --glow-gold: 0 0 36px rgba(212,175,55,.18), 0 0 80px rgba(212,175,55,.08);
}

::selection { background: rgba(212,175,55,.3); color: #fff; }

/* ----------------------------------------------------------
   Typography
---------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
  color: #fff;
}

h1 { font-size: clamp(44px, 8vw, 96px); }
h2 { font-size: clamp(32px, 5vw, 64px); }
h3 { font-size: clamp(22px, 2.4vw, 32px); line-height: 1.2; }
h4 { font-size: clamp(18px, 1.8vw, 22px); line-height: 1.3; }

/* ----------------------------------------------------------
   Semantic heading promotion
----------------------------------------------------------
   A heading can be promoted one level to remove a skip in the
   document outline. These two classes restore the size and
   line-height of the level the heading had before, so promoting a
   heading never changes the rendered page. */
h2.heading-h3 {
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.2;
}
h2.heading-h4 {
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.3;
}
h3.heading-h4 {
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.3;
}

p { margin: 0 0 1em; color: var(--text-mute); }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.65;
  color: var(--text-mute);
  max-width: 60ch;
}

.rule {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 0;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-3);
  font-weight: 500;
}
.rule::before {
  content: '';
  width: 28px; height: 1px;
  background: var(--gold-3);
  display: inline-block;
}

.accent {
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
  font-weight: 400;
}

/* ----------------------------------------------------------
   Layout primitives
---------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
  position: relative;
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 48px;
  max-width: 720px;
}

.eyebrow-script {
  font-family: var(--font-script);
  font-size: clamp(22px, 2.2vw, 28px);
  color: var(--gold-2);
  margin-bottom: 8px;
  letter-spacing: .02em;
}

/* ----------------------------------------------------------
   Background atmosphere
---------------------------------------------------------- */
.bg-atmos {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(212,175,55,.10), transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(120,90,200,.06), transparent 60%),
    radial-gradient(ellipse 50% 40% at 0% 80%, rgba(60,140,200,.04), transparent 60%),
    linear-gradient(180deg, #08080e 0%, #050509 60%, #03030a 100%);
}
.bg-grid {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 95%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 95%);
}

/* Cursor follower glow */
.cursor-glow {
  position: fixed;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,55,.10) 0%, transparent 60%);
  pointer-events: none;
  z-index: -1;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity var(--d-base) var(--ease-out);
  mix-blend-mode: screen;
}
.cursor-glow.active { opacity: 1; }

/* ----------------------------------------------------------
   Reveal animation
   Content is ALWAYS visible by default. .reveal elements only
   fade/slide in once JS confirms the IntersectionObserver is
   running. If JS fails, content remains fully visible.

   Implementation: JS adds the .in class immediately on script
   load, then keeps it. No opacity:0 ever set as default.
---------------------------------------------------------- */
.reveal {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: no-preference) {
  .reveal.js-anim {
    animation: revealUp var(--d-slow) var(--ease-out) both;
  }
}
@keyframes revealUp {
  /* An element at exactly zero opacity is not painted at all, which held the
     Largest Contentful Paint back until the animation finished. One percent
     is visually identical and lets the paint register straight away. */
  from { opacity: .01; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal[data-delay="1"] { transition-delay: 80ms; }
.reveal[data-delay="2"] { transition-delay: 160ms; }
.reveal[data-delay="3"] { transition-delay: 240ms; }
.reveal[data-delay="4"] { transition-delay: 320ms; }
.reveal[data-delay="5"] { transition-delay: 400ms; }

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

/* On phones: skip the reveal fade-in entirely. The animation starts at
   opacity:0 and animates to opacity:1; on low-end Android, scroll-induced
   reflow can leave content visibly mid-state. Content is visible immediately. */
@media (max-width: 720px) {
  .reveal.js-anim {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ----------------------------------------------------------
   Focus
---------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--gold-2);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ----------------------------------------------------------
   Accessibility helpers
---------------------------------------------------------- */
/* Honeypot — a field that must stay empty. Hidden from real users, from
   screen readers and from the tab order. */
.hp {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}