/* freesia.axiara.ai — a page grown from a flower.
   Palette is taken from real freesia varieties: sunny yellow, blush pink,
   lilac, leaf green, on warm petal-cream. Deliberately NOT the Axiara
   brand system — this page belongs to Cia, not to the company. */

:root {
  --cream:    #FFFBF2;
  --petal:    #FFFDF7;
  --ink:      #3E3327;
  --ink-soft: #7A6A57;
  --yellow:   #FFC94D;
  --pink:     #FF8FA3;
  --lilac:    #B79CED;
  --leaf:     #6BBF8A;

  --ring: 0 0 0 3px rgba(255, 201, 77, .45);
  --shadow-soft: 0 10px 30px -12px rgba(126, 96, 45, .28);
  --shadow-lift: 0 18px 42px -14px rgba(126, 96, 45, .34);

  --display: "Fredoka", "Trebuchet MS", "Avenir Next", system-ui, sans-serif;
  --body: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--body);
  color: var(--ink);
  background:
    radial-gradient(1100px 620px at 12% -10%, #FFF3D6 0%, transparent 62%),
    radial-gradient(900px 560px at 96% 4%,  #FFE7EC 0%, transparent 58%),
    radial-gradient(820px 620px at 60% 108%, #EFE6FF 0%, transparent 60%),
    var(--cream);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: 940px;
  margin: 0 auto;
  padding: clamp(28px, 6vw, 72px) clamp(20px, 5vw, 40px) 40px;
}

/* ── Language toggle ─────────────────────────────────────────────────────── */
.lang {
  position: fixed;
  top: 16px; right: 16px;
  z-index: 10;
  padding: 9px 18px;
  border: 2px solid rgba(183, 156, 237, .5);
  border-radius: 999px;
  background: rgba(255, 253, 247, .86);
  backdrop-filter: blur(8px);
  font: 600 14px/1 var(--body);
  color: var(--ink-soft);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, color .18s ease;
}
.lang:hover { transform: translateY(-2px); color: var(--ink); box-shadow: var(--shadow-soft); }
.lang:focus-visible { outline: none; box-shadow: var(--ring); }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
  display: flex;
  align-items: center;
  gap: clamp(16px, 5vw, 52px);
  flex-wrap: wrap;
  padding: clamp(8px, 3vw, 28px) 0 clamp(32px, 6vw, 56px);
}

.sprig-wrap { flex: 0 0 auto; text-align: center; }

.sprig-btn {
  padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: 28px;
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.sprig-btn:hover { transform: rotate(-3deg) scale(1.03); }
.sprig-btn:focus-visible { outline: none; box-shadow: var(--ring); }

.sprig { width: clamp(160px, 34vw, 226px); height: auto; display: block; overflow: visible; }

.stem, .leaf { transform-origin: 108px 252px; }

/* Blooms are positioned by CSS vars set inline per bloom, so the SVG stays readable. */
.bloom { transform: translate(var(--x), var(--y)); }
.bloom .petals ellipse, .bloom .bud { transform-box: fill-box; transform-origin: center; }

.sprig-hint {
  margin: 10px 0 0;
  font: 600 13px/1.4 var(--body);
  color: var(--ink-soft);
  opacity: .72;
}

.hero-copy { flex: 1 1 300px; min-width: 260px; }

.greeting {
  margin: 0;
  font: 600 clamp(17px, 2.4vw, 21px)/1.2 var(--body);
  color: var(--ink-soft);
}
.name {
  /* inline-block so the gradient box hugs the glyphs — otherwise the box spans
     the whole column and the lilac end of the ramp never reaches the letters. */
  display: inline-block;
  margin: 2px 0 10px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(62px, 13vw, 118px);
  line-height: .92;
  letter-spacing: -.02em;
  background: linear-gradient(104deg, var(--pink) 6%, var(--yellow) 48%, var(--lilac) 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tagline {
  margin: 0 0 8px;
  font: 600 clamp(18px, 2.6vw, 23px)/1.42 var(--body);
  color: var(--ink);
}
.blurb {
  margin: 0;
  font: 400 clamp(15px, 2vw, 17px)/1.62 var(--body);
  color: var(--ink-soft);
  max-width: 44ch;
}

/* ── Cards & sections ────────────────────────────────────────────────────── */
.card {
  background: var(--petal);
  border: 2px solid rgba(255, 201, 77, .3);
  border-radius: 26px;
  padding: clamp(22px, 4vw, 34px);
  box-shadow: var(--shadow-soft);
}
.card--about { position: relative; overflow: hidden; }
.card--about::before {
  content: "";
  position: absolute; inset: 0 auto 0 0; width: 7px;
  background: linear-gradient(180deg, var(--yellow), var(--pink) 52%, var(--lilac));
}

.section { margin-top: clamp(34px, 6vw, 56px); }

h2 {
  margin: 0 0 14px;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(23px, 3.4vw, 30px);
  letter-spacing: -.01em;
}
.card--about p {
  margin: 0;
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.68;
  color: var(--ink-soft);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}

.tile {
  background: var(--petal);
  border: 2px solid rgba(183, 156, 237, .26);
  border-radius: 20px;
  padding: 20px;
  box-shadow: var(--shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: rgba(255,143,163,.45); }
.tile .emoji { font-size: 28px; display: block; margin-bottom: 8px; }
.tile .t { font-family: var(--display); font-weight: 600; font-size: 18px; }
.tile .n { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.tile a { color: var(--ink); text-decoration-color: var(--pink); text-underline-offset: 3px; }

.empty {
  grid-column: 1 / -1;
  padding: 26px 22px;
  border: 2px dashed rgba(183, 156, 237, .42);
  border-radius: 20px;
  text-align: center;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  background: rgba(255, 253, 247, .5);
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.foot {
  text-align: center;
  padding: 28px 20px 46px;
  font-size: 14.5px;
  color: var(--ink-soft);
}

/* ── Motion ──────────────────────────────────────────────────────────────── */
/* Entrance animations use fill-mode `both`, so an animation that never plays
   would leave the hero stuck at opacity 0. They are therefore gated behind the
   `.anim` class that site.js adds on load: no JS (or a failed script) means no
   animation and fully visible content, never a blank page. */
@media (prefers-reduced-motion: no-preference) {
  html.anim .stem  { animation: grow 1.1s cubic-bezier(.22,.9,.3,1) both; }
  html.anim .leaf  { animation: unfurl .7s cubic-bezier(.34,1.56,.64,1) both; }
  html.anim .leaf--1 { animation-delay: .5s; }
  html.anim .leaf--2 { animation-delay: .66s; }

  html.anim .bloom { animation: bloom .72s cubic-bezier(.34,1.56,.64,1) both; }
  html.anim .bloom--1 { animation-delay: .82s; }
  html.anim .bloom--2 { animation-delay: .96s; }
  html.anim .bloom--3 { animation-delay: 1.10s; }
  html.anim .bloom--4 { animation-delay: 1.24s; }

  html.anim .hero-copy > * { animation: rise .62s cubic-bezier(.22,.9,.3,1) both; }
  html.anim .greeting { animation-delay: .30s; }
  html.anim .name     { animation-delay: .40s; }
  html.anim .tagline  { animation-delay: .52s; }
  html.anim .blurb    { animation-delay: .62s; }

  html.anim .sprig-hint { animation: fade 1s ease .6s both; }

  /* Click the flower → the blooms spin once. */
  html.anim .sprig-btn.is-spun .bloom { animation: spin .9s cubic-bezier(.34,1.4,.5,1) both; }
  html.anim .sprig-btn.is-spun .bloom--2 { animation-delay: .06s; }
  html.anim .sprig-btn.is-spun .bloom--3 { animation-delay: .12s; }
  html.anim .sprig-btn.is-spun .bloom--4 { animation-delay: .18s; }
}

@keyframes grow   { from { transform: scaleY(.05); } to { transform: scaleY(1); } }
@keyframes unfurl { from { transform: scale(.1) rotate(-16deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bloom  { from { transform: translate(var(--x), var(--y)) scale(0) rotate(-70deg); opacity: 0; }
                    to   { transform: translate(var(--x), var(--y)) scale(1) rotate(0); opacity: 1; } }
@keyframes spin   { from { transform: translate(var(--x), var(--y)) rotate(0) scale(1); }
                    50%  { transform: translate(var(--x), var(--y)) rotate(200deg) scale(1.16); }
                    to   { transform: translate(var(--x), var(--y)) rotate(360deg) scale(1); } }
@keyframes rise   { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade   { from { opacity: 0; } to { opacity: .72; } }

@media (max-width: 620px) {
  .hero { flex-direction: column; text-align: center; }
  /* In a column flex container `flex-basis` sizes the HEIGHT — the desktop
     `flex: 1 1 300px` would otherwise leave a 300px dead gap under the copy. */
  .hero-copy { flex: 0 0 auto; }
  .blurb { margin-inline: auto; }
}