/* ============================================================
   OPR GAB V2 — CYBERPUNK LUXURY
   ============================================================ */

/* FONTS */
@font-face {
  font-family: 'Gakuran';
  src: url('../fonts/GakuranDemoRegular-drw7R.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&display=swap');

/* ── VARIABLES ─────────────────────────────────────────────── */
:root {
  --bg:        #050505;
  --bg2:       #0a0a0a;
  --bg3:       #0f0f0f;
  --surface:   rgba(255,255,255,0.03);
  --surface2:  rgba(255,255,255,0.06);
  --border:    rgba(255,255,255,0.07);
  --border2:   rgba(255,255,255,0.12);

  --cyan:      #D4AF37;
  --cyan-dim:  rgba(212,175,55,0.12);
  --cyan-glow: rgba(212,175,55,0.45);
  --purple:    #D4AF37;
  --purple-dim:rgba(212,175,55,0.12);
  --purple-glow:rgba(212,175,55,0.45);
  --pink:      #D4AF37;
  --pink-dim:  rgba(212,175,55,0.12);
  --pink-glow: rgba(212,175,55,0.45);

  --white:     #ffffff;
  --off-white: #e8e8e8;
  --grey:      #888;
  --grey2:     #555;

  --rajdhani:  'Gakuran', sans-serif;
  --grotesk:   'Space Grotesk', sans-serif;
  --mono:      'Space Mono', monospace;
  --serif:     'Cormorant Garamond', serif;

  --nav-h:     104px;
  --r:         4px;
  --ease:      cubic-bezier(0.16,1,0.3,1);
  --ease-out:  cubic-bezier(0.0,0.0,0.2,1);
}

/* ── RESET ─────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; background:var(--bg) }
body {
  font-family:var(--grotesk);
  font-size:16px;
  line-height:1.7;
  background:var(--bg);
  color:var(--off-white);
  overflow-x:hidden;
  cursor:none;
}
img { display:block; width:100%; object-fit:cover }
a { color:inherit; text-decoration:none }
button { cursor:none; border:none; background:none; font:inherit; color:inherit }
input,select,textarea { font:inherit; color:inherit }
::selection { background:var(--cyan); color:#fff }

/* ── NOISE OVERLAY ─────────────────────────────────────────── */
.noise {
  position:fixed; inset:0; z-index:9990; pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:256px;
}

/* ── CUSTOM CURSOR ─────────────────────────────────────────── */
#cursor-dot {
  position:fixed; width:4px; height:4px;
  background:var(--cyan); border-radius:50%;
  pointer-events:none; z-index:99999;
  transform:translate(-50%,-50%);
  transition:background .2s;
  box-shadow:0 0 6px var(--cyan), 0 0 12px var(--cyan);
}
#cursor-ring {
  position:fixed; width:36px; height:36px;
  border:1px solid rgba(212,175,55,.5); border-radius:50%;
  pointer-events:none; z-index:99998;
  transform:translate(-50%,-50%);
  transition:width .3s var(--ease), height .3s var(--ease),
             border-color .3s, background .3s;
}
#cursor-ring.hovered {
  width:56px; height:56px;
  border-color:var(--cyan);
  background:rgba(212,175,55,.05);
}
#cursor-ring.clicking {
  width:28px; height:28px;
  background:rgba(212,175,55,.15);
}

/* ── PAGE TRANSITION ───────────────────────────────────────── */
#page-transition {
  position:fixed; inset:0; z-index:99997;
  background:var(--bg);
  transform:translateY(-100%);
  pointer-events:none;
}
#page-transition.entering {
  animation:pt-enter .5s var(--ease) forwards;
}
#page-transition.leaving {
  animation:pt-leave .5s var(--ease) forwards;
}
@keyframes pt-enter { from{transform:translateY(0)} to{transform:translateY(-100%)} }
@keyframes pt-leave { from{transform:translateY(100%)} to{transform:translateY(0)} }

/* ── PARTICLES CANVAS ──────────────────────────────────────── */
#particles {
  position:fixed; inset:0; z-index:1; pointer-events:none;
}

/* ── MOUSE GLOW ────────────────────────────────────────────── */
#mouse-glow {
  position:fixed; width:600px; height:600px;
  border-radius:50%; pointer-events:none; z-index:2;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(212,175,55,.04) 0%, transparent 70%);
  transition:opacity .3s;
}

/* ── TYPOGRAPHY ────────────────────────────────────────────── */
.label {
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--cyan);
  display:flex; align-items:center; gap:12px;
}
.label::before {
  content:''; width:32px; height:1px;
  background:var(--cyan);
  box-shadow:0 0 6px var(--cyan);
}

h1,h2,h3,h4 { font-family:var(--rajdhani); line-height:1.1; font-weight:700 }
.h1 {
  font-size:clamp(52px,8vw,120px);
  letter-spacing:-.02em;
  text-transform:uppercase;
}
.h2 {
  font-size:clamp(36px,5vw,72px);
  letter-spacing:-.01em;
  text-transform:uppercase;
}
.h3 {
  font-size:clamp(24px,3vw,40px);
  text-transform:uppercase;
  letter-spacing:.02em;
}

.neon-text-cyan  { color:var(--cyan);   text-shadow:0 0 20px var(--cyan-glow),   0 0 60px var(--cyan-dim) }
.neon-text-purple{ color:var(--purple); text-shadow:0 0 20px var(--purple-glow), 0 0 60px var(--purple-dim) }
.neon-text-pink  { color:var(--pink);   text-shadow:0 0 20px var(--pink-glow),   0 0 60px var(--pink-dim) }

/* ── NAVIGATION ────────────────────────────────────────────── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 48px;
  height:var(--nav-h);
  transition:background .4s, backdrop-filter .4s, border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled {
  background:rgba(5,5,5,.88);
  backdrop-filter:blur(20px);
  border-bottom-color:var(--border);
}
.nav-logo {
  font-family:'Space Mono', monospace;
  font-size:18px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--white);
  display:flex; flex-direction:column; line-height:1;
}
.nav-logo-img { height:80px; width:auto; display:block }
.nav-logo span {
  font-size:9px; font-weight:400;
  letter-spacing:.3em;
  color:var(--cyan);
  margin-top:6px;
}
.nav-links {
  display:flex; gap:36px; list-style:none;
}
.nav-links a {
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--grey);
  position:relative;
  transition:color .3s;
}
.nav-links a::after {
  content:''; position:absolute;
  bottom:-4px; left:0; width:0; height:1px;
  background:var(--cyan);
  box-shadow:0 0 8px var(--cyan);
  transition:width .4s var(--ease);
}
.nav-links a:hover,
.nav-links a.active { color:var(--white) }
.nav-links a:hover::after,
.nav-links a.active::after { width:100% }
.nav-cta {
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:10px 24px;
  border:1px solid var(--cyan);
  color:var(--cyan);
  position:relative;
  overflow:hidden;
  transition:color .3s;
}
.nav-cta::before {
  content:''; position:absolute;
  inset:0; background:var(--cyan);
  transform:translateX(-101%);
  transition:transform .3s var(--ease);
}
.nav-cta:hover { color:#000 }
.nav-cta:hover::before { transform:translateX(0) }
.nav-cta span { position:relative; z-index:1 }

/* Mobile nav */
.nav-hamburger {
  display:none; flex-direction:column; gap:5px;
  width:28px; padding:4px;
}
.nav-hamburger span {
  display:block; height:1px;
  background:var(--white);
  transition:transform .3s, opacity .3s, width .3s;
}
.nav-hamburger.open span:nth-child(1) { transform:translateY(6px) rotate(45deg) }
.nav-hamburger.open span:nth-child(2) { opacity:0; width:0 }
.nav-hamburger.open span:nth-child(3) { transform:translateY(-6px) rotate(-45deg) }
.nav-drawer {
  position:fixed; inset:0; z-index:490;
  background:rgba(5,5,5,.97); backdrop-filter:blur(24px);
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:36px;
  transform:translateX(100%);
  transition:transform .5s var(--ease);
}
.nav-drawer.open { transform:translateX(0) }
.nav-drawer a {
  font-family:var(--rajdhani);
  font-size:clamp(32px,8vw,54px);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--grey);
  transition:color .3s;
}
.nav-drawer a:hover { color:var(--cyan) }

/* ── BUTTONS ───────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:14px 32px;
  position:relative; overflow:hidden;
  transition:color .3s;
}
.btn-primary {
  background:var(--cyan);
  color:var(--bg);
  box-shadow:0 0 20px var(--cyan-glow), 0 0 40px var(--cyan-dim);
  transition:box-shadow .3s, transform .2s;
}
.btn-primary:hover {
  box-shadow:0 0 30px var(--cyan-glow), 0 0 60px var(--cyan-dim), 0 0 80px var(--cyan-dim);
  transform:translateY(-1px);
}
.btn-outline {
  border:1px solid rgba(255,255,255,.25);
  color:var(--off-white);
}
.btn-outline::before {
  content:''; position:absolute; inset:0;
  background:var(--surface2);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.btn-outline:hover::before { transform:scaleX(1) }
.btn-outline span { position:relative; z-index:1 }
.btn-cyan-outline {
  border:1px solid var(--cyan);
  color:var(--cyan);
}
.btn-cyan-outline::before {
  content:''; position:absolute; inset:0;
  background:var(--cyan);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.btn-cyan-outline:hover { color:var(--bg) }
.btn-cyan-outline:hover::before { transform:scaleX(1) }
.btn-cyan-outline span { position:relative; z-index:1 }

/* ── SECTION DIVIDER ───────────────────────────────────────── */
.divider {
  width:100%; height:1px;
  background:linear-gradient(90deg, transparent, var(--cyan), var(--purple), transparent);
  opacity:.25;
  position:relative;
}
.divider::after {
  content:''; position:absolute;
  top:-2px; left:50%; transform:translateX(-50%);
  width:200px; height:5px;
  background:linear-gradient(90deg, transparent, var(--cyan), transparent);
  filter:blur(4px);
  opacity:.6;
}

/* ── GLASS CARD ────────────────────────────────────────────── */
.glass {
  background:var(--surface);
  border:1px solid var(--border);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.glass-glow-cyan  { border-color:rgba(212,175,55,.2);  box-shadow:0 0 20px rgba(212,175,55,.04),  inset 0 0 20px rgba(212,175,55,.02) }
.glass-glow-purple{ border-color:rgba(212,175,55,.2); box-shadow:0 0 20px rgba(212,175,55,.04), inset 0 0 20px rgba(212,175,55,.02) }
.glass-glow-pink  { border-color:rgba(212,175,55,.2);  box-shadow:0 0 20px rgba(212,175,55,.04),  inset 0 0 20px rgba(212,175,55,.02) }

/* ── NEON LINE ─────────────────────────────────────────────── */
.neon-line-cyan   { box-shadow:0 0 12px var(--cyan-glow),   0 0 4px var(--cyan) }
.neon-line-purple { box-shadow:0 0 12px var(--purple-glow), 0 0 4px var(--purple) }
.neon-line-pink   { box-shadow:0 0 12px var(--pink-glow),   0 0 4px var(--pink) }

/* ── SCROLL REVEAL ─────────────────────────────────────────── */
.reveal {
  opacity:0;
  transform:translateY(32px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.d1 { transition-delay:.1s }
.reveal.d2 { transition-delay:.2s }
.reveal.d3 { transition-delay:.3s }
.reveal.d4 { transition-delay:.4s }
.reveal.d5 { transition-delay:.5s }
.reveal.in { opacity:1; transform:translateY(0) }
.reveal-left {
  opacity:0; transform:translateX(-32px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal-left.in { opacity:1; transform:translateX(0) }
.reveal-right {
  opacity:0; transform:translateX(32px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal-right.in { opacity:1; transform:translateX(0) }

/* ── FOOTER ────────────────────────────────────────────────── */
footer {
  background:var(--bg);
  border-top:1px solid var(--border);
  padding:80px 0 0;
}
.footer-top {
  max-width:1400px; margin:0 auto;
  padding:0 48px 60px;
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:60px;
  border-bottom:1px solid var(--border);
}
.footer-logo {
  font-family:var(--mono);
  font-size:22px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--white);
  margin-bottom:16px;
}
.footer-logo-img { height:92px; width:auto; display:block; margin-bottom:16px }
.footer-logo span { display:block; font-size:10px; letter-spacing:.3em; color:var(--cyan); margin-top:4px }
.footer-tagline { font-family:var(--serif); font-style:italic; font-size:18px; color:var(--grey); line-height:1.6 }
.footer-nav {
  display:grid; grid-template-columns:repeat(3,1fr); gap:40px;
}
.footer-nav-col h4 {
  font-family:var(--mono); font-size:10px;
  letter-spacing:.25em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:20px;
}
.footer-nav-col ul { list-style:none; display:flex; flex-direction:column; gap:10px }
.footer-nav-col a {
  font-size:14px; color:var(--grey);
  transition:color .3s;
}
.footer-nav-col a:hover { color:var(--white) }
.footer-bottom {
  max-width:1400px; margin:0 auto;
  padding:24px 48px;
  display:flex; align-items:center; justify-content:space-between;
}
.footer-copy { font-family:var(--mono); font-size:11px; color:var(--grey2) }
.footer-socials { display:flex; gap:24px }
.footer-socials a {
  font-family:var(--mono); font-size:11px;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--grey2); transition:color .3s;
}
.footer-socials a:hover { color:var(--cyan) }

/* ── LIGHTBOX ──────────────────────────────────────────────── */
.lightbox {
  position:fixed; inset:0; z-index:9000;
  background:rgba(0,0,0,.96);
  backdrop-filter:blur(20px);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .3s;
}
.lightbox.open { opacity:1; pointer-events:all }
.lightbox-img-wrap {
  position:relative;
  max-width:90vw; max-height:80vh;
  display:flex; align-items:center;
}
.lightbox-img-wrap img {
  max-width:85vw; max-height:78vh;
  object-fit:contain; width:auto;
}
.lightbox-close {
  position:absolute; top:24px; right:24px;
  width:44px; height:44px;
  border:1px solid var(--border2);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; color:var(--white);
  background:var(--surface);
  backdrop-filter:blur(8px);
  transition:border-color .3s, background .3s;
}
.lightbox-close:hover { border-color:var(--cyan); color:var(--cyan) }
.lightbox-nav {
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px;
  border:1px solid var(--border2);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); backdrop-filter:blur(8px);
  transition:border-color .3s;
}
.lightbox-nav:hover { border-color:var(--cyan) }
.lightbox-prev { left:-70px }
.lightbox-next { right:-70px }
.lightbox-meta {
  margin-top:24px; text-align:center;
}
.lightbox-cat {
  font-family:var(--mono); font-size:11px;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:6px;
}
.lightbox-title {
  font-family:var(--rajdhani); font-size:22px;
  text-transform:uppercase; color:var(--white);
}
.lightbox-counter {
  font-family:var(--mono); font-size:11px;
  color:var(--grey); margin-top:12px;
}

/* ── SCROLL INDICATOR ──────────────────────────────────────── */
.scroll-progress {
  position:fixed; top:0; left:0; z-index:600;
  width:0%; height:2px;
  background:linear-gradient(90deg, var(--cyan), var(--purple), var(--pink));
  box-shadow:0 0 8px var(--cyan);
  transition:width .1s linear;
}

/* ── NEON BADGE ────────────────────────────────────────────── */
.neon-badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px;
  border:1px solid rgba(212,175,55,.3);
  background:rgba(212,175,55,.06);
  font-family:var(--mono);
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cyan);
}

/* ── FORM ELEMENTS ─────────────────────────────────────────── */
.form-group { display:flex; flex-direction:column; gap:8px }
.form-label {
  font-family:var(--mono); font-size:10px;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--cyan);
}
.form-input {
  background:var(--surface);
  border:1px solid var(--border2);
  padding:14px 18px;
  font-size:15px; color:var(--white);
  transition:border-color .3s, box-shadow .3s;
  outline:none;
}
.form-input:focus {
  border-color:var(--cyan);
  box-shadow:0 0 0 2px rgba(212,175,55,.1);
}
.form-input.error { border-color:var(--pink); box-shadow:0 0 0 2px rgba(212,175,55,.1) }
.form-error {
  font-family:var(--mono); font-size:10px;
  letter-spacing:.12em; color:var(--pink);
  display:none;
}
.form-group.error .form-error { display:block }
select.form-input option { background:var(--bg3); color:var(--white) }
textarea.form-input { resize:vertical; min-height:140px }

/* ── CORNER BRACKETS ───────────────────────────────────────── */
.bracket-wrap { position:relative }
.bracket-wrap::before,
.bracket-wrap::after,
.bracket-wrap > .bracket-inner::before,
.bracket-wrap > .bracket-inner::after {
  content:''; position:absolute; width:16px; height:16px;
}
.bracket-wrap::before {
  top:0; left:0;
  border-top:1px solid var(--cyan); border-left:1px solid var(--cyan);
}
.bracket-wrap::after {
  top:0; right:0;
  border-top:1px solid var(--cyan); border-right:1px solid var(--cyan);
}
.bracket-wrap > .bracket-inner::before {
  bottom:0; left:0;
  border-bottom:1px solid var(--cyan); border-left:1px solid var(--cyan);
}
.bracket-wrap > .bracket-inner::after {
  bottom:0; right:0;
  border-bottom:1px solid var(--cyan); border-right:1px solid var(--cyan);
}

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width:900px) {
  :root { --nav-h:96px }
  .nav { padding:0 24px }
  .nav-links, .nav-cta { display:none }
  .nav-hamburger { display:flex }
  .footer-top { grid-template-columns:1fr; gap:40px }
  .footer-nav { grid-template-columns:repeat(2,1fr) }
  .footer-bottom { flex-direction:column; gap:16px; text-align:center }
}
@media (max-width:600px) {
  .footer-nav { grid-template-columns:1fr }
  .footer-top { padding:0 24px 40px }
  .footer-bottom { padding:24px }
}