/* SAN Group of Hotels — custom styles (complements Tailwind) */
:root { --gold: #d4a53d; --gold-2: #f0c96a; --ink: #0a0a0a; --ink-2: #141414; }

html { scroll-behavior: auto; }
body { font-family: 'Jost', Arial, sans-serif; background: var(--ink); color: #fff; -webkit-font-smoothing: antialiased; }
::selection { background: var(--gold); color: #000; }

/* Typography helpers */
.eyebrow { letter-spacing: .32em; text-transform: uppercase; font-size: .72rem; color: var(--gold); font-weight: 500; }
.display { font-weight: 300; letter-spacing: -.01em; line-height: 1.05; }
.display strong { font-weight: 600; color: var(--gold); }
.gold-line { display: inline-block; width: 56px; height: 1px; background: var(--gold); vertical-align: middle; }

/* Gold text gradient */
.text-gold-grad { background: linear-gradient(120deg, #b8892a 0%, #d4a53d 45%, #f3d98a 60%, #d4a53d 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Background textures */
.bg-grid { background-image: linear-gradient(rgba(212,165,61,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(212,165,61,.07) 1px, transparent 1px); background-size: 72px 72px; }
.bg-glow::before { content: ""; position: absolute; inset: -20%; background: radial-gradient(60% 50% at 70% 30%, rgba(212,165,61,.18), transparent 60%), radial-gradient(40% 40% at 20% 80%, rgba(212,165,61,.10), transparent 60%); pointer-events: none; }
.watermark { position: absolute; right: -8%; top: 50%; transform: translateY(-50%); width: min(70vw, 720px); opacity: .06; pointer-events: none; filter: grayscale(1) brightness(3); }

/* Header */
#header { transition: background .4s ease, box-shadow .4s ease, padding .4s ease; }
#header.scrolled { background: rgba(10,10,10,.92); backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(212,165,61,.25); }
#header.scrolled .logo-img { height: 48px; }
.nav-link { position: relative; padding: .25rem 0; letter-spacing: .18em; text-transform: uppercase; font-size: .74rem; font-weight: 500; color: rgba(255,255,255,.85); transition: color .3s; }
.nav-link::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px; background: var(--gold); transition: width .35s cubic-bezier(.2,.8,.2,1); }
.nav-link:hover, .nav-link.active { color: var(--gold); }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: .75rem; padding: .95rem 2rem; letter-spacing: .2em; text-transform: uppercase; font-size: .74rem; font-weight: 600; border: 1px solid var(--gold); transition: all .35s cubic-bezier(.2,.8,.2,1); position: relative; overflow: hidden; }
.btn-gold { background: var(--gold); color: #000; }
.btn-gold:hover { background: #fff; border-color: #fff; color: #000; transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(212,165,61,.5); }
.btn-outline { color: var(--gold); background: transparent; }
.btn-outline:hover { background: var(--gold); color: #000; transform: translateY(-2px); }
.btn-dark { background: #000; color: var(--gold); border-color: #000; }
.btn-dark:hover { background: var(--gold); color: #000; border-color: var(--gold); }
.btn svg { width: 16px; height: 16px; transition: transform .35s; }
.btn:hover svg { transform: translateX(4px); }

/* Cards */
.card { background: var(--ink-2); border: 1px solid rgba(212,165,61,.18); transition: transform .5s cubic-bezier(.2,.8,.2,1), border-color .4s, box-shadow .5s; position: relative; overflow: hidden; }
.card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(212,165,61,.12), transparent 45%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.card:hover { transform: translateY(-8px); border-color: rgba(212,165,61,.6); box-shadow: 0 30px 60px -30px rgba(212,165,61,.35); }
.card:hover::after { opacity: 1; }
.card .corner { position: absolute; width: 22px; height: 22px; border-color: var(--gold); border-style: solid; opacity: .7; transition: all .4s; }
.card .corner.tl { top: 10px; left: 10px; border-width: 1px 0 0 1px; }
.card .corner.tr { top: 10px; right: 10px; border-width: 1px 1px 0 0; }
.card .corner.bl { bottom: 10px; left: 10px; border-width: 0 0 1px 1px; }
.card .corner.br { bottom: 10px; right: 10px; border-width: 0 1px 1px 0; }
.card:hover .corner { width: 34px; height: 34px; opacity: 1; }
.logo-box img { max-height: 100%; max-width: 100%; object-fit: contain; filter: drop-shadow(0 6px 18px rgba(0,0,0,.4)); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.card:hover .logo-box img { transform: scale(1.06); }

/* White section variant */
.section-light { background: #fff; color: #0a0a0a; }
.section-light .card { background: #fff; border-color: rgba(10,10,10,.1); }
.section-light .card:hover { border-color: var(--gold); box-shadow: 0 30px 60px -30px rgba(0,0,0,.25); }

/* Brand logo marquee */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; gap: 4rem; width: max-content; }
.marquee-track img { height: 64px; width: auto; opacity: .85; transition: opacity .3s, transform .3s; }
.marquee-track img:hover { opacity: 1; transform: scale(1.08); }

/* Stats */
.stat-num { font-size: clamp(2.6rem, 5vw, 4.2rem); font-weight: 300; line-height: 1; color: var(--gold); }

/* Timeline */
.timeline { position: relative; }
.timeline::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, var(--gold) 10%, var(--gold) 90%, transparent); }
.tl-item { position: relative; padding-left: 2.5rem; }
.tl-item::before { content: ""; position: absolute; left: -5px; top: .55rem; width: 11px; height: 11px; border-radius: 50%; background: var(--ink); border: 1px solid var(--gold); box-shadow: 0 0 0 4px rgba(212,165,61,.15); }
@media (min-width: 1024px) {
  .timeline::before { left: 50%; }
  .tl-item { width: 50%; padding-left: 0; }
  .tl-item:nth-child(odd) { padding-right: 4rem; text-align: right; }
  .tl-item:nth-child(even) { margin-left: 50%; padding-left: 4rem; }
  .tl-item:nth-child(odd)::before { left: auto; right: -6px; }
  .tl-item:nth-child(even)::before { left: -5px; }
}

/* Side contact rail — fixed at right middle */
.side-rail { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 60; display: flex; flex-direction: column; gap: 6px; }
.rail-btn { display: flex; align-items: center; height: 58px; background: #000; color: var(--gold); border: 1px solid rgba(212,165,61,.45); border-right: 0; text-decoration: none; overflow: hidden; width: 58px; transition: width .45s cubic-bezier(.2,.8,.2,1), background .3s, color .3s; box-shadow: -8px 0 30px -10px rgba(212,165,61,.35); }
.rail-btn .ico { flex: 0 0 58px; height: 58px; display: grid; place-items: center; }
.rail-btn .ico svg { width: 22px; height: 22px; }
.rail-btn .lbl { white-space: nowrap; padding-right: 1.25rem; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; opacity: 0; transform: translateX(10px); transition: opacity .3s .1s, transform .4s .05s; }
.rail-btn .lbl small { display: block; letter-spacing: .05em; text-transform: none; font-weight: 400; font-size: .78rem; opacity: .8; }
.rail-btn:hover, .rail-btn:focus-visible { width: 220px; background: var(--gold); color: #000; border-color: var(--gold); }
.rail-btn:hover .lbl, .rail-btn:focus-visible .lbl { opacity: 1; transform: translateX(0); }
.rail-btn.wa:hover { background: #25d366; border-color: #25d366; }
.rail-btn .pulse { position: absolute; }
.side-rail .rail-tag { writing-mode: vertical-rl; transform: rotate(180deg); font-size: .62rem; letter-spacing: .35em; text-transform: uppercase; color: var(--gold); opacity: .7; align-self: center; padding: .5rem 0; }
@media (max-width: 640px) { .rail-btn { height: 50px; width: 50px; } .rail-btn .ico { flex-basis: 50px; height: 50px; } .rail-btn:hover { width: 200px; } }

/* Scroll progress */
#progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--gold); z-index: 100; }

/* Form */
.field { width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.25); padding: .9rem 0; color: #fff; outline: none; transition: border-color .3s; font-family: inherit; }
.field::placeholder { color: rgba(255,255,255,.4); }
.field:focus { border-color: var(--gold); }
.field option { color: #000; }

/* Reveal defaults (GSAP sets final state) */
[data-reveal] { opacity: 0; transform: translateY(32px); will-change: transform, opacity; }
.no-js [data-reveal] { opacity: 1; transform: none; }

/* Mobile menu */
#mobileMenu { transform: translateX(100%); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
#mobileMenu.open { transform: translateX(0); }

/* Founder frame */
.frame { position: relative; }
.frame::before { content: ""; position: absolute; inset: 0; transform: translate(18px, 18px); border: 1px solid var(--gold); z-index: 0; transition: transform .5s; }
.frame:hover::before { transform: translate(10px, 10px); }
.frame img { position: relative; z-index: 1; }

/* Hero scroll cue */
.scroll-cue { width: 1px; height: 64px; background: linear-gradient(180deg, var(--gold), transparent); position: relative; overflow: hidden; }
.scroll-cue::after { content: ""; position: absolute; left: 0; top: -64px; width: 1px; height: 64px; background: #fff; animation: cue 2s infinite; }
@keyframes cue { to { top: 64px; } }

/* Big rotating peacock ring */
@keyframes spin { to { transform: rotate(360deg); } }
.spin-slow { animation: spin 60s linear infinite; }