/* PoraPop — shared custom styles layered on top of Tailwind (CDN).
   Keep this small; Tailwind handles the rest. */

html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: #FFC928; color: #1B1B1B; }

/* Visible focus for keyboard users everywhere. */
:focus-visible { outline: 3px solid rgba(255, 90, 54, 0.7); outline-offset: 2px; }

/* Skip-to-content link: hidden until focused. */
.pp-skip {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  transform: translateY(-160%);
  background: #1B1B1B;
  color: #fff;
  font-weight: 800;
  padding: 10px 16px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.15s ease;
}
.pp-skip:focus { transform: translateY(0); outline: 3px solid #FF5A36; outline-offset: 2px; }
/* A focused <main> target should not show a focus ring (it's programmatic). */
main:focus { outline: none; }

/* Playful floating hero art. */
.floaty { animation: floaty 4s ease-in-out infinite; }
.floaty-delay { animation: floaty 4s ease-in-out 1.2s infinite; }
@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(2deg); }
  50% { transform: translateY(-14px) rotate(-1deg); }
}

/* Shine sweep on primary buttons. */
.shine-button { position: relative; overflow: hidden; isolation: isolate; }
.shine-button::after {
  content: "";
  position: absolute;
  inset: -40% auto -40% -60%;
  width: 45%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  animation: shine-sweep 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shine-sweep {
  0%, 45% { left: -60%; }
  70%, 100% { left: 130%; }
}

/* FAQ open/close icon. */
details[open] .faq-icon { transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .floaty, .floaty-delay, .shine-button::after { animation: none; }
  /* Honour reduced-motion globally: near-instant transitions/animations,
     so hover lifts and reveals don't move for users who opt out. */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}