/* ============================================================
   Clay Cats Club — "Molded Clay" prototype skin
   ------------------------------------------------------------
   Loaded AFTER css/styles.css. Every UI piece (buttons, chips,
   headings, cards, slabs, nav) is sculpted to look pressed and
   rolled from clay: a domed top highlight, a shaded rolled
   bottom edge, a soft contact shadow, hand-made irregular
   corners and a matte grain surface.

   Moulding interactions: js/clay-mold.js.
   ============================================================ */

:root {
  /* rolled clay edge — light on top-left, shade on bottom-right,
     then a soft contact shadow so the piece sits ON the page */
  --clay-rim:
    inset 2px 3px 3px rgba(255, 255, 255, .75),
    inset -4px -5px 9px rgba(36, 31, 26, .16),
    inset 0 0 0 1px rgba(36, 31, 26, .06),
    0 9px 14px -6px rgba(36, 31, 26, .38),
    0 22px 40px -20px rgba(36, 31, 26, .38);
  --clay-rim-sm:
    inset 1px 2px 2px rgba(255, 255, 255, .8),
    inset -2px -3px 5px rgba(36, 31, 26, .16),
    0 5px 10px -5px rgba(36, 31, 26, .35);
  /* pressed-in thumbprint (active / recessed) */
  --clay-dent:
    inset 4px 5px 9px rgba(36, 31, 26, .3),
    inset -2px -2px 4px rgba(255, 255, 255, .55),
    0 1px 0 rgba(255, 255, 255, .5);

  /* matte clay grain, blended into every surface */
  --clay-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");

  --blob-a: 46% 54% 58% 42% / 52% 46% 54% 48%;
  --blob-b: 58% 42% 45% 55% / 44% 58% 42% 56%;
}

/* ---------- soft clay ground (no balls behind the page) ---------- */
body {
  background:
    radial-gradient(1200px 700px at 82% -12%, #eef0ee 0%, transparent 60%),
    radial-gradient(900px 620px at -5% 18%, #d2d5d3 0%, transparent 55%),
    radial-gradient(1100px 820px at 105% 108%, #ddd6c8 0%, transparent 60%),
    linear-gradient(180deg, #dcdedd 0%, #cccfcc 55%, #d6d0c3 100%);
  background-attachment: fixed;
}

/* ============================================================
   MOULDED TYPE
   ============================================================ */
h1, h2, h3 {
  text-shadow:
    -1px -1px 0 rgba(255, 255, 255, .55),
    1px 1px 0 rgba(36, 31, 26, .22),
    0 5px 0 rgba(36, 31, 26, .15),
    0 11px 15px rgba(36, 31, 26, .26);
}
.clay-word {
  text-shadow:
    -1px -2px 0 rgba(255, 255, 255, .4),
    2px 3px 0 rgba(36, 31, 26, .24),
    0 8px 0 rgba(36, 31, 26, .2),
    0 16px 20px rgba(36, 31, 26, .3);
}

/* the little uppercase label becomes a pressed clay tag */
.eyebrow {
  display: inline-block;
  padding: .34rem .95rem;
  border-radius: 1rem 1.2rem 1rem 1.2rem / 1.2rem 1rem 1.2rem 1rem;
  background-color: #f4e3df;
  background-image: var(--clay-noise);
  background-blend-mode: multiply;
  color: var(--clay-red);
  box-shadow: var(--clay-rim-sm);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}
.mint__card .eyebrow { background-color: rgba(227, 197, 143, .22); color: var(--clay-tan); }

/* ============================================================
   CLAY BUTTONS
   ============================================================ */
.btn {
  border-radius: 1.4rem 1.15rem 1.45rem 1.2rem / 1.15rem 1.4rem 1.2rem 1.45rem;
  background-color: var(--bg);
  background-image: var(--clay-noise);
  background-blend-mode: multiply;
  box-shadow: var(--clay-rim);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .22);
  transition:
    transform .2s cubic-bezier(.34, 1.56, .64, 1),
    box-shadow .18s ease,
    border-radius .35s ease,
    background-color .2s ease;
  will-change: transform, border-radius;
}
.btn:hover {
  transform: translateY(-3px) scale(1.035, 1.015);
  border-radius: var(--blob-b);
  box-shadow: var(--clay-rim), 0 16px 26px -10px rgba(36, 31, 26, .34);
}
.btn:active {
  transform: translateY(3px) scale(.97, 1.04);
  box-shadow: var(--clay-dent);
  border-radius: var(--blob-a);
}
/* keep the grain on the coloured hover states from styles.css */
.btn--primary:hover { background-color: var(--clay-red-d); background-image: var(--clay-noise); }
.btn--ghost {
  background-color: rgba(255, 255, 255, .45);
  box-shadow: inset 0 0 0 2px var(--navy), var(--clay-rim-sm);
}
.btn--ghost:hover { background-color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy), var(--clay-rim); }
.btn--light { box-shadow: var(--clay-rim-sm); }
.btn--light:hover { background-color: #fff; background-image: var(--clay-noise); }

/* ============================================================
   TOOLBAR — pressed clay
   ============================================================ */
.search {
  border: 0;
  border-radius: 1.3rem 1.1rem 1.35rem 1.15rem / 1.15rem 1.35rem 1.1rem 1.3rem;
  background-color: #f6f6f4;
  background-image: var(--clay-noise);
  background-blend-mode: multiply;
  box-shadow: var(--clay-dent), 0 4px 12px -6px rgba(36, 31, 26, .3);
}
.search input::placeholder { color: var(--ink-soft); opacity: .8; }

.chip {
  border: 0;
  border-radius: 1.1rem 1.3rem 1.15rem 1.35rem / 1.3rem 1.1rem 1.35rem 1.15rem;
  background-color: #fff;
  background-image: var(--clay-noise);
  background-blend-mode: multiply;
  box-shadow: var(--clay-rim-sm);
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s ease, border-radius .3s ease, background-color .15s ease;
}
.chip:hover { transform: translateY(-2px); border-radius: var(--blob-a); }
.chip--on {
  /* stays navy text, but pressed into the clay */
  color: var(--navy);
  background-color: #e7eaed;
  box-shadow: var(--clay-dent);
  transform: translateY(1px) scale(.99, 1.02);
}

/* ============================================================
   GALLERY — each cat is a little clay tile
   ============================================================ */
.cat {
  border: 7px solid #fff;
  border-radius: 1.6rem 1.3rem 1.7rem 1.35rem / 1.4rem 1.7rem 1.35rem 1.65rem;
  box-shadow: var(--clay-rim);
  /* --rx/--ry/--ty/--sc are driven by js/clay-mold.js; --rot adds a
     hand-made wobble so no two tiles sit perfectly straight */
  transform:
    perspective(700px)
    rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))
    rotate(var(--rot, 0deg))
    translateY(var(--ty, 0px)) scale(var(--sc, 1));
  transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s ease, border-radius .4s ease;
}
/* uneven, hand-pressed angles */
.cat:nth-child(4n+1) { --rot: -0.7deg; }
.cat:nth-child(4n+2) { --rot: 0.5deg; }
.cat:nth-child(4n+3) { --rot: -0.4deg; }
.cat:nth-child(4n+4) { --rot: 0.8deg; }

.cat:hover {
  --ty: -7px; --sc: 1.02;
  border-radius: var(--blob-b);
  box-shadow: var(--clay-rim), 0 24px 42px -16px rgba(36, 31, 26, .42);
}
.cat:active { --ty: -1px; --sc: .985; box-shadow: var(--clay-dent); }
.cat::after { background: linear-gradient(to top, rgba(30, 42, 74, .8) 0%, transparent 46%); }
.cat__tag {
  border-radius: 999px;
  box-shadow: var(--clay-rim-sm);
  background-image: var(--clay-noise);
  background-blend-mode: multiply;
}

/* ============================================================
   ABOUT — a slab of clay holding the photo
   ============================================================ */
.about__img {
  border: 14px solid #fff;
  border-radius: 2rem 2.4rem 2.1rem 2.6rem / 2.4rem 2rem 2.5rem 2.1rem;
  box-shadow: inset 0 0 0 2px rgba(36, 31, 26, .06), var(--clay-rim);
}
.dot {
  background-image: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .6), transparent 60%);
  box-shadow: var(--clay-rim-sm);
}

/* ============================================================
   ROADMAP SLABS
   ============================================================ */
.timeline__item {
  border: 0;
  border-radius: 1.6rem 1.35rem 1.7rem 1.4rem / 1.4rem 1.7rem 1.35rem 1.65rem;
  background-color: #fff;
  background-image: var(--clay-noise);
  background-blend-mode: multiply;
  box-shadow: var(--clay-rim);
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s ease;
}
.timeline__item:hover { transform: translateY(-5px) rotate(-.5deg); }
.timeline__item::before {
  height: 11px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--clay-red), var(--clay-purple), var(--clay-blue));
  box-shadow: inset 0 -3px 4px rgba(36, 31, 26, .28), inset 0 1px 1px rgba(255, 255, 255, .45);
}
.timeline__num {
  text-shadow: -1px -1px 0 rgba(255, 255, 255, .7), 0 4px 0 rgba(36, 31, 26, .14);
}

/* ============================================================
   MINT — one big pressed clay slab
   ============================================================ */
.mint__card {
  border-radius: 2.2rem 2.6rem 2.3rem 2.7rem / 2.6rem 2.2rem 2.7rem 2.3rem;
  background-image: var(--clay-noise);
  background-blend-mode: multiply;
  box-shadow:
    inset 2px 3px 3px rgba(255, 255, 255, .18),
    inset -8px -12px 22px rgba(0, 0, 0, .34),
    0 22px 46px -16px rgba(36, 31, 26, .55);
}
.mint__form input {
  border-radius: 1.2rem 1.35rem 1.15rem 1.3rem / 1.35rem 1.15rem 1.3rem 1.2rem;
  background-image: var(--clay-noise);
  background-blend-mode: multiply;
  box-shadow: var(--clay-dent);
}
.mint__note { box-shadow: var(--clay-rim-sm); }

/* ============================================================
   FAQ SLABS
   ============================================================ */
.faq__item {
  border: 0;
  border-radius: 1.4rem 1.15rem 1.5rem 1.2rem / 1.2rem 1.5rem 1.15rem 1.4rem;
  background-color: #fff;
  background-image: var(--clay-noise);
  background-blend-mode: multiply;
  box-shadow: var(--clay-rim);
  transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s ease;
}
.faq__item[open] { box-shadow: var(--clay-dent), 0 8px 18px -8px rgba(36, 31, 26, .35); }

/* ============================================================
   NAV — a rolled clay bar
   ============================================================ */
.nav {
  border-bottom: 0;
  background: rgba(219, 221, 219, .86);
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, .8),
    inset 0 -5px 9px -7px rgba(36, 31, 26, .55),
    0 6px 16px -10px rgba(36, 31, 26, .4);
}
.nav.is-scrolled { box-shadow: inset 0 2px 1px rgba(255, 255, 255, .8), inset 0 -5px 9px -7px rgba(36, 31, 26, .55), 0 16px 32px -14px rgba(36, 31, 26, .4); }
.nav__burger { border: 0; box-shadow: var(--clay-rim-sm); background: #fff; }
.nav__logo { filter: drop-shadow(0 6px 6px rgba(36, 31, 26, .3)); }
.nav__name { text-shadow: 0 1px 0 rgba(255, 255, 255, .6), 0 2px 0 rgba(36, 31, 26, .12); }
/* the generic .nav__links a colour would make this navy-on-blue,
   so keep the "Join the Club" button label light for contrast */
.nav__links a.btn { color: #fff; }

/* ============================================================
   FOOTER — a rolled clay ledge
   ============================================================ */
.footer {
  border-top: 0;
  background: linear-gradient(180deg, #d5d7d5, #c7cac7);
  box-shadow: inset 0 7px 12px -9px rgba(36, 31, 26, .55), inset 0 2px 1px rgba(255, 255, 255, .65);
}

/* ============================================================
   HERO DECOR
   ============================================================ */
/* centre the hero blurb around the "Clay Cats Club" heading */
.hero__copy { text-align: center; }
.hero__lede { margin-inline: auto; }
.hero__actions { justify-content: center; }
.hero__stats { justify-content: center; }

.hero__badge { box-shadow: var(--clay-rim); background-image: var(--clay-noise); background-blend-mode: multiply; }
.hero__emblem { filter: drop-shadow(0 18px 22px rgba(36, 31, 26, .34)); }
.blob {
  opacity: .72; filter: blur(1px);
  box-shadow: var(--clay-rim-sm);
}
.blob--red    { background: radial-gradient(circle at 35% 30%, #e8a99f, #cf6a5b); }
.blob--purple { background: radial-gradient(circle at 35% 30%, #c3b4e0, #8b74b8); }
.blob--blue   { background: radial-gradient(circle at 35% 30%, #adc0e8, #6f8fc9); }
.blob--tan    { background: radial-gradient(circle at 35% 30%, #f0dcb4, #d9bd84); }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox__figure img {
  border: 12px solid #fff;
  border-radius: 1.8rem 2.1rem 1.9rem 2.2rem / 2.1rem 1.8rem 2.2rem 1.9rem;
}
.lightbox__nav, .lightbox__close { box-shadow: var(--clay-rim-sm); }

/* ============================================================
   REVEAL + CLICK SPLAT
   ============================================================ */
.reveal { transform: translateY(26px) scale(.96); }
.reveal.is-in { transform: none; transition: opacity .55s ease, transform .7s cubic-bezier(.34, 1.56, .64, 1); }

.clay-splat {
  position: fixed; z-index: 9998; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #e8a99f, var(--clay-red));
  animation: clay-splat .6s ease-out forwards;
}
@keyframes clay-splat {
  0%   { transform: scale(.3); opacity: .9; }
  55%  { transform: scale(2.6); opacity: .5; }
  100% { transform: scale(4.2); opacity: 0; }
}

/* ============================================================
   GRID LAYOUT
   Five cats across so each "load" is a full 5 x 5 page, and the
   roadmap sits on a single row. Both fall back gracefully.
   ============================================================ */
.gallery  { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.timeline { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .gallery  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .gallery  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 500px) {
  .gallery  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timeline { grid-template-columns: 1fr; }
}