/* ============================================================
   Pikes Peak Hail Repair — custom styles
   (Tailwind CSS v3 is loaded separately via the Play CDN)
   ============================================================ */

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

/* Sticky header offset for anchored sections */
section[id] {
  scroll-margin-top: 88px;
}

/* Scroll-reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}

/* Diagonal / slanted helpers for the sharp angular look */
.clip-down   { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3rem), 0 100%); }
.clip-up     { clip-path: polygon(0 3rem, 100% 0, 100% 100%, 0 100%); }
.slant-chip  { clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); }
.slant-photo { clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%); }

/* Pulsing ring behind the floating play button */
@keyframes pulse-ring {
  0%   { transform: scale(1);   opacity: .55; }
  100% { transform: scale(1.9); opacity: 0;   }
}
.play-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  border: 2px solid #5f82f5;
  animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

::selection {
  background: #2b4fd0;
  color: #ffffff;
}