/* María Capello — Under Construction
   Maria Capello Design System: sky gradient, bitmap display faces, white type. */

@font-face {
  font-family: "Mondwest";
  src: url("fonts/Mondwest-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "NeueBit";
  src: url("fonts/NeueBit-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Unica Pro";
  src: url("fonts/NeueHaasUnicaPro-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --mc-sky-top: #7DBEFA;
  --mc-sky-bottom: #C7E8FF;
  --mc-deep: #0078F0;
  --mc-cyan: #99EEFF;
  --mc-white: #FFFFFF;
  --mc-hairline: rgba(255, 255, 255, 0.55);
  --mc-font-cover: "Mondwest", monospace;   /* bitmap serif — cap ratio 0.645 */
  --mc-font-page: "NeueBit", monospace;     /* bitmap grotesque — cap ratio 0.505 */
  --mc-font-text: "Neue Haas Unica Pro", "Helvetica Neue", Helvetica, sans-serif;
  --mc-edge: clamp(28px, 5.6vw, 88px);
  --mc-cap-hero: clamp(35px, 7.75vw, 125px);
}

* { box-sizing: border-box; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
html, body { margin: 0; padding: 0; height: 100%; background: var(--mc-sky-top); }
body { overflow: hidden; font-family: var(--mc-font-text); -webkit-text-size-adjust: 100%; }

.stage {
  position: fixed; inset: 0; overflow: hidden;
  background: linear-gradient(180deg, var(--mc-sky-top) 0%, var(--mc-sky-bottom) 100%);
}
#gradient { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.grain {
  position: absolute; inset: 0; pointer-events: none;
  mix-blend-mode: overlay; opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.frame { position: absolute; inset: 0; padding: var(--mc-edge); pointer-events: none; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Metadata — top right */
.meta {
  position: absolute; top: var(--mc-edge); right: var(--mc-edge); text-align: right;
  animation: fadeUp .9s cubic-bezier(.16, 1, .3, 1) both; animation-delay: .2s;
}
.meta-name {
  margin: 0; font-family: var(--mc-font-page); font-weight: 700;
  font-size: clamp(15px, 1.35vw, 19px); letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--mc-white);
}
.meta-sub {
  margin-top: 0.35em; font-family: var(--mc-font-text); font-weight: 400;
  font-size: clamp(11px, 0.9vw, 13px); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--mc-white); opacity: 0.8;
}

/* Lockup — bottom left */
.lockup {
  position: absolute; left: var(--mc-edge); right: var(--mc-edge); bottom: var(--mc-edge);
  display: flex; flex-direction: column; gap: clamp(20px, 3vw, 38px);
  will-change: transform;
}

.title {
  margin: 0; font-weight: 700; line-height: 0.67; text-transform: uppercase;
  color: var(--mc-white); letter-spacing: 0; white-space: nowrap;
  -webkit-font-smoothing: none; font-smooth: never;
  text-shadow: 0 1px 6px rgba(0, 120, 240, 0.22);
}
/* Cap-height matched: font-size = cap ÷ face ratio */
.title .mw { font-family: var(--mc-font-cover); font-size: calc(var(--mc-cap-hero) / 0.645); }
.title .nb { font-family: var(--mc-font-page);  font-size: calc(var(--mc-cap-hero) / 0.505); }
.title span { display: inline-block; transition: transform 0.08s ease-out; will-change: transform, filter; }

.sub { display: flex; flex-direction: column; gap: 0.55em; max-width: 52ch; }
.sub > * { opacity: 0; animation: fadeUp .7s cubic-bezier(.16, 1, .3, 1) both; }
.sub > *:nth-child(1) { animation-delay: 1.1s; }
.sub > *:nth-child(2) { animation-delay: 1.2s; }
.sub > *:nth-child(3) { animation-delay: 1.3s; }
.sub > *:nth-child(4) { animation-delay: 1.4s; }
.sub > *:nth-child(5) { animation-delay: 1.5s; }
.sub p {
  margin: 0; font-family: var(--mc-font-text); font-weight: 400;
  font-size: clamp(12px, 1.15vw, 17px); line-height: 1.4;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--mc-white);
  text-shadow: 0 1px 4px rgba(0, 120, 240, 0.24); text-wrap: pretty;
}
.rule { height: 1px; width: 100%; max-width: 340px; background: var(--mc-hairline); }

.links {
  display: flex; align-items: center; gap: clamp(14px, 1.6vw, 22px);
  pointer-events: auto; font-family: var(--mc-font-page); font-weight: 700;
  font-size: clamp(14px, 1.25vw, 18px); text-transform: uppercase; letter-spacing: 0.03em;
  opacity: 0; animation: fadeUp .7s cubic-bezier(.16, 1, .3, 1) both; animation-delay: 1.7s;
}
.sep { width: 1px; height: 1.1em; background: var(--mc-hairline); }
a.mc-link {
  position: relative; display: inline-block; color: var(--mc-white); text-decoration: none; opacity: 0.82;
  transition: opacity 0.25s ease, transform 0.4s cubic-bezier(.16, 1, .3, 1);
}
a.mc-link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px;
  background: var(--mc-white); transition: right 0.4s cubic-bezier(.16, 1, .3, 1);
}
a.mc-link:hover, a.mc-link:focus-visible { opacity: 1; }
a.mc-link:hover::after, a.mc-link:focus-visible::after { right: 0; }

/* Tablet */
@media (max-width: 1024px) {
  .sub { max-width: 44ch; }
  .rule { max-width: 290px; }
}

/* Phone — title and body read as one continuous text block */
@media (max-width: 600px) {
  :root { --mc-cap-hero: clamp(22px, 7vw, 34px); }
  .meta { right: auto; left: var(--mc-edge); text-align: left; }
  .lockup { gap: 0; }
  .title { line-height: 0.78; }
  .sub { max-width: 100%; gap: 0.5em; margin-top: 0.5em; }
  .rule { max-width: 150px; }
  .links { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 18px; }
  .sep { display: none; }
  a.mc-link { display: inline-block; padding: 6px 0; min-height: 44px; line-height: 32px; }
}

/* Custom cursor — added by app.js only when the pointer is fine and motion isn't reduced */
.cursor-ring {
  position: fixed; top: 0; left: 0; width: 26px; height: 26px;
  border: 1.5px solid rgba(255, 255, 255, 0.9); border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 9999; opacity: 0;
  transition: opacity .3s ease, width .3s cubic-bezier(.16, 1, .3, 1),
    height .3s cubic-bezier(.16, 1, .3, 1), background-color .3s ease;
}
.cursor-ring.active { opacity: 1; }
.cursor-ring.hover { width: 52px; height: 52px; background: rgba(255, 255, 255, 0.12); }
body.has-custom-cursor,
body.has-custom-cursor a.mc-link { cursor: none; }

@media (prefers-reduced-motion: reduce) {
  .title span { transition: none; }
  .meta, .sub > *, .links { animation: none; opacity: 1; transform: none; }
  .cursor-ring { display: none; }
}