/* client atlas — the globe is the whole section; always dark, even in light theme */
.atlas{--a-red:#f10000;--a-mute:#8d8d8d;--a-line:rgba(255,255,255,.12);
  position:relative;isolation:isolate;height:max(92svh,720px);background:#000;color:#fff;overflow:hidden}
.atlas-stage{position:absolute;inset:0}
/* soft top/bottom edges so a zoomed globe never ends in a hard line */
.atlas-stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(#000,transparent 9%,transparent 88%,#000)}
.atlas-gl{display:block;width:100%;height:100%;cursor:grab;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.atlas.dragging .atlas-gl{cursor:grabbing}
.atlas-nogl{display:none}

/* country tags pinned to the globe */
.atlas-tags{position:absolute;inset:0;pointer-events:none}
.atlas-tag{position:absolute;left:0;top:0;opacity:0;display:flex;align-items:center;padding:0;margin:0;background:none;border:0;color:#fff;cursor:pointer;
  font:600 10px/1 var(--cond,"Archivo"),"Arial Narrow",sans-serif;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;will-change:transform,opacity}
.atlas-tag>*{translate:8px -50%}
.atlas-tag i{width:12px;height:1px;background:rgba(255,255,255,.45);transition:width .4s cubic-bezier(.16,1,.3,1),background .3s}
.atlas-tag span{padding:5px 8px;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .3s,border-color .3s}
.atlas-tag.hot i,.atlas-tag.on i{width:20px;background:var(--a-red)}
.atlas-tag.hot span{border-color:var(--a-red)}
.atlas-tag.on span{background:var(--a-red);border-color:var(--a-red)}
.atlas-tag.flip{flex-direction:row-reverse}
.atlas-tag.flip>*{translate:-8px -50%}
.atlas-tag:focus-visible{outline:none}
.atlas-tag:focus-visible span{outline:1px solid #fff;outline-offset:2px}

/* drag hint: loops until the first drag, then gone for good */
.atlas-hint{position:absolute;left:50%;bottom:clamp(28px,5vh,48px);translate:-50% 0;display:flex;align-items:center;gap:14px;pointer-events:none;
  font:600 11px/1 var(--cond,"Archivo"),"Arial Narrow",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#cfcfcf;
  opacity:0;transition:opacity .8s,translate .8s cubic-bezier(.16,1,.3,1)}
.atlas-in .atlas-hint{opacity:1;transition-delay:1.6s}
.atlas-hint.gone,.atlas.is-open .atlas-hint{opacity:0;translate:-50% 12px;transition-delay:0s}
.ah-gesture{display:flex;align-items:center;gap:8px;color:#fff}
.ah-gesture b{font-weight:400;font-size:14px;animation:ah-arrow 1.8s cubic-bezier(.65,0,.35,1) infinite}
.ah-gesture b:last-child{animation-name:ah-arrow-r}
.ah-track{position:relative;width:56px;height:1px;background:rgba(255,255,255,.3)}
.ah-track i{position:absolute;top:-3px;left:0;width:7px;height:7px;border-radius:50%;background:var(--a-red);box-shadow:0 0 12px var(--a-red);animation:ah-slide 1.8s cubic-bezier(.65,0,.35,1) infinite alternate}
@keyframes ah-slide{to{left:calc(100% - 7px)}}
@keyframes ah-arrow{0%,100%{translate:0;opacity:.4}50%{translate:-4px;opacity:1}}
@keyframes ah-arrow-r{0%,100%{translate:0;opacity:1}50%{translate:4px;opacity:.4}}
.ah-t{display:flex;gap:10px;color:var(--a-mute);white-space:nowrap}
.ah-t em{font-style:normal;color:var(--a-red)}
.ah-finger,.ah-m{display:none}

/* project card */
.atlas-card{position:absolute;z-index:2;right:var(--pad,48px);top:50%;width:min(400px,32vw);translate:0 -50%;background:#060606;border:1px solid var(--a-line);
  clip-path:inset(0 0 100% 0);transition:clip-path .9s cubic-bezier(.77,0,.18,1);outline:none}
.atlas-card.open{clip-path:inset(0 0 0 0)}
.atlas-card::before{content:"";position:absolute;left:-1px;top:-1px;width:48px;height:2px;background:var(--a-red);z-index:1}
.ac-media{aspect-ratio:16/10;background:#000;overflow:hidden}
.ac-media canvas{display:block;width:100%;height:100%}
.ac-body{padding:20px 22px 22px}
.ac-k,.ac-meta{margin:0;font:600 10px/1.3 var(--cond,"Archivo"),"Arial Narrow",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--a-mute)}
.ac-k{color:#fff}
.ac-logo:not(:empty){margin:16px 0 2px;height:44px}
.ac-logo img{height:100%;width:auto;max-width:160px;object-fit:contain;object-position:left;filter:grayscale(1) brightness(1.7)}
.ac-t{margin:14px 0 0;font:400 clamp(40px,3.4vw,56px)/.9 var(--dsp,"League Gothic"),Impact,sans-serif;text-transform:uppercase;letter-spacing:.005em;outline:none}
.ac-logo:not(:empty)+.ac-t{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0)}
.ac-line{margin:12px 0 14px;font-size:15px;line-height:1.45;color:#d6d6d6}
.ac-cta{display:inline-flex;align-items:center;gap:10px;margin-top:20px;padding:12px 16px;background:var(--a-red);color:#fff;text-decoration:none;
  font:600 12px/1 var(--cond,"Archivo"),sans-serif;letter-spacing:.16em;text-transform:uppercase;transition:gap .35s cubic-bezier(.16,1,.3,1)}
.ac-cta:hover{gap:16px}
.ac-cta:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ac-x{position:absolute;z-index:1;top:10px;right:10px;width:36px;height:36px;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.6);cursor:pointer;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:border-color .3s,rotate .5s cubic-bezier(.16,1,.3,1)}
.ac-x span{position:absolute;left:50%;top:50%;width:14px;height:1px;background:#fff;translate:-50% -50%;rotate:45deg}
.ac-x span+span{rotate:-45deg}
.ac-x:hover{border-color:var(--a-red);rotate:90deg}
.ac-x:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* site cursor on the globe: a red ring you can see through (the hover field stays visible), labelled Drag / Open */
.cursor.ring{mix-blend-mode:normal}
.cursor.ring span{background:none;border:.3px solid var(--a-red,#f10000);transform:scale(6.2)}
.cursor.ring b{color:#fff;font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.cursor.drag b::before,.cursor.drag b::after{display:inline-block;font-weight:400;animation:cur-l 1.4s cubic-bezier(.65,0,.35,1) infinite}
.cursor.drag b::before{content:"\2190";margin-right:5px}
.cursor.drag b::after{content:"\2192";margin-left:5px;animation-name:cur-r}
@keyframes cur-l{50%{transform:translateX(-3px)}}
@keyframes cur-r{50%{transform:translateX(3px)}}

@media (max-width:900px){
  .atlas{height:min(116vw,560px)}
  .atlas-hint{bottom:14px;gap:10px;font-size:11px;letter-spacing:.12em}
  .ah-t{gap:7px}
  .ah-gesture{display:none}
  .ah-finger{display:block;color:#fff;animation:ah-swipe 1.8s cubic-bezier(.65,0,.35,1) infinite}
  .ah-d{display:none}.ah-m{display:inline}
  @keyframes ah-swipe{0%,100%{translate:-10px 0;rotate:-8deg}50%{translate:10px 0;rotate:8deg}}
  .atlas-card{left:12px;right:12px;top:auto;bottom:12px;width:auto;translate:none;display:grid;grid-template-columns:38% 1fr;clip-path:inset(100% 0 0 0)}
  .ac-media{aspect-ratio:auto;height:100%}
  .ac-body{padding:14px 16px 16px}
  .ac-logo:not(:empty){margin:8px 0 0;height:28px}
  .ac-t{font-size:34px;margin-top:8px}
  .ac-line{font-size:13px;margin:8px 0 0}
  .ac-meta{display:none}
  .ac-cta{margin-top:12px;padding:11px 14px;font-size:12px}
  .atlas-tag{font-size:11px;letter-spacing:.12em}
  .ac-x{top:6px;right:6px;width:30px;height:30px}
}
@media (prefers-reduced-motion:reduce){
  .ah-gesture b,.ah-track i,.ah-finger,.cursor.drag b::before,.cursor.drag b::after{animation:none}
  .atlas-card{transition:none}
}