/* ============================================================
   shared.css — DigitalsDaddy
   Shared styles for index.html, Portfolio.html, SEO.html
   ============================================================ */

/* ── BASE ── */
html {
  overflow-x: hidden;
}
body {
  cursor: none;
  background-color: #f5f3ee;
  padding-top: 0;
  overflow-x: hidden;
}

/* On desktop, navbar is fixed so body needs top padding */
@media (min-width: 768px) {
  body {
    padding-top: 64px;
  }
}

/* ── CUSTOM CURSOR ── */
.cursor-dot,
.cursor-ring {
  position: fixed;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9999;
}
.cursor-dot {
  width: 8px;
  height: 8px;
  background-color: #e8620a;
  border-radius: 50%;
}
.cursor-ring {
  width: 30px;
  height: 30px;
  border: 1px solid #e8620a;
  border-radius: 50%;
}

/* ── SCROLL-TO-TOP BUTTON ── */
#scrollTop {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 999;
  background: #e8620a;
  color: #fff;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px #e8620a55;
  cursor: none;
}

/* ── NAVBAR ── */

/* Mobile — navbar is sticky at the top so the dropdown menu overlays content */
#mainHeader {
  position: sticky;
  top: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  z-index: 1000;
  opacity: 1;
}

/* Desktop — full width, fixed, flat bar (no rounded pill, no float) */
@media (min-width: 768px) {
  #mainHeader {
    position: fixed;
    top: -80px;
    left: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
    opacity: 0;
    transition:
      top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  /* Override the rounded-full pill on desktop — flat full-width bar */
  #mainHeader nav {
    border-radius: 0 !important;
    width: 100% !important;
    box-shadow: 0 1px 12px rgba(0,0,0,0.08) !important;
    padding-left: 2rem;
    padding-right: 2rem;
  }
  #mainHeader.show-on-load {
    animation: navSlideDown 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }
  #mainHeader.hide {
    top: -80px;
    opacity: 0;
  }
  
}

@keyframes navSlideDown {
  from { top: -80px; opacity: 0; }
  to   { top: 0;     opacity: 1; }
}

/* ── MOBILE MENU OVERLAY ── */
/* On mobile the header is sticky; the dropdown must float over page content */
@media (max-width: 767px) {
  #mainHeader {
    position: relative; /* anchor for the absolute menu */
  }
  #menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 2000;
    margin-top: 4px;
    /* Stronger shadow so it visually lifts above the page */
    box-shadow: 0 8px 32px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08) !important;
  }
  .cursor-dot{
    opacity: 0;
  }
  .cursor-ring {
    opacity: 0;
  }
}

/* ── HERO ANIMATIONS ── */
.hero-animate {
  opacity: 0;
  transform: translateY(28px);
  animation: fadeUp 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}
.hero-animate:nth-child(1) { animation-delay: 0.40s; }
.hero-animate:nth-child(2) { animation-delay: 0.55s; }
.hero-animate:nth-child(3) { animation-delay: 0.70s; }
.hero-animate:nth-child(4) { animation-delay: 0.85s; }
.hero-animate:nth-child(5) { animation-delay: 1.00s; }

.hero-right-animate {
  opacity: 0;
  transform: translateY(28px);
  animation: fadeUp 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.65s forwards;
}

/* ── FLOATING BADGES ── */
.float-badge-1 { animation: floatUpDown 2.0s ease-in-out infinite alternate; }
.float-badge-2 { animation: floatUpDown 2.5s ease-in-out infinite alternate; }

@keyframes floatUpDown {
  0%   { transform: translateY(0);   }
  50%  { transform: translateY(-6px); }
  100% { transform: translateY(0);   }
}

/* ── SCROLL REVEAL ── */
.reveal,
.reveal-left,
.reveal-right,
.reveal-scale,
.reveal-fade {
  opacity: 0;
  transition:
    opacity   0.85s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.85s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal       { transform: translateY(44px); }
.reveal-left  { transform: translateX(-50px); }
.reveal-right { transform: translateX(50px); }
.reveal-scale { transform: scale(0.92); }
.reveal-fade  { transform: translateY(16px); }

.reveal.visible,
.reveal-left.visible,
.reveal-right.visible,
.reveal-scale.visible,
.reveal-fade.visible {
  opacity: 1;
  transform: none;
}

/* Stagger delays */
.delay-1 { transition-delay: 0.08s; }
.delay-2 { transition-delay: 0.16s; }
.delay-3 { transition-delay: 0.24s; }
.delay-4 { transition-delay: 0.32s; }
.delay-5 { transition-delay: 0.40s; }
.delay-6 { transition-delay: 0.48s; }

/* ── MARQUEE ── */
.marquee {
  display: flex;
  gap: 4rem;
  width: max-content;
  animation: scrollLeft 35s linear infinite;
}
@keyframes scrollLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── TAB BUTTONS ── */
.tab-btn.active {
  background: #e8620a;
  color: #fff;
}

/* ── STAT BOX ── */
.stat-box {
  position: relative;
  background: white;
  transition: background 0.3s ease;
}
.stat-box::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: #e8620a;
  transition: width 0.4s ease;
}
.stat-box:hover           { background: #f5f3ef; }
.stat-box:hover::after    { width: 100%; }

/* ── SERVICE BOX ── */
.service-box {
  position: relative;
  transition: background 0.3s ease;
}
.service-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  transition: width 0.4s ease;
  border-radius: 1rem 1rem 0 0;
  will-change: width;
  z-index: 10;
}
.service-box.orange::before { background: #e8620a; }
.service-box.blue::before   { background: #2563eb; }
.service-box:hover::before  { width: 100%; }

/* ── FAQ ACCORDION ── */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.faq-answer.open { max-height: 500px; }

/* ── PROCESS STEP LINE ── */
.step-line { position: relative; }
.step-line::after {
  content: "";
  position: absolute;
  top: 28px;
  left: 28px;
  width: 2px;
  height: calc(100% + 2rem);
  background: #e8620a22;
}
.step-line:last-child::after { display: none; }