/* =====================================================
   DRL DESIGN — SHARED STYLES
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500&family=Barlow+Condensed:wght@700&display=swap');

@font-face {
  font-family:'Hatton';
  src:url('hatton.woff2') format('woff2');
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --black:  #0a0a0a;
  --white:  #ffffff;
  --amber:  #C4892A;
  --blue:   #4B48F5;
  --gap:    34px;
  --nav-h:  370px;
  --ease:   cubic-bezier(0.45, 0.02, 0.09, 0.98);
  --veil:   cubic-bezier(0.76, 0.00, 0.24, 1.00);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1.00);
}

html, body { height:100%; }
body { font-family:'Barlow',sans-serif; background:var(--white); color:var(--black); cursor:none; overflow-x:hidden; }

/* ── IMAGE PROTECTION ── */
img, video {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}
/* Re-enable pointer events on interactive wrappers */
a img, a video, .case-card img, .case-card video,
.cs-next-img, .nav-preview, .nav-preview-grid img { pointer-events: auto; }


/* ── CURSOR ── */
#cursor {
  position:fixed; width:10px; height:10px;
  background:var(--black); border-radius:50%;
  pointer-events:none; z-index:9999; transform:translate(-50%,-50%);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.5);
  transition:width .22s var(--veil),height .22s var(--veil),background .18s ease,box-shadow .18s ease;
}
#cursor.hov     { width:52px; height:52px; background:var(--amber); mix-blend-mode:multiply; box-shadow:none; }
#cursor.hov-nav { width:52px; height:52px; background:var(--blue);  mix-blend-mode:multiply; box-shadow:none; }
#cursor.clk     { transform:translate(-50%,-50%) scale(.75); }

/* ── VEIL ── */
#veil {
  position:fixed; inset:0; background:var(--black); z-index:5000;
  opacity:0; pointer-events:none;
}
/* Starts opaque when arriving via internal navigation — prevents flash */
#veil.arriving { opacity:1; }
#veil.in  { animation:veilIn  .45s ease-in-out forwards; pointer-events:all; }
#veil.out { animation:veilOut .45s ease-in-out forwards; }
@keyframes veilIn  { from { opacity:0; } to { opacity:1; } }
@keyframes veilOut { from { opacity:1; } to { opacity:0; } }

/* ── LOGO ── */
#logo {
  position:fixed; top:18px; left:24px; z-index:600;
  display:block; height:26px; width:auto; text-decoration:none;
  mix-blend-mode:difference;
}
#logo svg { height:100%; width:auto; display:block; }
#logo .st0 { fill:var(--white) !important; }

/* ── ORB ── */
@keyframes orbPulse {
  0%, 100% { filter:drop-shadow(0 4px 16px rgba(196,137,42,.4)); }
  50%       { filter:drop-shadow(0 4px 32px rgba(196,137,42,.85)); }
}
#orb {
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%);
  z-index:600; width:66px; height:auto;
  display:grid; place-items:center;
  cursor:none; transition:transform .35s var(--spring), bottom .4s var(--ease);
  animation:orbPulse 2.8s ease-in-out infinite;
}
#orb:hover { transform:translateX(-50%) scale(1.1); animation-play-state:paused; }
#orb-d { opacity:.5; transition:opacity .3s ease; }
#orb:hover #orb-d { opacity:1; }
#orb.s-nav, #orb.s-filter, #orb.s-apply {
  animation:none;
  filter:drop-shadow(0 4px 18px rgba(75,72,245,.45));
}
#orb-bg, #orb-circle {
  grid-area:1/1; width:100%; height:auto; display:block;
  transition:opacity .35s ease, transform .35s var(--spring);
}
#orb-circle { opacity:0; transform:scale(.72); }

/* fill colour — shared by both shapes */
.orb-fill { fill:var(--amber); transition:fill .3s ease; }
#orb.s-nav   .orb-fill { fill:var(--blue); }
#orb.s-apply .orb-fill { fill:var(--blue); }

/* pill → circle crossfade */
#orb.s-filter #orb-bg,
#orb.s-apply  #orb-bg  { opacity:0; transform:scale(.72); }
#orb.s-filter #orb-circle,
#orb.s-apply  #orb-circle { opacity:1; transform:scale(1); }
#orb-d, #orb-x, #orb-check {
  grid-area:1/1; width:44%; height:auto; display:block;
  pointer-events:none; margin-bottom:4px;
  transition:opacity .2s ease, transform .2s ease;
}
#orb-d .st0  { fill:var(--white) !important; }
#orb-x     { opacity:0; transform:scale(.7); }
#orb-check { opacity:0; transform:scale(.7); }
#orb.s-filter #orb-d     { opacity:0; transform:scale(.7); }
#orb.s-filter #orb-x     { opacity:1; transform:scale(1); }
#orb.s-filter #orb-check { opacity:0; transform:scale(.7); }
#orb.s-apply #orb-d     { opacity:0; transform:scale(.7); }
#orb.s-apply #orb-x     { opacity:0; transform:scale(.7); }
#orb.s-apply #orb-check { opacity:1; transform:scale(1); }

/* ── NAV MENU ── */
#nav-menu {
  position:fixed; bottom:0; left:0; right:0;
  height:var(--nav-h); z-index:500; background:var(--black);
  transform:translateY(var(--nav-h));
  transition:transform 0.65s var(--ease);
}
#nav-menu.open { transform:translateY(0); }

.nav-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,.1); height:100%;
}
.nav-col {
  padding:24px 24px 20px;
  border-right:1px solid rgba(255,255,255,.1);
  cursor:none; display:flex; flex-direction:column; overflow:hidden;
  transition:background .2s ease;
}
.nav-col:last-child { border-right:none; }
.nav-col:hover { background:rgba(255,255,255,.05); }
.nav-col-label {
  display:flex; align-items:center; gap:8px; margin-bottom:14px;
  font-family:'Barlow Condensed',sans-serif; font-weight:900;
  font-size:16px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--white); flex-shrink:0;
}
.nav-dot { width:7px; height:7px; border-radius:50%; background:var(--blue); display:none; flex-shrink:0; }
.nav-col.active .nav-dot { display:block; }
.nav-preview { width:100%; height:45%; object-fit:cover; display:block; flex-shrink:0; }
.nav-preview-grid { display:grid; grid-template-columns:1fr 1fr; gap:3px; height:45%; flex-shrink:0; overflow:hidden; }
.nav-preview-grid img { width:100%; height:100%; object-fit:cover; display:block; }
.nav-follow {
  position:absolute; bottom:20px; right:24px;
}
.nav-linkedin {
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Barlow Condensed',sans-serif; font-weight:700;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.4); text-decoration:none; cursor:none;
  transition:color .2s ease;
}
.nav-linkedin:hover { color:var(--white); }
.nav-linkedin svg { width:13px; height:13px; fill:currentColor; flex-shrink:0; }

/* ── SHARED UTILITIES ── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:none; }
}
@keyframes fadeIn {
  from { opacity:0; } to { opacity:1; }
}

/* ── RESPONSIVE ── */
@media (max-width:1000px) {
  .nav-grid { grid-template-columns:repeat(2,1fr); }
  .nav-col:nth-child(even) { border-right:none; }
  .nav-col:nth-child(-n+2) { border-bottom:1px solid rgba(255,255,255,.1); }
  #logo { height:20px; }
}