/* ============================================
   Section transition personalities
   Each runs once, ~700-1100ms, then is removed.
   ============================================ */

/* --- Ignition (Homepage) ---
   A thin gradient line sweeps once across the hero,
   like a light bar catching an edge, then fades. */
.tx-ignition {
  background: linear-gradient(180deg, transparent 49%, var(--pas-graphite) 50%, transparent 51%);
}
.tx-ignition::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -10%;
  width: 6%;
  background: var(--pas-gradient);
  filter: blur(6px);
  opacity: 0;
}
.tx-ignition.run::after {
  animation: ignition-sweep 900ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes ignition-sweep {
  0%   { left: -10%; opacity: 0; }
  15%  { opacity: 0.9; }
  85%  { opacity: 0.9; }
  100% { left: 104%; opacity: 0; }
}
/* Hero content animates itself, via CSS alone — never depends on
   JS finishing to become visible. The transition engine still
   drives the decorative overlay sweep in parallel; this keeps the
   actual copy safe even if a script is slow, blocked, or fails. */
.hero-content {
  animation: hero-content-in 700ms cubic-bezier(0.2, 0.8, 0.2, 1) 200ms both;
}
@keyframes hero-content-in {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-content { animation: none; opacity: 1; transform: none; }
}

/* --- Squeegee Pass (Window Tinting) ---
   A squeegee blade sweeps left-to-right, wiping a hazy
   film off the glass as it passes — obvious and mechanical. */
.squeegee-fog {
  position: absolute; inset: 0;
  background: rgba(225, 232, 238, 0.4);
  clip-path: inset(0 0 0 0);
}
.tx-squeegee-pass.run .squeegee-fog {
  animation: squeegee-fog-clear 950ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes squeegee-fog-clear {
  0%   { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 100%); }
}
.squeegee-bar {
  position: absolute; top: 0; bottom: 0; left: -6%; width: 4%;
  background: linear-gradient(180deg, #fff, #c7d0d6);
  box-shadow: 3px 0 16px rgba(0,0,0,0.5);
  transform: skewX(-10deg);
}
.tx-squeegee-pass.run .squeegee-bar {
  animation: squeegee-bar-move 950ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes squeegee-bar-move {
  0%   { left: -6%; }
  100% { left: 102%; }
}

/* --- Power Wash (Auto Detailing) ---
   A bright diagonal jet sweeps across, blasting a dirty
   film away, with a few droplets trailing behind it. */
.wash-dirt {
  position: absolute; inset: 0;
  background: rgba(70, 58, 45, 0.38);
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}
.tx-power-wash.run .wash-dirt {
  animation: wash-dirt-clear 1000ms cubic-bezier(0.6, 0, 0.3, 1) forwards;
}
@keyframes wash-dirt-clear {
  0%   { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
  100% { clip-path: polygon(0 0, 115% 0, 115% 100%, 0 100%); }
}
.wash-jet {
  position: absolute; top: -10%; bottom: -10%; left: -12%; width: 10%;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(190,220,255,0.5));
  transform: skewX(-16deg);
  filter: blur(1px);
}
.tx-power-wash.run .wash-jet {
  animation: wash-jet-move 1000ms cubic-bezier(0.6, 0, 0.3, 1) forwards;
}
@keyframes wash-jet-move {
  0%   { left: -12%; }
  100% { left: 105%; }
}
.wash-droplet {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: #d8ecff; opacity: 0;
  top: var(--dy, 40%); left: -5%;
}
.tx-power-wash.run .wash-droplet {
  animation: wash-droplet-fly 1000ms cubic-bezier(0.4, 0, 0.6, 1) forwards;
  animation-delay: var(--dd, 0ms);
}
@keyframes wash-droplet-fly {
  0%   { left: -5%; opacity: 0; transform: translateY(0); }
  10%  { opacity: 1; }
  90%  { opacity: 0.6; }
  100% { left: 106%; opacity: 0; transform: translateY(18px); }
}

/* --- Glass Crack (Windshield Protection Film) ---
   Crack lines snap into view from a center impact point,
   then a film sweeps over and seals them away. */
.crack-path {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
}
.tx-glass-crack.run .crack-path {
  animation: crack-draw 260ms ease-out forwards;
}
.tx-glass-crack.run .crack-path:nth-child(2) { animation-delay: 40ms; }
.tx-glass-crack.run .crack-path:nth-child(3) { animation-delay: 80ms; }
.tx-glass-crack.run .crack-path:nth-child(4) { animation-delay: 120ms; }
.tx-glass-crack.run .crack-path:nth-child(5) { animation-delay: 160ms; }
@keyframes crack-draw {
  to { stroke-dashoffset: 0; }
}
.crack-seal {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 40%, rgba(236,238,241,0.5) 50%, transparent 60%), var(--pas-black);
  opacity: 0;
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}
.tx-glass-crack.run .crack-seal {
  animation: crack-seal-wipe 750ms cubic-bezier(0.65, 0, 0.35, 1) 320ms forwards;
}
@keyframes crack-seal-wipe {
  0%   { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); opacity: 1; }
  100% { clip-path: polygon(0 0, 115% 0, 115% 100%, 0 100%); opacity: 0; }
}

/* --- Coating Wipe (Ceramic & Graphene Coatings) ---
   A soft applicator pad wipes across in a gentle arc,
   leaving a gloss highlight behind it. */
.wipe-pad {
  position: absolute; width: 220px; height: 220px; top: 30%; left: -15%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.15) 55%, transparent 75%);
  opacity: 0;
}
.tx-coating-wipe.run .wipe-pad {
  animation: coating-wipe-move 1050ms cubic-bezier(0.45, 0, 0.2, 1) forwards;
}
@keyframes coating-wipe-move {
  0%   { left: -15%; top: 44%; opacity: 0; }
  12%  { opacity: 1; }
  50%  { left: 45%; top: 12%; }
  88%  { opacity: 1; }
  100% { left: 105%; top: 40%; opacity: 0; }
}

/* --- Buffer Spin (Paint Correction) ---
   A rotating buffer pad crosses the screen, spinning
   the whole way, leaving a faint gloss arc behind it. */
.buffer-wheel-wrap {
  position: absolute; top: 35%; left: -12%; width: 130px; height: 130px;
  opacity: 0;
}
.tx-buffer-spin.run .buffer-wheel-wrap {
  animation: buffer-move 1100ms cubic-bezier(0.5, 0, 0.3, 1) forwards;
}
@keyframes buffer-move {
  0%   { left: -12%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 105%; opacity: 0; }
}
.buffer-wheel-svg {
  width: 100%; height: 100%;
  transform-origin: center;
}
.tx-buffer-spin.run .buffer-wheel-svg {
  animation: buffer-spin-rotate 1100ms linear forwards;
}
@keyframes buffer-spin-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(1080deg); }
}

/* --- Vinyl Wiggle (Vinyl Wraps) ---
   The wrap edge presses on with a back-and-forth squeegee
   wiggle instead of a single straight wipe. */
.tx-vinyl-wiggle {
  background: var(--pas-gradient);
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}
.tx-vinyl-wiggle.run {
  animation: vinyl-wiggle-reveal 1100ms cubic-bezier(0.5, 0, 0.3, 1) forwards;
}
@keyframes vinyl-wiggle-reveal {
  0%   { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); opacity: 1; }
  16%  { clip-path: polygon(0 0, 34% 0, 34% 100%, 0 100%); }
  28%  { clip-path: polygon(0 0, 22% 0, 22% 100%, 0 100%); }
  42%  { clip-path: polygon(0 0, 58% 0, 58% 100%, 0 100%); }
  54%  { clip-path: polygon(0 0, 46% 0, 46% 100%, 0 100%); }
  68%  { clip-path: polygon(0 0, 82% 0, 82% 100%, 0 100%); }
  80%  { clip-path: polygon(0 0, 70% 0, 70% 100%, 0 100%); }
  92%  { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: 1; }
  100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: 0; }
}

/* --- Paint Spray (Rock Chip Repair) ---
   Fine spray droplets fan out from a gun nozzle sweeping
   across, filling in the damage as it passes. */
.spray-cone {
  position: absolute; top: -20%; bottom: -20%; left: -14%; width: 16%;
  background: radial-gradient(ellipse at left, rgba(255,255,255,0.35), transparent 70%);
  opacity: 0;
}
.tx-paint-spray.run .spray-cone {
  animation: spray-cone-move 1000ms cubic-bezier(0.5, 0, 0.3, 1) forwards;
}
@keyframes spray-cone-move {
  0%   { left: -14%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 104%; opacity: 0; }
}
.spray-dot {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: #ECEEF1; opacity: 0;
  top: var(--dy, 50%); left: -8%;
}
.tx-paint-spray.run .spray-dot {
  animation: spray-dot-fly 900ms ease-out forwards;
  animation-delay: var(--dd, 0ms);
}
@keyframes spray-dot-fly {
  0%   { left: -8%; opacity: 0; }
  15%  { opacity: 0.9; }
  85%  { opacity: 0.4; }
  100% { left: 106%; opacity: 0; }
}


/* --- Homepage Hero Greeting + Typewriter Reveal ---
   "Hello" fades in and out, then the real slogan types
   itself in the same spot. The real <h1> text is always
   present in the DOM for SEO/accessibility/no-JS — this
   overlay is purely a decorative visual reveal on top of it. */
.hero-headline-wrap { position: relative; }

.hero-headline-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.01em;
  color: var(--pas-text);
  font-size: var(--step-4);
  max-width: 16ch;
}
.js-greeting-active .hero-headline-real { opacity: 0; }
.js-greeting-active .hero-headline-overlay { opacity: 1; }

.greeting-text { display: inline-block; opacity: 0; }
.greeting-text.show { animation: greeting-fade-in-out 1200ms ease forwards; }
@keyframes greeting-fade-in-out {
  0%   { opacity: 0; }
  25%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}

.typed-cursor {
  display: none;
  width: 0.05em;
  height: 0.85em;
  background: var(--pas-blue);
  margin-left: 0.05em;
  vertical-align: -0.05em;
  animation: typed-cursor-blink 800ms steps(1) infinite;
}
@keyframes typed-cursor-blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .hero-headline-overlay { display: none; }
  .hero-headline-real { opacity: 1 !important; }
}