/* Pindan Training — site-level CSS
   Tokens come from tokens.css. This sheet adds:
   - smooth anchor scroll + scrollbar hardening
   - scroll-triggered reveal animation utility (.reveal / .reveal-in)
   - horizontal auto-scrolling marquee for the testimonial ticker
   - accordion details polish
   - small responsive helpers
*/

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bone); color: var(--char); }
h1, h2, h3, h4, h5, p, ul, ol, dl, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font-family: inherit; }
img { max-width: 100%; display: block; }

/* page reveal */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 520ms var(--ease-out),
    transform 520ms var(--ease-out);
  will-change: opacity, transform;
}
.reveal-in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* marquee ticker */
.ticker {
  --speed: 60s;
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.ticker-track {
  display: flex;
  gap: 48px;
  width: max-content;
  animation: ticker-scroll var(--speed) linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* accordion */
.pp-acc { border-top: 1px solid var(--border-strong); }
.pp-acc[open] summary .pp-acc__plus { transform: rotate(45deg); }
.pp-acc summary {
  list-style: none;
  cursor: pointer;
  padding: 28px 0;
  display: grid;
  grid-template-columns: 80px 1fr 32px;
  gap: 24px;
  align-items: center;
}
.pp-acc summary::-webkit-details-marker { display: none; }
.pp-acc__plus {
  width: 28px;
  height: 28px;
  position: relative;
  transition: transform 200ms var(--ease-out);
  justify-self: end;
}
.pp-acc__plus::before, .pp-acc__plus::after {
  content: ""; position: absolute; background: currentColor;
}
.pp-acc__plus::before { top: 50%; left: 0; right: 0; height: 1.5px; transform: translateY(-50%); }
.pp-acc__plus::after  { left: 50%; top: 0; bottom: 0; width: 1.5px; transform: translateX(-50%); }
.pp-acc[open] { padding-bottom: 32px; }

/* focus ring everywhere */
:focus-visible {
  outline: 2px solid var(--pindan-sienna);
  outline-offset: 2px;
  border-radius: 2px;
}

/* dotted "red dirt" hero accent — used on home hero */
.dirt-stripe {
  background:
    radial-gradient(ellipse 70% 50% at 25% 80%, rgba(217, 117, 52, 0.22) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 85% 30%, rgba(184, 92, 56, 0.24) 0%, transparent 65%),
    linear-gradient(180deg, #3A1E10 0%, #4A2818 50%, #3A1E10 100%);
}

/* responsive — collapse grids on small screens */
@media (max-width: 900px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr !important; }
  .hide-on-mobile { display: none !important; }
  .hero-grid { grid-template-columns: 1fr !important; }
}