/* Kulmud landing - single screen, the animated logo is the only protagonist.
   Monochrome: the whole logo is one ink color (currentColor), black on white,
   inverted in dark mode. No accent colors.
   All transform origins are given in SVG user units (viewBox 71 530 1199.17 290)
   with transform-box: view-box, so they do not drift when nested groups move.
   Every animation ends on "no transform": the resting state is the exact logo. */

:root {
  --bg: #ffffff;
  --ink: #000000;
  --link: #6b6b6b;
  --link-hover: #000000;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0b0b;
    --ink: #f5f5f5;
    --link: #9a9a9a;
    --link-hover: #f5f5f5;
  }
}

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

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

body {
  background: var(--bg);
  overflow: hidden; /* single screen: nothing scrolls */
  -webkit-tap-highlight-color: transparent;
}

.stage {
  display: grid;
  place-items: center;
  height: 100vh;
  height: 100svh;
  /* The taller the viewport is than wide, the higher the logo sits: nothing in
     landscape or square, growing with (height - width), capped at 22vh.
     The extra bottom padding is twice the lift because the logo is centred. */
  --lift: clamp(0px, (100vh - 100vw) * 0.32, 22vh);
  /* symmetric room for the link so the logo stays optically centred */
  padding: 76px max(4vw, env(safe-area-inset-left)) calc(76px + 2 * var(--lift)) max(4vw, env(safe-area-inset-right));
}

.logo {
  margin: 0;
  color: var(--ink);
  /* very wide mark (~4.14:1): use nearly the full width on phones,
     cap it on desktop and on short landscape viewports */
  width: min(100%, 1770px, calc((100vh - 152px) * 6.2026));
  aspect-ratio: 1199.17 / 290;
  line-height: 0;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

.logo__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.logo__svg g,
.logo__svg path {
  transform-box: view-box;
}

/* ---------- Portrait ----------
   "l", "m" and the second "u" are a single stroke, so the word cannot stack
   in two rows: it stays on one line and only the side padding shrinks. */

@media (max-aspect-ratio: 4/5) {
  .stage {
    padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
  }
}

/* ---------- Transform origins (user units) ---------- */

.letter--u1  { transform-origin: 390.1px 800px; --in: 500ms; --rip: 4500ms; }
.letter--lmu { transform-origin: 789.8px 800px; --in: 700ms; --rip: 4740ms; }
.letter--d   { transform-origin: 1174.4px 800px; --in: 900ms; --rip: 4980ms; }

.k-group  { --rip: 4380ms; }
.glass--1 { --rip: 4620ms; }
.glass--2 { --rip: 4860ms; }
.glass--1 { transform-origin: 506.1px 708.4px; }
.glass--2 { transform-origin: 1070.8px 708.4px; }

#tri1-top    { transform-origin: 506.1px 637.8px; --in: 1300ms; }
#tri1-bottom { transform-origin: 506.1px 779px; --in: 1400ms; }
#tri2-top    { transform-origin: 1070.8px 637.8px; --in: 1500ms; }
#tri2-bottom { transform-origin: 1070.8px 779px; --in: 1600ms; }

#letter-k { transform-origin: 212px 800px; }
#k-tick  { transform-origin: 111px 590.9px; }
.heart,
.heart__kick,
.heart__beat { transform-origin: 335.1px 608.1px; }

/* ---------- Act 1: the word settles in, piece by piece ----------
   Everything is slow and soft: fades and short glides that ease out.
   No overshoot, no bounce, no recoil. */

#letter-k {
  animation: rise 1000ms cubic-bezier(0.2, 0.6, 0.2, 1) 100ms backwards;
}

#k-tick {
  animation: tick-drop 900ms cubic-bezier(0.2, 0.6, 0.2, 1) 800ms backwards;
}

.letter {
  animation:
    rise 1100ms cubic-bezier(0.2, 0.6, 0.2, 1) var(--in) backwards,
    ripple 1400ms ease-in-out var(--rip);
}

[id^="tri"] {
  animation: tri-in 1100ms cubic-bezier(0.2, 0.6, 0.2, 1) var(--in) backwards;
}

/* ---------- Act 2: the heart drops in from above, by surprise, and settles ---------- */

.heart {
  animation: heart-in 1000ms linear 2000ms backwards;
}

.heart__kick {
  animation: heart-touch 1400ms ease-in-out 4200ms;
}

.k-group,
.glass {
  animation: ripple 1400ms ease-in-out var(--rip);
}

/* ---------- Act 3: living rest ---------- */

/* The heart only beats, in coral, when it brings a colour effect: main.js
   runs each beat together with the effect it fires. */

/* Brand-colour effects: five passes of the three colours through the letters.
   Order: wave, tide, there and back, thirds, stripes. Each one is a single
   2700ms run that main.js fires on a heartbeat by setting data-fx="1".."5"
   on .logo, and only while every letter is at rest: the colours are clipped
   to the resting letters, so they must never run while a letter is off its
   place. At rest every effect sits out of sight. The heart beats, in
   coral, only when it fires one of them (main.js). The viewer
   (evolucion.html) carries its own looping copy. */
.fx--2 { transform-origin: 335.1px 608.1px; transform: scale(0); }
.fx--4 polygon,
.fx--5 { opacity: 0; }

.logo[data-fx="1"] .fx--2 { animation: fx-wave 2700ms linear; }
.logo[data-fx="2"] .fx--1 { animation: fx-tide 2700ms linear; }
.logo[data-fx="3"] .fx--3 { animation: fx-return 2700ms linear; }
.logo[data-fx="4"] .fx--4 polygon { animation: fx-thirds 2200ms linear; }
.logo[data-fx="4"] .fx--4 polygon:nth-child(2) { animation-delay: 250ms; }
.logo[data-fx="4"] .fx--4 polygon:nth-child(3) { animation-delay: 500ms; }
.logo[data-fx="5"] .fx--5 { animation: fx-stripes 2700ms linear; }

/* ---------- Keyframes ---------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

@keyframes tick-drop {
  from { opacity: 0; transform: translateY(-18px); }
  to   { opacity: 1; transform: none; }
}

@keyframes tri-in {
  from { opacity: 0; transform: rotate(-60deg) scale(0.7); }
  to   { opacity: 1; transform: none; }
}

/* Falls from well above the word, lands and settles with one short rebound */
@keyframes heart-in {
  0%   { opacity: 0; transform: translateY(-700px); animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.5); }
  12%  { opacity: 1; }
  55%  { opacity: 1; transform: none; animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1); }
  72%  { transform: translateY(-16px); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
  100% { opacity: 1; transform: none; }
}

@keyframes heart-touch {
  0%   { transform: none; }
  45%  { transform: scale(1.05); }
  100% { transform: none; }
}

/* Uses the individual translate property so it layers over transform */
@keyframes ripple {
  0%   { translate: 0 0; }
  50%  { translate: 0 -5px; }
  100% { translate: 0 0; }
}

/* The three bands fill the whole height for a moment, like a flag */
@keyframes fx-tide {
  0%    { transform: none; animation-timing-function: cubic-bezier(0.3, 0, 0.3, 1); }
  38.5% { transform: translateY(-300px); }
  61.5% { transform: translateY(-300px); animation-timing-function: cubic-bezier(0.7, 0, 0.7, 1); }
  100%  { transform: translateY(-600px); }
}

@keyframes fx-wave {
  0%   { transform: scale(0); animation-timing-function: cubic-bezier(0.3, 0, 0.7, 1); }
  100% { transform: scale(1.45); }
}

@keyframes fx-return {
  0%   { transform: none; animation-timing-function: cubic-bezier(0.3, 0, 0.5, 1); }
  50%  { transform: translateX(1640px); animation-timing-function: cubic-bezier(0.5, 0, 0.7, 1); }
  100% { transform: none; }
}

@keyframes fx-thirds {
  0%   { opacity: 0; animation-timing-function: ease-in-out; }
  26%  { opacity: 1; }
  74%  { opacity: 1; animation-timing-function: ease-in-out; }
  100% { opacity: 0; }
}

@keyframes fx-stripes {
  0%   { opacity: 0; transform: none; }
  21%  { opacity: 1; }
  79%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(240px); }
}

/* ---------- Instagram link ---------- */

.ig {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  border-radius: 50%;
  color: var(--link);
  transition: color 300ms ease, transform 500ms ease;
  animation: ig-in 1200ms ease-out 5000ms backwards;
}

.ig:hover {
  color: var(--link-hover);
  transform: translateY(-2px);
}

.ig:active {
  transform: scale(0.97);
}

.ig:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

@keyframes ig-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Heart link: opens the logo evolution tool ---------- */

.heart-link {
  cursor: pointer;
  outline: none;
}

.heart-link:focus-visible circle {
  stroke: currentColor;
  stroke-width: 3;
}

/* ---------- Reduced motion: static logo ---------- */

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

  .ig:hover,
  .ig:active {
    transform: none;
  }
}