/* ==========================================================================
   Needia — printable activity book / crayon-box theme
   ========================================================================== */

:root {
  --sky: #edf3fa;
  --paper: #fff8ec;
  --paper-soft: #fffdf8;
  --ink: #241c38;
  --ink-soft: #6b6280;
  --marigold: #ffb627;
  --marigold-deep: #d98c05;
  --berry: #ff5d73;
  --leaf: #3f8f63;
  --lilac: #e7defb;
  --lilac-deep: #b8a6e8;
  --line: rgba(36, 28, 56, 0.12);
  --header-bg: rgba(255, 250, 240, 0.82);

  --shadow-sm: 0 4px 16px rgba(36, 28, 56, 0.07);
  --shadow-md: 0 16px 40px rgba(36, 28, 56, 0.12);

  --font-display: "Fredoka", "Baloo 2", "Comic Sans MS", sans-serif;
  --font-body: "Nunito", "Segoe UI", sans-serif;
  --font-hand: "Patrick Hand", "Comic Sans MS", cursive;
  --font-mono: var(--font-body);

  --container: 1120px;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 28px;

  /* Legacy aliases: public/giochi/index.html has its own page-local <style>
     block (out of redesign scope) that still references the old palette
     token names directly. Keep them pointing at the new colors so that page
     stays visually consistent without needing its own edit. */
  --dolphin: var(--marigold);
  --dolphin-deep: var(--marigold-deep);
  --coral: var(--berry);
  --mint: var(--lilac);
  --sky: var(--paper);
  --foam: var(--paper-soft);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Sky at the top of the page settling into warm ground: the cast are woodland
   animals and the mark is a cloud, so the page is staged as weather over earth
   rather than a flat field of cream. */
body {
  margin: 0;
  background: var(--paper);
  background-image: linear-gradient(180deg, var(--sky) 0, var(--paper) 78vh);
  background-repeat: no-repeat;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
}

main,
.site-footer {
  position: relative;
  z-index: 1;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Brand mark ---------- */

.brand-mark { display: block; }

.brand-mark--small { height: 42px; width: auto; }

.brand-mark--hero {
  width: min(280px, 65vw);
  height: auto;
  margin: 0 auto 8px;
  animation: bob 4.5s ease-in-out infinite;
}

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-10px) rotate(1deg); }
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--header-bg);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
}

.logo {
  text-decoration: none;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* language toggle: flags */
.lang-toggle {
  display: inline-flex;
  gap: 4px;
  background: var(--paper-soft);
  border-radius: 999px;
  padding: 4px;
  box-shadow: var(--shadow-sm);
}

.lang-toggle button {
  border: none;
  background: transparent;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 17px;
  border-radius: 999px;
  line-height: 1;
  filter: grayscale(0.6) opacity(0.6);
  transition: filter 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

.lang-toggle button:hover { transform: translateY(-1px); }

.lang-toggle button.active {
  background: var(--paper);
  filter: none;
}

/* ---------- Hero ---------- */

/* The bottom padding is not decoration: it reserves the band the cast walks
   through, so the characters never have to cross the reading column. */
.hero {
  position: relative;
  padding: clamp(56px, 9vh, 96px) 0 clamp(170px, 26vh, 260px);
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 22px;
}

.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--marigold);
}

h1.headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.5rem, 6.4vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.028em;
  margin: 0 0 24px;
  max-width: 15ch;
  color: var(--ink);
  text-wrap: balance;
}

/* Only the hero is centred; product pages set the same headline left-aligned. */
.hero h1.headline { margin-inline: auto; }

.hero-sub {
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  color: var(--ink-soft);
  max-width: 48ch;
  margin: 0 0 34px;
  text-wrap: pretty;
}

.hero .hero-sub { margin-inline: auto; }

/* The whole page is a scroll performance, so say so once, quietly, and get
   out of the way as soon as the reader takes the hint. */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: opacity 0.45s ease;
}

.scroll-cue__label {
  font-family: var(--font-hand);
  font-size: 17px;
  color: var(--ink-soft);
}

.scroll-cue__line {
  width: 1px;
  height: 40px;
  background: linear-gradient(180deg, var(--ink-soft), rgba(107, 98, 128, 0));
  transform-origin: 50% 0;
  animation: cue 1.9s ease-in-out infinite;
}

@keyframes cue {
  0%, 100% { transform: scaleY(0.35); opacity: 0.35; }
  50% { transform: scaleY(1); opacity: 1; }
}

.scroll-cue.is-gone {
  opacity: 0;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 56px;
}

.hero-meta span {
  background: var(--paper-soft);
  border-radius: 999px;
  padding: 8px 16px;
  box-shadow: var(--shadow-sm);
}

.hero-meta strong {
  color: var(--marigold-deep);
  font-weight: 800;
}

.wave-divider {
  display: block;
  width: 100%;
  height: 60px;
  position: relative;
  z-index: 1;
  margin-top: -1px;
}

/* ---------- Section labels ---------- */

.section { padding: 64px 0; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.section-head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.6vw, 2.7rem);
  letter-spacing: -0.022em;
  line-height: 1.08;
  margin: 6px 0 0;
  color: var(--ink);
}

.section-tag {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--berry);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--lilac);
  padding: 5px 14px;
  border-radius: 999px;
}

.section-note {
  color: var(--ink-soft);
  max-width: 60ch;
  margin: -24px 0 32px;
}

/* ---------- Grids / bubble cards ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 24px;
}

.bubble,
.ticket {
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 26px 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.bubble:hover,
.ticket:hover {
  transform: translateY(-4px);
  border-color: var(--marigold);
  box-shadow: var(--shadow-md);
}

.ticket .sku {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--marigold-deep);
  text-transform: uppercase;
}

.ticket h3,
.bubble h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  margin: 0;
  line-height: 1.15;
}

.ticket p,
.bubble p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.94rem;
}

.ticket .compat {
  font-size: 11.5px;
  color: var(--ink-soft);
  border-top: 1px dashed var(--line);
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price-tag {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  background: var(--marigold);
  color: var(--ink);
  padding: 4px 12px;
  border-radius: 999px;
  display: inline-block;
}

.tool-emoji {
  font-size: 34px;
  line-height: 1;
  margin-bottom: 4px;
}

/* ---------- Buttons ---------- */

.btn {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.01em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.btn-primary {
  background: linear-gradient(135deg, var(--marigold), var(--marigold-deep));
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-ghost {
  background: var(--paper-soft);
  color: var(--marigold-deep);
  box-shadow: var(--shadow-sm);
}

.btn-ghost:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-block { width: 100%; }

.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

/* ---------- How it works ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

.step {
  background: var(--paper-soft);
  border-radius: 22px;
  padding: 22px;
  box-shadow: var(--shadow-sm);
}

.step .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--lilac);
  color: var(--berry);
  font-weight: 800;
  font-size: 13px;
}

.step h4 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin: 12px 0 6px;
}

.step p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

/* ---------- La compagnia (scroll performance) ----------
   Three depth lanes of characters cross the page. The far lane sits behind
   the content and is occluded by the cards; the near lane walks in front of
   everything. Position, gait and facing are all driven by parade.js from the
   scroll wheel — nothing here animates on a timer except the shadow's ease. */

.parade-layer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.parade-layer--back { z-index: 0; }
.parade-layer--front { z-index: 10; }

.actor {
  position: absolute;
  left: 0;
  width: clamp(96px, 13vw, 188px);
  opacity: 0;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}

.actor--back { filter: blur(0.6px); }

.actor__img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  transition: transform 0.28s ease;
}

/* Contact shadow: what actually sells the characters as standing on the page
   rather than pasted onto it. */
.actor__shadow {
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: 74%;
  height: 15px;
  margin-left: -37%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(36, 28, 56, 0.6) 0, rgba(36, 28, 56, 0) 72%);
}

@media (max-width: 720px) {
  .actor { width: clamp(76px, 24vw, 128px); }
}

/* ---------- Footer ---------- */

.site-footer {
  padding: 44px 0 56px;
  font-size: 13px;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
}

.site-footer .wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- Product detail page ---------- */

.product-detail {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items: start;
}

@media (max-width: 800px) {
  .product-detail { grid-template-columns: 1fr; }
}

.spec-sheet {
  background: var(--paper-soft);
  border-radius: 26px;
  padding: 28px;
  position: sticky;
  top: 100px;
  box-shadow: var(--shadow-sm);
}

.spec-sheet .price-tag {
  font-size: 20px;
  padding: 7px 16px;
  margin-bottom: 20px;
}

.spec-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
}

.spec-row span:first-child { color: var(--ink-soft); }
.spec-row span:last-child { font-weight: 800; text-align: right; color: var(--ink); }

.back-link {
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  color: var(--marigold-deep);
  display: inline-block;
  margin-bottom: 32px;
}

.back-link:hover { color: var(--ink); }

.feature-list {
  list-style: none;
  margin: 24px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.feature-list li {
  padding-left: 26px;
  position: relative;
  font-size: 0.96rem;
}

.feature-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--marigold-deep);
  font-weight: 800;
}

/* ---------- Thank-you / download page ---------- */

.thanks-panel {
  max-width: 560px;
  margin: 88px auto;
  background: var(--paper-soft);
  border-radius: 30px;
  padding: 44px;
  text-align: center;
  box-shadow: var(--shadow-md);
}

.stamp {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--berry);
  background: var(--lilac);
  border-radius: 999px;
  padding: 8px 18px;
  margin-bottom: 22px;
}

.thanks-panel h1 {
  font-family: var(--font-display);
  font-size: 1.9rem;
  margin: 0 0 12px;
}

.thanks-panel p {
  color: var(--ink-soft);
  margin: 0 0 28px;
}

/* ---------- Tabs (prompt library) ---------- */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.tab-btn {
  border: none;
  background: var(--paper-soft);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background 0.15s ease, color 0.15s ease;
}

.tab-btn.active {
  background: var(--marigold);
  color: var(--ink);
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

.prompt-sample {
  background: var(--paper-soft);
  border-radius: 18px;
  padding: 16px 18px;
  margin-bottom: 10px;
  font-size: 0.93rem;
  box-shadow: var(--shadow-sm);
}

/* ---------- Free tools (form UI) ---------- */

.tool-panel {
  background: var(--paper-soft);
  border-radius: 28px;
  padding: 36px;
  box-shadow: var(--shadow-sm);
  max-width: 760px;
  margin: 0 auto;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

@media (max-width: 620px) {
  .field-row { grid-template-columns: 1fr; }
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field label {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--marigold-deep);
}

.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: 14px;
  padding: 11px 14px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--marigold);
}

.expense-row {
  display: grid;
  grid-template-columns: 1fr 120px 40px;
  gap: 10px;
  margin-bottom: 10px;
  align-items: center;
}

@media (max-width: 560px) {
  .expense-row { grid-template-columns: 1fr 90px 36px; }
}

.expense-remove {
  border: none;
  background: var(--paper);
  color: var(--ink-soft);
  border-radius: 999px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  font-size: 16px;
}

.output-box {
  width: 100%;
  min-height: 220px;
  font-family: var(--font-body);
  font-size: 14px;
  padding: 18px;
  border: 2px solid var(--line);
  border-radius: 18px;
  background: #fff;
  color: var(--ink);
  resize: vertical;
}

.result-card {
  background: var(--paper);
  border-radius: 20px;
  padding: 22px;
  margin-top: 20px;
}

.result-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 0.95rem;
  border-bottom: 1px dashed var(--line);
}

.result-row:last-child { border-bottom: none; }

.result-row strong { color: var(--marigold-deep); }

.progress-track {
  width: 100%;
  height: 14px;
  background: #fff;
  border-radius: 999px;
  overflow: hidden;
  margin-top: 10px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--marigold), var(--berry));
  border-radius: 999px;
  transition: width 0.4s ease;
}

.action-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.copy-feedback {
  font-size: 12.5px;
  color: var(--marigold-deep);
  font-weight: 700;
  margin-left: 8px;
}

/* ---------- Motion & accessibility ---------- */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  animation: reveal 0.6s ease forwards;
}

@keyframes reveal {
  to { opacity: 1; transform: translateY(0); }
}

:focus-visible {
  outline: 3px solid var(--marigold-deep);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
  .ticket, .bubble, .btn-primary, .btn-ghost, .brand-mark--hero { transition: none; animation: none; }
  /* The cast still crosses with the scroll — that motion is the reader's own —
     but the gait cycling, the facing flip and the cue pulse all stand down. */
  .actor__img { transition: none; }
  .scroll-cue__line { animation: none; opacity: 0.6; }
}