/* ============================================================
   Roxane — portfolio. Neutral starter palette, Lato everywhere.
   (Visual personality to be refined later.)
   ============================================================ */

:root {
  /* type */
  --font: "Lato", system-ui, sans-serif;
  --font-display: "Abril Fatface", Georgia, serif;

  /* neutral palette */
  --ink: #1a1a1a;
  --ink-2: #404040;
  --muted: #767676;
  --faint: #a3a3a3;
  --line: #e9e9e9;
  --line-2: #dcdcdc;
  --card: #f9f8f7;

  /* placeholder grays */
  --ph-1: #e4e4e4;
  --ph-2: #d6d6d6;
  --ph-3: #cfcfcf;

  /* backdrop (light) */
  --backdrop: var(--card);

  /* motion — overwritten at runtime by Tweaks */
  --dur: 600ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --img-radius: 14px;

  /* layout */
  --card-radius: 22px;
  --gutter: clamp(20px, 4vw, 64px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--backdrop);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--dur) var(--ease);
}

/* backdrop variants */
body[data-backdrop="dark"] {
  --backdrop: #14110e;
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.015) 0px,
      rgba(255,255,255,0.015) 2px,
      rgba(0,0,0,0.12) 3px,
      rgba(0,0,0,0.12) 9px),
    radial-gradient(120% 80% at 30% 0%, #3a2a18 0%, #1c140d 55%, #100c08 100%);
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ---- App shell: full-width, no floating card ---- */
.stage {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  background: var(--card);
}
.card-shell {
  width: 100%;
  max-width: 1440px;
  background: var(--card);
  overflow: visible;
  position: relative;
}

/* ---- Placeholder image ---- */
.ph {
  position: relative;
  background: var(--ph-1);
  overflow: hidden;
  border-radius: var(--img-radius);
}
.ph::before {
  /* subtle diagonal tone so placeholders read as 'image' not 'empty box' */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, var(--ph-1) 0%, var(--ph-2) 55%, var(--ph-3) 100%);
}
.ph[data-tone="2"]::before { background: linear-gradient(135deg, #dedede, #cdcdcd); }
.ph[data-tone="3"]::before { background: linear-gradient(120deg, #d2d2d2, #e2e2e2); }
.ph__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.22);
  z-index: 1;
}
.ph__inner {
  position: absolute;
  inset: -12% 0;            /* taller than frame, for parallax travel */
  will-change: transform;
  z-index: 1;
}
.ph__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.ph--img { overflow: hidden; }
.ph--img::before { display: none; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  padding: 11px 20px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform 120ms var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #000; }
.btn--ghost { background: #f1f0ee; color: var(--ink); }
.btn--ghost:hover { background: #e7e6e3; }

/* ---- meta type ---- */
.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ---- social row ---- */
.socials { display: flex; gap: 10px; }
.social {
  width: 42px; height: 42px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  display: grid; place-items: center;
  color: var(--ink-2);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.social:hover { border-color: var(--ink); color: var(--ink); background: #faf9f7; }
.social svg { width: 18px; height: 18px; }

/* ---- reveal on scroll ---- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.reveal.in { opacity: 1; transform: none; }
.reveal.reveal--right { transform: translateX(32px); }
.reveal.reveal--right.in { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .ph__inner { transform: none !important; }
}