/* oves.pl placeholder until the phase-2 shop. Brand: ink #124f79, sunflower #fcc107, mist #eaebef. */

@font-face {
  font-family: 'Geist';
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/geist-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/geist-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range:
    U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/geist-cyrillic-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* The page is the brand's ink field in both colour schemes; it has no light variant. */
:root {
  color-scheme: dark;
  --ink: #124f79;
  --ink-deep: #0e4064;
  --sunflower: #fcc107;
  --mist: #eaebef;
  --font-body: 'Geist', system-ui, sans-serif;
  --gutter: clamp(16px, 3vw, 40px);
  /* Height of the one-line footer on wide screens, so the garden ends right above it. */
  --footer-height: 80px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--mist);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

a:focus-visible {
  outline: 3px solid var(--sunflower);
  outline-offset: 4px;
}

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

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

.nowrap {
  white-space: nowrap;
}

/* ── Layout ─────────────────────────────────────────────────────────────── */

.page {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    'brand garden'
    'content garden'
    'elsewhere elsewhere';
  /* Side padding clears phone notches in landscape. */
  --pad-left: max(var(--gutter), env(safe-area-inset-left));
  --pad-right: max(var(--gutter), env(safe-area-inset-right));
  column-gap: var(--gutter);
  min-height: 100svh;
  padding: var(--gutter) var(--pad-right) 0 var(--pad-left);
  overflow: hidden;
}

.brand {
  grid-area: brand;
}

.brand img {
  display: block;
  width: clamp(140px, 14vw, 210px);
  height: auto;
}

.content {
  grid-area: content;
  display: flex;
  flex-direction: column;
}

.intro {
  margin-block: auto;
  padding-block: clamp(20px, 4vh, 56px);
}

/* Light and thin like the OVES wordmark; one family for the whole page. */
h1 {
  margin: 0;
  max-width: 8.6em;
  font-weight: 300;
  font-size: clamp(2.75rem, 6.2vw, 6.5rem);
  line-height: 1;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.lead {
  max-width: 34em;
  margin: clamp(28px, 4vh, 44px) 0 0;
  font-size: clamp(1.125rem, 1.4vw, 1.3125rem);
}

.button {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  margin-top: clamp(28px, 4vh, 40px);
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--sunflower);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  transition:
    transform 180ms var(--ease-out),
    background-color 180ms ease;
}

.button:hover {
  background: var(--mist);
  transform: translateY(-2px);
}

.button:active {
  transform: translateY(0) scale(0.97);
}

.details {
  padding-bottom: clamp(32px, 5vh, 56px);
}

/* Entries wrap to the next row when they do not fit side by side. */
.details dl {
  display: flex;
  flex-wrap: wrap;
  gap: 20px clamp(24px, 3.5vw, 56px);
  margin: 0;
}

.details dt {
  color: var(--sunflower);
  font-weight: 600;
}

.details dd {
  margin: 4px 0 0;
}

.details address {
  font-style: normal;
}

.details a {
  text-decoration-color: rgb(234 235 239 / 0.6);
  text-underline-offset: 4px;
  transition: color 180ms ease;
}

.details a:hover {
  color: var(--sunflower);
}

/* Keep the address whole; it wraps to a row of its own instead. */
.details a[href^='mailto:'] {
  white-space: nowrap;
}

/* The garden doubles as the wind's pause control: the whole drawing is a label for a checkbox. */
.garden {
  grid-area: garden;
  align-self: end;
  position: relative;
  display: block;
  cursor: pointer;
  border-radius: 24px;
}

.garden:has(input:focus-visible) {
  outline: 3px solid var(--sunflower);
  outline-offset: 6px;
}

.plant {
  display: block;
  width: 100%;
  height: min(calc(100svh - var(--gutter) - var(--footer-height)), 860px);
  min-height: 420px;
  overflow: visible;
}

.elsewhere {
  grid-area: elsewhere;
  display: flex;
  flex-wrap: wrap;
  gap: 8px clamp(24px, 4vw, 64px);
  margin: 0 calc(var(--pad-right) * -1) 0 calc(var(--pad-left) * -1);
  padding: 24px var(--pad-right) calc(28px + env(safe-area-inset-bottom)) var(--pad-left);
  background: var(--ink-deep);
  font-size: 16px;
}

.elsewhere p {
  margin: 0;
}

.copyright {
  margin-left: auto !important;
  color: rgb(234 235 239 / 0.75);
}

/* ── Drawing: a mini garden, generated so leaves and heads sit on the stem curves ── */

.stem {
  fill: none;
  stroke-linecap: round;
}

.sun-line {
  stroke: var(--sunflower);
}

.mist-line {
  fill: none;
  stroke: var(--mist);
  stroke-linecap: round;
}

.thin {
  stroke-width: 2.5;
}

.sun {
  fill: var(--sunflower);
}

.mist {
  fill: var(--mist);
}

.rib {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.ink-disc {
  fill: var(--ink);
  stroke: var(--sunflower);
  stroke-width: 5;
}

/* Every part is drawn around its own origin (a leaf's base, a flower's root). */
.grow,
.twist,
.wind,
.nod,
.flutter,
.swing {
  transform-origin: 0 0;
}

/* ── Motion: the garden grows, then the wind keeps it moving ───────────────── */
/* Each flower sways from its root (a slight skew bends the stem), its head nods a moment later,
   leaves flutter and bells swing on their own shorter cycles, so nothing moves in step. */

@media (prefers-reduced-motion: no-preference) {
  .brand,
  h1,
  .lead,
  .button,
  .details,
  .elsewhere {
    animation: rise 900ms var(--ease-out) both;
  }
  .brand {
    animation-delay: 80ms;
  }
  h1 {
    animation-delay: 160ms;
  }
  .lead {
    animation-delay: 240ms;
  }
  .button {
    animation-delay: 320ms;
  }
  .details {
    animation-delay: 400ms;
  }
  .elsewhere {
    animation-delay: 480ms;
  }

  .stem {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: draw 1000ms var(--ease-out) forwards;
  }

  .grow {
    transform: scale(0);
    animation: unfurl 600ms var(--ease-out) forwards;
  }

  .twist {
    animation: twist-open 1200ms var(--ease-out) both;
  }

  .wind {
    animation: wind 5s ease-in-out infinite;
  }

  .nod {
    animation: nod 5s ease-in-out infinite;
  }

  .flutter {
    animation: flutter 3s ease-in-out infinite;
  }

  .swing {
    animation: swing 3s ease-in-out infinite;
  }

  /* A flower's stem and head share one cycle, so the head stays in step with its own stem. */
  .w1 {
    animation-duration: 4.6s;
  }
  .w2 {
    animation-duration: 5.3s;
  }
  .w3 {
    animation-duration: 4.1s;
  }
  .w4 {
    animation-duration: 6.2s;
  }
  .w5 {
    animation-duration: 3.8s;
  }
  .w6 {
    animation-duration: 5s;
  }
  .w7 {
    animation-duration: 5.7s;
  }
  .w8 {
    animation-duration: 4.4s;
  }
  .f1 {
    animation-duration: 2.6s;
  }
  .f2 {
    animation-duration: 3.1s;
  }
  .f3 {
    animation-duration: 3.5s;
  }
  .f4 {
    animation-duration: 2.9s;
  }

  /* Start times per part, generated with the drawing. */
  .t3 {
    animation-delay: 150ms;
  }
  .t6 {
    animation-delay: 300ms;
  }
  .t8 {
    animation-delay: 400ms;
  }
  .t12 {
    animation-delay: 600ms;
  }
  .t13 {
    animation-delay: 650ms;
  }
  .t14 {
    animation-delay: 700ms;
  }
  .t16 {
    animation-delay: 800ms;
  }
  .t17 {
    animation-delay: 850ms;
  }
  .t18 {
    animation-delay: 900ms;
  }
  .t19 {
    animation-delay: 950ms;
  }
  .t21 {
    animation-delay: 1050ms;
  }
  .t22 {
    animation-delay: 1100ms;
  }
  .t23 {
    animation-delay: 1150ms;
  }
  .t24 {
    animation-delay: 1200ms;
  }
  .t25 {
    animation-delay: 1250ms;
  }
  .t26 {
    animation-delay: 1300ms;
  }
  .t27 {
    animation-delay: 1350ms;
  }
  .t28 {
    animation-delay: 1400ms;
  }
  .t29 {
    animation-delay: 1450ms;
  }
  .t30 {
    animation-delay: 1500ms;
  }
  .t31 {
    animation-delay: 1550ms;
  }
  .t32 {
    animation-delay: 1600ms;
  }
  .t33 {
    animation-delay: 1650ms;
  }
  .t34 {
    animation-delay: 1700ms;
  }
  .t35 {
    animation-delay: 1750ms;
  }
  .t36 {
    animation-delay: 1800ms;
  }
  .t37 {
    animation-delay: 1850ms;
  }
  .t38 {
    animation-delay: 1900ms;
  }
  .t39 {
    animation-delay: 1950ms;
  }
  .t40 {
    animation-delay: 2000ms;
  }
  .t41 {
    animation-delay: 2050ms;
  }
  .t42 {
    animation-delay: 2100ms;
  }
  .t44 {
    animation-delay: 2200ms;
  }
  .t46 {
    animation-delay: 2300ms;
  }
  .t47 {
    animation-delay: 2350ms;
  }
  .t50 {
    animation-delay: 2500ms;
  }
  .t51 {
    animation-delay: 2550ms;
  }
  .t52 {
    animation-delay: 2600ms;
  }
  .t55 {
    animation-delay: 2750ms;
  }
  .t57 {
    animation-delay: 2850ms;
  }
  .t60 {
    animation-delay: 3000ms;
  }
  .t61 {
    animation-delay: 3050ms;
  }
  .t63 {
    animation-delay: 3150ms;
  }
  .t66 {
    animation-delay: 3300ms;
  }
  .t68 {
    animation-delay: 3400ms;
  }
  .t74 {
    animation-delay: 3700ms;
  }

  .page:has(#wind:not(:checked)) :is(.wind, .nod, .flutter, .swing) {
    animation-play-state: paused;
  }
}

/* Nothing moves, so there is nothing to pause: the garden is just a picture. */
@media (prefers-reduced-motion: reduce) {
  #wind {
    display: none;
  }

  .garden {
    cursor: default;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes unfurl {
  to {
    transform: scale(1);
  }
}

@keyframes twist-open {
  from {
    transform: rotate(-40deg);
  }
}

@keyframes wind {
  20% {
    transform: rotate(1.4deg) skewX(-1deg);
  }
  38% {
    transform: rotate(0.5deg) skewX(-0.3deg);
  }
  56% {
    transform: rotate(2deg) skewX(-1.4deg);
  }
  80% {
    transform: rotate(-0.7deg) skewX(0.6deg);
  }
}

@keyframes nod {
  25% {
    transform: rotate(5deg);
  }
  45% {
    transform: rotate(1.5deg);
  }
  62% {
    transform: rotate(6deg);
  }
  84% {
    transform: rotate(-2deg);
  }
}

@keyframes flutter {
  30% {
    transform: rotate(7deg);
  }
  62% {
    transform: rotate(-4deg);
  }
}

@keyframes swing {
  30% {
    transform: rotate(-9deg);
  }
  66% {
    transform: rotate(5deg);
  }
}

/* ── Phone and narrow tablet ───────────────────────────────────────────── */

@media (max-width: 860px) {
  .page {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      'brand'
      'content'
      'garden'
      'elsewhere';
  }

  .intro {
    padding-block: 24px 40px;
  }

  /* Contacts come before the drawing; the garden is cropped to its middle flowers and bleeds off
     both edges (about x 103–674 of the 800-wide drawing). */
  .garden {
    margin-inline: calc(var(--pad-left) * -1) calc(var(--pad-right) * -1);
    border-radius: 0;
    overflow: hidden;
  }

  .edge-flower {
    display: none;
  }

  .plant {
    width: 140%;
    height: auto;
    min-height: 0;
    aspect-ratio: 1;
    margin: -16% 0 0 -18%;
  }

  .copyright {
    margin-left: 0 !important;
  }
}

@media (max-width: 360px) {
  .button {
    padding-inline: 20px;
  }
}