/* ================================================================
   UPV INVESTMENTS — Non-Tailwind Globals
   Cursor · Grain · Reveal · Keyframes · Scroll bar
================================================================ */

/* ── Anchor offset for fixed nav (92px tall) ─────────────────── */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 100px; }

/* ── Custom Cursor ────────────────────────────────────────── */
.cursor-dot {
  position: fixed;
  width: 6px;
  height: 6px;
  background: #C8911E;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: width .2s, height .2s, opacity .2s;
  will-change: left, top;
}
.cursor-ring {
  position: fixed;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(200,145,30,.4);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition: width .35s cubic-bezier(0.16,1,0.3,1),
              height .35s cubic-bezier(0.16,1,0.3,1),
              border-color .25s;
  will-change: left, top;
}
.cursor-dot.hov  { width: 12px; height: 12px; }
.cursor-ring.hov { width: 52px; height: 52px; border-color: rgba(200,145,30,.18); }
.cursor-dot.clk  { transform: translate(-50%,-50%) scale(.5); }
@media (max-width: 1024px) {
  .cursor-dot, .cursor-ring { display: none; }
}
/* Restore native cursor on touch / stylus devices */
@media (hover: none), (pointer: coarse) {
  body { cursor: auto !important; }
}

/* ── Scroll Progress Bar ──────────────────────────────────── */
.scroll-bar {
  position: fixed;
  top: 0; left: 0;
  height: 1px;
  background: #C8911E;
  z-index: 10001;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform .08s linear;
}

/* ── Film Grain ───────────────────────────────────────────── */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9990;
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 180px;
  mix-blend-mode: overlay;
}

/* ── Reveal on scroll ─────────────────────────────────────── */
.rev {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .75s cubic-bezier(0.16,1,0.3,1),
              transform .75s cubic-bezier(0.16,1,0.3,1);
}
.rev.up { transform: translateY(36px); }
.rev.lft { transform: translateX(-36px); }
.rev.rgt { transform: translateX(36px); }
.rev.scl { transform: scale(.93); }
.rev.vis { opacity: 1 !important; transform: none !important; }

.d1 { transition-delay: .1s !important; }
.d2 { transition-delay: .2s !important; }
.d3 { transition-delay: .3s !important; }
.d4 { transition-delay: .4s !important; }
.d5 { transition-delay: .5s !important; }
.d6 { transition-delay: .6s !important; }

/* ── Gold line expand ─────────────────────────────────────── */
@keyframes lineX {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.line-anim {
  transform: scaleX(0);
  transform-origin: left;
}
.line-anim.vis {
  animation: lineX .9s cubic-bezier(0.16,1,0.3,1) forwards;
}

/* ── Accordion body ───────────────────────────────────────── */
.acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s cubic-bezier(0.16,1,0.3,1);
}
.acc-body.open { grid-template-rows: 1fr; }
.acc-body > div { overflow: hidden; }

/* ── Shimmer on gold buttons ──────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
.btn-shimmer {
  background: linear-gradient(105deg, #9A6D0F 0%, #C8911E 35%, #F0C050 50%, #C8911E 65%, #9A6D0F 100%);
  background-size: 200% 100%;
  animation: shimmer 3.5s linear infinite;
}

/* ── Nav transition ───────────────────────────────────────── */
.nav-scrolled {
  background: rgba(10,10,10,.97) !important;
  border-bottom-color: rgba(255,255,255,.06) !important;
}

/* ── Mobile menu open state ───────────────────────────────── */
.mobile-open { display: flex !important; }

/* ── Dropdown Navigation ──────────────────────────────────── */
.nav-dropdown {
  position: absolute;
  top: 92px;
  left: -1rem;
  min-width: 230px;
  background: #111111;
  border: 1px solid rgba(255,255,255,0.07);
  border-top: 2px solid #C8911E;
  padding: 0.5rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  z-index: 60;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}
.nav-drop-link {
  display: block;
  padding: 0.6rem 1.25rem;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  transition: color 0.25s, padding-left 0.25s;
  white-space: nowrap;
}
.nav-drop-link:hover { color: #C8911E; padding-left: 1.5rem; }
.nav-drop-link.active { color: #C8911E; }

/* ── Hero word-split ──────────────────────────────────────── */
@keyframes wordSlideIn {
  from { transform: translateY(108%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.word-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: inherit;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
/* Default: visible. JS adds animation on top. */
.word-inner { display: inline-block; }
.hero-words-ready .word-inner {
  animation: wordSlideIn 1s cubic-bezier(0.16,1,0.3,1) both;
}

/* ── Blur reveal (body copy on scroll) ───────────────────── */
@keyframes blurReveal {
  from { opacity: 0; filter: blur(9px); transform: translateY(14px); }
  to   { opacity: 1; filter: blur(0);   transform: translateY(0); }
}
.blur-rev.vis { animation: blurReveal 0.95s cubic-bezier(0.16,1,0.3,1) both; }

/* ── Clip-path wipe up (large headings) ──────────────────── */
@keyframes clipUp {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0% 0); }
}
.clip-rev { clip-path: inset(0 0 100% 0); }
.clip-rev.vis { animation: clipUp 1.05s cubic-bezier(0.16,1,0.3,1) both; }

/* ── Animation stagger for animation-based reveal classes ─── */
.d1.clip-rev.vis, .d1.blur-rev.vis, .d1.num-drop.vis { animation-delay: 0.12s; }
.d2.clip-rev.vis, .d2.blur-rev.vis, .d2.num-drop.vis { animation-delay: 0.24s; }
.d3.clip-rev.vis, .d3.blur-rev.vis, .d3.num-drop.vis { animation-delay: 0.36s; }
.d4.clip-rev.vis, .d4.blur-rev.vis                   { animation-delay: 0.48s; }
.d5.clip-rev.vis, .d5.blur-rev.vis                   { animation-delay: 0.58s; }
.num-drop.vis { animation: numDrop 0.75s cubic-bezier(0.16,1,0.3,1) both; }

/* ── Line grow (gold overlines) ──────────────────────────── */
@keyframes lineGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.line-grow { transform: scaleX(0); transform-origin: left; }
.line-grow.vis { animation: lineGrow 0.75s cubic-bezier(0.16,1,0.3,1) forwards; }

/* ── Hero image load zoom ─────────────────────────────────── */
@keyframes heroImgZoom {
  from { transform: scale(1.15) translateY(0px); }
  to   { transform: scale(1.08) translateY(0px); }
}
.hero-zoom { animation: heroImgZoom 3s cubic-bezier(0.16,1,0.3,1) forwards; }

/* ── Number drop (section decorative numerals) ───────────── */
@keyframes numDrop {
  from { opacity: 0; transform: translateY(-12px) scale(1.08); }
  to   { opacity: 1; transform: translateY(0)     scale(1); }
}
.num-drop { opacity: 0; }
/* .num-drop.vis is defined above with animation stagger support */

/* ── 3D card tilt ─────────────────────────────────────────── */
.tilt-card { will-change: transform; }

/* ── Scanline on dark hero ────────────────────────────────── */
@keyframes scanline {
  0%   { transform: translateY(-100%); opacity: 0; }
  5%   { opacity: .035; }
  95%  { opacity: .035; }
  100% { transform: translateY(120vh); opacity: 0; }
}
.scanline {
  position: absolute;
  left: 0; right: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, rgba(200,145,30,.035), transparent);
  pointer-events: none;
  animation: scanline 9s linear infinite;
}