/*
 * riela · drinkriela.com
 */

@font-face {
  font-family: 'Jost';
  src: url('fonts/jost-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Spline Sans Mono';
  src: url('fonts/spline-sans-mono-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* Registrados como <color> para que el paso de un sabor a otro sea un fundido y no un salto. */
@property --c1 {
  syntax: '<color>';
  inherits: true;
  initial-value: #f6a04d;
}

@property --c2 {
  syntax: '<color>';
  inherits: true;
  initial-value: #fcddb8;
}

@property --c3 {
  syntax: '<color>';
  inherits: true;
  initial-value: #f7c66a;
}

@property --ink {
  syntax: '<color>';
  inherits: true;
  initial-value: #4a2608;
}

@property --c1-grain {
  syntax: '<color>';
  inherits: true;
  initial-value: #f48e2d;
}

@property --c3-grain {
  syntax: '<color>';
  inherits: true;
  initial-value: #f6bf53;
}

/*
 * Un sabor por bloque: color principal, claro, acento y tinta (la de los textos sobre su color).
 * Van en oklch y no en hex a propósito: así el fundido entre dos sabores se calcula en Oklab y el
 * color de paso queda vivo (en sRGB, entre colores lejanos pasaba por un tono sucio). Al lado, el
 * mismo color en hex.
 * --c1-grain y --c3-grain son c1 y c3 un poco más hondos: el grano deja pasar en promedio el 77%
 * del color, y con ellos el promedio vuelve a ser c1 y c3 (los puntos que pasan enteros quedan
 * más intensos y los demás más claros).
 * --code y --theme no están registrados, así que cambian al instante: main.js los lee para
 * escribir el código y el color de la barra del navegador.
 */
:root,
:root[data-flavor='0'] {
  --c1: oklch(77.7% 0.1412 61.95); /* #F6A04D */
  --c2: oklch(91.41% 0.0594 71.9); /* #FCDDB8 */
  --c3: oklch(85.17% 0.1234 81.57); /* #F7C66A */
  --ink: oklch(31.11% 0.0678 55.7); /* #4A2608 */
  --c1-grain: oklch(74.10% 0.1605 58.51); /* #F48E2D */
  --c3-grain: oklch(83.48% 0.1383 81.56); /* #F6BF53 */
  --code: 'V_01';
  --theme: #fcddb8;
}

:root[data-flavor='1'] {
  --c1: oklch(67.91% 0.164 5.19); /* #E8668A */
  --c2: oklch(88.03% 0.0557 359.89); /* #F8C9D6 */
  --c3: oklch(79.41% 0.0969 21.8); /* #F4A3A0 */
  --ink: oklch(27.9% 0.0893 5.77); /* #4A0F22 */
  --c1-grain: oklch(63.03% 0.1924 7.93); /* #E34873 */
  --c3-grain: oklch(77.05% 0.1108 25.38); /* #F39890 */
  --code: 'H_02';
  --theme: #f8c9d6;
}

:root[data-flavor='2'] {
  --c1: oklch(87.47% 0.1502 94.84); /* #F5D451 */
  --c2: oklch(94.29% 0.0792 96.73); /* #FBEDB0 */
  --c3: oklch(89.87% 0.1025 119.64); /* #D5E89A */
  --ink: oklch(35.61% 0.0687 90.08); /* #4A3A06 */
  --c1-grain: oklch(85.69% 0.1620 93.96); /* #F3CD35 */
  --c3-grain: oklch(88.74% 0.1127 124.17); /* #CAE793 */
  --code: 'V_03';
  --theme: #fbedb0;
}

:root[data-flavor='3'] {
  --c1: oklch(78.95% 0.0929 317.23); /* #D3A8E2 */
  --c2: oklch(93.06% 0.0311 317.71); /* #F1E2F6 */
  --c3: oklch(86.18% 0.0593 1.1); /* #F4C2CF */
  --ink: oklch(28.81% 0.0901 312.9); /* #3A1A4A */
  --c1-grain: oklch(74.83% 0.1112 317.06); /* #CA97DC */
  --c3-grain: oklch(84.12% 0.0718 6.73); /* #F5B8C3 */
  --code: 'E_04';
  --theme: #f1e2f6;
}

:root[data-flavor='4'] {
  --c1: oklch(80.52% 0.1269 132.97); /* #9FD17A */
  --c2: oklch(94.03% 0.048 127.91); /* #E2F2D0 */
  --c3: oklch(89.03% 0.1246 105.67); /* #E6E07A */
  --ink: oklch(31.39% 0.0783 137.27); /* #1C3A0E */
  --c1-grain: oklch(76.57% 0.1488 133.74); /* #8BC760 */
  --c3-grain: oklch(87.78% 0.1437 103.75); /* #E7DB60 */
  --code: 'H_05';
  --theme: #e2f2d0;
}

:root[data-flavor='5'] {
  --c1: oklch(68.18% 0.1713 27.12); /* #F0675C */
  --c2: oklch(89.89% 0.0462 29.64); /* #FBD3CC */
  --c3: oklch(79.29% 0.1093 45.84); /* #F6A57F */
  --ink: oklch(27.95% 0.0841 27.08); /* #4A1310 */
  --c1-grain: oklch(63.53% 0.2045 28.44); /* #ED473B */
  --c3-grain: oklch(76.37% 0.1292 46.75); /* #F59768 */
  --code: 'V_06';
  --theme: #fbd3cc;
}

:root[data-flavor='6'] {
  --c1: oklch(71.43% 0.1038 175.76); /* #4FB8A0 */
  --c2: oklch(92.65% 0.0313 176.55); /* #D2EEE6 */
  --c3: oklch(84.32% 0.0619 165.54); /* #A6D9C2 */
  --ink: oklch(31.58% 0.0502 176.55); /* #0E3A31 */
  --c1-grain: oklch(65.72% 0.1159 173.34); /* #28A88B */
  --c3-grain: oklch(81.92% 0.0717 163.43); /* #99D3B7 */
  --code: 'E_07';
  --theme: #d2eee6;
}

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --edge: clamp(20px, 4vw, 48px);
  --fade: 2.4s;
  /* Alto de la luz (centro del logo) y del agua (donde empiezan los destellos). main.js los
     ajusta a la posición real del logo; estos valores sirven si no hay JavaScript. */
  --sun-y: 42%;
  --horizon: 54%;

  background: var(--c2);
  color: var(--ink);
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Las transiciones de color se activan después del primer cuadro: al cargar, el sabor aparece ya puesto. */
:root[data-ready] {
  transition:
    --c1 var(--fade) var(--ease-out),
    --c2 var(--fade) var(--ease-out),
    --c3 var(--fade) var(--ease-out),
    --ink var(--fade) var(--ease-out);
}

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--c2);
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--ink);
  color: var(--c2);
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
  border-radius: 4px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Una sola pantalla: arriba aire, al medio el nombre, abajo el agua con los destellos. */
.stage {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: minmax(var(--edge), 1fr) auto minmax(max-content, 1.3fr);
  overflow: hidden;
}

/*
 * La luz, en capas sobre el claro del sabor (--c2), que hace de papel:
 *  - .aura: el color del sabor alrededor del nombre;
 *  - .water: el agua, desde el horizonte hacia abajo, un poco más honda;
 *  - .stage::before y .shine: el blanco del centro de la luz y su reflejo en el agua.
 *
 * Degradados con grano fino, y el grano solo donde hay color. Las capas de color usan grano.png
 * como máscara, a medio pixel por punto (un pixel en pantallas retina). Cada punto deja pasar más
 * o menos color, así que el grano crece con el color, y el claro y el blanco quedan limpios. Nada
 * de esto se anima: el grano queda quieto.
 */
.aura,
.water,
.shine {
  position: absolute;
  pointer-events: none;
}

.aura {
  inset: 0;
  z-index: -5;
  background: radial-gradient(38vmax 22vmax at 50% var(--sun-y), var(--c1-grain), transparent 100%);
  -webkit-mask: url('grano.png') 0 0 / 96px 96px repeat;
  mask: url('grano.png') 0 0 / 96px 96px repeat;
}

/* El borde de arriba del agua se difumina, para que el horizonte se intuya y no sea una línea. */
.water {
  inset: var(--horizon) 0 0;
  z-index: -4;
  background:
    radial-gradient(min(60vw, 70vh) 100% at 50% 0%, var(--c1-grain), transparent 100%),
    linear-gradient(
      to bottom,
      color-mix(in oklab, var(--c1-grain) 55%, transparent),
      color-mix(in oklab, var(--c3-grain) 75%, transparent)
    );
  -webkit-mask:
    url('grano.png') 0 0 / 96px 96px repeat,
    linear-gradient(to bottom, transparent, #000 min(9vh, 70px)) no-repeat;
  -webkit-mask-composite: source-in;
  mask:
    url('grano.png') 0 0 / 96px 96px repeat,
    linear-gradient(to bottom, transparent, #000 min(9vh, 70px)) no-repeat;
  mask-composite: intersect;
}

.shine {
  inset: var(--horizon) 0 0;
  z-index: -3;
  background: radial-gradient(min(30vw, 34vh) 70% at 50% 0%, rgb(255 255 255 / 0.42), rgb(255 255 255 / 0) 100%);
  -webkit-mask: linear-gradient(to bottom, transparent, #000 min(9vh, 70px));
  mask: linear-gradient(to bottom, transparent, #000 min(9vh, 70px));
}

.stage::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background: radial-gradient(15vmax 9vmax at 50% var(--sun-y), rgb(255 255 255 / 0.78), rgb(255 255 255 / 0) 100%);
}

.glints {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  animation: rise 2.4s 0.9s var(--ease-out) both;
}

@keyframes rise {
  from {
    opacity: 0;
  }
}

.center {
  grid-row: 2;
  display: grid;
  justify-items: center;
  gap: clamp(14px, 2.2vh, 22px);
  padding: 0 var(--edge);
}

.brand {
  margin: 0;
  line-height: 0;
}

/* La e sola: del tamaño de una letra grande, no de un logotipo. */
.logo {
  display: block;
  width: clamp(76px, 7.4vw, 116px);
  height: auto;
  overflow: visible;
}

/* La e se dibuja como se escribe: primero la onda, después el ojo. */
.logo path {
  --i: 0;
  stroke-dasharray: 1 2;
  animation: draw 1.3s calc(0.3s + var(--i) * 420ms) var(--ease-out) both;
}

.logo path + path {
  --i: 1;
}

@keyframes draw {
  from {
    stroke-dashoffset: 1.02;
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
}

/* El código del sabor, como en la lata. Al tocarlo cambia el color. */
.code {
  appearance: none;
  margin: 0;
  padding: 6px 10px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: inherit;
  font-family: 'Spline Sans Mono', ui-monospace, monospace;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: appear 1.2s 1.35s var(--ease-out) both;
  transition: background-color 0.3s var(--ease-out);
}

.code:hover {
  background: rgb(255 255 255 / 0.4);
}

/* Sin JavaScript el código no cambia nada: se ve como texto. */
:root:not([data-flavor]) .code {
  cursor: default;
  pointer-events: none;
}

.code [data-code-text] {
  display: inline-block;
}

.code[data-changing] [data-code-text] {
  animation: swap 0.7s var(--ease-out);
}

@keyframes swap {
  from {
    opacity: 0;
    filter: blur(3px);
  }
}

.foot {
  grid-row: 3;
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  padding: var(--edge);
  padding-bottom: max(var(--edge), env(safe-area-inset-bottom));
  padding-top: clamp(64px, 12vh, 140px);
  animation: appear 1.2s 1.6s var(--ease-out) both;
}

.soon {
  margin: 0;
  font-size: clamp(19px, 1.6vw, 24px);
  font-weight: 400;
  letter-spacing: -0.005em;
}

.links {
  display: flex;
  gap: 22px;
}

.links a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
  text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
  transition: text-decoration-color 0.25s var(--ease-out);
}

.links a:hover {
  text-decoration-color: currentColor;
}

@keyframes appear {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* Sin movimiento: la e y el resto aparecen con un fundido corto, la luz queda quieta. */
@media (prefers-reduced-motion: reduce) {
  .logo path,
  .glints,
  .code,
  .foot {
    animation: fade 0.4s ease-out both;
  }

  .code[data-changing] [data-code-text] {
    animation: none;
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }
}