/*
Theme Name: Trigger Baits
Theme URI: https://triggerbaits.de
Author: Trigger Baits
Author URI: https://triggerbaits.de
Description: Custom Swiss-Futuristic Theme fuer Trigger Baits mit scroll-gekoppelter 3D-Turntable-Produktshowcase. Komplett eigener Code, keine fremden Theme-Vorgaben.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: trigger-baits
*/

  :root{
    --black:#0a0a0a;
    --black-2:#111111;
    --off-white:#f4f2ee;
    --orange:#ea4a00;
    --orange-bright:#ff6a1f;
    --line: rgba(244,242,238,0.14);
    --mono: 'JetBrains Mono', monospace;
    --display: 'Space Grotesk', sans-serif;
    --body: 'Inter', sans-serif;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{background:var(--black); scroll-behavior:auto;}
  body{
    background:var(--black);
    color:var(--off-white);
    font-family:var(--body);
    overflow-x:hidden;
    cursor:default;
  }
  ::selection{ background:var(--orange); color:var(--black); }

  a{ color:inherit; text-decoration:none; }

  /* ---------- utility ---------- */
  .eyebrow{
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:.25em;
    text-transform:uppercase;
    color:var(--orange);
    display:flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow::before{
    content:"";
    width:18px; height:1px;
    background:var(--orange);
    display:inline-block;
  }
  .noise{
    pointer-events:none;
    position:fixed; inset:0;
    z-index:999;
    opacity:.035;
    mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .grid-overlay{
    pointer-events:none;
    position:fixed; inset:0;
    z-index:1;
    background-image:
      linear-gradient(to right, var(--line) 1px, transparent 1px),
      linear-gradient(to bottom, var(--line) 1px, transparent 1px);
    background-size: 100% 100%;
    background-position: 6.66% 0, 0 0;
    opacity:.35;
    display:none;
  }

  /* ---------- nav ---------- */
  header{
    position:fixed; top:0; left:0; right:0;
    z-index:200;
    display:flex; align-items:center; justify-content:space-between;
    padding:22px 5vw;
    mix-blend-mode:difference;
  }
  .brandmark{ display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:700; letter-spacing:.04em; font-size:15px; }
  .brandmark span{ color:var(--orange); }
  nav ul{ list-style:none; display:flex; gap:34px; }
  nav a{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; opacity:.75; transition:opacity .25s; }
  nav a:hover{ opacity:1; }
  .lang-toggle{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; display:flex; gap:6px; opacity:.8; }
  .lang-toggle .active{ color:var(--orange); }

  /* ---------- hero ---------- */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex; flex-direction:column; justify-content:center;
    padding:0 5vw;
    z-index:2;
  }
  .hero-inner{ max-width:1100px; padding-top:60px; }
  .hero h1{
    font-family:var(--display);
    font-weight:700;
    line-height:.92;
    letter-spacing:-.01em;
    font-size:clamp(52px, 10vw, 132px);
    text-transform:uppercase;
  }
  .hero h1 em{
    font-style:normal;
    color:var(--orange);
  }
  .hero p.lead{
    margin-top:26px;
    max-width:480px;
    font-size:16px;
    line-height:1.6;
    color:rgba(244,242,238,.68);
  }
  .hero .cta-row{
    margin-top:44px;
    display:flex; align-items:center; gap:28px;
  }
  .btn{
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:.18em;
    text-transform:uppercase;
    padding:16px 30px;
    border:1px solid var(--off-white);
    display:inline-block;
    position:relative;
    overflow:hidden;
    transition:color .3s;
  }
  .btn::before{
    content:"";
    position:absolute; inset:0;
    background:var(--orange);
    transform:translateX(-101%);
    transition:transform .35s cubic-bezier(.65,0,.35,1);
    z-index:-1;
  }
  .btn:hover{ color:var(--black); border-color:var(--orange); }
  .btn:hover::before{ transform:translateX(0); }
  .scroll-cue{
    font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
    opacity:.55; display:flex; align-items:center; gap:10px;
  }
  .scroll-cue .bar{ width:1px; height:34px; background:linear-gradient(var(--orange), transparent); animation:cue 1.8s ease-in-out infinite; }
  @keyframes cue{ 0%{ transform:scaleY(0); transform-origin:top;} 50%{ transform:scaleY(1); transform-origin:top;} 51%{transform-origin:bottom;} 100%{ transform:scaleY(0); transform-origin:bottom;} }

  .hero-meta{
    position:absolute; right:5vw; bottom:40px;
    font-family:var(--mono); font-size:11px; letter-spacing:.15em; text-align:right;
    color:rgba(244,242,238,.45);
    line-height:1.8;
  }

  /* ---------- orbit section: a scroll-coupled turntable ---------- */
  .orbit-section{
    position:relative;
    height:380vh;
    z-index:2;
    --glow: 234,74,0;
  }
  .orbit-pin{
    position:sticky; top:0;
    height:100vh;
    width:100%;
    overflow:hidden;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center;
    transition:background .6s ease;
  }
  .orbit-pin::before{
    content:"";
    position:absolute; inset:0;
    background:
      radial-gradient(ellipse at 50% 42%, rgba(var(--glow),0.16), transparent 52%);
    transition:background 1s ease;
    pointer-events:none;
  }
  .orbit-heading{
    position:absolute; top:56px; left:5vw; right:5vw;
    display:flex; justify-content:space-between; align-items:flex-start;
    z-index:5;
    pointer-events:none;
  }
  .orbit-heading h2{
    font-family:var(--display); font-weight:600; text-transform:uppercase;
    font-size:14px;
    letter-spacing:.08em;
    opacity:.7;
  }
  .orbit-counter{ font-family:var(--mono); font-size:13px; letter-spacing:.1em; opacity:.6; }
  .orbit-counter b{ color:var(--orange); font-weight:500; transition:color .5s ease; }

  .info-panel{
    position:relative;
    z-index:5;
    width:min(90vw, 560px);
    display:flex; flex-direction:column; align-items:center;
    margin-top:18px;
  }
  .info-panel .frame{
    position:relative;
    min-height:170px;
    width:100%;
  }
  .product-card{
    position:absolute; inset:0;
    opacity:0;
    display:flex; flex-direction:column; align-items:center;
    --accent: var(--orange);
    pointer-events:none;
  }
  .product-card.is-active{ pointer-events:auto; }
  .p-index{ font-family:var(--mono); font-size:11px; color:var(--accent); letter-spacing:.2em; margin-bottom:14px; display:block; transition:color .5s ease;}
  .product-card h3{
    font-family:var(--display); font-weight:700; text-transform:uppercase;
    font-size:clamp(30px,4.4vw,50px);
    line-height:.98;
    letter-spacing:-.01em;
  }
  .trigger-line{
    width:56px; height:2px; margin:16px 0;
    background:var(--accent);
    position:relative;
    transition:background .5s ease;
  }
  .trigger-line::after{
    content:"";
    position:absolute; inset:0;
    background:var(--accent);
    filter:blur(6px);
    opacity:.7;
  }
  .product-card .flavour{
    font-family:var(--mono); font-size:13px; letter-spacing:.12em; text-transform:uppercase;
    color:rgba(244,242,238,.55);
  }
  .product-card .spec-row{
    display:flex; gap:28px;
    margin-top:20px;
    justify-content:center;
  }
  .product-card .spec-row div{ font-size:12px; }
  .product-card .spec-row .k{ font-family:var(--mono); letter-spacing:.14em; text-transform:uppercase; color:rgba(244,242,238,.45); margin-bottom:6px; display:block; font-size:10px;}
  .product-card .spec-row .v{ font-family:var(--display); font-weight:500; font-size:15px; }
  .product-card .price{
    margin-top:18px;
    font-family:var(--mono); font-size:13px; color:var(--off-white);
  }
  .product-card .price b{ color:var(--accent); font-weight:500; transition:color .5s ease; }

  .dots{
    display:flex; gap:10px; margin-top:30px; justify-content:center;
  }
  .dots span{
    width:26px; height:2px; background:var(--line); position:relative; display:block; overflow:hidden;
  }
  .dots span i{
    position:absolute; inset:0; background:var(--orange); transform:scaleX(0); transform-origin:left; display:block; transition:transform .2s linear;
  }
  .dots span.is-active i{ transform:scaleX(1); }

  /* the turntable: one product at a time, big and centered, rotating on its
     vertical axis in direct lockstep with scroll — no circle, no queue. */
  .orbit-stage{
    position:relative;
    width:min(44vw, 420px);
    height:min(50vh, 460px);
    perspective:1500px;
    z-index:3;
  }
  .turntable-card{
    position:absolute;
    top:50%; left:50%;
    width:100%; height:100%;
    will-change:transform, opacity;
    transform-style:preserve-3d;
  }
  .turntable-card img{
    width:100%; height:100%; object-fit:contain; object-position:center bottom; display:block;
    filter:drop-shadow(0 22px 26px rgba(0,0,0,.55));
  }
  .turntable-card .sheen{
    position:absolute; inset:0;
    background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.24) 50%, transparent 62%);
    background-size:240% 240%;
    background-position:50% 50%;
    mix-blend-mode:overlay;
    pointer-events:none;
  }

  .orbit-axis-label{
    position:absolute; right:5vw; bottom:36px; transform:rotate(90deg); transform-origin:right center;
    font-family:var(--mono); font-size:10px; letter-spacing:.3em; text-transform:uppercase; opacity:.25;
    white-space:nowrap;
    z-index:5;
  }

  @media (prefers-reduced-motion: reduce){
    .turntable-card{ transition:opacity .4s ease; }
  }

  /* ---------- pillars ---------- */
  .pillars{
    position:relative; z-index:2;
    padding:160px 5vw 120px;
    border-top:1px solid var(--line);
  }
  .pillars-head{ max-width:640px; margin-bottom:80px; }
  .pillars-head h2{
    font-family:var(--display); font-weight:700; text-transform:uppercase;
    font-size:clamp(30px,4vw,52px); line-height:1.02; margin-top:20px;
  }
  .pillar-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .pillar{
    background:var(--black); padding:44px 34px;
  }
  .pillar .num{ font-family:var(--mono); color:var(--orange); font-size:13px; letter-spacing:.1em; }
  .pillar h3{ font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:22px; margin-top:22px; }
  .pillar p{ margin-top:14px; font-size:14px; line-height:1.65; color:rgba(244,242,238,.65); }

  /* ---------- footer ---------- */
  footer{
    position:relative; z-index:2;
    padding:80px 5vw 40px;
    border-top:1px solid var(--line);
    display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:40px;
  }
  footer .brandmark{ font-size:22px; }
  footer .cols{ display:flex; gap:80px; flex-wrap:wrap; }
  footer .col h4{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(244,242,238,.45); margin-bottom:14px; }
  footer .col a, footer .col span{ display:block; font-size:13px; margin-bottom:9px; color:rgba(244,242,238,.8); }
  .foot-bottom{
    width:100%;
    margin-top:60px; padding-top:24px; border-top:1px solid var(--line);
    display:flex; justify-content:space-between; font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:rgba(244,242,238,.4);
  }

  @media (max-width:900px){
    .orbit-section{ height:220vh; }
    .orbit-heading{ flex-direction:row; top:84px; }
    .orbit-heading h2{ font-size:11px; }
    .orbit-pin{ padding-top:60px; }
    .orbit-stage{ width:64vw; height:38vh; }
    .info-panel{ width:92vw; }
    .product-card .spec-row{ gap:20px; }
    .pillar-grid{ grid-template-columns:1fr; }
    nav{ display:none; }
  }

/* ---------- WooCommerce Grundkompatibilitaet ----------
   Deckt Shop/Produkt/Warenkorb/Checkout-Seiten mit dem Marken-Look ab.
   Bewusst schlicht gehalten -- ein eigenes Design fuer diese Seiten ist
   ein separater, spaeterer Schritt. */
.site-main{
  position:relative; z-index:2;
  max-width:1200px;
  margin:0 auto;
  padding:160px 5vw 120px;
}
.woocommerce ul.products{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); list-style:none; }
.woocommerce ul.products li.product{ background:var(--black); padding:28px; text-align:left; }
.woocommerce ul.products li.product img{ width:100%; height:auto; margin-bottom:18px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title{ font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:16px; }
.woocommerce ul.products li.product .price{ font-family:var(--mono); color:var(--orange); margin-top:8px; display:block; }
.woocommerce div.product .product_title{ font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:clamp(28px,4vw,44px); }
.woocommerce div.product p.price{ font-family:var(--mono); color:var(--orange); font-size:20px; margin:16px 0; }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit{
  font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  padding:16px 30px; border:1px solid var(--off-white); background:transparent; color:var(--off-white);
  border-radius:0; transition:color .3s, background .3s;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover{ background:var(--orange); border-color:var(--orange); color:var(--black); }
.woocommerce table.shop_table{ border:1px solid var(--line); border-collapse:collapse; width:100%; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td{ border:1px solid var(--line); padding:14px; font-size:14px; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row select, .woocommerce form .form-row textarea{
  background:var(--black-2); border:1px solid var(--line); color:var(--off-white); padding:12px; width:100%;
}
.woocommerce-message, .woocommerce-info, .woocommerce-error{
  background:var(--black-2); border-left:3px solid var(--orange); padding:16px 20px; font-size:14px; list-style:none;
}

/* ---------- Seiten & Blog (page.php / single.php / archive.php) ----------
   Schlichter als die Startseite, aber in derselben Sprache: gleiche
   Schriften, gleiche Akzentfarbe, gleiche Abstaende -- damit nichts wirkt
   wie ein Fremdkoerper, wenn spaeter Impressum, Ueber-uns oder Blogposts
   dazukommen. */
.page-head, .entry-head{
  max-width:720px;
  margin-bottom:60px;
}
.page-head h1, .entry-head h1{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(32px,5vw,56px); line-height:1.02; margin-top:16px;
}
.entry-meta{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(244,242,238,.45); margin-top:14px;
}
.entry-thumb{ margin-bottom:48px; }
.entry-thumb img{ width:100%; height:auto; display:block; }

.entry-content{
  max-width:720px;
  font-size:16px; line-height:1.75; color:rgba(244,242,238,.85);
}
.entry-content p{ margin-bottom:22px; }
.entry-content h2{ font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:26px; margin:48px 0 18px; }
.entry-content h3{ font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:20px; margin:36px 0 14px; }
.entry-content a{ color:var(--orange); text-decoration:underline; text-underline-offset:3px; }
.entry-content ul, .entry-content ol{ margin:0 0 22px 22px; }
.entry-content li{ margin-bottom:8px; }
.entry-content blockquote{ border-left:2px solid var(--orange); padding-left:20px; margin:28px 0; color:rgba(244,242,238,.65); font-style:italic; }
.entry-content img{ max-width:100%; height:auto; margin:28px 0; }
.entry-content table{ border-collapse:collapse; width:100%; margin-bottom:22px; }
.entry-content table th, .entry-content table td{ border:1px solid var(--line); padding:10px 14px; text-align:left; }

/* Blog-Uebersicht (archive.php) */
.post-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.post-card{ background:var(--black); padding:32px; display:flex; flex-direction:column; }
.post-card .entry-meta{ margin-top:0; margin-bottom:14px; }
.post-card h2{ font-family:var(--display); font-weight:600; text-transform:uppercase; font-size:19px; line-height:1.15; }
.post-card h2 a:hover{ color:var(--orange); }
.post-card p{ margin-top:14px; font-size:14px; line-height:1.6; color:rgba(244,242,238,.65); }
.post-card .read-more{
  margin-top:20px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--orange);
}
.pagination{
  margin-top:60px; display:flex; gap:20px; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
}
.pagination a{ opacity:.7; } .pagination a:hover{ opacity:1; color:var(--orange); }

/* 404 */
.error-404{ text-align:center; padding:220px 5vw 160px; }
.error-404 .code{ font-family:var(--mono); color:var(--orange); font-size:14px; letter-spacing:.3em; }
.error-404 h1{ font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:clamp(40px,7vw,80px); margin:20px 0; }
.error-404 p{ color:rgba(244,242,238,.65); margin-bottom:36px; }