/* =====================================================
   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; transition: opacity .19s ease; }
.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 fadeUpFromBlue {
  from { opacity:0; transform:translateY(20px); color:var(--blue); }
  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; }
}

/* ── LIGHT MODE — global + nav/cursor + work case study overrides ── */
body.light { background: var(--white); }

/* Work case study sections */
body.light .cs-intro,
body.light .cs-text-block,
body.light .cs-spacer,
body.light .cs-img-full,
body.light .cs-video-full,
body.light .cs-media-grid,
body.light .cs-text-video-split { background: var(--white); }
body.light .cs-intro,
body.light .cs-text-block,
body.light .cs-text-video-split { border-top-color: rgba(0,0,0,.06); }
body.light .cs-intro-heading,
body.light .cs-block-heading { color: var(--black); }
body.light .cs-intro-body { color: rgba(0,0,0,.6); }
body.light .cs-block-body { color: rgba(0,0,0,.55); }
body.light .cs-meta { color: rgba(0,0,0,.35); }
body.light .cs-tag { border-color: rgba(0,0,0,.15); color: rgba(0,0,0,.5); }
body.light .cs-service-label { color: rgba(0,0,0,.3); border-bottom-color: rgba(0,0,0,.08); }
body.light .cs-text-video-split .cs-text-block-inner-wrap { color: var(--black); }
body.light #cursor        { background: var(--black); box-shadow: 0 0 0 1.5px rgba(0,0,0,.18); }
body.light #cursor.hov    { background: var(--amber); }
body.light #cursor.hov-nav { background: var(--blue); }
body.light #nav-menu      { background: var(--white); }
body.light .nav-grid      { border-top-color: rgba(0,0,0,.1); }
body.light .nav-col       { border-right-color: rgba(0,0,0,.1); }
body.light .nav-col:hover { background: rgba(0,0,0,.04); }
body.light .nav-col-label { color: var(--black); }
body.light .nav-linkedin  { color: rgba(0,0,0,.4); }
body.light .nav-linkedin:hover { color: var(--black); }

/* ── THEME TOGGLE BUTTON ── */
#theme-btn-wrap {
  position: absolute;
  bottom: 20px;
  left: 24px;
}
#theme-toggle {
  position: relative;
  display: inline-block;
  cursor: none;
}
.theme-img {
  height: 28px;
  width: auto;
  display: block;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
  -webkit-user-select: none; user-select: none;
}
#theme-img-yin-off { position: relative; }
#theme-img-yin-on,
#theme-img-yang-off,
#theme-img-yang-on { position: absolute; top: 0; left: 0; }
#theme-yin, #theme-yang {
  position: absolute; top: 0; bottom: 0;
  width: 50%; background: none; border: none;
  cursor: none; padding: 0;
}
#theme-yin  { left: 0; }
#theme-yang { right: 0; }

/* ── THEME FADE TRANSITION — only active during the toggle ── */
body.theme-fade,
body.theme-fade .home-copy,
body.theme-fade .home-video-overlay,
body.theme-fade #nav-menu,
body.theme-fade .nav-col,
body.theme-fade .nav-col-label,
body.theme-fade .nav-grid,
body.theme-fade .nav-linkedin,
body.theme-fade #cursor,
body.theme-fade .cs-intro,
body.theme-fade .cs-text-block,
body.theme-fade .cs-spacer,
body.theme-fade .cs-img-full,
body.theme-fade .cs-video-full,
body.theme-fade .cs-media-grid,
body.theme-fade .cs-text-video-split,
body.theme-fade .cs-intro-heading,
body.theme-fade .cs-intro-body,
body.theme-fade .cs-block-heading,
body.theme-fade .cs-block-body,
body.theme-fade .cs-meta,
body.theme-fade .cs-next,
body.theme-fade .cs-next-title,
body.theme-fade .cs-next-label,
body.theme-fade .cs-next-cta,
body.theme-fade .contact-video,
body.theme-fade .contact-video-overlay,
body.theme-fade .contact-h1,
body.theme-fade .cf-field,
body.theme-fade .cf-field label,
body.theme-fade .cf-field input,
body.theme-fade .cf-checks-label,
body.theme-fade .cf-check label,
body.theme-fade .cf-message-wrap,
body.theme-fade .cf-message-wrap label,
body.theme-fade .cf-message-wrap textarea,
body.theme-fade .cf-submit,
body.theme-fade .cf-linkedin,
body.theme-fade .exp-canvas,
body.theme-fade .exp-panel-title,
body.theme-fade .exp-panel-body,
body.theme-fade .panel-intro .exp-h1,
body.theme-fade .panel-intro .exp-body,
body.theme-fade .exp-panel-link {
  transition: background-color .38s ease, color .38s ease, border-color .38s ease !important;
}