/* BLADE & CROWN — Custom Styles */

/* ===== CSS Variables ===== */
:root {
  --bg-primary: #0a0a0a;
  --bg-card: #1a1a1a;
  --bg-card-hover: #222222;
  --gold: #c9a84c;
  --gold-light: #d4b85a;
  --gold-dark: #b8963e;
  --text-primary: #ffffff;
  --text-secondary: #a3a3a3;
  --text-muted: #666666;
}

/* ===== Preloader ===== */
#preloader {
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

#preloader.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ===== Base ===== */
html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
}

/* ===== Typography ===== */
.font-playfair {
  font-family: 'Playfair Display', serif;
}

.font-cormorant {
  font-family: 'Cormorant Garamond', serif;
}

/* ===== Gold Shimmer Button ===== */
.btn-gold {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold), var(--gold-light));
  color: var(--bg-primary);
  font-weight: 700;
  letter-spacing: 0.05em;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn-gold::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: left 0.6s ease;
}

.btn-gold:hover::before {
  left: 100%;
}

.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(201, 168, 76, 0.4);
}

/* ===== Outline Button ===== */
.btn-outline {
  border: 1px solid var(--gold);
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
}

.btn-outline:hover {
  background: var(--gold);
  color: var(--bg-primary);
  transform: translateY(-2px);
}

/* ===== Hero ===== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Hero video background */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.4) 40%,
    rgba(0, 0, 0, 0.6) 70%,
    rgba(10, 10, 10, 1) 100%
  );
}

/* ===== Fade-in Animation ===== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.8s ease forwards;
  opacity: 0;
}

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }

/* ===== Navbar ===== */
.navbar {
  transition: all 0.3s ease;
}

.navbar.scrolled {
  background: rgba(10, 10, 10, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(201, 168, 76, 0.1);
}

.nav-link {
  position: relative;
  color: var(--text-secondary);
  transition: color 0.3s ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 0.3s ease;
}

.nav-link:hover {
  color: var(--gold);
}

.nav-link:hover::after {
  width: 100%;
}

/* ===== Scroll Progress Bar ===== */
#scroll-progress {
  transform-origin: left;
  will-change: width;
  pointer-events: none;
  box-shadow: 0 0 8px rgba(201, 168, 76, 0.4);
}

/* Scissors at progress bar edge */
#progress-scissors {
  position: absolute;
  right: -31px;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  z-index: 1;
  filter: drop-shadow(0 0 4px rgba(201, 168, 76, 0.5));
}

@media (max-width: 640px) {
  #progress-scissors {
    width: 32px;
    height: 32px;
    right: -20px;
  }
}

/* Falling hair strands — realistic curved strands */
@keyframes hairFall1 {
  0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0.9; }
  100% { transform: translateY(55px) translateX(-12px) rotate(80deg); opacity: 0; }
}
@keyframes hairFall2 {
  0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0.85; }
  100% { transform: translateY(50px) translateX(8px) rotate(-60deg); opacity: 0; }
}
@keyframes hairFall3 {
  0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0.8; }
  100% { transform: translateY(60px) translateX(-5px) rotate(120deg); opacity: 0; }
}

.hair-strand {
  position: absolute;
  width: 2px;
  border-radius: 50% / 20%;
  opacity: 0;
}

.hair-strand.fall-1 { animation: hairFall1 1s ease-out forwards; }
.hair-strand.fall-2 { animation: hairFall2 0.9s ease-out forwards; }
.hair-strand.fall-3 { animation: hairFall3 1.1s ease-out forwards; }

/* ===== GSAP initial states ===== */

/* Section headings: words hidden until GSAP animates them */
.section-heading .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.section-heading .word > div {
  display: inline-block;
}

/* ===== Animated Dividers ===== */
.scissors-divider,
.gold-divider {
  opacity: 0;
}

.scissors-divider .divider-line line,
.gold-divider .divider-line line {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
}

/* Scissors snip animation */
@keyframes scissorsSnip {
  0%   { transform: rotate(0deg) scale(0.7); opacity: 0; }
  40%  { transform: rotate(0deg) scale(1); opacity: 1; }
  55%  { transform: rotate(15deg) scale(1); }
  70%  { transform: rotate(-5deg) scale(1); }
  85%  { transform: rotate(8deg) scale(1); }
  100% { transform: rotate(0deg) scale(1); }
}

.scissors-icon.animated {
  animation: scissorsSnip 0.8s ease forwards;
}

/* Gold star in divider: pulse */
.gold-divider svg[viewBox="0 0 16 16"] {
  opacity: 0;
  transform: scale(0);
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.gold-divider.active svg[viewBox="0 0 16 16"] {
  opacity: 1;
  transform: scale(1);
}

/* ===== Mobile sticky CTA ===== */
.mobile-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 12px 16px;
  background: rgba(10, 10, 10, 0.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(201, 168, 76, 0.2);
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.mobile-cta.visible {
  transform: translateY(0);
}

/* ===== Chat Button Attention ===== */
@keyframes chatPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(201,168,76,0.4); }
  50% { box-shadow: 0 4px 40px rgba(201,168,76,0.7), 0 0 60px rgba(201,168,76,0.2); }
}

@keyframes chatBounce {
  0%, 100% { transform: translateY(0); }
  15% { transform: translateY(-8px); }
  30% { transform: translateY(0); }
  45% { transform: translateY(-4px); }
  60% { transform: translateY(0); }
}

@keyframes chatRing {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2.2); opacity: 0; }
}

#chat-btn .chat-ring {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  border: 2px solid var(--gold);
  animation: chatRing 2s ease-out infinite;
}

#chat-btn .chat-ring:nth-child(2) {
  animation-delay: 0.6s;
}

#chat-btn > div > div:first-child {
  animation: chatPulse 2s ease-in-out infinite, chatBounce 3s ease-in-out infinite;
}

/* Tooltip */
.chat-tooltip {
  position: absolute;
  right: 64px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: var(--bg-card);
  border: 1px solid rgba(201,168,76,0.3);
  color: white;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  animation: tooltipFade 0.4s ease forwards;
}

.chat-tooltip::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: var(--bg-card);
  border-right: 1px solid rgba(201,168,76,0.3);
  border-top: 1px solid rgba(201,168,76,0.3);
}

@keyframes tooltipFade {
  from { opacity: 0; transform: translateY(-50%) translateX(10px); }
  to { opacity: 1; transform: translateY(-50%) translateX(0); }
}

/* ===== Chat Widget Animations ===== */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes slideDown {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(20px) scale(0.95); }
}

#chat-messages::-webkit-scrollbar { width: 4px; }
#chat-messages::-webkit-scrollbar-thumb { background: var(--gold-dark); border-radius: 2px; }
#chat-messages::-webkit-scrollbar-track { background: transparent; }

/* ===== Hero CTA Attention Animation ===== */
#hero-cta {
  animation: ctaPulse 2.5s ease-in-out infinite;
}

@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 4px 15px rgba(201,168,76,0.3); }
  50% { box-shadow: 0 4px 30px rgba(201,168,76,0.6), 0 0 60px rgba(201,168,76,0.15); }
}

#hero-cta::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: ctaShimmer 3s ease-in-out infinite;
}

@keyframes ctaShimmer {
  0%, 70% { left: -100%; }
  100% { left: 200%; }
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--gold-dark);
  border-radius: 3px;
}

/* ===== Selection ===== */
::selection {
  background: var(--gold);
  color: var(--bg-primary);
}

/* ===== Chat button above mobile CTA ===== */
@media (max-width: 1023px) {
  #chat-btn {
    bottom: 80px !important;
  }
  #chat-window {
    bottom: 144px !important;
  }
}

/* ===== Hamburger menu ===== */
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text-primary);
  margin: 5px 0;
  transition: all 0.3s ease;
}

.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

.mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.mobile-menu.open {
  max-height: 400px;
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero-video { display: none; }
  .hero {
    background-image: url('../images/generated/hero-poster.png');
    background-size: cover;
    background-position: center;
  }
  #scroll-progress-wrap { display: none; }
  #preloader { display: none; }
}