/* ============================================================
   THE INKTOPUS - Custom Styles
   Tailwind-compatible. Only styles Tailwind can't provide.
   ============================================================ */

/* === Animations === */
@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
.animate-marquee { animation: marquee 15s linear infinite; }

@keyframes scrollLine {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

@keyframes floatHeart {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-120px) scale(1.5); }
}

@keyframes spinClockwise { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes spinCounterClockwise { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

/* === Navbar === */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: background-color 0.3s, padding 0.3s;
}
.navbar.scrolled {
  background-color: rgba(0,0,0,0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.navbar .container { max-width: 1400px; }

/* Dropdown hover bridges */
.nav-dropdown { padding-bottom: 1.25rem; margin-bottom: -1.25rem; }
.nav-dropdown-menu {
  display: none; position: absolute; top: 100%; left: 0;
  min-width: 18rem; max-width: 24rem;
  background: rgba(0,0,0,0.95); backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 1rem 0; z-index: 50;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
}
.nav-dropdown:hover > .nav-dropdown-menu { display: flex; flex-direction: column; }
.nav-dropdown:hover .nav-chevron { transform: rotate(180deg); }

.nav-sub-dropdown { position: relative; }
.nav-sub-menu {
  display: none; position: absolute; top: 0; left: 100%; margin-left: 0.25rem;
  min-width: 20rem; max-width: 26rem;
  background: rgba(0,0,0,0.95); backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 1rem 0; z-index: 50;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
}
.nav-sub-dropdown:hover > .nav-sub-menu { display: flex; flex-direction: column; }
.nav-sub-dropdown:hover .nav-chevron-right { transform: rotate(90deg); }

.nav-chevron, .nav-chevron-right { transition: transform 0.3s; }

/* Mobile menu */
.mobile-menu-overlay {
  position: fixed; inset: 0; background: #000; color: #fff;
  z-index: 50; display: none; flex-direction: column; overflow-y: auto;
}
.mobile-menu-overlay.active { display: flex; }
.mobile-nav-children { display: none; }
.mobile-nav-children.open { display: flex; }
.mobile-chevron { transition: transform 0.3s; }
.mobile-chevron.open { transform: rotate(180deg); }

/* === Hero === */
.hero-fullscreen {
  position: relative; height: 100vh; width: 100%;
  overflow: hidden; display: flex; align-items: center;
}
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0.8; }
.hero-bg-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.4); }
.hero-foreground { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.hero-foreground img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-scroll-line {
  position: relative; overflow: hidden;
  background: rgba(255,255,255,0.2);
}
.hero-scroll-line::after {
  content: ''; position: absolute; inset: 0; background: #fff;
  animation: scrollLine 2s linear infinite;
}
.mix-blend-difference { mix-blend-mode: difference; }

/* === Astrology Rings === */
.astrology-rings-wrapper {
  position: absolute; z-index: 0; pointer-events: none;
  width: 800px; height: 800px;
  display: none;
}
@media (min-width: 768px) {
  .astrology-rings-wrapper { display: block; }
}
.astrology-rings-wrapper.left { left: -400px; bottom: -200px; }
.astrology-rings-wrapper.right { right: -400px; bottom: -200px; }
.astrology-rings {
  position: relative; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.astrology-rings img {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%; height: 100%; object-fit: contain;
}
.astrology-ring-outer {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  animation: spinClockwise 240s linear infinite;
}
.astrology-ring-middle {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  animation: spinCounterClockwise 180s linear infinite;
}
.astrology-ring-inner {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  animation: spinClockwise 120s linear infinite;
}
.astrology-screen { mix-blend-mode: screen; filter: invert(1); }
.astrology-multiply { mix-blend-mode: multiply; }

/* === Project Cards === */
.project-card:hover .project-card-image { transform: scale(1.05); }
.project-card-image { transition: transform 0.7s; }
.project-card-overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.95), rgba(0,0,0,0.5), transparent);
  opacity: 0.9; transition: opacity 0.5s;
}
.project-card:hover .project-card-overlay { opacity: 1; }
.project-card:hover .project-card-quick-view { opacity: 1; }
.project-card:hover .quick-view-btn { transform: translateY(0); }
.project-card:hover .project-card-details { transform: translateX(0.25rem); }
.project-card-quick-view {
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.3s; pointer-events: none;
}
.quick-view-btn {
  transform: translateY(1rem); transition: transform 0.3s;
}

/* === Gallery CTA Banner === */
.gallery-cta-bg img { opacity: 0.6; filter: grayscale(1); }
@media (min-width: 768px) { .gallery-cta-bg img { opacity: 0.75; } }
.gallery-cta-gradient { background: linear-gradient(to right, #000, rgba(0,0,0,0.7), rgba(0,0,0,0.2)); }

/* === Featured Styles === */
.featured-style-bg img { filter: grayscale(1); opacity: 0.5; object-position: right; }
.featured-style-gradient {
  background: linear-gradient(to right, #000, rgba(0,0,0,0.8), transparent);
}
.featured-style-gradient-top {
  background: linear-gradient(to top, #0a0a0a, transparent, rgba(10,10,10,0.6));
}

/* === Booking Toggle === */
.toggle-switch { width: 3rem; height: 1.5rem; border-radius: 9999px; position: relative; flex-shrink: 0; transition: background-color 0.3s; }
.toggle-switch::after { content: ""; position: absolute; top: 0.25rem; left: 0.25rem; width: 1rem; height: 1rem; border-radius: 50%; background: white; transition: transform 0.3s; }
.toggle-switch.active::after { transform: translateX(1.5rem); }

/* === Project Modal === */
.project-modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,0.95); backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: none; align-items: center; justify-content: center; padding: 1rem;
}
.project-modal-overlay.active { display: flex; }
.project-modal-image img { object-fit: cover; }

/* === Footer Roulette === */
.roulette-char { height: 1.62em; overflow: hidden; }
.roulette-reel { display: flex; flex-direction: column; line-height: 0.82; transform: translateY(-40%); }
.roulette-item { display: block; }
.roulette-char:nth-child(odd) .roulette-item { color: rgba(0,0,0,0.1); font-weight: 900; }
.roulette-char:nth-child(even) .roulette-item { color: rgba(0,0,0,0.1); font-weight: 900; }
.roulette-char:nth-child(odd) .roulette-reel .roulette-item:nth-child(5) { color: #000; font-weight: 900; }
.roulette-char:nth-child(odd) .roulette-reel .roulette-item:nth-child(6) { color: rgba(0,0,0,0.25); font-weight: 900; }
.roulette-char:nth-child(even) .roulette-reel .roulette-item:nth-child(5) { color: rgba(0,0,0,0.25); font-weight: 900; }
.roulette-char:nth-child(even) .roulette-reel .roulette-item:nth-child(6) { color: #000; font-weight: 900; }

/* === Light Hero Pages === */
.light-hero-image img { object-fit: cover; object-position: center; }

/* === Service Pages === */
.service-hero-bg img { object-fit: cover; opacity: 0.4; }
.service-hero-overlay { background: linear-gradient(to top, #000, rgba(0,0,0,0.6), transparent); }
.service-hero-overlay-2 { background: linear-gradient(to right, #000, rgba(0,0,0,0.4), transparent); }

/* === SITE BANNER === */
.marquee-container { overflow: hidden; white-space: nowrap; width: 100%; }
.marquee-content { display: inline-block; animation: marquee 15s linear infinite; }

/* === FORM === */
.form-select { -webkit-appearance: none; appearance: none; }
.form-input-dark::placeholder { color: #6b7280; }
.form-select-dark { color: #000; }
.form-input-date { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.875rem; color: #6b7280; }
.form-input-date::-webkit-calendar-picker-indicator { filter: invert(0.5); }

/* === Floating hearts (gallery) === */
.floating-heart {
  position: absolute; bottom: -20px; pointer-events: none;
  animation: floatHeart 1.2s ease-out forwards;
  font-size: 1.5rem; z-index: 20;
}

/* === ADMIN === */
.admin-layout { display: flex; min-height: 100vh; }
.admin-sidebar {
  width: 16rem; background: rgba(9,9,11,0.95);
  border-right: 1px solid rgba(255,255,255,0.05);
  padding: 1.5rem; position: fixed; top: 0; left: 0; height: 100vh;
  overflow-y: auto; z-index: 40;
}
.admin-main { margin-left: 16rem; flex: 1; padding: 2rem; }

/* === Dashboard === */
.dashboard-tab-content { }

/* === Back to top === */
.back-to-top-icon { width: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center; transition: all 0.3s; }
.back-to-top:hover .back-to-top-icon { background: #000; color: #fff; }

/* === Navbar light theme overrides === */
.navbar-light { color: #000; }
.navbar-light.scrolled { color: #fff; }
.navbar-light .nav-link-line { background-color: #000; }
.navbar-dark .nav-link-line { background-color: #fff; }
.navbar-dark .nav-link { color: #d1d5db; }
.navbar-dark .nav-link:hover { color: #fff; }
.navbar-light .nav-link { color: #3f3f46; }
.navbar-light .nav-link:hover { color: #000; }
.navbar-dark .nav-dropdown-btn { color: #d1d5db; }
.navbar-dark .nav-dropdown-btn:hover { color: #fff; }
.navbar-light .nav-dropdown-btn { color: #3f3f46; }
.navbar-light .nav-dropdown-btn:hover { color: #000; }
.navbar-dark .navbar-lang-btn { color: #d1d5db; }
.navbar-dark .navbar-lang-btn:hover { color: #fff; }
.navbar-light .navbar-lang-btn { color: #3f3f46; }
.navbar-light .navbar-lang-btn:hover { color: #000; }
.navbar-dark .navbar-icon-link { color: #d1d5db; }
.navbar-dark .navbar-icon-link:hover { color: #fff; }
.navbar-light .navbar-icon-link { color: #3f3f46; }
.navbar-light .navbar-icon-link:hover { color: #000; }
.nav-sub-link, .nav-sub-btn { white-space: normal; line-height: 1.4; }
.navbar-admin-link { color: #ef4444; }
.navbar-admin-link:hover { color: #f87171; }
.text-pink { color: #f472b6; }
.text-pink:hover { color: #f9a8d4; }

/* === Image grayscale === */
.grayscale-img { filter: grayscale(1); }

/* === Parallax === */
.parallax-bg { will-change: transform, opacity; }

/* === Service content === */
.service-content-image-inner img {
  filter: grayscale(1);
  opacity: 0.8;
  transition: filter .7s cubic-bezier(.22,1,.36,1), opacity .7s ease, transform .9s cubic-bezier(.22,1,.36,1);
}
.service-content-image-inner:hover img { filter: grayscale(0); opacity: 1; transform: scale(1.025); }

/* === Selection === */
.selection-white-black ::selection { background: #fff; color: #000; }

/* === Booking section white bg === */
.booking-section-page { background: #fff; }