/* ===========================================================================
   Template gallery, the viewer that opens them, and the preloader mark.

   Loaded after css/styles.css and built only out of its tokens, so light and
   dark stay identical in every effect: anything that is LIGHT uses
   --glow-a / --glow-b, which are defined once for both themes.
   =========================================================================== */

/* ===========================================================================
   03 — the gallery
   =========================================================================== */
.tpl{display:flex;flex-direction:column;gap:clamp(18px,2.6vh,30px)}

.tpl__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,1.8vw,26px) clamp(14px,1.5vw,22px);
}

/* a card is a button: it opens the viewer, and it has to answer to the
   keyboard like every other control on the page */
.tcard{
  display:flex;flex-direction:column;gap:12px;
  background:none;border:0;padding:0;margin:0;text-align:left;cursor:pointer;
  color:inherit;font:inherit;-webkit-tap-highlight-color:transparent;
}
.tcard__shot{
  position:relative;display:block;overflow:hidden;
  border-radius:var(--r);border:1px solid var(--line);background:var(--surface);
  aspect-ratio:16/10;
  transition:border-color .5s var(--ease),transform .7s var(--ease-out),box-shadow .6s var(--ease);
}
.tcard__shot img{
  width:100%;height:100%;object-fit:cover;object-position:top center;display:block;
  transition:transform .9s var(--ease-out);
}
/* the same lit rim the pages use while they move, here on hover */
.tcard__shot::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  border-radius:inherit;padding:1.5px;opacity:0;
  background:linear-gradient(118deg,var(--glow-a),transparent 32%,transparent 68%,var(--glow-b));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  transition:opacity .5s var(--ease);
}
.tcard:hover .tcard__shot,.tcard:focus-visible .tcard__shot{
  transform:translateY(-4px);border-color:var(--line-3);box-shadow:var(--shadow);
}
.tcard:hover .tcard__shot::after,.tcard:focus-visible .tcard__shot::after{opacity:1}
.tcard:hover .tcard__shot img{transform:scale(1.022)}
.tcard:focus-visible{outline:none}
.tcard:focus-visible .tcard__shot{outline:2px solid var(--accent-soft);outline-offset:3px}

/* the word that says it opens — only on the card you are pointing at */
.tcard__go{
  position:absolute;left:10px;bottom:10px;z-index:3;
  display:inline-flex;align-items:center;gap:.45em;
  background:var(--btn-bg);color:var(--btn-fg);
  border-radius:999px;padding:.5em 1em;font-size:.72rem;font-weight:600;letter-spacing:.01em;
  opacity:0;transform:translateY(6px);
  transition:opacity .4s var(--ease),transform .5s var(--ease-out);
}
.tcard:hover .tcard__go,.tcard:focus-visible .tcard__go{opacity:1;transform:none}
.tcard__go svg{width:11px;height:11px}

.tcard__meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.tcard__name{font-size:.95rem;font-weight:600;letter-spacing:-.01em}
.tcard__kind{font-size:.76rem;color:var(--dim-2)}

.tpl__note{font-size:.84rem;color:var(--dim-2);max-width:62ch}

@media (max-width:1180px){.tpl__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.tpl__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){
  .tpl__grid{grid-template-columns:1fr}
  .tcard__go{opacity:1;transform:none}
}

/* ===========================================================================
   The viewer — the real template, running, at full size
   =========================================================================== */
.tv{
  position:fixed;inset:0;z-index:400;display:flex;flex-direction:column;
  background:var(--scrim);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s;
}
.tv.is-on{opacity:1;visibility:visible}
.tv[hidden]{display:none}

.tv__bar{
  flex:none;display:flex;align-items:center;gap:clamp(10px,2vw,22px);
  padding:clamp(10px,1.6vh,16px) clamp(12px,2.4vw,26px);
  border-bottom:1px solid var(--line);background:var(--page-bg);
}
.tv__id{display:flex;flex-direction:column;min-width:0;margin-right:auto}
.tv__id b{font-size:.95rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tv__id span{font-size:.74rem;color:var(--dim-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* device switch */
.tv__dev{display:flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.tv__dev button{
  border:0;background:none;color:var(--dim);cursor:pointer;font:inherit;
  font-size:.76rem;font-weight:500;padding:.45em 1em;border-radius:999px;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.tv__dev button:hover{color:var(--text)}
.tv__dev button.is-on{background:var(--surface-2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}

.tv__nav{display:flex;align-items:center;gap:4px;color:var(--dim)}
.tv__nav span{font-size:.76rem;font-variant-numeric:tabular-nums;min-width:3.4em;text-align:center}
.tvb{
  display:grid;place-items:center;width:34px;height:34px;flex:none;
  border:1px solid var(--line);border-radius:50%;background:var(--surface);
  color:var(--text);cursor:pointer;font:inherit;
  transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease-out);
}
.tvb:hover{border-color:var(--line-3);background:var(--surface-2)}
.tvb:active{transform:scale(.94)}
.tvb svg{width:15px;height:15px}
.tv__open{
  display:inline-flex;align-items:center;gap:.45em;white-space:nowrap;
  font-size:.78rem;font-weight:500;color:var(--text);text-decoration:none;
  border:1px solid var(--line);border-radius:999px;padding:.5em 1em;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.tv__open:hover{border-color:var(--line-3);background:var(--surface)}
.tv__open svg{width:11px;height:11px}

/* the stage: the frame is rendered at a real device width and scaled down,
   so what you are looking at is the actual page at that width — not a
   reflowed small copy of it */
.tv__stage{
  flex:1;min-height:0;position:relative;display:grid;place-items:center;
  padding:clamp(10px,2vh,22px) clamp(10px,2vw,26px);
}
.tv__frame{
  position:relative;overflow:hidden;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);
  transition:width .5s var(--ease),height .5s var(--ease),border-radius .5s var(--ease);
}
.tv__frame iframe{
  position:absolute;left:0;top:0;border:0;display:block;
  transform-origin:0 0;background:#fff;
}
.tv--phone .tv__frame{border-radius:26px}
/* while the frame is loading, the stage shows nothing half-drawn */
.tv__frame.is-wait iframe{opacity:0}
.tv__frame iframe{transition:opacity .35s var(--ease)}

.tv__hint{
  position:absolute;left:50%;bottom:clamp(6px,1.4vh,14px);translate:-50% 0;
  font-size:.7rem;color:var(--dim-2);pointer-events:none;
}

/* with the viewer open, the page's own furniture gets out of the way */
.tpl-open .pind,.tpl-open .cur,.tpl-open .nav{opacity:0;pointer-events:none}
.tpl-open .nav,.tpl-open .pind{transition:opacity .3s var(--ease)}
.tpl-open body{overflow:hidden}

@media (max-width:760px){
  .tv__dev{display:none}
  .tv__open span{display:none}
  .tv__id b{font-size:.88rem}
}

/* ===========================================================================
   The preloader mark — twelve lines flying into a sphere
   The symbol is already drawn as separate contour strokes, so each one can
   arrive on its own path. JS measures each length and sets the custom
   properties; this only describes how they move.
   =========================================================================== */
.pre__logo{overflow:visible}
.pre__logo path{
  stroke-dasharray:var(--len);
  stroke-dashoffset:var(--len);
  opacity:0;
  transform-box:fill-box;
  transform-origin:50% 50%;
}
/* the wordmark is cut from below while the lines assemble */
.pre-intro .pre__word{
  display:inline-block;
  clip-path:inset(0 0 110% 0);
  opacity:0;
}
/* a faint ring the lines land into — it fades up with them */
.pre__mark{position:relative}
.pre__halo{
  position:absolute;left:0;top:50%;translate:0 -50%;
  width:1.62em;height:1.62em;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,color-mix(in srgb,var(--glow-a) 26%,transparent),transparent 68%);
}

@media (prefers-reduced-motion:reduce){
  .pre__logo path{stroke-dashoffset:0;opacity:1}
  .pre-intro .pre__word{clip-path:none;opacity:1}
}

/* Eight cards plus a heading is more than one screen holds, so this section
   gives the grid every pixel the heading does not need. */
#sectors .sec__head{margin-bottom:clamp(24px,3.2vh,38px)}
#sectors .sec__lead{max-width:58ch}
#sectors .page__meta{margin-bottom:clamp(14px,2vh,22px)}

/* ===========================================================================
   04 — the name finder
   =========================================================================== */
/* what the typed name becomes, shown while they type */
.dslug{
  margin-top:12px;font-size:.82rem;color:var(--dim);
  display:flex;align-items:baseline;gap:.45em;flex-wrap:wrap;
}
.dslug::after{content:"";flex:1}

/* the waiting state: the mark assembles out of its own lines while the
   registries answer — the same animation as the intro, reused */
.dload{display:flex;align-items:center;gap:12px;margin-top:18px;font-size:.84rem;color:var(--dim)}
.dload[hidden]{display:none}
.dmark{width:30px;height:30px;flex:none;color:var(--text);overflow:visible}
.dmark path{transform-box:fill-box;transform-origin:50% 50%}

.dres__since{margin-left:.5em;font-size:.72rem;font-weight:400;color:var(--dim-2)}
.dres__mail{
  display:block;margin-top:2px;padding:10px 2px 0;
  font-size:.82rem;color:var(--dim);border-top:1px dashed var(--line);
}

/* names to try instead, only when something came back taken */
.dalt{margin-top:16px}
.dalt[hidden]{display:none}
.dalt__t{font-size:.78rem;color:var(--dim-2);margin-bottom:8px}
.dalt__g{display:flex;flex-wrap:wrap;gap:8px}
.dalt__b{
  display:inline-flex;align-items:baseline;gap:.5em;cursor:pointer;
  font:inherit;font-size:.82rem;color:var(--text);
  background:var(--surface-2);border:1px solid var(--line);border-radius:999px;
  padding:.5em 1em;transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease-out);
}
.dalt__b:hover{border-color:var(--line-3);transform:translateY(-1px)}
.dalt__b b{font-weight:600}
.dalt__b span{font-size:.72rem;color:var(--ok)}

/* the header mark is clickable — it replays the intro, so the lines have to
   be allowed outside the 28px box they live in */
.nav__mark{overflow:visible}
.nav__mark path{transform-box:fill-box;transform-origin:50% 50%}
.nav__brand{cursor:pointer}

/* six endings plus an email line is a tall list — tighten the rows so the
   answer fits the screen the question was asked on */
.dres{gap:6px}
.dres li{padding:11px 13px}
.dres__name{font-size:.92rem}
.dres__note{font-size:.74rem;margin-top:3px;line-height:1.4}