/*
Theme Name: SJPerformance
Theme URI: https://sjperformance.hu
Author: SJPerformance
Description: Egyedi, egyoldalas SJPerformance sablon.
Version: 1.0
*/

:root{
    --stage:#000000; --stage-deep:#050505;
    --yellow:#e8d31a; --gold:#b8912f; --gold-hi:#e0be5a;
    --red:#c23b2e; --steel:#96959a; --paint:#eceae4; --white:#f7f6f2;
    --spray:#ff3d7f; --spray-2:#39e0ff;
    --font-display:'Oswald',sans-serif; --font-body:'Inter',sans-serif; --font-mono:'IBM Plex Mono',monospace;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{ background:var(--stage); color:var(--paint); font-family:var(--font-body); overflow-x:hidden; }
  @media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms !important; transition-duration:.01ms !important;} }

  .eyebrow{ font-family:var(--font-mono); font-size:12px; letter-spacing:3px; text-transform:uppercase; color:var(--gold-hi); }
  .section-title{ font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:1px; font-size:clamp(28px,4vw,44px); color:var(--white); }
  .btn{ font-family:var(--font-mono); font-size:13px; letter-spacing:1.5px; text-transform:uppercase; padding:14px 26px; border:1px solid var(--yellow); color:var(--yellow); background:transparent; cursor:pointer; transition:.2s; display:inline-flex; align-items:center; gap:8px; }
  .btn:hover{ background:var(--yellow); color:var(--stage-deep); }
  .btn.solid{ background:var(--yellow); color:var(--stage-deep); }
  .btn.solid:hover{ background:transparent; color:var(--yellow); }

  header{ position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:18px 36px;
    background: linear-gradient(180deg, rgba(28,26,20,0.92), rgba(16,15,12,0.88));
    backdrop-filter:blur(6px); border-bottom:1px solid rgba(232,211,26,0.35); box-shadow: 0 1px 18px rgba(232,211,26,0.08); }
  .logo{ font-family:var(--font-display); font-weight:700; font-size:20px; letter-spacing:1px; color:var(--white); }
  .logo span{ color:var(--yellow); }
  nav ul{ display:flex; gap:30px; list-style:none; }
  nav a{ color:var(--paint); text-decoration:none; font-family:var(--font-mono); font-size:12.5px; letter-spacing:1px; text-transform:uppercase; opacity:.85; }
  nav a:hover{ color:var(--yellow); opacity:1; }
  @media (max-width:860px){ nav ul{ display:none; } }

  /* ===== HERO ===== */
  .hero-scroll{ position:relative; height:420vh; }
  .hero-stage{ position:sticky; top:0; height:100vh; width:100%; overflow:hidden; background:var(--stage); }

  .car-wrap{ position:absolute; inset:0; z-index:2; }
  .car-photo{ width:100%; height:100%; object-fit:cover; display:block; }

  .pin{ position:absolute; width:16px; height:16px; border-radius:50%; border:2px solid var(--yellow); box-shadow:0 0 0 0 rgba(232,211,26,0.6); z-index:5; }
  .pin::after{ content:""; position:absolute; inset:4px; border-radius:50%; background:var(--yellow); }
  .pin.pulse{ animation: pulsePin 1.6s infinite; }
  @keyframes pulsePin{ 0%{ box-shadow:0 0 0 0 rgba(232,211,26,0.55);} 70%{ box-shadow:0 0 0 14px rgba(232,211,26,0);} 100%{ box-shadow:0 0 0 0 rgba(232,211,26,0);} }

  .part-photo{ position:absolute; opacity:0; transform: scale(.5) translateY(-14px); transition: opacity .35s ease, transform .45s cubic-bezier(.34,1.56,.64,1); filter: drop-shadow(0 10px 16px rgba(0,0,0,0.7)); z-index:4; }
  .part-photo.on{ opacity:1; transform: scale(1) translateY(0); }

  #chargepipeImg{ top:52%; left:16%; width:12%; }
  #chargepipePin{ top:60%; left:24%; }

  #downpipeImg{ top:65%; left:39%; width:14%; }
  #downpipePin{ top:69%; left:46%; }

  #ecuPin{ top:38%; left:46%; }
  #ecuImg{ top:32%; left:39%; width:12%; }

  .hero-copy{ position:absolute; top:110px; left:6vw; right:6vw; z-index:6; max-width:480px; }
  .hero-copy h1{ font-family:var(--font-display); font-size:clamp(26px,8vw,58px); text-transform:uppercase; line-height:1.05; color:var(--white); margin:12px 0 16px; word-break:break-word; }
  .hero-copy h1 em{ color:var(--yellow); font-style:normal; }
  .hero-copy p{ color:var(--paint); font-size:clamp(13px,3.6vw,15px); line-height:1.6; max-width:420px; margin-bottom:24px; }
  .hero-text{ transform:translateX(7vw); margin-top:42px; }
  @media (max-width:600px){ .hero-text{ transform:none; margin-top:0; } }
  .hero-cta{ position:relative; display:inline-flex; align-items:center; gap:12px; padding:15px 30px; margin-top:24px;
    background:linear-gradient(105deg, var(--yellow), var(--gold-hi)); color:var(--stage-deep);
    font-family:var(--font-display); font-weight:600; font-size:15px; letter-spacing:0.5px; text-transform:uppercase; text-decoration:none;
    border-radius:32px;
    box-shadow:0 12px 26px rgba(232,211,26,0.22); transition:transform .2s ease, box-shadow .2s ease; }
  .hero-cta:hover{ transform:translateX(4px); box-shadow:0 14px 32px rgba(232,211,26,0.38); }
  .hero-cta svg{ width:16px; height:16px; flex-shrink:0; transition:transform .2s ease; }
  .hero-cta:hover svg{ transform:translateX(5px); }
  @media (max-width:600px){
    .hero-copy{ top:88px; left:5vw; right:5vw; max-width:none; }
    .hero-copy::before{ content:""; position:absolute; left:-16px; right:-16px; top:-16px; bottom:-16px; z-index:-1;
      background:linear-gradient(180deg, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.6) 65%, rgba(0,0,0,0) 100%);
      border-radius:18px; }
    .eyebrow{ font-size:10.5px; letter-spacing:2px; }
    .hero-copy h1{ font-size:clamp(24px,8vw,34px); }
    .hero-copy p{ font-size:12.5px; max-width:none; margin-bottom:18px; }
    .btn{ font-size:11px; padding:12px 18px; letter-spacing:1px; white-space:nowrap; }
    .hero-cta{ font-size:12.5px; padding:12px 20px; margin-top:16px; }
    .chapter-tag{ display:none; }
    .card-row{ display:none; }
  }

  .chapter-tag{ position:absolute; top:110px; right:6vw; z-index:6; text-align:right; font-family:var(--font-mono); color:var(--paint); font-size:11px; letter-spacing:2px; text-transform:uppercase; background:rgba(0,0,0,0.55); padding:14px 18px; border:1px solid rgba(232,211,26,0.3); opacity:0; transition:opacity .3s ease; }
  .chapter-tag .num{ font-family:var(--font-display); font-size:22px; color:var(--yellow); display:block; line-height:1.2; }

  .float-card{ position:relative; z-index:7; width:210px; background:rgba(5,5,5,0.94); border:1px solid rgba(232,211,26,0.35); border-radius:12px; padding:16px 16px 18px; opacity:0; transform:translateY(14px); transition: opacity .35s ease, transform .35s ease; pointer-events:none; }
  .float-card.on{ opacity:1; transform:translateY(0); }
  .float-card .fc-thumb{ width:100%; height:64px; object-fit:contain; margin-bottom:10px; }
  .float-card .swatch{ width:34px; height:34px; margin-bottom:10px; border-radius:6px; }
  .float-card .fc-name{ font-family:var(--font-display); font-size:15px; color:var(--white); text-transform:uppercase; }
  .float-card .fc-spec{ font-family:var(--font-mono); font-size:10.5px; color:var(--steel); margin:4px 0 10px; }
  .float-card .fc-price{ font-family:var(--font-mono); font-size:14px; color:var(--yellow); }

  .card-row{ position:absolute; left:6vw; bottom:8%; z-index:7; display:flex; gap:16px; flex-wrap:wrap; max-width:92vw; }

  .scroll-hint{ position:absolute; bottom:24px; left:50%; transform:translateX(-50%); font-family:var(--font-mono); font-size:11px; letter-spacing:2px; color:var(--steel); text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:8px; transition: opacity .3s; }
  .scroll-hint .bar{ width:1px; height:26px; background:var(--yellow); animation: pulse 1.6s infinite ease-in-out; }
  @keyframes pulse{ 0%,100%{opacity:.2} 50%{opacity:1} }

  /* ===== SHARED SECTIONS ===== */
  section{ padding:110px 6vw; position:relative; }
  .brand-strip{ display:flex; align-items:center; gap:18px; font-family:var(--font-mono); color:var(--steel); font-size:12px; text-transform:uppercase; letter-spacing:2px; margin-bottom:18px; }
  .brand-strip .dot{ width:6px; height:6px; background:var(--red); border-radius:50%; }

  .codes{ display:flex; gap:10px; flex-wrap:wrap; margin:34px 0 46px; }
  .code-btn{ font-family:var(--font-mono); font-size:14px; letter-spacing:1px; padding:10px 20px; border-radius:20px; border:1px solid rgba(232,211,26,0.2); background:transparent; color:var(--steel); cursor:pointer; }
  .code-btn.active,.code-btn:hover{ border-color:var(--yellow); color:var(--yellow); }

  .stage-cards{ display:flex; flex-wrap:wrap; gap:22px; margin-top:10px; align-items:stretch; }
  .stage-card{ flex:1 1 240px; background:var(--stage-deep); border-radius:16px; padding:28px 24px 26px; box-shadow:0 14px 30px rgba(0,0,0,0.35); border-top:4px solid var(--yellow); display:flex; flex-direction:column; }
  .stage-card[data-tier="2"]{ border-top-color:var(--gold-hi); }
  .stage-card[data-tier="3"]{ border-top-color:#e08a3a; }
  .stage-card[data-tier="4"]{ border-top-color:var(--red); }
  .stage-tag{ font-family:var(--font-mono); font-size:11px; color:var(--stage-deep); letter-spacing:1.5px; text-transform:uppercase; background:var(--yellow); border-radius:20px; padding:3px 12px; display:inline-block; align-self:flex-start; }
  .stage-card h3{ font-family:var(--font-display); font-size:23px; color:var(--white); text-transform:uppercase; margin:14px 0 4px; }
  .stage-items{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 4px; padding:0; list-style:none; }
  .stage-items li{ font-family:var(--font-mono); font-size:11.5px; color:var(--paint); background:rgba(232,211,26,0.07); border:1px solid rgba(232,211,26,0.22); border-radius:20px; padding:6px 13px; }
  .stage-note{ font-family:var(--font-mono); font-size:11px; color:var(--steel); margin-top:10px; }
  .stage-card .price-cta{ margin-top:auto; padding-top:16px; }
  .price-cta a{ font-family:var(--font-mono); font-size:11.5px; color:var(--yellow); text-decoration:none; letter-spacing:1px; }

  .blog-grid{ display:flex; flex-wrap:wrap; gap:22px; margin-top:40px; }
  .blog-card{ flex:1 1 260px; background:var(--stage-deep); border-radius:16px; padding:0 0 22px; box-shadow:0 14px 30px rgba(0,0,0,0.35); overflow:hidden; display:flex; flex-direction:column; }
  .blog-card .blog-thumb{ height:150px; background:rgba(232,211,26,0.06); }
  .blog-card .blog-body{ padding:20px 22px 0; display:flex; flex-direction:column; flex:1; }
  .blog-card .sku{ font-family:var(--font-mono); font-size:10.5px; color:var(--steel); }
  .blog-card h4{ font-family:var(--font-display); font-size:19px; color:var(--white); text-transform:uppercase; margin:8px 0 6px; }
  .blog-card .fit{ font-family:var(--font-mono); font-size:11px; color:var(--steel); line-height:1.6; margin-bottom:14px; }
  .blog-card .price-cta{ margin-top:auto; }

  .shop-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1px; background:rgba(232,211,26,0.15); border:1px solid rgba(232,211,26,0.15); margin-top:40px; }
  .shop-card{ background:var(--stage-deep); padding:24px; display:flex; flex-direction:column; }
  .shop-thumb{ height:130px; margin-bottom:16px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
  .shop-thumb img{ max-width:100%; max-height:100%; object-fit:contain; }
  .shop-card .sku{ font-family:var(--font-mono); font-size:10.5px; color:var(--steel); }
  .shop-card h4{ font-family:var(--font-display); font-size:20px; color:var(--white); text-transform:uppercase; margin:6px 0 4px; }
  .shop-card .fit{ font-family:var(--font-mono); font-size:11px; color:var(--steel); margin-bottom:12px; }
  .shop-card .price{ font-family:var(--font-mono); color:var(--yellow); font-size:17px; margin-bottom:16px; }
  .shop-card .rowbtns{ display:flex; gap:8px; margin-top:auto; }
  .shop-card .rowbtns button{ flex:1; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.5px; text-transform:uppercase; padding:10px 6px; background:transparent; border:1px solid rgba(232,211,26,0.25); color:var(--steel); cursor:pointer; }
  .shop-card .rowbtns button.active{ border-color:var(--yellow); color:var(--yellow); }
  .shop-note{ margin-top:24px; font-family:var(--font-mono); font-size:12px; color:var(--steel); }
  .shop-note b{ color:var(--paint); }

  .dryice{ background:var(--stage-deep); border-top:1px solid rgba(232,211,26,0.15); border-bottom:1px solid rgba(232,211,26,0.15); }
  .dryice-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:60px; }
  @media (max-width:900px){ .dryice-wrap{ grid-template-columns:1fr; } }
  .dryice-panel{ aspect-ratio:4/3; border:1px solid rgba(232,211,26,0.2); border-radius:16px; overflow:hidden; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); color:var(--steel); font-size:12px; letter-spacing:1px; text-transform:uppercase; background:repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 14px); }
  .dryice ul{ margin-top:18px; list-style:none; }
  .dryice li{ padding:10px 0; border-top:1px solid rgba(255,255,255,0.06); font-size:14px; color:var(--paint); display:flex; gap:10px; }
  .dryice li:first-child{ border-top:none; }
  .dryice li::before{ content:"◆"; color:var(--red); font-size:10px; }

  footer{ padding:50px 6vw; display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; border-top:1px solid rgba(232,211,26,0.15); font-family:var(--font-mono); font-size:12px; color:var(--steel); }
  footer a{ color:var(--yellow); text-decoration:none; }