/* ─────────────────────────────────────────────────────────────────────────
   intro.css — the ritual: orb, field, and drawing in the sky.
   ───────────────────────────────────────────────────────────────────────── */

/* ── the field ──────────────────────────────────────────────────────────── */

#field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}
body[data-stage="bloom"]  #field,
body[data-stage="invite"] #field,
body[data-stage="wind"]   #field { opacity: 1; }

body[data-stage="site"] #field { opacity: 0; }

/* ── planted flowers ────────────────────────────────────────────────────── */

#planted {
  position: fixed;
  inset: 0;
  z-index: 2;                 /* in the field, under the wind and the orb */
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity .9s var(--ease);
}
body[data-stage="bloom"]  #planted,
body[data-stage="invite"] #planted,
body[data-stage="wind"]   #planted { opacity: 1; }
body[data-stage="depart"] #planted,
body[data-stage="site"]   #planted { opacity: 0; transition-duration: .7s; }

.planted-flower {
  position: absolute;
  transform: translate(-50%, -100%);   /* stands on its spot, not centred on it */
  opacity: 0;
  transition: opacity 1.2s var(--ease);
  will-change: opacity;
}
.planted-flower.is-in { opacity: var(--op, 1); }

/* the one just carried here by the wind, settling into its place */
.planted-flower.is-just-planted {
  animation: settle-in 1.15s var(--ease) both;
}
@keyframes settle-in {
  0%   { opacity: 0;             transform: translate(-50%, -150%) scale(.55); }
  55%  { opacity: var(--op, 1);  transform: translate(-50%, -94%)  scale(1.08); }
  75%  {                         transform: translate(-50%, -102%) scale(.98); }
  100% { opacity: var(--op, 1);  transform: translate(-50%, -100%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .planted-flower.is-just-planted { animation: settle-fade .4s var(--ease) both; }
  @keyframes settle-fade {
    from { opacity: 0; transform: translate(-50%, -100%); }
    to   { opacity: var(--op, 1); transform: translate(-50%, -100%); }
  }
}

.planted-flower img {
  display: block;
  width: 100%;
  height: auto;
  filter: blur(var(--blur, 0));
  transform: rotate(var(--rot, 0deg));
  animation: planted-sway var(--sway, 7s) ease-in-out infinite;
}

@keyframes planted-sway {
  0%, 100% { transform: rotate(var(--rot, 0deg)); }
  50%      { transform: rotate(calc(var(--rot, 0deg) + 2.4deg)); }
}

@media (prefers-reduced-motion: reduce) {
  .planted-flower img { animation: none; }
}

/* ── the wind layer ─────────────────────────────────────────────────────── */

#wind {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 3;
  pointer-events: none;
}

/* ── the orb ────────────────────────────────────────────────────────────── */

#orb {
  --orb-size: 14px;
  position: fixed;
  left: 50%;
  top: 50%;
  width: var(--orb-size);
  height: var(--orb-size);
  z-index: 4;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(var(--orb-scale, 1));
  opacity: 0;
  transition: opacity .9s var(--ease);
  will-change: transform, opacity;
}
body:not([data-stage="arrival"]) #orb { opacity: 1; }
body[data-stage="arrival"] #orb { opacity: 1; animation: orb-in 1.1s var(--ease) both; }
body[data-stage="site"] #orb { opacity: 0; transition-duration: .5s; }

@keyframes orb-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.orb-core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 34%,
      #fff 0%,
      var(--pink-soft) 22%,
      var(--pink) 58%,
      var(--pink-deep) 100%);
  box-shadow:
    0 0 calc(var(--orb-size) * .9) var(--pink-glow),
    0 0 calc(var(--orb-size) * 2.4) rgba(217, 143, 158, .22);
  animation: breathe 4.4s var(--ease-soft) infinite;
}

@keyframes breathe {
  0%, 100% { transform: scale(1);    filter: brightness(1); }
  50%      { transform: scale(1.13); filter: brightness(1.08); }
}

/* ── skip ───────────────────────────────────────────────────────────────── */

#skip {
  position: fixed;
  right: 26px;
  bottom: 22px;
  z-index: 6;
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--ink-faint);
  opacity: 0;
  transition: opacity .5s var(--ease), color .3s var(--ease);
  pointer-events: none;
}
body[data-stage="bloom"] #skip,
body[data-stage="invite"] #skip { opacity: .75; pointer-events: auto; }
#skip:hover { color: var(--pink-deep); }

/* This is the only way into the site for anyone not drawing with a pointer,
   so it must never be focusable-but-invisible — reaching it by keyboard has
   to bring it into view, at any stage. */
#skip:focus,
#skip:focus-visible {
  opacity: 1;
  pointer-events: auto;
  color: var(--pink-deep);
}

/* ── the sky panel ──────────────────────────────────────────────────────── */

#intro {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
body[data-stage="site"] #intro { opacity: 0; transition: opacity .5s var(--ease); }

/* The card sits in the right third. Drawing now has its own ground: the field
   behind it was too busy to read controls against, whatever halo they carried.
   Width is capped against viewport height as well as width, so the square pad
   and the whole card still fit on a short screen. */
#sky {
  position: absolute;
  right: 5vw;
  top: 50%;
  transform: translateY(-50%);
  width: min(31vw, 352px, 60vh);
}

#card {
  padding: 20px 20px 17px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: rgba(252, 250, 247, .95);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  box-shadow:
    0 18px 44px rgba(42, 39, 36, .14),
    0 2px 7px rgba(42, 39, 36, .06);
}

#prompt {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(19px, 2.05vw, 27px);
  font-weight: 400;
  font-style: normal;
  letter-spacing: .004em;
  line-height: 1.2;
  color: var(--ink);
  text-align: center;
}

#prompt-sub {
  margin: 5px 0 15px;
  font-size: 11.5px;
  letter-spacing: .05em;
  color: var(--ink-soft);
  text-align: center;
}

/* Square, and a real surface to draw on. */
#pad-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: #FFFDFB;
  transition: border-color .35s var(--ease);
}
#pad-frame:hover,
#pad-frame.is-drawing { border-color: rgba(185, 108, 124, .5); }

#pad {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: none;
}

/* goes the moment the first mark lands */
#pad-hint {
  position: absolute;
  inset: 0;
  margin: 0;
  display: grid;
  place-items: center;
  font-size: 11.5px;
  letter-spacing: .2em;
  color: var(--ink-faint);
  opacity: .7;
  pointer-events: none;
  transition: opacity .4s var(--ease);
}
#pad-frame.has-ink #pad-hint { opacity: 0; }

/* the brush follower, built in draw.js */
#brush-cursor {
  position: fixed;
  z-index: 7;
  border-radius: 50%;
  border: 1px solid rgba(42, 39, 36, .5);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity .18s var(--ease), width .12s var(--ease), height .12s var(--ease);
}
#brush-cursor.is-erasing { border-style: dashed; background: none !important; }

/* ── tools ──────────────────────────────────────────────────────────────── */

#tools {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
  width: 100%;
  margin-top: 13px;
}

.tool-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.tool-rule {
  width: 1px;
  height: 15px;
  flex: none;
  background: var(--ink-faint);
  opacity: .35;
}

/* colours */
.swatches {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.swatch {
  width: 15px;
  height: 15px;
  flex: none;
  border-radius: 50%;
  background: var(--sw);
  box-shadow: 0 0 0 1px rgba(42, 39, 36, .16);
  opacity: .72;
  transition: opacity .22s var(--ease), transform .22s var(--ease),
              box-shadow .22s var(--ease);
}
.swatch:hover { opacity: 1; transform: scale(1.14); }
.swatch.is-on {
  opacity: 1;
  transform: scale(1.16);
  box-shadow: 0 0 0 1px var(--paper), 0 0 0 2.5px var(--ink-soft);
}

/* brush size */
.slider-cap {
  font-size: 9.5px;
  letter-spacing: .14em;
  color: var(--ink-soft);
  flex: none;
}

#brush-size {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  min-width: 64px;
  height: 16px;
  background: none;
  cursor: pointer;
}
#brush-size::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--ink-faint), var(--pink));
}
#brush-size::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--pink-deep);
  box-shadow: 0 0 0 2px var(--paper);
  transition: transform .18s var(--ease);
}
#brush-size:hover::-webkit-slider-thumb,
#brush-size:focus-visible::-webkit-slider-thumb { transform: scale(1.2); }

#brush-size::-moz-range-track {
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--ink-faint), var(--pink));
}
#brush-size::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: var(--pink-deep);
  box-shadow: 0 0 0 2px var(--paper);
}

/* ── buttons ────────────────────────────────────────────────────────────── */

.card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 15px;
}

.action-group { display: flex; align-items: center; gap: 6px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 31px;
  padding: 0 13px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .13em;
  transition: border-color .2s var(--ease), color .2s var(--ease),
              background .2s var(--ease), transform .12s var(--ease);
}
.btn:hover:not([disabled]) {
  border-color: var(--pink);
  color: var(--pink-deep);
  background: #FFFFFF;
}
.btn:active:not([disabled]) { transform: translateY(1px); }
.btn[disabled] { opacity: .38; cursor: default; pointer-events: none; }

.btn-icon { width: 31px; padding: 0; }

#eraser[aria-pressed="true"] {
  border-color: var(--pink-deep);
  color: var(--pink-deep);
  background: var(--pink-soft);
}

.btn-primary {
  padding: 0 20px;
  border-color: var(--pink-deep);
  background: var(--pink-deep);
  color: #FFF7F9;
}
.btn-primary:hover:not([disabled]) {
  border-color: var(--zinnia);
  background: var(--zinnia);
  color: #FFFFFF;
}
/* Dimmed but still plainly a button — a control nobody can see is a control
   nobody finds. */
.btn-primary[disabled] {
  opacity: 1;
  border-color: var(--rule);
  background: var(--paper-warm);
  color: var(--ink-faint);
}

/* ── the invitation arriving ────────────────────────────────────────────── */

body[data-stage="invite"] #intro { pointer-events: auto; }

/* The card arrives as one object. Resting state is declared alongside the
   animation — without it, a browser that suppresses animations would leave the
   whole drawing interface invisible and the site impossible to enter. */
#card { opacity: 0; transform: translateY(10px); }

body[data-stage="invite"] #card {
  opacity: 1;
  transform: none;
  animation: rise .75s var(--ease) both;
}

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

/* while the wind blows, the card gets out of the way */
body[data-stage="wind"] #card {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .5s var(--ease), transform .6s var(--ease);
}
/* the particles take over the instant the gust starts, so the pad must not
   linger underneath them — no transition here on purpose */
body[data-stage="wind"] #pad { opacity: 0; }

/* ── reduced motion ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .orb-core { animation: none; }
  body[data-stage="arrival"] #orb { animation: none; }
  body[data-stage="invite"] #card { animation: fade-only .4s var(--ease) both; }
  @keyframes fade-only { from { opacity: 0; } to { opacity: 1; } }
}

/* ── narrow screens: the sky moves to lower centre ──────────────────────── */

@media (max-width: 767px) {
  /* The orb lifts clear of the drawing area, and you sketch beneath it — so
     the flower flies up into it. Orb.center() reads this position, so the
     wind retargets on its own. */
  /* The orb lifts clear of the card, and you draw beneath it — so the flower
     flies up into it. Orb.center() reads this position, so the wind
     retargets on its own. */
  #orb { top: 9vh; }

  #sky {
    right: auto;
    left: 50%;
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -46%);
    width: min(88vw, 380px, 58vh);
  }
  #card { padding: 17px 16px 15px; }
  #tools { justify-content: center; flex-wrap: wrap; }
  #pad { cursor: crosshair; }
  #brush-cursor { display: none; }
  #skip { bottom: auto; top: 20px; right: 20px; }

  #skip { filter: drop-shadow(0 0 6px rgba(250, 247, 243, .95)); }
}