/* ==========================================================================
   Creative-agency — site styles
   Custom rules that sit on top of Tailwind (loaded via CDN in index.html).
   Tailwind's own utility classes are NOT here — only the bespoke bits
   Tailwind can't express (animations, pseudo-elements, decorative
   patterns, etc).
   ========================================================================== */

/* ---------- base / a11y ---------- */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #0f172a; color: #fff; padding: .75rem 1.25rem;
  border-radius: 0 0 .5rem 0; font-weight: 700; font-size: .875rem;
}
.skip-link:focus { left: 0; }
a:focus-visible, button:focus-visible {
  outline: 3px solid #5B45E0; outline-offset: 2px; border-radius: 4px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- placeholder-data badge ---------- */
.placeholder-tag {
  display: inline-flex; align-items: center; font-size: 10px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; color: #92400e;
  background: #fef3c7; border: 1px dashed #d97706; border-radius: 999px;
  padding: .15rem .5rem; line-height: 1.4;
}

/* ---------- proof / phone mockup ---------- */
.phone-frame { position: relative; overflow: hidden; }
.phone-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #0f172a; }
.video-scrubbed { transition: width .1s linear; }

/* ---------- swipe file cards ---------- */
.swipe-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .6s ease; }
.swipe-card:hover .swipe-photo, .swipe-card:focus-within .swipe-photo { transform: scale(1.07); }
.swipe-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(15,23,42,.10), rgba(15,23,42,.85));
  pointer-events: none;
}
.swipe-content { position: relative; z-index: 2; height: 100%; }

/* ---------- tool marquee ---------- */
.marquee-track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.marquee-wrap:hover .marquee-track,
.marquee-wrap:focus-within .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- floating hero cards ---------- */
.animate-float-slow { animation: float 7s ease-in-out infinite; }
.animate-float-medium { animation: float 5.5s ease-in-out infinite; }
.animate-float-fast { animation: float 4.5s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0) rotate(var(--rot,0deg)); } 50% { transform: translateY(-10px) rotate(var(--rot,0deg)); } }
.glow-bg { animation: glow 8s ease-in-out infinite; }
@keyframes glow { 0%,100% { opacity: .55; } 50% { opacity: .9; } }

/* ---------- misc decorative ---------- */
.dot-pattern { background-image: radial-gradient(circle, rgba(15,23,42,.18) 1.5px, transparent 1.5px); background-size: 14px 14px; }
.bg-grid { background-image: linear-gradient(to right, rgba(0,0,0,.035) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,.035) 1px, transparent 1px); background-size: 3rem 3rem; }
.pin { position: absolute; top: -8px; left: 2rem; width: 14px; height: 14px; border-radius: 999px; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.pin-violet { background: #5B45E0; }
.pin-mustard { background: #D89A2C; }
.pin-light { background: #94a3b8; }
.pin-lime { background: #a6cc25; }
.tool-badge { flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
  .swipe-photo, .marquee-track,
  .animate-float-slow, .animate-float-medium, .animate-float-fast, .glow-bg,
  .animate-ping {
    animation: none !important; transition: none !important;
  }
}