/* Custom background grid styling and typography rules */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

/*
 * Keyboard focus ring (v2). Dual-tone (ivory inner + ink outer) so it stays
 * visible on every brand surface: ivory, blue, ink, and green. Only shows for
 * keyboard users via :focus-visible, never on mouse click.
 */
:focus-visible {
  outline: 2px solid #F4F3EE;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px #0C0E1A;
  border-radius: 1px;
}
/* On the ivory body surfaces, flip the ring so the dark line reads first. */
.bg-ivory :focus-visible,
#work :focus-visible,
#process :focus-visible,
#testimonials :focus-visible,
#faq :focus-visible {
  outline-color: #0C0E1A;
  box-shadow: 0 0 0 4px #C8FF66;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Fallback & design theme exact specification overrides */
.condensed {
  font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-stretch: condensed;
  font-weight: 800;
  text-transform: uppercase;
}

.editorial-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  opacity: 0.6;
}

.line-accent {
  height: 1px;
  background: rgba(255,255,255,0.1);
  width: 100%;
}

.vertical-rail {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 10px;
  letter-spacing: 0.3em;
  opacity: 0.4;
}

/* Custom noise overlay to simulate an authentic editorial paper grain */
.noise-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  content: "";
  opacity: 0.035;
  pointer-events: none;
  z-index: 9999;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Custom grid background */
.grid-bg {
  position: relative;
  background-color: #0d0f12; /* Subtle luxury slate core tint */
  background-image:
    radial-gradient(ellipse 60% 50% at 12% -5%, rgba(200, 255, 102, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 105%, rgba(255, 138, 80, 0.07) 0%, transparent 60%),
    linear-gradient(to right, rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 64px 64px, 64px 64px;
}

/* Hide scrollbars for sliders while keeping functionality */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* 3D transformation render rules helper */
.preserve-3d {
  transform-style: preserve-3d;
}

/* Authentic CRT Phosphor Screen Flicker */
@keyframes flicker {
  0% { opacity: 0.97; }
  25% { opacity: 1.01; }
  50% { opacity: 0.98; }
  75% { opacity: 1.02; opacity: 0.99; }
  100% { opacity: 1; }
}

/* Custom styling for editorial marquee */
@keyframes marquee-left {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

.animate-marquee-left {
  animation: marquee-left 25s linear infinite;
}

/* Marquee speed variation */
@keyframes marquee-right {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0%); }
}

.animate-marquee-right {
  animation: marquee-right 30s linear infinite;
}

/* Frosted glass cards glow shift animations */
@keyframes blob-primary {
  0%, 100% {
    transform: scale(1) translate(0px, 0px);
  }
  33% {
    transform: scale(1.15) translate(15px, -10px);
  }
  66% {
    transform: scale(0.9) translate(-10px, 15px);
  }
}

@keyframes blob-secondary {
  0%, 100% {
    transform: scale(1.1) translate(0px, 0px);
  }
  50% {
    transform: scale(0.9) translate(-15px, 10px);
  }
}

.animate-blob-primary {
  animation: blob-primary 10s ease-in-out infinite;
}

.animate-blob-secondary {
  animation: blob-secondary 12s ease-in-out infinite;
}

/* Service Card animations */
@keyframes wave-bar {
  0%, 100% {
    transform: scaleY(0.35);
  }
  50% {
    transform: scaleY(1.15);
  }
}
.animate-wave-bar {
  transform-origin: bottom;
  animation: wave-bar ease-in-out infinite;
}

@keyframes camera-rotate {
  0%, 100% {
    transform: rotate(0deg);
  }
  33% {
    transform: rotate(-12deg);
  }
  66% {
    transform: rotate(6deg);
  }
}
.animate-camera-rotate {
  animation: camera-rotate 3.5s ease-in-out infinite;
}

@keyframes pulse-circle {
  0%, 100% {
    transform: scale(1);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.9;
  }
}
.animate-pulse-circle {
  animation: pulse-circle 4s ease-in-out infinite;
}

@keyframes pulse-sound {
  0%, 100% {
    transform: scale(0.85);
    opacity: 0.2;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
}
.animate-pulse-sound {
  animation: pulse-sound 1.8s ease-in-out infinite;
}

@keyframes bar-grow {
  0%, 100% {
    transform: scaleY(0.15);
  }
  50% {
    transform: scaleY(1);
  }
}
.animate-bar-grow {
  transform-origin: bottom;
  animation: bar-grow 1s ease-in-out infinite;
}

/* Floating particle animations for content creation */
@keyframes float-particle {
  0% {
    transform: translateY(125px) scale(0.5);
    opacity: 0;
  }
  10% {
    opacity: 0.9;
  }
  90% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(10px) scale(1.1);
    opacity: 0;
  }
}

.animate-float-particle-1 { animation: float-particle 4.1s ease-out infinite; }
.animate-float-particle-2 { animation: float-particle 4.9s ease-out infinite; animation-delay: 0.4s; }
.animate-float-particle-3 { animation: float-particle 5.4s ease-out infinite; animation-delay: 0.8s; }
.animate-float-particle-4 { animation: float-particle 4.6s ease-out infinite; animation-delay: 1.2s; }

/* Floating spark animations for brand storytelling */
@keyframes float-spark {
  0% {
    transform: translateY(75px) scale(0.5);
    opacity: 0;
  }
  10% {
    opacity: 0.9;
  }
  90% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(-5px) scale(1.2);
    opacity: 0;
  }
}

.animate-float-spark-1 { animation: float-spark 4.2s ease-out infinite; }
.animate-float-spark-2 { animation: float-spark 5.3s ease-out infinite; animation-delay: 0.4s; }
.animate-float-spark-3 { animation: float-spark 4.8s ease-out infinite; animation-delay: 0.8s; }
.animate-float-spark-4 { animation: float-spark 5.7s ease-out infinite; animation-delay: 1.2s; }

/* Shutter text border outline */
.stroke-text {
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.25);
  color: transparent;
}
.stroke-text:hover {
  -webkit-text-stroke: 1px var(--color-accent-orange);
  transition: all 0.3s ease;
}

/* Custom premium frosted glassmorphism & neon glows for service cards */
.service-card {
  background: rgba(13, 15, 18, 0.45) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.service-card:hover {
  transform: translateY(-5px) !important;
}

.service-card[data-id="podcast-production"]:hover {
  border-color: #C8FF66 !important;
  box-shadow: 0 0 35px rgba(200, 255, 102, 0.22), 0 20px 40px rgba(0, 0, 0, 0.6) !important;
}

.service-card[data-id="video-production"]:hover {
  border-color: #FF8A50 !important;
  box-shadow: 0 0 35px rgba(255, 138, 80, 0.22), 0 20px 40px rgba(0, 0, 0, 0.6) !important;
}

.service-card[data-id="photography"]:hover {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 35px rgba(56, 189, 248, 0.22), 0 20px 40px rgba(0, 0, 0, 0.6) !important;
}

.service-card[data-id="content-creation"]:hover {
  border-color: #ec4899 !important;
  box-shadow: 0 0 35px rgba(236, 72, 153, 0.22), 0 20px 40px rgba(0, 0, 0, 0.6) !important;
}

.service-card[data-id="social-marketing"]:hover {
  border-color: #a3e635 !important;
  box-shadow: 0 0 35px rgba(163, 230, 53, 0.22), 0 20px 40px rgba(0, 0, 0, 0.6) !important;
}

.service-card[data-id="brand-storytelling"]:hover {
  border-color: #fbbf24 !important;
  box-shadow: 0 0 35px rgba(251, 191, 36, 0.22), 0 20px 40px rgba(0, 0, 0, 0.6) !important;
}


/* ===========================================================
   MOBILE RESPONSIVENESS (additive — does not affect animations)
   =========================================================== */
html, body { max-width: 100%; overflow-x: hidden; }
img, canvas, video { max-width: 100%; height: auto; }

@media (max-width: 640px) {
  /* Never let decorative/absolute elements force horizontal scroll */
  main, section, #home { overflow-x: clip; }

  /* Hero: trim the huge desktop padding so content fits the screen */
  #home { padding-top: 7rem; padding-bottom: 3rem; }

  /* Keep the hero's giant overlay headlines from overflowing the small TV */
  #tv-text-impossible h2 { font-size: clamp(16px, 7vw, 24px); }
  #tv-text-ignore h2 { font-size: clamp(22px, 9vw, 34px); }

  /* Section vertical rhythm: tighten oversized desktop spacing on phones */
  section.py-24, section.py-32 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
}

@media (max-width: 640px) {
  /* Declutter the hero on phones: the scattered floating sticker pills and the
     exploding capability tags are positioned for the wide desktop hero, so they
     pile onto the TV and headlines on small screens. Hide them on mobile only;
     the full animated composition still shows on tablet/desktop. */
  .floating-sticker { display: none !important; }
  .tv-exploding-tag { display: none !important; }

  /* Give the hero headline/CTA room and center the TV cleanly */
  #tv-perspective-container { padding-top: 1rem !important; padding-bottom: 1rem !important; }
}

/* ===========================================================
   Clean / modern look: remove the editorial film-grain overlay
   (set to a low opacity instead of "none" if you want a hint of texture)
   =========================================================== */
.noise-overlay { display: none !important; }

/* Subtle polish: let the TV + headline lead; stickers recede slightly */
.floating-sticker { opacity: .85; }
.floating-sticker:hover { opacity: 1; }