/* Tela de Araña — minimal studio CSS */

/* === 0. Font === */

@font-face {
  font-family: 'New Tegomin';
  src: url('fonts/NewTegomin-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* === 1. Design variables === */

:root {
  /* colors */
  --bg: #ffffff;
  --fg: #111111;
  --muted: #666666;
  --accent: #333333;
  --link: #7a0022;
  --line: #e6e6e6;

  /* layout */
  --maxch: 70ch;

  /* brand / logo block */
  --brand-w: 680px;      /* overall width of logo block */
  --circle-d: 240px;     /* circle (web) diameter */
  --thread-h: 100px;     /* visible length of hanging thread */
  --gap: 22px;           /* spacing between circle and wordmark row */

  --title-size: 4.8rem;  /* wordmark size */
  --title-track: 0.01em;

  /* logo animation timings */
  --t-fade: 2.2s;   /* circle fade */
  --t-drop: 2.6s;   /* thread drop */
  --t-slide: 2.0s;  /* word slides */

  --delay-circle: .20s;
  --delay-thread: 1.20s;
  --delay-left:   2.20s;
  --delay-right:  2.45s;
}

/* dark mode palette */

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0b0c;
    --fg: #eaeaea;
    --muted: #a9a9a9;
    --accent: #cfcfcf;
    --link: #e06666;
    --line: #2a2a2a;
  }
}

/* === 2. Global reset / base === */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.7 ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}

/* main layout blocks */

main {
  max-width: 960px;
  margin: 0 auto;
  padding: 3rem 1rem;
}

header,
footer {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.25rem 1rem;
}

/* typography */

h1,
h2,
h3 {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
}

h1 {
  font-weight: 600;
  font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3.2rem);
  margin: 0.5rem 0 0;
}

.lead {
  max-width: var(--maxch);
  color: var(--muted);
  text-align: center;
  margin: 3rem auto 0;    /* space from logo; centered block */
  font-size: 1.15rem;
  line-height: 1.6;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2rem 0;
}

section {
  max-width: var(--maxch);
  margin: 0 auto 2rem auto;
}

p {
  margin: 0.85rem 0;
}

a {
  color: var(--link);
  text-underline-offset: 0.15em;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

.small {
  font-size: 0.95rem;
  color: var(--muted);
}

/* simple grid helper */

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 900px) {
  .grid-2 {
    grid-template-columns: 1fr 1fr;
  }
}

.kicker {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.82rem;
  color: var(--muted);
}

ul.clean {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul.clean li {
  margin: 0.4rem 0;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.9em;
  background: rgba(127, 127, 127, 0.08);
  padding: 0.1em 0.3em;
  border-radius: 0.25em;
}

/* footer */

footer {
  text-align: center;
}

footer .small {
  max-width: var(--maxch);
  margin: 1.25rem auto 0;
  line-height: 1.6;
}

/* === 3. Brand block (logo + wordmark) === */

.brand {
  width: var(--brand-w);
  margin: 0 auto;
  display: grid;
  justify-items: center;
  row-gap: var(--gap);
}

/* circle fades in */

.brand-circle {
  width: var(--circle-d);
  height: auto;
  opacity: 0;
  animation: tdaFade var(--t-fade) cubic-bezier(.16, 1, .3, 1) var(--delay-circle) forwards;
  will-change: opacity;
}

/* wordmark row: left | thread | right */

.brand-wordmark {
  width: var(--brand-w);     /* align center with circle */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  column-gap: 14px;
  white-space: nowrap;

  font: var(--title-size)/1.05 'New Tegomin', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  letter-spacing: var(--title-track);
  color: var(--fg);
}

/* thread: natural width, controlled height, pulled up to kiss the circle */

.brand-thread {
  display: block;
  width: auto;
  height: var(--thread-h);
  justify-self: center;
  align-self: end;
  margin-top: -40px;              /* adjust so it visually attaches to circle */
  transform-origin: top center;
  transform: scaleY(0);
  opacity: .01;
  animation: tdaDrop var(--t-drop) cubic-bezier(.16, 1, .3, 1) var(--delay-thread) forwards;
  will-change: opacity, transform;
}

/* left / right terms flank the thread */

.brand-wordmark .left,
.brand-wordmark .right {
  display: inline-block;
  opacity: 0;
  will-change: transform, opacity;
}

.brand-wordmark .left {
  justify-self: end;
  transform: translateX(-10%);
  animation: tdaSlideL var(--t-slide) cubic-bezier(.16, 1, .3, 1) var(--delay-left) forwards;
}

.brand-wordmark .right {
  justify-self: start;
  transform: translateX(10%);
  animation: tdaSlideR var(--t-slide) cubic-bezier(.16, 1, .3, 1) var(--delay-right) forwards;
}

/* brand animations */

@keyframes tdaFade {
  to { opacity: 1; }
}

@keyframes tdaDrop {
  0%   { transform: scaleY(0); opacity: .01; }
  30%  { opacity: 1; }
  100% { transform: scaleY(1); opacity: 1; }
}

@keyframes tdaSlideL {
  to { transform: translateX(0); opacity: 1; }
}

@keyframes tdaSlideR {
  to { transform: translateX(0); opacity: 1; }
}

/* === 4. Motion accessibility === */

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* === 5. Language switcher === */

.lang {
  position: fixed;
  top: 14px;
  right: 14px;
  display: flex;
  gap: .6rem;
  font: 0.9rem/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  padding: .35rem .5rem;
  border-radius: .5rem;
  border: 1px solid var(--line);
  opacity: .85;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 10;
}

.lang:hover {
  opacity: 1;
}

.lang a {
  color: var(--fg);
  text-decoration: none;
  opacity: .7;
}

.lang a[aria-current="page"] {
  opacity: 1;
  font-weight: 600;
}

.lang a:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
  border-radius: .2rem;
}

@media (max-width: 420px) {
  .lang {
    top: 10px;
    right: 10px;
  }
}

/* === 6. Section fade-in (.reveal) — simple, robust === */

/* animation itself */

@keyframes fadeRise {
  from {
    opacity: 0;
    transform: translateY(100px);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* apply to any block with class="reveal" */

.reveal {
  opacity: 0;
  animation-name: fadeRise;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-fill-mode: both;
}