/* Saloria — shared page styles. Light theme is the default for sub-pages. */

:root {
  /* dark defaults — overridden by .theme-light below */
  --ink: #FAF5EA;
  --ink-2: #F4EEDF;
  --ink-3: #EDE5D2;
  --cream: #1A1612;
  --cream-2: #3A3128;
  --gold: #8A6E3F;
  --gold-2: #5E4A2A;
  --gold-soft: #B89968;
  --mist: rgba(26,22,18,0.62);
  --mist-2: rgba(26,22,18,0.42);
  --hair: rgba(26,22,18,0.14);
  --hair-strong: rgba(26,22,18,0.28);
  --serif: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --sans: "Inter Tight", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--ink); color: var(--cream); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body { overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
img { display: block; max-width: 100%; }
::selection { background: var(--gold); color: #F2EBDD; }

/* native cursor only — custom cursor removed */

/* tablet retains its dark device tone (it's a physical device on a desk) */
.tablet-frame { box-shadow: 0 60px 120px -40px rgba(26,22,18,.35), 0 0 0 1px rgba(138,110,63,.2) inset; }

/* button hover */
.btn-base:hover { color: #F2EBDD; }

/* cursor in light mode */
html.theme-light-active .cursor-dot { background: var(--gold); }
html.theme-light-active.cursor-hover .cursor-dot { background: #1A1612; }
html.theme-light-active .cursor-ring { border-color: var(--gold); }

/* grain reads better with multiply on cream */
.grain-overlay {
  position: fixed; inset: 0; pointer-events: none; z-index: 9000;
  mix-blend-mode: multiply; opacity: .22;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.96  0 0 0 0 0.94  0 0 0 0 0.90  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* custom cursor */
.cursor-dot, .cursor-ring {
  position: fixed; left: 0; top: 0; pointer-events: none; z-index: 9999;
  transform: translate3d(-100px,-100px,0); will-change: transform;
}
.cursor-dot { width: 6px; height: 6px; background: var(--gold); border-radius: 999px; transition: width .25s, height .25s, background .25s; }
.cursor-ring { width: 36px; height: 36px; border: 1px solid var(--gold); border-radius: 999px; opacity: .7; transition: width .35s ease, height .35s ease, border-color .35s ease, opacity .35s ease, background .35s ease; }
html.cursor-hover .cursor-ring { width: 64px; height: 64px; background: rgba(184,153,104,.08); }
html.cursor-hover .cursor-dot { width: 4px; height: 4px; background: var(--cream); }

/* page transition veil */
.veil { position: fixed; inset: 0; z-index: 8500; pointer-events: none; background: var(--ink); transform: translateY(100%); transition: transform .9s cubic-bezier(.7,0,.2,1); }
.veil.in { transform: translateY(0); transition-duration: .55s; }
.veil.out { transform: translateY(-100%); }

/* reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal-stagger > * { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal-stagger.in > * { opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: .08s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: .16s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: .24s; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: .32s; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: .40s; }
.reveal-stagger.in > *:nth-child(7) { transition-delay: .48s; }
.reveal-stagger.in > *:nth-child(8) { transition-delay: .56s; }

/* marquee */
.marquee { overflow: hidden; }
.marquee-track { display: inline-flex; gap: 80px; white-space: nowrap; animation: scroll-x 38s linear infinite; }
.marquee-track.reverse { animation-direction: reverse; }
@keyframes scroll-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* common buttons */
.btn-base {
  position: relative; display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--sans); font-weight: 500; letter-spacing: .01em;
  padding: 18px 28px; border-radius: 999px; border: 1px solid currentColor;
  cursor: pointer; isolation: isolate; transition: color .35s, background .35s, border-color .35s;
}
.btn-base::before {
  content: ""; position: absolute; inset: 0; border-radius: 999px;
  background: var(--gold); transform: scale(0); transform-origin: center;
  transition: transform .55s cubic-bezier(.7,0,.2,1); z-index: -1;
}
.btn-base:hover { color: var(--ink); border-color: var(--gold); }
.btn-base:hover::before { transform: scale(1); }
.btn-arrow { display: inline-block; transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.btn-base:hover .btn-arrow { transform: translate(4px,-4px); }

/* hairlines */
.hr-gold { height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); border: 0; }
.hr-cream { height: 1px; background: var(--hair); border: 0; }

/* eyebrow label */
.eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); display: inline-flex; align-items: center; gap: 12px;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--gold); display: inline-block; }

/* serif display helper */
.display { font-family: var(--serif); font-weight: 300; line-height: .96; letter-spacing: -.015em; }
.display em { font-style: italic; font-weight: 400; color: var(--gold-soft); }

/* utility containers */
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
.wrap-tight { max-width: 980px; margin: 0 auto; padding: 0 32px; }
.wrap-wide { max-width: 1480px; margin: 0 auto; padding: 0 32px; }

/* tablet mock shared */
.tablet-frame {
  position: relative; aspect-ratio: 4/3; border-radius: 28px; overflow: hidden;
  background: linear-gradient(160deg, #1d1a16, #0d0c0b);
  border: 1px solid var(--hair-strong);
}
.tablet-frame::after {
  content: ""; position: absolute; inset: 0; border-radius: 28px;
  box-shadow: inset 0 0 80px rgba(0,0,0,.7); pointer-events: none;
}
.tablet-screen { position: absolute; inset: 12px; border-radius: 18px; overflow: hidden; background: #141312; }

.magnetic { display: inline-block; will-change: transform; transition: transform .5s cubic-bezier(.2,.7,.2,1); }

/* section spacing */
.section { padding: 140px 0; position: relative; }
.section-tight { padding: 100px 0; }
.section-loose { padding: 180px 0; }

/* gold thin frame */
.gold-frame { border: 1px solid var(--gold); border-radius: 4px; }

.vh-100 { height: 100vh; min-height: 700px; }
.vh-200 { height: 200vh; }
.vh-300 { height: 300vh; }

.nowrap { white-space: nowrap; }
.balance { text-wrap: balance; }
.pretty { text-wrap: pretty; }

#app { position: relative; }

/* loader */
.boot { position: fixed; inset: 0; background: var(--ink); display: flex; align-items: center; justify-content: center; z-index: 9500; transition: opacity .6s; }
.boot img { width: 220px; opacity: .9; }
.boot.hidden { opacity: 0; pointer-events: none; }

/* form fields shared */
.field { display: flex; flex-direction: column; gap: 8px; }
.field-label { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--mist-2); }
.field-input,
.field-textarea,
.field-select {
  font-family: var(--sans); font-size: 16px; color: var(--cream);
  background: transparent; border: 0; border-bottom: 1px solid var(--hair-strong);
  padding: 12px 0; outline: none; transition: border-color .35s, color .35s;
  width: 100%;
}
.field-input:focus,
.field-textarea:focus,
.field-select:focus { border-color: var(--gold); }
.field-input::placeholder,
.field-textarea::placeholder { color: var(--mist-2); }
.field-textarea { resize: vertical; min-height: 120px; font-family: var(--sans); }
.field-select { appearance: none; cursor: pointer; padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: calc(100% - 12px) center, calc(100% - 6px) center; background-size: 6px 6px; background-repeat: no-repeat; }