/* =========================
   Schophil Car - homepage
   ========================= */

/* Root & base */
:root{
  --bg:#fff;
  --text:#111827;
  --muted:#6b7280;
  --accent: #FF0000;
  --container:1200px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0;font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 20px
}

/* Header */
.site-header{
  position:sticky;
  top:0;z-index:90;
  background:rgba(255,255,255,0.96);
  backdrop-filter:blur(6px);
  padding:14px 0;
  border-bottom:1px solid rgba(16,24,40,0.04)
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{font-weight:800;font-size:20px}
.logo .accent{color:var(--accent)}
.header-nav{display:flex;align-items:center;gap:12px}
.btn-primary{background:linear-gradient(90deg,var(--accent),#ff9f57);border:none;padding:10px 16px;border-radius:10px;color:#fff;font-weight:700;cursor:pointer}
.btn-link{color:var(--muted);text-decoration:none;font-weight:600;padding:6px}

/* Hero */
.hero{padding:28px 0 8px}
.hero-inner{display:flex;flex-direction:column;align-items:center;gap:18px;min-height:62vh}
.hero-stage{position:relative;width:100%;max-width:1100px;border-radius:12px;overflow:hidden}
.hero-image{width:100%;height:auto;display:block;border-radius:12px;box-shadow:0 10px 40px rgba(2,6,23,0.06);opacity:0;transform:translateY(8px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.9,.3,1)}
.hero-copy h1{font-size:44px;margin:0;color:var(--text)}
.hero-copy p{font-size:18px;color:var(--muted);margin:0}

/* Cars (one-per-line) */
.cars-section{padding:72px 0}
.car-container{display:flex;flex-direction:column;align-items:center;gap:18px;margin-bottom:56px;position:relative}
.stage{position:relative;width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:48vh}
.car{display:block;width:90%;max-width:820px;height:auto;object-fit:contain;opacity:0;transform:translateY(18px) scale(.99);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.9,.3,1)}
.car-text{width:100%;max-width:820px;text-align:center;opacity:0;transform:translateY(12px);transition:opacity .6s ease .35s,transform .6s ease .35s}
.car-text h2{margin:0;font-size:24px;color:var(--accent);font-weight:800}
.car-text p{margin:6px 0 0;color:var(--muted)}

/* Light-sweep base (transform-based, viewport-aware) */
.light-sweep{position:absolute;top:0;left:0;width:100%;height:100%;transform:skewX(-20deg) translateX(-120vw);background:linear-gradient(120deg,transparent,rgba(255,0,0,0.45),transparent);pointer-events:none;opacity:0;z-index:30;will-change:transform,opacity}

/* animate-sweep triggers the transform animation (no inline left overrides) */
.light-sweep.animate-sweep{opacity:1;animation:sweep-transform 1.2s ease-in-out forwards}

/* keyframes move with vw (viewport units) - safe for mobile */
@keyframes sweep-transform{
  0%{ transform: skewX(-20deg) translateX(-120vw); }
  100%{ transform: skewX(-20deg) translateX(120vw); }
}

/* Revealed state for car/hero after the swoosh completes */
.revealed .car,
.hero-stage.revealed .hero-image{opacity:1;transform:translateY(0) scale(1)}

.revealed .car-text{opacity:1;transform:translateY(0)}

/* contact */
.contact{padding:72px 20px;text-align:center}
.contact h2{margin:0;color:var(--text)}
.contact p{margin:8px 0 0;color:var(--muted)}

/* Dots (if you need later) */
.dots{position:fixed;right:20px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;z-index:80}
.dots button{width:12px;height:12px;border-radius:50%;background:rgba(0,0,0,0.16);border:none;cursor:pointer}
.dots button.active{background:linear-gradient(90deg,var(--accent),#ff9f57);box-shadow:0 4px 14px rgba(255,127,42,0.14)}

/* Floating WhatsApp button */
.whatsapp-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--accent), rgba(0,0,0,0.06));
  color: #fff;               /* icon color */
  box-shadow: 0 10px 30px rgba(2,6,23,0.12);
  z-index: 220;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, opacity .12s ease;
  will-change: transform, opacity;
  border: none;
  outline: none;
}

/* Slightly larger on hover for desktop */
.whatsapp-btn:hover,
.whatsapp-btn:focus {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(2,6,23,0.18);
  opacity: 1;
}

/* subtle inner white ring like many design patterns */
.whatsapp-btn::after{
  content:'';
  position:absolute;
  inset:2px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  pointer-events:none;
}
/* small label on hover (desktop only) */
@media (hover: hover) {
  .whatsapp-btn::before{
    content: 'Chat on WhatsApp';
    position: absolute;
    right: 72px;
    bottom: 50%;
    transform: translateY(50%);
    background: #fff;
    color: var(--text-dark, #111);
    padding: 8px 10px;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(2,6,23,0.08);
    font-weight:600;
    font-size: 0.9rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease, transform .12s ease;
  }
  .whatsapp-btn:hover::before,
  .whatsapp-btn:focus::before {
    opacity: 1;
    transform: translateY(50%) translateX(0);
  }
}

/* Responsive - mobile first */
@media (max-width:900px){
  .hero-copy h1{font-size:34px}
  .hero-copy p{font-size:16px}
  .car-text h2{font-size:20px}
}
@media (max-width:600px){
  html,body{width:100vw;overflow-x:hidden}
  .container{padding:0 16px}
  .hero-inner{min-height:40vh}
  .hero-copy h1{font-size:28px}
  .stage{min-height:40vh}
  .car{max-width:420px}
  .light-sweep{will-change:transform}
  /* make the swoosh less extreme on tiny phones */
  .light-sweep.animate-sweep{animation-duration:1.3s}
}