/* EnterGage — shared design system (tokens, nav, footer, video frames, ambient field)
   Extracted from the homepage 2026-08-02; used by index.html, dtc.html and future pages.
   Page-specific layout stays inline per page. */

:root{
  --field:#f04a24;
  --field-deep:#dc3f1c;
  --cream:#fff3d8;
  --ink:#c92f19;
  --wine:#731f17;
  --peach:#e8b7a2;
  --ease-pop:cubic-bezier(.16,1,.3,1);
  --ease-exit:cubic-bezier(.55,0,.2,1);
  --ease-draw:cubic-bezier(.65,0,.35,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"DM Sans",sans-serif;
  background:var(--field);
  color:var(--cream);
}
img{max-width:100%}

/* ---------- ambient orange field (hero backgrounds) ---------- */
.field{position:absolute;inset:0;overflow:hidden}
.rays{position:absolute;left:50%;top:50%;width:240vmax;height:240vmax;transform:translate(-50%,-50%);
  background:repeating-conic-gradient(rgba(255,243,216,.07) 0deg 6deg,transparent 6deg 16deg);
  border-radius:50%;animation:raysTurn 160s linear infinite}
@keyframes raysTurn{to{transform:translate(-50%,-50%) rotate(360deg)}}
.halo{position:absolute;left:50%;top:52%;width:120vmax;height:120vmax;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,214,140,.30) 0%,rgba(240,74,36,0) 55%)}
.dots{position:absolute;inset:0;
  background-image:radial-gradient(rgba(115,31,23,.16) 1.3px,transparent 1.6px);background-size:26px 26px}
.sprocket{position:absolute;border-radius:6px;background:rgba(255,243,216,.16);
  animation:drift 12s ease-in-out infinite alternate}
.sprocket.s1{width:26px;height:38px;left:7%;top:22%;animation-duration:13s}
.sprocket.s2{width:18px;height:26px;left:13%;top:66%;animation-delay:-4s}
.sprocket.s3{width:32px;height:46px;right:9%;top:18%;animation-delay:-7s;animation-duration:15s}
.sprocket.s4{width:16px;height:24px;right:16%;top:71%;animation-delay:-2s}
.sprocket.s5{width:22px;height:32px;right:30%;top:9%;animation-delay:-9s;animation-duration:11s}
@keyframes drift{from{transform:translateY(-14px) rotate(-7deg)}to{transform:translateY(16px) rotate(8deg)}}

/* ---------- nav ---------- */
.nav{position:relative;z-index:6;display:flex;align-items:center;justify-content:space-between;
  padding:22px clamp(20px,4vw,54px)}
.nav-logo img{height:clamp(40px,4.6vw,58px);display:block}
.nav-right{display:flex;align-items:center;gap:clamp(14px,2.4vw,34px)}
.nav-link{font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cream);text-decoration:none;position:relative;padding:6px 0}
.nav-link::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--cream);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-pop)}
.nav-link:hover::after,.nav-link:focus-visible::after,.nav-link.active::after{transform:scaleX(1)}
.btn-call{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);background:var(--cream);border:none;border-radius:999px;
  padding:15px 30px;cursor:pointer;text-decoration:none;display:inline-block;
  transition:transform .35s var(--ease-pop),box-shadow .35s var(--ease-pop);
  box-shadow:0 10px 28px rgba(115,31,23,.18)}
.btn-call:hover,.btn-call:focus-visible{transform:translateY(-2px);box-shadow:0 18px 40px rgba(90,20,14,.28)}

/* ---------- vertical video frame + click-to-play facade ---------- */
.video-frame{position:relative;aspect-ratio:9/16;width:clamp(250px,23vw,330px);max-width:100%;
  border-radius:26px;overflow:hidden;
  background:linear-gradient(150deg,#5c1812,var(--wine) 65%);
  box-shadow:0 28px 55px rgba(81,18,12,.24);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--cream)}
.video-frame .play{width:74px;height:74px;border-radius:50%;background:var(--cream);
  display:flex;align-items:center;justify-content:center;
  transition:transform .35s var(--ease-pop)}
.video-frame:hover .play{transform:scale(1.08)}
.video-frame .play::after{content:"";margin-left:5px;border-style:solid;border-width:12px 0 12px 20px;
  border-color:transparent transparent transparent var(--ink)}
.video-frame .vf-note{font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;opacity:.65;
  padding:0 16px;text-align:center;line-height:1.6;max-width:100%}
.video-frame[data-vimeo]{cursor:pointer}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-frame .vf-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.video-frame .vf-poster ~ .play,.video-frame .vf-poster ~ .vf-note{z-index:2}
.video-frame .vf-poster ~ .vf-note{text-shadow:0 1px 8px rgba(0,0,0,.45);opacity:.95}

/* ---------- floating parallax decor ---------- */
.lane-decor{position:absolute;inset:0;pointer-events:none}
.lane-decor .float{position:absolute;border-radius:8px}
.lane-decor .fa{left:6%;top:14%;width:26px;height:38px}
.lane-decor .fb{right:10%;top:58%;width:44px;height:44px;border-radius:50%}
.lane-decor .fc{left:46%;bottom:10%;width:18px;height:26px}

/* ---------- footer ---------- */
.footer{background:var(--wine);color:var(--cream);padding:34px clamp(22px,6vw,90px);
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.footer-links{display:flex;gap:26px}
.footer a{color:var(--cream);text-decoration:none;font-size:12px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase}
.footer a:hover{text-decoration:underline}
.footer small{font-size:12px;opacity:.7;letter-spacing:.04em}

/* ---------- focus + reduced motion (shared) ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--cream);outline-offset:3px;border-radius:6px}
.btn-call:focus-visible{outline-color:var(--wine)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rays,.sprocket{animation:none}
  .btn-call,.nav-link::after,.video-frame .play{transition:none}
}