/*
Theme Name: BeAppi
Theme URI: https://beappi.co.uk
Author: BeAppi
Author URI: https://beappi.co.uk
Description: Official BeAppi studio site — a one-page showcase for MadMac, SOLACE and TableSyncer. Dark theme, violet→sky gradient, fully responsive.
Version: 1.4.3
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: Proprietary
License URI: https://beappi.co.uk
Text Domain: beappi
*/

/* ============================================================
   BeAppi — studio site styles
   ============================================================ */

:root{
  --bg:        #07070c;
  --bg-2:      #0c0c15;
  --surface:   #11111c;
  --surface-2: #16162400;
  --line:      rgba(255,255,255,.08);
  --line-2:    rgba(255,255,255,.14);
  --text:      #f3f3f8;
  --muted:     #a3a3b8;
  --muted-2:   #6f6f86;

  --violet:    #a78bfa;
  --sky:       #38bdf8;

  /* product accents */
  --mm-a:#ff7a18; --mm-b:#ff2d2d;
  --sol-a:#f5d48a; --sol-b:#c9a24a;
  --ts-a:#34d399; --ts-b:#0ea5e9;

  --radius: 20px;
  --radius-sm: 12px;
  --max: 1140px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 24px}
h1,h2,h3,.brand-name{font-family:'Space Grotesk',sans-serif;letter-spacing:-.02em;line-height:1.1}
a{color:inherit;text-decoration:none}
img,svg{display:block}

.grad-text{
  background:linear-gradient(120deg,var(--violet),var(--sky));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;font-weight:600;font-family:'Space Grotesk',sans-serif;
  padding:13px 24px;border-radius:999px;cursor:pointer;border:1px solid transparent;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, border-color .25s;
  font-size:.98rem;
}
.btn-lg{padding:16px 34px;font-size:1.08rem}
.btn-primary{
  background:linear-gradient(120deg,var(--violet),var(--sky));
  color:#0a0a12;box-shadow:0 8px 30px rgba(99,102,241,.35);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(99,102,241,.5)}
.btn-ghost{border-color:var(--line-2);color:var(--text);background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:var(--violet);transform:translateY(-2px)}
.btn-product{background:var(--text);color:#0a0a12}
.btn-product:hover{transform:translateY(-2px)}

/* ---------- Nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  padding:14px 0;transition:background .3s,backdrop-filter .3s,border-color .3s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{background:rgba(7,7,12,.78);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px}
.brand-name{font-weight:700;font-size:1.25rem}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{color:var(--muted);font-weight:500;font-size:.95rem;transition:color .2s}
.nav-links a:hover{color:var(--text)}
.nav-cta{
  color:var(--text)!important;border:1px solid var(--line-2);
  padding:9px 18px;border-radius:999px;transition:border-color .2s,background .2s;
}
.nav-cta:hover{border-color:var(--violet);background:rgba(167,139,250,.12)}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.nav-toggle span{width:24px;height:2px;background:var(--text);border-radius:2px;transition:.3s}

/* ---------- Hero ---------- */
.hero{position:relative;padding:170px 0 110px;overflow:hidden}
.hero-glow{
  position:absolute;top:-220px;left:50%;transform:translateX(-50%);
  width:900px;height:700px;pointer-events:none;
  background:
    radial-gradient(closest-side, rgba(167,139,250,.30), transparent 70%),
    radial-gradient(closest-side, rgba(56,189,248,.22), transparent 70%);
  background-position:30% 30%, 70% 60%;background-repeat:no-repeat;
  filter:blur(20px);opacity:.9;
}
.hero-inner{position:relative;text-align:center;max-width:860px}
.eyebrow{
  display:inline-block;font-size:.82rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--violet);
  border:1px solid var(--line-2);padding:7px 16px;border-radius:999px;
  background:rgba(167,139,250,.06);
}
.hero h1{font-size:clamp(2.6rem,6.5vw,4.8rem);font-weight:700;margin:22px 0 18px}
.hero-sub{font-size:clamp(1.05rem,2vw,1.3rem);color:var(--muted);max-width:640px;margin:0 auto}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.hero-stats{
  display:flex;justify-content:center;gap:48px;margin-top:64px;flex-wrap:wrap;
}
.hero-stats div{display:flex;flex-direction:column;align-items:center}
.hero-stats strong{font-family:'Space Grotesk';font-size:2rem;font-weight:700}
.hero-stats span{color:var(--muted-2);font-size:.9rem}

/* ---------- Sections ---------- */
.section{padding:96px 0}
.section--alt{background:linear-gradient(180deg,rgba(7,7,12,.55),rgba(12,12,21,.72))}
.section-head{max-width:680px;margin:0 auto 56px;text-align:center}
.section-head h2{font-size:clamp(1.9rem,4vw,2.8rem);font-weight:700;margin:16px 0 14px}
.section-head p{color:var(--muted);font-size:1.08rem}

/* ---------- Products ---------- */
.products{display:flex;flex-direction:column;gap:28px}
.product{
  display:grid;grid-template-columns:300px 1fr;gap:36px;align-items:center;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:40px;position:relative;overflow:hidden;
  transition:transform .35s var(--ease), border-color .35s;
}
.product::before{
  content:"";position:absolute;inset:0;opacity:.10;pointer-events:none;
  background:radial-gradient(600px 300px at 0% 0%, var(--accent-a), transparent 60%);
  transition:opacity .35s;
}
.product:hover{transform:translateY(-4px);border-color:var(--accent-b)}
.product:hover::before{opacity:.18}
.product--madmac{--accent-a:var(--mm-a);--accent-b:var(--mm-b)}
.product--solace{--accent-a:var(--sol-a);--accent-b:var(--sol-b)}
.product--table {--accent-a:var(--ts-a);--accent-b:var(--ts-b)}
.product-visual{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:1;border-radius:var(--radius-sm);
  background:linear-gradient(150deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border:1px solid var(--line);position:relative;z-index:1;
}
.product-visual svg{width:66%;height:66%;filter:drop-shadow(0 8px 24px rgba(0,0,0,.5))}
/* TableSyncer logo (transparent PNG) sits on the same dark tile as the other two. */
.product-visual img.ts-logo{max-width:64%;max-height:70%;width:auto;height:auto;filter:drop-shadow(0 8px 24px rgba(0,0,0,.5))}
.product-body{position:relative;z-index:1}
.product-tag{
  display:inline-block;font-size:.74rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-b);
  border:1px solid var(--line-2);padding:5px 12px;border-radius:999px;margin-bottom:14px;
}
.product h3{font-size:2rem;margin-bottom:6px}
.product-line{font-weight:600;color:var(--text);font-size:1.1rem;margin-bottom:12px}
.product-body>p{color:var(--muted);margin-bottom:18px}
.product-points{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:24px}
.product-points li{position:relative;padding-left:26px;color:var(--muted);font-size:.97rem}
.product-points li::before{
  content:"";position:absolute;left:0;top:.55em;width:12px;height:12px;border-radius:50%;
  background:linear-gradient(120deg,var(--accent-a),var(--accent-b));
}
.product-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.product-meta{color:var(--muted-2);font-size:.85rem}

/* ---------- Cards ---------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:28px;transition:transform .3s var(--ease),border-color .3s;
}
.card:hover{transform:translateY(-4px);border-color:var(--line-2)}
.card-ico{font-size:1.8rem;margin-bottom:14px}
.card h3{font-size:1.18rem;margin-bottom:8px}
.card p{color:var(--muted);font-size:.94rem}

/* ---------- About ---------- */
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.about-grid h2{font-size:clamp(1.8rem,3.4vw,2.5rem);margin:16px 0 18px}
.about-grid p{color:var(--muted);margin-bottom:16px}
.about-grid .btn{margin-top:10px}
.about-panel{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:34px;
}
.about-row{display:flex;align-items:center;gap:12px;font-family:'Space Grotesk';font-weight:600;font-size:1.1rem;padding:14px 0}
.about-row em{font-style:normal;color:var(--muted-2);font-weight:400;font-size:.92rem;margin-left:auto;font-family:'Inter'}
.dot{width:12px;height:12px;border-radius:50%}
.dot--mm{background:linear-gradient(120deg,var(--mm-a),var(--mm-b))}
.dot--sol{background:linear-gradient(120deg,var(--sol-a),var(--sol-b))}
.dot--ts{background:linear-gradient(120deg,var(--ts-a),var(--ts-b))}
.about-divider{height:1px;background:var(--line);margin:14px 0}
.about-foot{color:var(--muted-2);font-size:.88rem}

/* ---------- CTA ---------- */
.cta{padding:110px 0;position:relative;overflow:hidden;background:rgba(12,12,21,.62)}
.cta-inner{text-align:center;max-width:640px;margin:0 auto}
.cta h2{font-size:clamp(2rem,4.5vw,3rem);margin-bottom:14px}
.cta p{color:var(--muted);font-size:1.1rem;margin-bottom:30px}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--line);padding:40px 0}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.footer-brand{display:flex;flex-direction:column}
.footer-tag{color:var(--muted-2);font-size:.88rem}
.footer-links{display:flex;gap:22px}
.footer-links a{color:var(--muted);font-size:.92rem;transition:color .2s}
.footer-links a:hover{color:var(--text)}
.footer-copy{color:var(--muted-2);font-size:.85rem}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
/* staggered children within a revealed group */
.reveal.in [data-stagger]{animation:rise .6s var(--ease) both}

/* ============================================================
   Animations — "show off what BeAppi is"
   ============================================================ */

/* Falling-stars background (canvas drawn by app.js) */
.bg-stars{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:-1;pointer-events:none;display:block;
}

/* Scroll-progress bar (top of page) */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:60;
  background:linear-gradient(90deg,var(--violet),var(--sky));
  box-shadow:0 0 12px rgba(56,189,248,.6);
  transition:width .08s linear;
}

/* Living hero aurora — drifting core + two orbiting orbs */
.hero-glow{animation:glow-drift 16s ease-in-out infinite alternate}
@keyframes glow-drift{
  0%  {transform:translateX(-50%) translateY(0)      scale(1);   opacity:.85}
  50% {transform:translateX(-46%) translateY(18px)   scale(1.08);opacity:1}
  100%{transform:translateX(-54%) translateY(-12px)  scale(1.04);opacity:.9}
}
.hero-glow::before,.hero-glow::after{
  content:"";position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;
}
.hero-glow::before{
  width:340px;height:340px;top:40px;left:6%;
  background:radial-gradient(closest-side,rgba(167,139,250,.45),transparent 70%);
  animation:orbit-a 13s ease-in-out infinite alternate;
}
.hero-glow::after{
  width:300px;height:300px;top:120px;right:4%;
  background:radial-gradient(closest-side,rgba(56,189,248,.40),transparent 70%);
  animation:orbit-b 17s ease-in-out infinite alternate;
}
@keyframes orbit-a{0%{transform:translate(0,0)}100%{transform:translate(80px,60px)}}
@keyframes orbit-b{0%{transform:translate(0,0)}100%{transform:translate(-90px,40px)}}

/* Hero text — dramatic staggered entrance */
.hero .eyebrow{animation:drop-in .8s var(--ease) both}
.hero h1{animation:rise-in 1s var(--ease) .12s both}
.hero-sub{animation:rise-in 1s var(--ease) .26s both}
.hero-actions{animation:rise-in 1s var(--ease) .40s both}
.hero-stats{animation:rise-in 1s var(--ease) .54s both}
@keyframes rise-in{from{opacity:0;transform:translateY(34px) scale(.98);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes drop-in{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}

/* "feeling." — extra alive: glow pulse on the gradient word */
.hero h1 .grad-text{animation:shimmer 7s linear infinite, word-glow 3.6s ease-in-out infinite}
@keyframes word-glow{0%,100%{filter:drop-shadow(0 0 0 rgba(56,189,248,0))}50%{filter:drop-shadow(0 0 22px rgba(56,189,248,.45))}}

/* Primary button — breathing glow + sheen sweep */
.btn-primary{position:relative;overflow:hidden;animation:btn-pulse 3.2s ease-in-out infinite}
@keyframes btn-pulse{0%,100%{box-shadow:0 8px 30px rgba(99,102,241,.35)}50%{box-shadow:0 10px 42px rgba(56,189,248,.6)}}
.btn-primary::after{
  content:"";position:absolute;top:0;left:-80%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-20deg);animation:btn-sheen 3.6s ease-in-out infinite;pointer-events:none;
}
@keyframes btn-sheen{0%,60%{left:-80%}85%,100%{left:140%}}

/* Infinity stat slow spin */
.hero-stats div:last-child strong{display:inline-block;animation:inf-spin 9s linear infinite}
@keyframes inf-spin{to{transform:rotate(360deg)}}


/* Gradient-text shimmer */
.grad-text{
  background:linear-gradient(120deg,var(--violet),var(--sky),var(--violet));
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 7s linear infinite;
}
@keyframes shimmer{to{background-position:220% 0}}

/* Floating product logos */
.product-visual svg{animation:float 6s ease-in-out infinite}
.product--solace .product-visual svg{animation-duration:7.5s}
.product--table  .product-visual img.ts-logo{animation:float 5.2s ease-in-out infinite}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-10px)}
}

/* SOLACE rings gently pulse */
.product--solace .product-visual svg circle{transform-origin:32px 32px;animation:ring-pulse 4.5s ease-in-out infinite}
@keyframes ring-pulse{0%,100%{opacity:.65}50%{opacity:1}}

/* Card hover: lift + sheen sweep + accent glow */
.card{position:relative;overflow:hidden}
.card::after{
  content:"";position:absolute;top:0;left:-60%;width:50%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.10),transparent);
  transform:skewX(-18deg);transition:left .6s var(--ease);pointer-events:none;
}
.card:hover::after{left:130%}
.card:hover{box-shadow:0 18px 50px rgba(0,0,0,.4)}
.card:hover .card-ico{animation:pop .5s var(--ease)}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.25) rotate(-6deg)}100%{transform:scale(1)}}

/* Product card sheen on hover */
.product::after{
  content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.07),transparent);
  transform:skewX(-18deg);transition:left .75s var(--ease);pointer-events:none;z-index:0;
}
.product:hover::after{left:140%}

/* Brand B-smiley — alive: idle float, blink, cheeky bounce on hover */
.brand-mark{display:inline-flex}
.brand-mark svg{overflow:visible}
.be-mark{transform-box:fill-box;transform-origin:center;animation:be-float 4.5s var(--ease) infinite}
@keyframes be-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2px) rotate(-1.5deg)}}
.be-eye{transform-box:fill-box;transform-origin:center;animation:be-blink 5s steps(1) infinite}
@keyframes be-blink{0%,92%,100%{transform:scaleY(1)}94%,97%{transform:scaleY(.18)}}
.brand:hover .be-mark{animation:be-bounce .7s var(--ease)}
@keyframes be-bounce{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-5px) rotate(-7deg)}60%{transform:translateY(0) rotate(5deg)}}

/* Stats count-up start state */
.hero-stats strong{font-variant-numeric:tabular-nums}

/* Generic rise used for stagger */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* 3D tilt support for product cards (driven by app.js) */
.products{perspective:1200px}
.product{transform-style:preserve-3d;will-change:transform}
.product .product-visual,.product .product-body{transform:translateZ(0);transition:transform .3s var(--ease)}
.product.tilting .product-visual{transform:translateZ(38px)}
.product.tilting .product-body{transform:translateZ(18px)}

/* Magnetic scroll-parallax hook (app.js sets --py) */
[data-parallax]{transform:translateY(var(--py,0))}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .product{grid-template-columns:1fr;gap:24px;padding:30px}
  .product-visual{max-width:140px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .about-grid{grid-template-columns:1fr;gap:32px}
}
@media(max-width:680px){
  .nav-links{
    position:fixed;top:62px;right:16px;left:16px;flex-direction:column;gap:16px;
    background:rgba(12,12,21,.97);backdrop-filter:blur(14px);
    border:1px solid var(--line);border-radius:16px;padding:22px;
    transform:translateY(-10px);opacity:0;pointer-events:none;transition:.25s;
  }
  .nav-links.open{transform:none;opacity:1;pointer-events:auto}
  .nav-toggle{display:flex}
  .hero-stats{gap:32px}
  .cards{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1!important;transform:none!important}
  .hero .eyebrow,.hero h1,.hero-sub,.hero-actions,.hero-stats{opacity:1!important;transform:none!important;filter:none!important}
  .product .product-visual,.product .product-body{transform:none!important}
}