/* ============================================================
   COMPONENT CSS — reveal, cursor, nav, drawer, carousel, loader
   Drop in alongside tokens.css + glass.css
   ============================================================ */

/* ── REVEAL ── */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity var(--dur-4) var(--ease), transform var(--dur-4) var(--ease); will-change: opacity, transform; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1.visible { transition-delay: 100ms; }
.reveal-delay-2.visible { transition-delay: 200ms; }
.reveal-delay-3.visible { transition-delay: 300ms; }
.reveal-delay-4.visible { transition-delay: 400ms; }
.reveal-delay-5.visible { transition-delay: 500ms; }
.reveal-delay-6.visible { transition-delay: 600ms; }

.reveal-fade { opacity: 0; transition: opacity var(--dur-4) var(--ease); }
.reveal-fade.visible { opacity: 1; }
.reveal-clip { clip-path: inset(0 100% 0 0); transition: clip-path 1.4s var(--ease); }
.reveal-clip.visible { clip-path: inset(0 0 0 0); }

/* ── NAV ── */
.nav-scroll {
  position: fixed; top: 0; left: 0; width: 100%;
  z-index: var(--z-nav);
  padding: 24px 0;
  transition: all var(--dur-2) var(--ease);
}
.nav-scroll.scrolled {
  background: rgba(11, 20, 36, 0.78);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-7); }
.nav-brand {
  font-family: var(--font-d);
  font-size: 1.6rem;
  letter-spacing: var(--tracking-mid);
  color: var(--text);
  text-transform: uppercase;
}
.nav-brand .dot { color: var(--accent); }
.nav-links { display: flex; gap: var(--s-7); align-items: center; list-style: none; }
.nav-links a {
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text2);
  position: relative;
  transition: color var(--dur-2) var(--ease);
  padding: 6px 0;
}
.nav-links a:hover, .nav-links a.active { color: var(--text); }
.nav-links a::after {
  content: ''; position: absolute; bottom: 0; left: 0; height: 1px; width: 0;
  background: var(--accent); transition: width var(--dur-2) var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }

.nav-hamburger { display: none; width: 32px; height: 24px; flex-direction: column; justify-content: space-between; }
.nav-hamburger span { display: block; height: 1px; background: var(--text); transition: all var(--dur-2) var(--ease); }
.nav-hamburger.open span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

.mobile-menu {
  position: fixed; top: 0; right: -100%; width: 320px; max-width: 80vw;
  height: 100dvh; background: var(--bg2); z-index: 999;
  padding: 120px var(--s-6) var(--s-7); display: flex; flex-direction: column;
  gap: var(--s-5); transition: right var(--dur-3) var(--ease);
  border-left: 1px solid var(--rule);
}
.mobile-menu.open { right: 0; }
.mobile-menu a {
  font-family: var(--font-d); font-size: var(--fs-xl);
  color: var(--text); padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
}
.mobile-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  z-index: 998; opacity: 0; pointer-events: none;
  transition: opacity var(--dur-2) var(--ease);
}
.mobile-overlay.open { opacity: 1; pointer-events: auto; }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-inner > .btn { display: none; }
  .nav-hamburger { display: flex; }
}

/* ── DRAWER ── */
.drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  z-index: var(--z-overlay);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-2) var(--ease);
}
.drawer-overlay.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: -100%;
  width: 100%; max-width: 520px; height: 100dvh;
  background: var(--bg); z-index: var(--z-drawer);
  padding: 80px var(--s-7) var(--s-7);
  box-shadow: -20px 0 60px rgba(0,0,0,0.5);
  transition: right var(--dur-3) var(--ease);
  overflow-y: auto;
  border-left: 1px solid var(--rule);
}
.drawer.open { right: 0; }
.drawer-close {
  position: absolute; top: 24px; right: 24px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--rule); display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: var(--text); transition: all var(--dur-2) var(--ease);
}
.drawer-close:hover { border-color: var(--accent); color: var(--accent); transform: rotate(90deg); }

/* ── FORM ── */
.form-row { margin-bottom: var(--s-5); }
.form-row label {
  display: block; font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--text2); margin-bottom: var(--s-2);
}
.form-row input, .form-row select, .form-row textarea {
  width: 100%; background: transparent;
  border: none; border-bottom: 1px solid var(--rule);
  padding: 14px 0; color: var(--text); font-family: var(--font-b);
  font-size: var(--fs-base); outline: none;
  transition: border-color var(--dur-2) var(--ease);
}
.form-row textarea { resize: vertical; min-height: 80px; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-bottom-color: var(--accent); }
.form-row select option { background: var(--bg); color: var(--text); }

/* ── TESTIMONIAL ── */
.testimonial-carousel { position: relative; }
.testimonial-slide {
  display: none;
  text-align: center;
  max-width: 800px; margin: 0 auto;
  font-family: var(--font-d); font-size: var(--fs-xl);
  line-height: var(--lh-snug); font-style: italic;
}
.testimonial-slide.active { display: block; animation: fade-in var(--dur-3) var(--ease); }
.testimonial-slide cite { display: block; margin-top: var(--s-5); font-style: normal; font-size: var(--fs-sm); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text2); font-family: var(--font-b); }
.testimonial-dots { display: flex; gap: 10px; justify-content: center; margin-top: var(--s-6); }
.testimonial-dots span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--rule); cursor: pointer; transition: background var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.testimonial-dots span.active { background: var(--accent); transform: scale(1.4); }
@keyframes fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ── GALLERY ── */
.gallery-carousel { position: relative; overflow: hidden; }
.gallery-track { display: flex; transition: transform var(--dur-3) var(--ease); }
.gallery-slide { flex: 0 0 100%; aspect-ratio: 16 / 9; }
.gallery-slide img { width: 100%; height: 100%; object-fit: cover; }
.gallery-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(0,0,0,0.4); backdrop-filter: blur(10px);
  border: 1px solid var(--rule); color: var(--text);
  font-size: 1.3rem; display: flex; align-items: center; justify-content: center;
  transition: all var(--dur-2) var(--ease);
}
.gallery-btn:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.gallery-btn.prev { left: 24px; }
.gallery-btn.next { right: 24px; }
.gallery-counter {
  position: absolute; bottom: 24px; right: 24px;
  padding: 8px 16px; font-size: var(--fs-xs); letter-spacing: var(--tracking-wide);
  background: rgba(0,0,0,0.5); backdrop-filter: blur(10px);
  border: 1px solid var(--rule);
}

/* ── LOADER ── */
.loader {
  position: fixed; inset: 0; z-index: var(--z-loader);
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity var(--dur-3) var(--ease);
}
.loader-mark {
  font-family: var(--font-d);
  font-size: clamp(2rem, 6vw, 4rem);
  letter-spacing: var(--tracking-wide);
  color: var(--text);
  opacity: 0; animation: loader-fade 1.4s var(--ease) forwards;
}
.loader-mark .dot { color: var(--accent); animation: loader-dot 1.4s var(--ease) infinite; }
.loader.done { opacity: 0; pointer-events: none; }
@keyframes loader-fade { 0% { opacity: 0; transform: translateY(10px); } 30% { opacity: 1; transform: translateY(0); } 100% { opacity: 1; } }
@keyframes loader-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }

/* ── SCROLL CUE — computer-mouse indicator ── */
.scroll-cue {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 0.6rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--text2);
  cursor: pointer; background: none; border: 0; padding: 8px 12px;
  z-index: 3;
  transition: color var(--dur-2) var(--ease), transform var(--dur-3) var(--ease);
}
.scroll-cue .mouse-icon {
  width: 28px; height: 44px;
  color: var(--accent);
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.35));
  transition: color var(--dur-2) var(--ease), transform var(--dur-3) var(--ease);
}
.scroll-cue .mouse-wheel {
  transform-origin: 16px 9px;
  animation: mouse-wheel-pulse 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.scroll-cue .mouse-label {
  display: inline-block;
  position: relative;
  padding-bottom: 14px;
}
.scroll-cue .mouse-label::after {
  content: '';
  position: absolute; left: 50%; bottom: 0;
  width: 1px; height: 10px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  transform: translateX(-50%);
  animation: scroll-cue-line 2s var(--ease) infinite;
}
.scroll-cue:hover { color: var(--text); transform: translateX(-50%) translateY(-3px); }
.scroll-cue:hover .mouse-icon { color: var(--text); transform: scale(1.05); }

@keyframes mouse-wheel-pulse {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  45%  { transform: translateY(8px) scale(0.85); opacity: 0.35; }
  50%  { transform: translateY(8px) scale(0.85); opacity: 0; }
  55%  { transform: translateY(0) scale(1); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes scroll-cue-line {
  0%   { transform: translateX(-50%) scaleY(0); transform-origin: top; }
  50%  { transform: translateX(-50%) scaleY(1); transform-origin: top; }
  51%  { transform: translateX(-50%) scaleY(1); transform-origin: bottom; }
  100% { transform: translateX(-50%) scaleY(0); transform-origin: bottom; }
}
@media (max-width: 600px) { .scroll-cue { display: none; } }

/* ── FLOATING ACTIONS (scroll-up + whatsapp) ── */
.floating-stack {
  position: fixed; right: 24px; bottom: 24px;
  display: flex; flex-direction: column; gap: 12px;
  z-index: var(--z-float);
}
.float-btn {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule);
  background: rgba(11,20,36,0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--text);
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
  transition: all var(--dur-2) var(--ease);
  cursor: pointer; opacity: 0; pointer-events: none;
  transform: translateY(12px);
}
.float-btn.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
.float-btn:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); transform: translateY(-3px); }
.float-btn svg { width: 22px; height: 22px; }
.float-btn.scroll-up { /* hidden until scrolled past 600 */ }
.float-btn.whatsapp {
  background: rgba(37,211,102,0.95);
  border-color: rgba(37,211,102,0.6);
  color: #fff;
  opacity: 1; pointer-events: auto; transform: translateY(0);
  animation: wa-pulse 2.4s var(--ease) infinite;
}
.float-btn.whatsapp:hover { background: #1ebe5c; color: #fff; border-color: #1ebe5c; }
@keyframes wa-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0.55), 0 12px 28px rgba(0,0,0,0.35); }
  60% { box-shadow: 0 0 0 16px rgba(37,211,102,0); 0 12px 28px rgba(0,0,0,0.35); }
}
@media (max-width: 600px) { .floating-stack { right: 16px; bottom: 16px; } .float-btn { width: 50px; height: 50px; } }