/* resist.garden — one image, one breath. */

@property --petal-distance {
  syntax: "<length>";
  inherits: true;
  initial-value: 24px;
}

:root {
  --breath: 11s;              /* one full cycle: 5.5s in, 5.5s out */
  --ink: rgba(255, 255, 255, 0.92);
  --ink-soft: rgba(255, 255, 255, 0.7);
  --glass: rgba(20, 32, 22, 0.55);
  --petal: rgba(235, 245, 236, 0.38);
  --core: rgba(245, 250, 245, 0.55);
  --label-bg: rgba(245, 250, 245, 0.72);
  --label-ink: #5b4a8a;
  color-scheme: dark;
}

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

html, body {
  height: 100%;
  margin: 0;
  background: #1c2a1e;
  color: var(--ink);
  font-family: ui-serif, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

body {
  animation: arrive 2.4s ease-out both;
}

/* Background image ---------------------------------------------------- */

.scene {
  position: fixed;
  inset: 0;
  z-index: 0;
}

.scene__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform-origin: 50% 60%;
  animation: drift 120s ease-in-out infinite alternate;
}

.scene__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(10, 20, 12, 0.02) 0%, rgba(10, 20, 12, 0.32) 100%),
    linear-gradient(to bottom, rgba(10, 20, 12, 0.12), rgba(10, 20, 12, 0.02) 30%, rgba(10, 20, 12, 0.18));
}

/* Breathing guide ----------------------------------------------------- */

.breath {
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2.25rem;
}

.breath__flower {
  --petal-distance: 24px;
  position: relative;
  width: 220px;
  height: 220px;
  display: grid;
  place-items: center;
  animation:
    bloom var(--breath) ease-in-out infinite,
    turn calc(var(--breath) * 6) linear infinite;
}

.breath__petal,
.breath__core {
  position: absolute;
  width: 96px;
  height: 96px;
  border-radius: 50%;
}

.breath__petal {
  background: var(--petal);
  transform: rotate(var(--a)) translateY(calc(var(--petal-distance) * -1));
  mix-blend-mode: screen;
}

.breath__core {
  background: var(--core);
  box-shadow: 0 0 40px rgba(220, 240, 222, 0.25);
}

.breath__label {
  margin: 0;
  position: relative;
  height: 1.6em;
  width: 12ch;
  padding: 0.35em 1.4em;
  box-sizing: content-box;
  border-radius: 999px;
  background: var(--label-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0 28px rgba(235, 245, 236, 0.25);
  text-align: center;
  font-size: 1.35rem;
  letter-spacing: 0.1em;
  color: var(--label-ink);
  font-style: italic;
}

.breath__label span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  line-height: 1;
  animation-duration: var(--breath);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.breath__in  { animation-name: show-in; }
.breath__out { animation-name: show-out; }

/* Info button + popover ---------------------------------------------- */

.info {
  position: fixed;
  top: 1.25rem;
  left: 1.25rem;
  z-index: 2;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(20, 32, 22, 0.35);
  color: var(--ink-soft);
  font: italic 1rem/1 ui-serif, Georgia, serif;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.info:hover,
.info:focus-visible {
  background: rgba(20, 32, 22, 0.6);
  color: var(--ink);
  border-color: rgba(255, 255, 255, 0.6);
  outline: none;
}

.about {
  position: fixed;
  inset: auto;
  top: 4.25rem;
  left: 1.25rem;
  margin: 0;
  max-width: min(22rem, calc(100vw - 2.5rem));
  padding: 1.25rem 1.4rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0.75rem;
  background: var(--glass);
  color: var(--ink);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  font-size: 0.95rem;
  line-height: 1.55;
}

.about:popover-open {
  animation: arrive 0.35s ease-out both;
}

.about::backdrop { background: transparent; }

.about__title {
  margin: 0 0 0.6rem;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}

.about p { margin: 0 0 0.75rem; }
.about p:last-child { margin-bottom: 0; }

.about__hint {
  font-size: 0.8rem;
  color: var(--ink-soft);
}

kbd {
  font: inherit;
  font-size: 0.85em;
  padding: 0 0.3em;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0.25em;
}

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

@keyframes arrive {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes drift {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}

@keyframes bloom {
  0%, 100% { --petal-distance: 24px; transform: scale(0.68); }
  50%      { --petal-distance: 62px; transform: scale(1); }
}

@keyframes turn {
  from { rotate: 0deg; }
  to   { rotate: 360deg; }
}

/* Label timing: "in" visible for the first half, "out" for the second. */
@keyframes show-in {
  0%, 5%   { opacity: 0; }
  15%, 40% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes show-out {
  0%, 50%  { opacity: 0; }
  60%, 90% { opacity: 1; }
  100%     { opacity: 0; }
}

/* Respect reduced motion: keep the breath, drop the rest. ------------- */

@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  .scene__image { animation: none; }
  .breath__flower { animation: bloom var(--breath) ease-in-out infinite; }
}