/* la-maryse — feuille de style de la page d'attente.
   La palette et les polices vivent dans tokens.css, chargé avant celle-ci. */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 5vw, 3rem);

  background: var(--lm-cream);
  background-image:
    radial-gradient(60% 55% at 50% 42%, rgba(240, 138, 124, .13), transparent 70%),
    radial-gradient(45% 40% at 12% 90%, rgba(168, 200, 184, .22), transparent 72%);

  color: var(--lm-chocolate);
  font-family: var(--lm-font-text);
  font-size: clamp(1rem, .96rem + .3vw, 1.15rem);
  line-height: 1.6;
}

.stage {
  width: 100%;
  max-width: 41rem;
  text-align: center;
}

/* ---------- logo ---------- */

.brand {
  display: block;
  margin-inline: auto;
  width: min(100%, 26rem);
  border-radius: var(--lm-radius-sm);
}

.brand img {
  display: block;
  width: 100%;
  height: auto;
}

.brand:focus-visible {
  outline: 3px solid var(--lm-coral);
  outline-offset: 8px;
}

/* ---------- la poêle ---------- */

.kitchen {
  width: min(100%, 21rem);
  margin: -1rem auto clamp(.75rem, 2.5vw, 1.5rem);
}

.kitchen svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.glow {
  fill: var(--lm-mustard);
  opacity: .16;
}

.hob {
  fill: var(--lm-chocolate);
  opacity: .14;
}

.pan__body,
.pan__rim,
.pan__handle {
  fill: var(--lm-chocolate);
}

.pan__rim   { fill: var(--lm-brown-soft); }
.pan__rivet { fill: var(--lm-cream); opacity: .5; }

.pan {
  transform-box: view-box;
  transform-origin: 272px 126px;
  animation: pan-toss 1.9s cubic-bezier(.36, .12, .26, 1) infinite;
}

.bit {
  transform-box: fill-box;
  transform-origin: center;
  animation: bit-jump 1.9s cubic-bezier(.36, .12, .26, 1) infinite;
}

.bit--tomato { fill: var(--lm-coral);   --dx: -22px; }
.bit--carrot { fill: var(--lm-mustard); --dx:  -6px; animation-delay: .03s; }
.bit--pea    { fill: var(--lm-sage);    --dx:  14px; animation-delay: .06s; }
.bit--herb   { fill: #7FA98F;           --dx:  26px; animation-delay: .09s; }

.flame {
  fill: var(--lm-mustard);
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: flicker 1.05s ease-in-out infinite alternate;
}

.flame--a { fill: var(--lm-coral); opacity: .85; }
.flame--b { animation-delay: .18s; opacity: .7; }
.flame--c { animation-delay: .36s; opacity: .7; }

@keyframes pan-toss {
  0%   { transform: rotate(0deg); }
  10%  { transform: rotate(5deg); }
  20%  { transform: rotate(-21deg); }
  30%  { transform: rotate(1deg); }
  42%  { transform: rotate(0deg); }
  56%  { transform: rotate(-4deg); }
  66%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

@keyframes bit-jump {
  0%   { transform: translate(0, 0) rotate(0deg); }
  16%  { transform: translate(0, 5px) rotate(-6deg); }
  38%  { transform: translate(var(--dx), -88px) rotate(170deg); }
  57%  { transform: translate(calc(var(--dx) * .35), 2px) rotate(330deg); }
  64%  { transform: translate(0, 7px) rotate(352deg); }
  72%  { transform: translate(0, 0) rotate(360deg); }
  100% { transform: translate(0, 0) rotate(360deg); }
}

@keyframes flicker {
  from { transform: scaleY(.86) scaleX(1.04); opacity: .55; }
  to   { transform: scaleY(1.12) scaleX(.94); opacity: .9; }
}

/* ---------- texte ---------- */

h1 {
  font-family: var(--lm-font-title);
  font-weight: 400;
  font-size: clamp(2.3rem, 1.4rem + 4.4vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: .01em;
  margin: 0 0 .6rem;
  color: var(--lm-chocolate);
}

.lede {
  margin: 0 auto;
  max-width: 32ch;
  color: var(--lm-brown-soft);
}

.signature {
  margin: clamp(2rem, 6vw, 3.25rem) 0 0;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--lm-coral);
}

/* ---------- accessibilité ---------- */

@media (prefers-reduced-motion: reduce) {
  .pan   { animation: none; transform: rotate(-8deg); }
  .bit   { animation: none; }
  .flame { animation: none; opacity: .75; }
}