/* ============================================================
   daniel.websites — modern websites
   tokens
   ============================================================ */
:root {
  /* primitives */
  --paper: #ffffff;
  --ink-1: #121212;
  --ink-2: #333331;
  --ink-3: #6a6a68;
  --ink-4: #bdbdbd;
  --hairline: rgba(18, 18, 18, 0.14);
  --accent: #7393b3; /* brand blue gray: signature, spark, and everything important */

  /* role tokens */
  --bg: var(--paper);
  --text-1: var(--ink-1);
  --text-2: var(--ink-2);
  --text-3: var(--ink-3);
  --line: var(--hairline);

  /* type */
  --sans: "Montserrat", system-ui, sans-serif;
  --serif: "Fraunces", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --pad-x: clamp(1.25rem, 4vw, 4rem);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 500;
  color: var(--text-1);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
em { font-family: var(--serif); font-style: italic; }
.mono {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

::selection { background: var(--accent); color: #fff; }

/* ============================================================
   dot cursor
   ============================================================ */
.dot-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--text-1);
  pointer-events: none;
  z-index: 999;
  transform: translate(-50%, -50%);
  transition: width 0.25s ease, height 0.25s ease, opacity 0.3s ease;
  opacity: 0;
}
body.has-dot .dot-cursor { opacity: 1; }
.dot-cursor.on-link { width: 42px; height: 42px; opacity: 0.18; }
@media (pointer: fine) {
  body.has-dot, body.has-dot a, body.has-dot button { cursor: none; }
}
@media (pointer: coarse) {
  .dot-cursor { display: none; }
}

/* ============================================================
   nav
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 1.5rem var(--pad-x);
}

.wordmark {
  font-family: var(--serif);
  font-size: 1.55rem;
  display: inline-flex;
  align-items: baseline;
  letter-spacing: 0;
  font-variation-settings: "opsz" 72;
}
.wordmark-a { font-weight: 600; }
.wordmark-dot { font-weight: 600; padding: 0 0.02em; color: var(--accent); }
.wordmark-b { font-weight: 400; }

.nav-links {
  display: flex;
  align-items: baseline;
  gap: 1.4rem;
  font-size: 0.95rem;
  font-weight: 500;
}

/* rolling hover link */
.roll { display: inline-block; overflow: hidden; height: 1.5em; flex-shrink: 0; }
.roll-inner {
  display: flex;
  flex-direction: column;
  transition: transform 0.35s var(--ease-out);
}
.roll-inner span { height: 1.5em; line-height: 1.5em; display: block; white-space: nowrap; }
.roll-inner span:last-child { font-weight: 700; color: var(--accent); }
.roll:hover .roll-inner,
.roll:focus-visible .roll-inner { transform: translateY(-1.5em); }

.lang-toggle { display: inline-flex; align-items: baseline; gap: 0.35rem; margin-left: 0.6rem; }
.lang-sep { color: var(--text-3); font-size: 0.8rem; }
.lang-btn {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  padding: 0.1rem 0.15rem;
}
.lang-btn.is-active { color: var(--text-1); font-weight: 700; }
.lang-btn:hover { color: var(--text-1); }

/* ============================================================
   hero
   ============================================================ */
.hero {
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  align-content: center;
  padding: 6.5rem var(--pad-x) 2rem;
  position: relative;
}

.hero-title {
  align-self: center;
  font-weight: 600; /* rogi-weight: big but not heavy */
  line-height: 0.98;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  text-align: center; /* the composition centers as a block; lines stagger via margins */
}

.hero-line {
  display: block;
  overflow: hidden;
  padding-block: 0.06em 0.1em; /* small mask allowance; caps only, nothing overlaps */
  margin-block: -0.06em -0.1em;
}
.hero-word {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-size: clamp(3.2rem, min(11.5vw, 15.5vh), 11rem);
}

.hero-l1 { margin-left: clamp(0rem, 15vw, 16rem); }
.hero-l2 { margin-right: clamp(0rem, 9vw, 10rem); }

/* the giant serif third line: EN (spark) ES */
.hero-l3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2.6vw, 2.4rem);
  margin-left: clamp(0rem, 6vw, 6rem);
}
.hero-serif {
  font-family: var(--serif);
  font-weight: 540;
  font-size: clamp(3.8rem, min(14vw, 18vh), 13.5rem);
  line-height: 0.95;
  letter-spacing: 0;
  font-variation-settings: "opsz" 144;
}
.spark-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.58em;
  align-self: center; /* centers in the cap-height of EN/ES */
}
.l3-label {
  font-size: clamp(0.6rem, 0.9vw, 0.85rem);
  font-weight: 500;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-3);
  opacity: 0;
  transition: opacity 0.8s ease 0.65s;
}
body.loaded .l3-label { opacity: 1; }
.l3-label-left { text-align: right; }
.l3-label-right { text-align: left; }

/* the pixel spark: sits in the serif line like rogi's heart, spinning */
.spark {
  height: 0.5em;
  width: auto;
  fill: var(--accent);
  animation: spin 9s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* entrance */
.hero-word {
  transform: translateY(115%);
  transition: transform 0.9s var(--ease-out);
}
body.loaded .hero-word { transform: translateY(0); }
body.loaded .hero-l2 .hero-word { transition-delay: 0.1s; }
body.loaded .hero-l3 .hero-word { transition-delay: 0.2s; }

.hero-note {
  max-width: 14rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-2);
  opacity: 0;
  transition: opacity 0.8s ease 0.55s, transform 0.8s var(--ease-out) 0.55s;
}
.hero-note-left { position: absolute; left: var(--pad-x); top: 17vh; transform: translateX(-1.5rem); }
.hero-note-right { position: absolute; right: var(--pad-x); bottom: 19vh; text-align: right; transform: translateX(1.5rem); }
body.loaded .hero-note { opacity: 1; transform: translateX(0); }

.hero-foot {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 1rem;
  color: var(--text-2);
  opacity: 0;
  transition: opacity 0.8s ease 0.8s;
}
body.loaded .hero-foot { opacity: 1; }
.hero-clock { justify-self: start; }
.hero-scroll { justify-self: center; }
.hero-foot-right {
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.7rem;
}

/* social icon row */
.socials {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.social {
  display: inline-flex;
  color: var(--text-1);
  transition: opacity 0.25s ease, transform 0.25s var(--ease-out);
}
.social svg { height: 17px; width: auto; }
.social:hover { opacity: 0.55; transform: translateY(-2px); }
.social-sep {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--text-4, var(--ink-4));
}

.hero-sign { font-size: 0.95rem; }
.hero-sign em {
  color: var(--accent);
  font-weight: 500;
  font-size: 1.5rem;
  padding-left: 0.15rem;
}
.hero-scroll { animation: nudge 2.2s ease-in-out infinite; }
@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(0.35rem); }
}

/* ============================================================
   shared section rhythm
   ============================================================ */
.statement, .services, .work, .process, .contact {
  padding: clamp(4rem, 8vh, 6.5rem) var(--pad-x);
}

/* interior page header */
.page-head {
  padding: clamp(8rem, 16vh, 11rem) var(--pad-x) 0;
  text-align: center;
}
.page-title {
  font-size: clamp(3.4rem, 11vw, 10rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.95;
}
.pt-serif {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.09em;
  font-variation-settings: "opsz" 144;
  margin-right: 0.005em;
}
.pt-line { display: block; }
.pt-l1 { margin-right: clamp(0rem, 16vw, 17rem); }
.pt-l2 { font-size: 1.18em; margin-left: clamp(0rem, 18vw, 19rem); }

/* current nav page */
.nav-links a.is-current .roll-inner span { font-weight: 700; }

.eyebrow {
  text-transform: uppercase;
  color: var(--text-1);
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 3rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.eyebrow::before {
  content: "";
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' fill='%237393b3'%3E%3Crect x='0' y='0' width='1' height='1'/%3E%3Crect x='6' y='0' width='1' height='1'/%3E%3Crect x='1' y='1' width='1' height='1'/%3E%3Crect x='5' y='1' width='1' height='1'/%3E%3Crect x='2' y='2' width='1' height='1'/%3E%3Crect x='4' y='2' width='1' height='1'/%3E%3Crect x='3' y='3' width='1' height='1'/%3E%3Crect x='2' y='4' width='1' height='1'/%3E%3Crect x='4' y='4' width='1' height='1'/%3E%3Crect x='1' y='5' width='1' height='1'/%3E%3Crect x='5' y='5' width='1' height='1'/%3E%3Crect x='0' y='6' width='1' height='1'/%3E%3Crect x='6' y='6' width='1' height='1'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 0.8s ease, transform 0.8s var(--ease-out);
}
.reveal.in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .hero-word, .hero-note, .hero-foot, .l3-label { opacity: 1; transform: none; transition: none; }
  .hero-scroll, .spark { animation: none; }
  .split .w { opacity: 1 !important; transform: none !important; transition: none !important; }
  .dot-cursor { display: none; }
  body.has-dot, body.has-dot a, body.has-dot button { cursor: auto; }
}

/* ============================================================
   statement
   ============================================================ */
.statement-text {
  font-size: clamp(1.7rem, 3.9vw, 3.5rem);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.01em;
  max-width: 62rem;
}
.statement-text .w {
  display: inline-block;
  opacity: 0.12;
  transform: translateY(0.35em);
  transition: opacity 0.5s ease, transform 0.5s var(--ease-out);
}
.statement-text.in .w { opacity: 1; transform: translateY(0); }

.statement-sub {
  margin-top: 3.5rem;
  max-width: 30rem;
  font-size: 1.1rem;
  margin-left: auto;
  color: var(--text-2);
}
.sub-link {
  display: inline-block;
  margin-top: 1.2rem;
  font-weight: 600;
  color: var(--text-1);
}

/* "see all work" link */
.work-more { margin-top: 3rem; text-align: center; }
.work-more .roll { font-weight: 600; }

/* ============================================================
   services
   ============================================================ */
.service-list {
  list-style: none;
  display: grid;
  gap: clamp(3.5rem, 7vh, 5rem);
}
.service {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 2rem;
  align-items: start;
  transition: padding-left 0.35s var(--ease-out);
}
.service:hover { padding-left: 0.8rem; }
.service-name {
  font-size: clamp(1.6rem, 3.6vw, 3.1rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.08;
  transition: opacity 0.3s ease;
}
.service:hover .service-name { color: var(--accent); }
.service-desc { color: var(--text-2); max-width: 36rem; font-size: 1.1rem; }

/* ============================================================
   work
   ============================================================ */
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 3.5vw, 3.5rem);
}

.work-card .browser {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s ease;
}
.work-card:hover .browser {
  transform: translateY(-0.4rem);
  box-shadow: 0 18px 40px rgba(18, 18, 18, 0.12);
}

.browser-bar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.8rem;
  border-bottom: 1px solid var(--line);
}
.b-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4); }
.b-url { margin-left: 0.5rem; color: var(--text-3); font-size: 0.68rem; }

.browser-shot {
  display: block;
  width: 100%;
  height: clamp(11.5rem, 22vw, 19rem);
  object-fit: cover;
  object-position: top center;
  background: #f2f2f0;
}

.work-name {
  margin-top: 1.5rem;
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  font-weight: 700;
}
.work-meta { color: var(--text-3); margin-top: 0.55rem; font-size: 1rem; }

/* ============================================================
   process
   ============================================================ */
.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2.5rem, 4vw, 4.5rem);
}
.step-name {
  font-size: clamp(1.5rem, 2.9vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}
.step-desc { color: var(--text-2); max-width: 24rem; font-size: 1.1rem; }

/* stagger the three steps */
.step.reveal { transition-delay: 0s; }
.step.reveal:nth-child(2) { transition-delay: 0.12s; }
.step.reveal:nth-child(3) { transition-delay: 0.24s; }

/* ============================================================
   contact
   ============================================================ */
.contact { text-align: center; padding-bottom: 6rem; }
.contact .eyebrow { justify-content: center; }
.contact .eyebrow::before { display: none; }
/* contact page: laptop gets two columns (talk left, form right), phone stacks centered */
.contact-page {
  min-height: 88svh;
  display: flex;
  align-items: center;
  padding-top: 8rem;
}
.contact-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
  text-align: left;
}
.contact-page .eyebrow { justify-content: flex-start; }
.contact-page .eyebrow::before { display: block; }
.contact-page .contact-title { font-size: clamp(3.6rem, 8.5vw, 9.5rem); }
.contact-page .contact-form { margin: 0; max-width: none; }
.contact-page .socials-contact { justify-content: flex-start; }

@media (max-width: 900px) {
  .contact-page { padding-top: 9rem; }
  .contact-grid { grid-template-columns: 1fr; text-align: center; gap: 3.5rem; }
  .contact-page .eyebrow { justify-content: center; }
  .contact-page .eyebrow::before { display: none; }
  .contact-page .contact-form { margin: 0 auto; max-width: 36rem; width: 100%; }
  .contact-page .socials-contact { justify-content: center; }
}


.socials-contact { justify-content: center; margin-top: 3rem; }
.socials-contact .social svg { height: 20px; }

/* contact: email block */
.contact-mail-block { margin-top: 2.8rem; }
.contact-cue { color: var(--text-3); font-size: 0.95rem; }
.contact-mail-block .contact-mail { margin-top: 0.6rem; }
.contact-time { color: var(--text-3); margin-top: 1rem; }

/* contact: message form */
.contact-form {
  max-width: 36rem;
  margin: 4rem auto 0;
  text-align: left;
  display: grid;
  gap: 2rem;
}
.cf-field { display: grid; gap: 0.55rem; }
.cf-label { text-transform: uppercase; color: var(--text-1); font-size: 0.85rem; font-weight: 500; }
.contact-form input,
.contact-form textarea {
  font-family: var(--sans);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text-1);
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--text-1);
  border-radius: 0;
  padding: 0.5rem 0 0.7rem;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #9a9a97;
  opacity: 1;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-bottom-color: var(--accent);
}
.contact-form textarea { resize: vertical; min-height: 6.5rem; }

.cf-send {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font: inherit;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-1);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 0 0.3rem;
  position: relative;
}
.cf-send::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scale3d(0, 1, 1);
  transform-origin: 100% 50%;
  transition: transform 0.35s var(--ease-out);
}
.cf-send:hover::after,
.cf-send:focus-visible::after {
  transform: scale3d(1, 1, 1);
  transform-origin: 0% 50%;
}
.cf-send:disabled { opacity: 0.45; cursor: default; }
.cf-arrow { height: 0.85em; width: auto; transition: transform 0.35s var(--ease-out); }
.cf-send:hover .cf-arrow { transform: translateX(0.25em); }

.cf-status { color: var(--text-2); min-height: 1.2em; margin-top: -0.6rem; }

.contact-title {
  font-size: clamp(4rem, 14vw, 13rem);
  line-height: 1;
  font-weight: 460;
  letter-spacing: -0.01em;
}
.contact-title em { font-variation-settings: "opsz" 144; }

.contact-sub { color: var(--text-2); margin-top: 1.6rem; }

.contact-mail {
  display: inline-block;
  margin-top: 2.4rem;
  font-size: clamp(1.15rem, 2.6vw, 1.7rem);
  font-weight: 600;
  position: relative;
  padding-bottom: 0.2rem;
}
.contact-mail::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scale3d(0, 1, 1);
  transform-origin: 100% 50%;
  transition: transform 0.35s var(--ease-out);
}
.contact-mail:hover::after,
.contact-mail:focus-visible::after {
  transform: scale3d(1, 1, 1);
  transform-origin: 0% 50%;
}

/* ============================================================
   footer
   ============================================================ */
.footer {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: baseline;
  padding: 2.2rem var(--pad-x);
  border-top: 1px solid var(--line);
  color: var(--text-3);
  font-size: 0.85rem;
}
.footer-credit { text-align: center; }
.footer-year { position: absolute; right: var(--pad-x); top: 50%; transform: translateY(-50%); }

/* ============================================================
   responsive
   ============================================================ */
@media (max-width: 900px) {
  .work-grid { grid-template-columns: 1fr; max-width: 30rem; }
  .steps { grid-template-columns: 1fr; gap: 2rem; }
  .service { grid-template-columns: 1fr; gap: 1rem; }
}

@media (max-width: 900px) {
  .nav {
    padding: 0.9rem var(--pad-x);
    flex-wrap: wrap;
    row-gap: 0.35rem;
    background: var(--bg); /* solid on mobile so content doesn't scroll through the two-row nav */
  }
  .wordmark { font-size: 1.1rem; }
  .nav-links {
    width: 100%;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.82rem;
  }
  .lang-toggle { margin-left: 0; }
}

@media (max-width: 640px) {
  /* phones: drop the fake browser bar, give the space to the screenshot */
  .browser-bar { display: none; }
  .browser-shot { height: clamp(14rem, 52vw, 22rem); }
  .hero { padding-top: 7rem; display: block; }
  .hero-note-left { position: static; transform: none; margin-bottom: 2.2rem; }
  .hero-note-right { position: static; transform: none; text-align: left; margin-top: 2.2rem; max-width: 18rem; }
  .hero-title { margin-top: 1rem; }
  .hero-l1 { margin-left: 0; }
  .hero-l2 { margin-right: 0; }
  .hero-l3 { margin-left: 0; gap: 0.8rem; }
  .l3-label { display: none; }
  .hero-foot { margin-top: 3.5rem; opacity: 1; grid-template-columns: 1fr auto; }
  .hero-scroll { display: none; }
  .hero-sign { white-space: nowrap; }
  .statement-sub { margin-left: 0; }
  .page-head { padding-top: 8rem; }
  .footer { flex-direction: column; gap: 0.4rem; }
  .footer-year { position: static; transform: none; }
}