/*
Theme Name: Manuel Brada Sphere
Text Domain: manuel-brada-sphere
Description: Portafolio con esfera de proyectos. Proyectos editables desde WordPress.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
WPVibe: yes
*/

:root {
  --bg: #fff;
  --ink: #9a9a9a;
  --ink-strong: #111;
  --text-soft: #444;
  --media-bg: #fff;
  --veil: 255 255 255;
}
:root[data-theme="dark"] {
  --bg: #111;
  --ink: #777;
  --ink-strong: #efefef;
  --text-soft: #bbb;
  --media-bg: #1c1c1c;
  --veil: 17 17 17;
}

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

html, body {
  min-height: 100%;
  background: var(--bg);
  font: 14px/1.3 "ABC Areal", "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--ink-strong); }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- HOME / ESFERA ---------- */
.home { position: fixed; inset: 0; overflow: hidden; background: var(--bg); }

.wrap { position: fixed; inset: 0; touch-action: none; cursor: grab; }
.wrap.grabbing { cursor: grabbing; }
.wrap.hover { cursor: pointer; }
.wrap canvas { display: block; transition: opacity 0.9s ease; }
.wrap.loading canvas { opacity: 0; }

.ui { position: fixed; z-index: 2; pointer-events: none; color: #fff; mix-blend-mode: difference; }
.ui a, button.ui { pointer-events: auto; }
a.ui:hover, .ui a:hover { color: #fff; }
button { font: inherit; letter-spacing: inherit; background: none; border: 0; color: inherit; cursor: pointer; }

/* arriba izquierda: MB® y, al abrir, descripción */
.tl { top: 16px; left: 16px; width: calc(100vw / 3); min-width: 300px; }
.tl .mb { display: inline-block; white-space: nowrap; }
.tl .mb span { display: inline-block; }
.tl .mb .b { transition: transform 0.6s cubic-bezier(0.7, 0, 0.2, 1); }
.tl .mb .r { transition: opacity 0.2s ease; }
.tl .mb[data-open="true"] .r { opacity: 0; }
.tl .mb[data-open="true"] { pointer-events: none; }
.tl .mb[data-settled="true"] { opacity: 0; transition: none; }
.tl .mb[data-settled="true"] .b { transition: none; }
/* la M y la B de la descripción esperan a que la B llegue */
.tl .info:not([data-settled="true"]) .dm, .tl .info:not([data-settled="true"]) .db { opacity: 0; }
.tl .info {
  position: absolute; top: 0; left: 0; width: 100%;
  opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.tl .info[data-open="true"] { opacity: 1; visibility: visible; transition: opacity 0.4s ease 0.2s; }
.tl .info[data-open="false"] a { pointer-events: none; }
.about { margin-bottom: 16px; }
.veil {
  position: fixed; z-index: 1; top: 0; left: 0; width: calc(100vw / 3 + 56px); min-width: 356px;
  pointer-events: none; opacity: 0; transition: opacity 0.25s ease;
  background: linear-gradient(to bottom, rgb(var(--veil) / 88%), rgb(var(--veil) / 0%));
  -webkit-mask-image: linear-gradient(to right, #000 75%, transparent);
  mask-image: linear-gradient(to right, #000 75%, transparent);
}
.veil[data-open="true"] { opacity: 1; }
.about a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.links { list-style: none; }
.links a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* botón + */
.plus {
  top: 16px; right: 16px; width: 30px; height: 30px; margin: -8px -8px 0 0;
  display: grid; place-items: center;
}
.plus svg { transition: transform 0.25s ease; }
.plus:hover svg { transform: rotate(90deg); }

/* centro: ciudad/hora/fecha y Order */
.clock { top: 50%; left: 16px; transform: translateY(-50%); display: flex; gap: 8px; white-space: nowrap; }
.clock .num { font-variant-numeric: tabular-nums; margin-right: 38px; min-width: 8ch; }
.order { top: 50%; right: 16px; transform: translateY(-50%); padding: 6px 0 6px 12px; }

.label { bottom: 16px; right: 16px; opacity: 0; transition: opacity 0.2s; }

.loader {
  position: fixed; inset: 0; z-index: 3; display: grid; place-items: center;
  background: var(--bg); color: var(--ink-strong); transition: opacity 0.7s ease;
}
.loader.done { opacity: 0; pointer-events: none; }

@media (max-width: 820px) {
  .tl { width: auto; min-width: 0; right: 16px; }
  html, body { font-size: 13px; }
  .veil { width: 100vw; min-width: 0; -webkit-mask-image: none; mask-image: none; }
  .plus { top: auto; bottom: 16px; margin: 0 -8px -8px 0; }
  .clock { flex-wrap: wrap; row-gap: 0; white-space: normal; max-width: 46vw; }
  .clock .sep { display: none; }
  .clock .num { margin-right: 0; min-width: 0; }
  .clock .date { flex-basis: 100%; }
  .label { right: auto; left: 50%; transform: translateX(-50%); bottom: 20px; text-align: center; white-space: nowrap; }
}

/* ---------- PÁGINA DE PROYECTO ---------- */
.ptitle { left: 16px; bottom: calc(50% + 39px); animation: fade 1s ease 0.35s both; }
@media (prefers-reduced-motion: reduce) { .ptitle { animation: none; } }

/* el + se vuelve − mientras el panel está abierto */
.plus[aria-expanded="true"] svg { clip-path: inset(6px 0 6px 0); }
.plus[aria-expanded="true"]:hover svg { transform: none; }
.pn { top: 50%; right: 16px; transform: translateY(-50%); display: flex; gap: 18px; }
.pinfo { left: 16px; top: calc(50% + 39px); width: calc(100vw / 4); min-width: 220px; }
.pinfo .desc { margin-top: 8px; }
.pinfo .desc p { margin: 0; }
.pinfo a { display: inline-block; margin-top: 8px; }

.project {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 64px 16px;
  animation: fade 0.6s ease both;
}
.media { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; width: 100%; }
.media video, .media img {
  display: block; width: auto; max-width: min(100%, 62vw);
  max-height: calc(100svh - 128px); height: auto; margin-inline: auto;
  background: var(--media-bg);
}

/* imagen con enlace externo: el cursor se vuelve una flecha ↗ */
.media a.ext { display: block; line-height: 0; max-width: min(100%, 62vw); cursor: pointer; cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 32 32'%3E%3Cpath d='M9 23L23 9M11 9h12v12' fill='none' stroke='white' stroke-width='5' stroke-linecap='square'/%3E%3Cpath d='M9 23L23 9M11 9h12v12' fill='none' stroke='black' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E") 10 10, pointer; }
.media a.ext img { max-width: 100%; cursor: inherit; }

@media (max-width: 820px) {
  .media a.ext { max-width: 100%; }
  .project { padding: 64px 40px; }
  .media video, .media img { max-width: 100%; }
  .label.in-order { display: none; }
  .pinfo { width: auto; right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .project { animation: none; }
}

.theme {
  position: fixed; left: 16px; bottom: 16px; z-index: 10; mix-blend-mode: difference; color: #fff; width: 28px; height: 28px; margin: -7px;
  display: grid; place-items: center; border: 0; background: none; cursor: pointer;
}
.theme:hover { opacity: 0.6; }

/* intro: las letras de MANUEL BRADA® aparecen una a una */
.loader .word { text-transform: uppercase; letter-spacing: 0.05em; }
.loader .ch { display: inline-block; opacity: 0.1; animation: chIn 0.7s cubic-bezier(0.2, 0.6, 0.2, 1) both; }
@keyframes chIn { from { opacity: 0.1; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .loader .ch { animation: none; opacity: 1; } .tl .mb .b { transition: none; } }