/* ============================================================================
   TRAKSHYM AUTO-PLAY DECK  —  deck.css
   ----------------------------------------------------------------------------
   Four slides that advance on their own every 30 seconds.
   Colours are the Trakshym brand colours. EDIT THEM HERE.
   ============================================================================ */
:root{
  --brand:      #EC9249;   /* primary orange */
  --brand-deep: #C76837;   /* darker orange — bold text, numbers */
  --brand-soft: #FDF1E7;   /* peach panel */
  --bg:         #FFFFFF;
  --ink:        #282827;
  --muted:      #6E7278;
  --card:       #F7F8FA;
  --line:       #E3E6EA;

  --pad:        clamp(20px, 2.4vw, 46px);
  --gap:        clamp(11px, 1.05vw, 18px);
  --radius:     18px;

  --slide-time: 30s;       /* MUST match SLIDE_SECONDS in deck.js */

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
/* dvh tracks the real visible area on iPad once Safari's bars settle */
@supports (height:100dvh){ html,body{ height:100dvh; } }

body{
  margin:0; font-family:var(--sans); color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; overflow:hidden;
  -webkit-user-select:none; user-select:none; cursor:default;
  display:flex; flex-direction:column; padding:var(--pad); gap:clamp(10px,1.2vw,20px);

  /* ---- touch screens (iPad kiosk) ---- */
  overscroll-behavior:none;               /* no rubber-band bounce      */
  -webkit-tap-highlight-color:transparent;/* no grey flash on tap       */
  -webkit-touch-callout:none;             /* no menu on long press      */
}
h1,h2,h3,p{ margin:0; }
img{ display:block; max-width:100%; }

/* ---------------------------------------------------------------- background */
.bg{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background:var(--bg); }
.bloom{ position:absolute; border-radius:50%; filter:blur(95px); }
.bloom.n1{ width:54vw; height:54vw; left:-18vw; top:-22vw;
           background:radial-gradient(circle, rgba(236,146,73,.30) 0%, transparent 70%);
           animation:drift1 32s ease-in-out infinite; }
.bloom.n2{ width:46vw; height:46vw; right:-15vw; top:10vh;
           background:radial-gradient(circle, rgba(236,146,73,.20) 0%, transparent 70%);
           animation:drift2 38s ease-in-out infinite; }
.bloom.n3{ width:48vw; height:48vw; left:34vw; bottom:-26vw;
           background:radial-gradient(circle, rgba(199,104,55,.13) 0%, transparent 72%);
           animation:drift3 44s ease-in-out infinite; }
@keyframes drift1{ 50%{ transform:translate3d(7vw,5vh,0) scale(1.14); } }
@keyframes drift2{ 50%{ transform:translate3d(-8vw,7vh,0) scale(1.10); } }
@keyframes drift3{ 50%{ transform:translate3d(5vw,-6vh,0) scale(1.16); } }
.mesh{ position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(40,40,39,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(40,40,39,.045) 1px, transparent 1px);
  background-size:62px 62px;
  -webkit-mask-image:radial-gradient(115% 80% at 50% 25%, #000 0%, transparent 76%);
          mask-image:radial-gradient(115% 80% at 50% 25%, #000 0%, transparent 76%); }

/* ---------------------------------------------------------------- top bar */
.topbar{ flex:none; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.topbar .lockup{ height:clamp(38px,3.4vw,56px); width:auto; mix-blend-mode:multiply; }
.counter{ font-size:clamp(11px,.9vw,15px); font-weight:700; letter-spacing:.16em; color:var(--muted); }
.counter b{ color:var(--brand-deep); font-size:1.3em; }

/* ---------------------------------------------------------------- stage */
.stage{ position:relative; flex:1; min-height:0;
        /* the swipe area: stops Safari hijacking the gesture for
           zoom, edge-swipe-back or scroll bounce */
        touch-action:none; }
.slide{
  position:absolute; inset:0; display:flex; flex-direction:column;
  gap:clamp(11px,1.35vw,24px);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(14px) scale(.995);
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1), visibility .6s;
}
.slide.active{ opacity:1; visibility:visible; pointer-events:auto; transform:none; }

.eyebrow{ font-size:clamp(10px,.76vw,13px); letter-spacing:.2em; text-transform:uppercase;
          color:var(--brand-deep); font-weight:700; }
.title{ font-size:clamp(28px,3.5vw,58px); line-height:1.06; letter-spacing:-.028em; font-weight:700; }
.title .hl{ color:var(--brand-deep); }
.kicker{ flex:none; text-align:center; font-weight:700; color:var(--brand-deep);
         font-size:clamp(11.5px,1.02vw,18px); }

/* entrance animations — replayed every time a slide becomes active */
@keyframes rise{ from{ opacity:0; transform:translateY(26px); } }
@keyframes pop { from{ opacity:0; transform:translateY(18px) scale(.94); } }
@keyframes wipe{ from{ opacity:0; transform:translateX(-22px); } }

.slide.active .head-in    { animation:wipe .65s cubic-bezier(.2,.8,.2,1) both; }
.slide.active .head-in.d2 { animation-delay:.09s; }
.slide.active .stag > *   { animation:pop .62s cubic-bezier(.2,.8,.2,1) both;
                            animation-delay:calc(.22s + var(--i,0) * 70ms); }
.slide.active .kicker     { animation:rise .6s cubic-bezier(.2,.8,.2,1) both; animation-delay:.75s; }

/* ---------------------------------------------------------------- cards */
.grid{ display:grid; gap:var(--gap); flex:1; min-height:0; grid-auto-rows:1fr; }
.grid.c3{ grid-template-columns:repeat(3,1fr); }
.grid.c5{ grid-template-columns:repeat(5,1fr); }

.card{ border:1px solid var(--line); border-radius:var(--radius); background:var(--card);
       padding:clamp(13px,1.4vw,28px);
       display:flex; flex-direction:column; justify-content:center; gap:clamp(7px,.7vw,12px); }
.card h3{ font-size:clamp(14px,1.24vw,23px); font-weight:700; letter-spacing:-.012em; line-height:1.2; }
.card p{ font-size:clamp(10.5px,.86vw,15px); line-height:1.5; color:var(--muted); }
.card .tagline{ color:var(--brand-deep); font-weight:700; font-size:clamp(10.5px,.88vw,15.5px); line-height:1.35; }
.card .forwho{ margin-top:auto; padding-top:clamp(7px,.7vw,13px); border-top:1px solid var(--line); }
.card .forwho .lab{ font-size:clamp(8px,.62vw,10.5px); letter-spacing:.16em; text-transform:uppercase;
                    color:var(--muted); font-weight:700; }
.card .forwho .val{ font-size:clamp(10px,.8vw,14px); font-weight:700; margin-top:3px; }

.badge{ width:clamp(32px,2.6vw,48px); height:clamp(32px,2.6vw,48px); border-radius:50%; flex:none;
        display:grid; place-items:center; background:var(--brand); color:#fff; }
.badge svg{ width:52%; height:52%; }

/* client logo wall */
.logocard{ border:1px solid var(--line); border-radius:var(--radius); background:var(--card);
           display:grid; place-items:center; padding:clamp(12px,1.4vw,30px); overflow:hidden; }
/* artwork is backed with exactly var(--card), so this card must keep that colour */
.logocard img{ max-height:58%; max-width:78%; width:auto; height:auto; object-fit:contain; }

/* ---------------------------------------------------------------- controls */
.controls{ flex:none; display:flex; align-items:center; gap:clamp(12px,1.4vw,24px); }
.dots{ display:flex; gap:9px; flex:none; }
.dot{ width:9px; height:9px; border-radius:50%; border:none; padding:0; cursor:pointer;
      background:var(--line); transition:background .35s, transform .35s, width .35s;
      position:relative; touch-action:manipulation; }
/* invisible 44px target around each dot — Apple's minimum for a fingertip */
.dot::after{ content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
             width:44px; height:44px; }
.dot:hover{ background:#C9CED6; }
.dot.on{ background:var(--brand); width:30px; border-radius:99px; }

.bar{ flex:1; height:4px; border-radius:99px; background:var(--line); overflow:hidden; }
.bar span{ display:block; height:100%; width:0; border-radius:99px;
           background:linear-gradient(90deg,var(--brand),var(--brand-deep));
           animation:fill var(--slide-time) linear forwards; }
@keyframes fill{ to{ width:100%; } }
body.paused .bar span{ animation-play-state:paused; }

.hint{ flex:none; font-size:clamp(9.5px,.72vw,12.5px); color:var(--muted); }
.hint kbd{ font-family:ui-monospace,Menlo,monospace; font-size:.92em; padding:2px 6px;
           border-radius:5px; border:1px solid #D3D8DE; background:var(--card); }

/* ---------------------------------------------------------------- responsive */
/* iPad landscape (1024-1366 wide) keeps the full-width layouts —
   only genuinely narrow screens drop to fewer columns. */
@media (max-width:1000px){
  .grid.c3{ grid-template-columns:repeat(2,1fr); }
  .grid.c5{ grid-template-columns:repeat(3,1fr); }
}
/* iPad portrait: stack tighter so ten cards still fit above the fold */
@media (max-width:840px){
  .grid.c3{ grid-template-columns:repeat(2,1fr); }
  .grid.c5{ grid-template-columns:repeat(2,1fr); }
  /* three product cards would leave an orphan in a 2-column grid */
  .grid.threeup{ grid-template-columns:1fr; }
  .title{ font-size:clamp(24px,4.4vw,40px); }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .bar span{ animation:fill var(--slide-time) linear forwards !important; }
}