/* Meta y Carlitos: one screen, no scroll. Palette from design/brand/meta-y-carlitos/logos.ts. */

@font-face {
  font-family: "Montserrat";
  src: url("/fonts/montserrat.woff2") format("woff2");
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #1d1b2e;
  --cream: #f6f1e9;
  --ray: #efe5d4;
  --mustard: #e9a23b;
  --brick: #d2553f;
  --brick-deep: #b3402c;
  --sage: #6f9e86;
  --navy: #263159;
  --yellow: #ffd23f;
  --gutter: 16px;
  --safe-top: max(env(safe-area-inset-top), 12px);
  --safe-bottom: max(env(safe-area-inset-bottom), 14px);
  --ray-at: 50% 45%;
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

body {
  background-color: var(--cream);
  /* Sun rays fading out toward their centre, so the point where they meet never shows as a pinched star. */
  background-image:
    radial-gradient(circle at var(--ray-at), var(--cream) 0, rgb(246 241 233 / 0) 22vmin),
    repeating-conic-gradient(from -4deg at var(--ray-at), var(--cream) 0deg 7.5deg, var(--ray) 7.5deg 15deg);
  color: var(--ink);
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- layout: portrait (stacked) ---------- */

.page {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  overflow: clip;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  grid-template-areas: "brand" "stage" "tagline" "play" "links";
  justify-items: center;
  row-gap: clamp(6px, 1.6dvh, 18px);
  padding: var(--safe-top) max(env(safe-area-inset-right), var(--gutter)) var(--safe-bottom) max(env(safe-area-inset-left), var(--gutter));
}

.info {
  display: contents;
}

.stage-wrap {
  grid-area: stage;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Portrait: a square box (the stage viewBox is square) centred in its row, so spare height splits above and below. */
.stage {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  max-width: 720px;
  max-height: 100%;
  overflow: visible;
}

.brand {
  grid-area: brand;
  margin: 0;
  line-height: 0;
  position: relative;
  z-index: 2;
}

.wordmark {
  display: block;
  width: min(80vw, 420px, 50dvh);
  height: auto;
}

.tagline {
  grid-area: tagline;
  margin: 0;
  max-width: 30em;
  text-align: center;
  font-size: clamp(14px, min(4.1vw, 2.5dvh), 20px);
  font-weight: 700;
  line-height: 1.3;
  text-wrap: balance;
}

.tagline-break {
  display: block;
  height: 0;
  overflow: hidden;
}

/* The game (/juego): one wide button above the channels. */
.play {
  grid-area: play;
  display: flex;
  width: 100%;
  max-width: 460px;
  margin: 0;
  /* room for the button's hard shadow */
  padding: 0 6px 6px 0;
}

.links {
  grid-area: links;
  display: flex;
  justify-content: center;
  gap: clamp(10px, 3vw, 18px);
  width: 100%;
  max-width: 460px;
  /* room for the buttons' hard shadow */
  padding: 0 6px 6px 0;
}

/* Tall phones: a bigger wordmark uses the extra height. */
@media (max-aspect-ratio: 1/2) {
  .wordmark {
    width: min(88vw, 460px);
  }
}

/* ---------- buttons ---------- */

.link {
  --btn-bg: var(--mustard);
  --btn-fg: var(--ink);
  flex: 1 1 0;
  min-width: 0;
  min-height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: clamp(6px, 1.3dvh, 12px) 6px;
  border: 3px solid var(--ink);
  border-radius: 16px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: 4px 5px 0 var(--ink);
  font-size: clamp(13px, 3.8vw, 16px);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: transform 0.16s cubic-bezier(0.3, 1.6, 0.5, 1), box-shadow 0.16s ease, background-color 0.16s ease;
  touch-action: manipulation;
}

.link--youtube {
  --btn-bg: var(--brick-deep);
  --btn-fg: var(--cream);
}

.link--instagram {
  --btn-bg: var(--mustard);
  --btn-fg: var(--ink);
}

.link--tiktok {
  --btn-bg: var(--navy);
  --btn-fg: var(--cream);
}

.link--play {
  --btn-bg: var(--yellow);
  --btn-fg: var(--ink);
  flex-direction: row;
  gap: 10px;
  font-size: clamp(15px, 4.4vw, 19px);
}

.icon {
  width: clamp(24px, min(7vw, 4.2dvh), 32px);
  height: clamp(24px, min(7vw, 4.2dvh), 32px);
  flex: none;
}

.icon-cut {
  fill: var(--btn-bg);
}

.label {
  white-space: nowrap;
}

@media (hover: hover) {
  .link:hover {
    transform: translate(-2px, -3px) rotate(-2deg);
    box-shadow: 6px 8px 0 var(--ink);
  }

  .link:nth-child(2):hover {
    transform: translate(-2px, -3px) rotate(2deg);
  }
}

.link:active {
  transform: translate(3px, 4px);
  box-shadow: 1px 1px 0 var(--ink);
}

.link:focus {
  outline: none;
}

.link:focus-visible {
  outline: 4px solid var(--ink);
  outline-offset: 4px;
  box-shadow: 4px 5px 0 var(--ink), 0 0 0 4px var(--yellow);
}

/* ---------- layout: landscape (stage left, info right) ---------- */

@media (min-aspect-ratio: 6/5) {
  :root {
    --ray-at: 27% 50%;
  }

  .page {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "stage info";
    column-gap: clamp(8px, 3vw, 56px);
  }

  .info {
    grid-area: info;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 3dvh, 28px);
    width: 100%;
    max-width: 560px;
    min-height: 0;
  }

  /* The burst reaches above and left of the stage's viewBox: leave it room so it is not cut at the edge. */
  .stage-wrap {
    justify-self: stretch;
    padding: 10dvh 0 0 3vw;
  }

  .stage {
    height: 100%;
    aspect-ratio: auto;
  }

  .wordmark {
    width: min(100%, 520px, 82dvh);
  }

  .tagline {
    font-size: clamp(14px, min(1.6vw, 3.6dvh), 22px);
  }

  .links,
  .play {
    max-width: 520px;
  }

  .link {
    font-size: clamp(13px, min(1.4vw, 3.4dvh), 18px);
  }

  .icon {
    width: clamp(22px, min(2.4vw, 6dvh), 34px);
    height: clamp(22px, min(2.4vw, 6dvh), 34px);
  }
}

/* Roomy screens: pill buttons with the icon beside the label. */
@media (min-aspect-ratio: 6/5) and (min-width: 960px) and (min-height: 560px) {
  .link {
    flex-direction: row;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 999px;
  }

}

/* ---------- welcome sequence ---------- */

/* SVG groups transform around their own (0 0), which the export script puts on each pivot (feet, neck, shoulder). */
.stage g {
  transform-box: view-box;
  transform-origin: 0 0;
}

.burst-pop {
  animation: burst-pop 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) backwards;
}

.burst-back {
  animation: spin 70s linear infinite;
}

.burst-front {
  animation: spin 110s linear infinite reverse;
}

.sparkle {
  transform-box: fill-box;
  transform-origin: center;
  animation: sparkle-in 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) 1.1s backwards, twinkle 2.4s ease-in-out 1.6s infinite;
}

.sparkle.s2 { animation-delay: 1.25s, 2.2s; }
.sparkle.s3 { animation-delay: 1.4s, 1.9s; }
.sparkle.s4 { animation-delay: 1.3s, 2.6s; }

/* Each floor shadow grows in as its character lands. */
.shadow {
  transform-box: fill-box;
  transform-origin: center;
  animation: shadow-in 0.35s ease-out backwards;
}

.shadow-meta { animation-delay: 0.55s; }
.shadow-carlitos { animation-delay: 1.2s; }

.meta-enter {
  animation: meta-enter 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.2s backwards;
}

.carlitos-enter {
  animation: carlitos-enter 0.9s cubic-bezier(0.2, 0.9, 0.3, 1) 0.95s backwards;
}

.wordmark {
  transform-origin: 50% 60%;
  animation: wordmark-in 0.7s cubic-bezier(0.3, 1.6, 0.5, 1) 1.15s backwards;
}

.tagline {
  animation: rise-in 0.5s ease-out 1.5s backwards;
}

.link {
  animation: button-in 0.5s cubic-bezier(0.3, 1.7, 0.5, 1) backwards;
}

.link:nth-child(1) { animation-delay: 1.7s; }
.link:nth-child(2) { animation-delay: 1.85s; }
.link:nth-child(3) { animation-delay: 2s; }
.play .link--play { animation-delay: 2.2s; }

@keyframes burst-pop {
  from { transform: scale(0) rotate(-50deg); }
  to { transform: scale(1) rotate(0deg); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes shadow-in {
  from { transform: scale(0.2); opacity: 0; }
}

@keyframes sparkle-in {
  from { transform: scale(0) rotate(-90deg); }
}

@keyframes twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(0.7) rotate(20deg); }
}

@keyframes meta-enter {
  0% { transform: translateY(1250px) scale(0.9, 1.15); }
  55% { transform: translateY(-90px) scale(0.95, 1.06); }
  75% { transform: translateY(0) scale(1.12, 0.88); }
  88% { transform: translateY(-12px) scale(0.97, 1.03); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes carlitos-enter {
  0% { transform: translateX(900px) rotate(6deg); }
  70% { transform: translateX(-18px) rotate(-3deg); }
  100% { transform: translateX(0) rotate(0deg); }
}

@keyframes wordmark-in {
  0% { transform: scale(0) rotate(-14deg); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes rise-in {
  from { transform: translateY(14px); opacity: 0; }
}

@keyframes button-in {
  from { transform: translateY(24px) scale(0.6); opacity: 0; }
}

/* ---------- idle loops (one 10 s cycle after the welcome) ---------- */

:root {
  --idle-delay: 2.3s;
  --cycle: 10s;
}

.face:not(.meta-base, .carlitos-base) {
  opacity: 0;
}

.meta-idle {
  animation: meta-bob 0.9s ease-in-out var(--idle-delay) infinite alternate;
}

/* The raised arm is the static pose (no-animation fallback); the loop waves, rests it, then raises it again. */
.meta-arm {
  transform: rotate(142deg);
  animation: meta-wave var(--cycle) ease-in-out 1s infinite;
}

.meta-head {
  animation: meta-head var(--cycle) ease-in-out var(--idle-delay) infinite;
}

.meta-hola {
  animation: meta-hola var(--cycle) step-end 1s infinite;
}

.meta-blink {
  animation: meta-blink var(--cycle) step-end var(--idle-delay) infinite;
}

.meta-laugh {
  animation: meta-laugh var(--cycle) step-end var(--idle-delay) infinite;
}

.carlitos-idle {
  animation: carlitos-sway 3.4s ease-in-out var(--idle-delay) infinite alternate;
}

.carlitos-head {
  animation: carlitos-head var(--cycle) ease-in-out var(--idle-delay) infinite;
}

.carlitos-blink {
  animation: carlitos-blink var(--cycle) step-end var(--idle-delay) infinite;
}

.carlitos-glance {
  animation: carlitos-glance var(--cycle) step-end var(--idle-delay) infinite;
}

.carlitos-brow {
  animation: carlitos-brow var(--cycle) step-end var(--idle-delay) infinite;
}

@keyframes meta-bob {
  from { transform: translateY(0) scale(1, 1); }
  to { transform: translateY(-14px) scale(0.99, 1.015); }
}

@keyframes meta-wave {
  0% { transform: rotate(142deg); }
  4% { transform: rotate(118deg); }
  8% { transform: rotate(148deg); }
  12% { transform: rotate(118deg); }
  16% { transform: rotate(148deg); }
  20% { transform: rotate(138deg); }
  26% { transform: rotate(-4deg); }
  29% { transform: rotate(4deg); }
  31%, 86% { transform: rotate(0deg); }
  93% { transform: rotate(152deg); }
  100% { transform: rotate(142deg); }
}

@keyframes meta-hola {
  0% { opacity: 1; }
  3% { opacity: 0; }
  5% { opacity: 1; }
  9% { opacity: 0; }
  11% { opacity: 1; }
  16%, 100% { opacity: 0; }
}

@keyframes meta-head {
  0%, 46% { transform: rotate(0deg) scale(1); }
  48% { transform: rotate(-7deg) scale(1.07); }
  51% { transform: rotate(5deg) scale(1.07); }
  54% { transform: rotate(-6deg) scale(1.07); }
  57% { transform: rotate(5deg) scale(1.07); }
  60% { transform: rotate(-4deg) scale(1.05); }
  64%, 100% { transform: rotate(0deg) scale(1); }
}

@keyframes meta-blink {
  0% { opacity: 0; }
  30% { opacity: 1; }
  31.5% { opacity: 0; }
  80% { opacity: 1; }
  81.5%, 100% { opacity: 0; }
}

@keyframes meta-laugh {
  0% { opacity: 0; }
  47% { opacity: 1; }
  64%, 100% { opacity: 0; }
}

@keyframes carlitos-sway {
  from { transform: rotate(-1.2deg); }
  to { transform: rotate(1.2deg); }
}

@keyframes carlitos-head {
  0%, 48% { transform: rotate(0deg); }
  52%, 68% { transform: rotate(-6deg); }
  72%, 78% { transform: rotate(4deg); }
  84%, 100% { transform: rotate(0deg); }
}

@keyframes carlitos-blink {
  0% { opacity: 0; }
  20% { opacity: 1; }
  21.5% { opacity: 0; }
  90% { opacity: 1; }
  91.5%, 100% { opacity: 0; }
}

@keyframes carlitos-glance {
  0% { opacity: 0; }
  50% { opacity: 1; }
  69%, 100% { opacity: 0; }
}

@keyframes carlitos-brow {
  0% { opacity: 0; }
  70% { opacity: 1; }
  79%, 100% { opacity: 0; }
}

/* ---------- reduced motion: the final composed frame, no loops ---------- */

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

/* ---------- 404 ---------- */

.page--404 {
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  grid-template-areas: "brand" "stage" "title" "tagline" "links";
}

.brand--small {
  display: block;
  border-radius: 12px;
}

.brand--small .wordmark {
  width: min(56vw, 260px, 30dvh);
}

.brand--small:focus-visible {
  outline: 4px solid var(--ink);
  outline-offset: 4px;
}

.notfound-title {
  grid-area: title;
  margin: 0;
  text-align: center;
  font-size: clamp(22px, min(7vw, 4.6dvh), 40px);
  font-weight: 900;
  line-height: 1.1;
  animation: rise-in 0.5s ease-out 0.6s backwards;
}

.duo {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2%;
  width: 100%;
  height: 100%;
  max-width: 520px;
  padding-top: 4px;
}

.duo img {
  display: block;
  width: auto;
  min-width: 0;
  max-width: 48%;
  object-fit: contain;
  object-position: bottom;
  transform-origin: 50% 100%;
}

/* The drawings share one scale: Meta's file is 869 units tall, Carlitos's 897. */
.duo-meta {
  height: 96.9%;
  animation: rise-in 0.5s ease-out backwards, scratch 1.8s ease-in-out 0.6s infinite alternate;
}

.duo-carlitos {
  height: 100%;
  animation: rise-in 0.5s ease-out 0.25s backwards, carlitos-sway 3.4s ease-in-out 0.8s infinite alternate;
}

.links--single {
  max-width: 280px;
}

.link--home {
  --btn-bg: var(--yellow);
  --btn-fg: var(--ink);
  flex-direction: row;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  animation-delay: 0.9s;
}

@keyframes scratch {
  from { transform: rotate(-2deg); }
  to { transform: rotate(2deg); }
}

@media (min-aspect-ratio: 6/5) {
  .page--404 {
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "stage info";
  }

  .page--404 .stage-wrap {
    padding: 6dvh 0 2dvh;
  }

  .page--404 .duo {
    max-width: 760px;
    max-height: 620px;
  }

  .page--404 .brand--small .wordmark {
    width: min(100%, 320px, 46dvh);
  }

  .page--404 .notfound-title {
    font-size: clamp(22px, min(3vw, 7dvh), 44px);
  }
}