/* =============================================
   Custom utilities that Tailwind CDN can't handle
   ============================================= */

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.glass-card {
  background: rgba(51, 53, 56, 0.4);
  backdrop-filter: blur(12px);
}

.ghost-border {
  outline: 1px solid rgba(131, 149, 140, 0.15);
}

.parallax-bg {
  background-image: radial-gradient(circle at 2px 2px, rgba(0, 255, 194, 0.05) 1px, transparent 0);
  background-size: 40px 40px;
}

.text-glow {
  text-shadow: 0 0 20px rgba(0, 255, 194, 0.3);
}

.text-glow-strong {
  text-shadow: 0 0 40px rgba(0, 255, 194, 0.5), 0 0 80px rgba(0, 255, 194, 0.2);
}

/* Lenis handles smooth scrolling — no CSS scroll-behavior needed */

/* Selection color */
::selection {
  background: #00ffc2;
  color: #002116;
}

/* Custom cursor */
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  background: #00FFC2;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease;
  mix-blend-mode: difference;
}

.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border: 1.5px solid #00FFC2;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
  opacity: 0.4;
  mix-blend-mode: difference;
}

.cursor-hover .cursor-dot {
  width: 14px;
  height: 14px;
}

.cursor-hover .cursor-ring {
  width: 60px;
  height: 60px;
  opacity: 0.2;
}

/* Hide cursor on all interactive elements */
body { cursor: none; }
a, button, input, textarea, [data-magnetic] { cursor: none; }

@media (hover: none) and (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none !important; }
  body, a, button, input, textarea { cursor: auto; }
}

/* Noise overlay */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/></filter><rect width="300" height="300" filter="url(%23n)" opacity="0.02"/></svg>');
  opacity: 0.5;
}

/* Scroll indicator line animation */
@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; height: 48px; }
  50% { opacity: 1; height: 64px; }
}

.scroll-line {
  animation: scrollPulse 2s ease-in-out infinite;
}

/* Counter styling override */
.counter-value {
  font-family: 'Space Grotesk', sans-serif;
}

/* =============================================
   ParkHere.ai Phone Journey Animation
   ============================================= */

.journey-anim {
  width: 220px;
  height: 440px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .journey-anim {
    width: 240px;
    height: 480px;
  }
}

.journey-anim__card {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  background-color: #1a1c1f;
  border-radius: 32px;
  border: 8px solid #333538;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Dynamic island notch */
.journey-anim__card::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 18px;
  background: #000;
  border-radius: 20px;
  z-index: 10;
}

/* Scene base */
.journey-anim__scene {
  position: absolute;
  inset: 0;
  padding: 36px 16px 16px;
  opacity: 0;
  transform: translateY(8px);
  animation-duration: 25s;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
  animation-fill-mode: both;
  display: flex;
  flex-direction: column;
  color: #e2e2e6;
}

/* Scene keyframes */
.journey-anim__scene--1 { animation-name: j-s1; --t: 0.3s; }
@keyframes j-s1 {
  0%   { opacity:0; transform:translateY(8px); }
  2%   { opacity:1; transform:translateY(0); }
  10%  { opacity:1; transform:translateY(0); }
  12%  { opacity:0; transform:translateY(-8px); }
  100% { opacity:0; }
}
.journey-anim__scene--2 { animation-name: j-s2; --t: 3.3s; }
@keyframes j-s2 {
  0%,12% { opacity:0; transform:translateY(8px); }
  14%    { opacity:1; transform:translateY(0); }
  22%    { opacity:1; transform:translateY(0); }
  24%    { opacity:0; transform:translateY(-8px); }
  100%   { opacity:0; }
}
.journey-anim__scene--3 { animation-name: j-s3; --t: 6.3s; }
@keyframes j-s3 {
  0%,24% { opacity:0; transform:translateY(8px); }
  26%    { opacity:1; transform:translateY(0); }
  32%    { opacity:1; transform:translateY(0); }
  34%    { opacity:0; transform:translateY(-8px); }
  100%   { opacity:0; }
}
.journey-anim__scene--4 { animation-name: j-s4; --t: 8.8s; }
@keyframes j-s4 {
  0%,34% { opacity:0; transform:translateY(8px); }
  36%    { opacity:1; transform:translateY(0); }
  42%    { opacity:1; transform:translateY(0); }
  44%    { opacity:0; transform:translateY(-8px); }
  100%   { opacity:0; }
}
.journey-anim__scene--5 { animation-name: j-s5; --t: 11.3s; }
@keyframes j-s5 {
  0%,44% { opacity:0; transform:translateY(8px); }
  46%    { opacity:1; transform:translateY(0); }
  52%    { opacity:1; transform:translateY(0); }
  54%    { opacity:0; transform:translateY(-8px); }
  100%   { opacity:0; }
}
.journey-anim__scene--6 { animation-name: j-s6; --t: 13.8s; }
@keyframes j-s6 {
  0%,54% { opacity:0; transform:translateY(8px); }
  56%    { opacity:1; transform:translateY(0); }
  62%    { opacity:1; transform:translateY(0); }
  64%    { opacity:0; transform:translateY(-8px); }
  100%   { opacity:0; }
}
.journey-anim__scene--7 { animation-name: j-s7; --t: 16.3s; }
@keyframes j-s7 {
  0%,64% { opacity:0; transform:translateY(8px); }
  66%    { opacity:1; transform:translateY(0); }
  74%    { opacity:1; transform:translateY(0); }
  76%    { opacity:0; transform:translateY(-8px); }
  100%   { opacity:0; }
}
.journey-anim__scene--8 { animation-name: j-s8; --t: 19.3s; }
@keyframes j-s8 {
  0%,76% { opacity:0; transform:translateY(8px); }
  78%    { opacity:1; transform:translateY(0); }
  100%   { opacity:1; transform:translateY(0); }
}

/* Child stagger entrance */
.journey-anim__scene > :not(.journey-anim__replay) {
  opacity: 0;
  transform: translateY(8px);
  animation: j-child-in 0.4s cubic-bezier(0, 0, 0, 1) both;
  animation-delay: calc(var(--t) + var(--i, 0) * 0.08s);
}
.journey-anim__scene > :nth-child(1) { --i: 0; }
.journey-anim__scene > :nth-child(2) { --i: 1; }
.journey-anim__scene > :nth-child(3) { --i: 2; }
.journey-anim__scene > :nth-child(4) { --i: 3; }
.journey-anim__scene > :nth-child(5) { --i: 4; }
.journey-anim__scene > :nth-child(6) { --i: 5; }
@keyframes j-child-in {
  to { opacity: 1; transform: translateY(0); }
}

/* Pulse animation */
@keyframes j-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Phone UI elements */
.journey-anim .j-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #fbfffa;
  margin-bottom: 4px;
}
.journey-anim .j-subtitle {
  font-size: 12px;
  color: #b9cbc1;
  margin-bottom: 8px;
  line-height: 1.4;
}
.journey-anim .j-input {
  width: 100%;
  padding: 10px 12px !important;
  border: 1px solid #3a4a43 !important;
  border-radius: 8px;
  background: #1e2023 !important;
  color: #e2e2e6 !important;
  -webkit-text-fill-color: #e2e2e6 !important;
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  pointer-events: none;
}
.journey-anim .j-input-label {
  font-size: 10px;
  color: #83958c;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.journey-anim .j-btn {
  display: block;
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  background: #00e1ab;
  color: #002116;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  border: none;
  pointer-events: none;
}
.journey-anim .j-btn--outline {
  background: transparent;
  border: 1px solid #3a4a43;
  color: #e2e2e6;
}
.journey-anim .j-otp {
  display: flex;
  gap: 4px;
  justify-content: center;
}
.journey-anim .j-otp input {
  width: 28px;
  height: 36px;
  text-align: center;
  border: 1px solid #3a4a43 !important;
  border-radius: 6px;
  background: #1e2023 !important;
  color: #fbfffa !important;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  padding: 0 !important;
  -webkit-text-fill-color: #fbfffa !important;
  font-weight: 600;
  pointer-events: none;
}
.journey-anim .j-card {
  border: 1px solid #3a4a43;
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.journey-anim .j-card-title {
  font-size: 12px;
  font-weight: 600;
  color: #fbfffa;
}
.journey-anim .j-card-sub {
  font-size: 10px;
  color: #83958c;
}
.journey-anim .j-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 4px;
  background: #00ffc2;
  color: #002116;
  display: inline-block;
}
.journey-anim .j-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid #3a4a43;
  border-radius: 8px;
  margin-bottom: 6px;
}
.journey-anim .j-radio input {
  accent-color: #00e1ab;
  pointer-events: none;
}
.journey-anim .j-passcode {
  background: #282a2d;
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  margin-top: 8px;
}
.journey-anim .j-passcode-label {
  font-size: 10px;
  color: #83958c;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.journey-anim .j-passcode-code {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #00e1ab;
  letter-spacing: 0.1em;
}

/* Replay button */
.journey-anim__replay {
  opacity: 0;
  animation: j-replay-in 0.5s cubic-bezier(0, 0, 0, 1) 21s both;
  margin-top: 12px;
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid #3a4a43;
  border-radius: 8px;
  background: transparent;
  color: #e2e2e6;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 600;
}
.journey-anim__replay:hover {
  border-color: #00e1ab;
  color: #00e1ab;
}
@keyframes j-replay-in {
  to { opacity: 1; }
}

/* All inputs/buttons in animation are non-interactive */
.journey-anim__scene input,
.journey-anim__scene button:not(.journey-anim__replay) {
  pointer-events: none;
}