/* ==========================================================================
   The Chairhand — layered 2.5D redesign
   Loaded after styles.css. Same locked palette and fonts; this file adds
   depth (perspective scenes, cursor tilt, sticky card stack, scroll-opening
   laptop). No WebGL, no libraries.
   ========================================================================== */

/* ---------- Scroll reveal ---------- */
/* Only hides content when JS is running (html.js), so a script failure can
   never leave the page blank. */
.js .reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--delay, 0s);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Scroll progress ---------- */
.progress {
  position: fixed; top: 0; left: 0; width: 100%; height: 4px; z-index: 120;
  background: var(--orange); transform-origin: 0 50%;
  transform: scaleX(var(--p, 0)); pointer-events: none;
}

/* ---------- Parallax blobs ---------- */
.blob--a   { transform: translateY(calc(var(--sy, 0) * -.10px)); }
.blob--b   { transform: translateY(calc(var(--sy, 0) * -.16px)); }
.blob--cta { transform: translateY(calc(var(--sy, 0) * .05px)); }
.blob--cta2 { width: 150px; bottom: -40px; right: -40px; fill: var(--taupe); opacity: .25; }

/* ---------- Tilt cards (cursor-follow + glare) ---------- */
[data-tilt] {
  transform: perspective(900px) rotateX(var(--trx, 0deg)) rotateY(var(--try, 0deg));
  transition: transform .18s ease-out, box-shadow .18s ease-out;
  will-change: transform;
}
[data-tilt]::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .38), transparent 55%);
  opacity: var(--glare, 0); transition: opacity .2s ease;
}
[data-tilt].is-tilting { box-shadow: var(--hard-lg); }
/* The polaroid already had its own hover lift; the tilt replaces it. */
.polaroid[data-tilt]:hover { transform: perspective(900px) rotateX(var(--trx, 0deg)) rotateY(var(--try, 0deg)); }

/* The reveal and tilt both write transform; once revealed, tilt owns it. */
.js .reveal[data-tilt].is-in { transform: perspective(900px) rotateX(var(--trx, 0deg)) rotateY(var(--try, 0deg)); }
.js .reveal[data-tilt]:not(.is-in) { transform: translateY(26px); }

/* ---------- Generic 3D scene plumbing ---------- */
.layer {
  position: absolute;
  transform: translate3d(calc(var(--px, 0) * var(--d, 0) * 1px), calc(var(--py, 0) * var(--d, 0) * 1px), var(--z, 0px));
  transition: transform .25s ease-out;
}

/* ---------- Hero ---------- */
.hero { min-height: min(86vh, 720px); display: flex; align-items: center; }
.hero__inner { align-items: center; width: 100%; }
.hero__copy { flex: 1 1 0; min-width: 0; }
.hero__title { font-size: clamp(1.9rem, 4.4vw, 3.4rem); }

.scene {
  flex: 0 0 clamp(300px, 40vw, 470px);
  height: clamp(400px, 48vw, 560px);
  position: relative;
  perspective: 1100px;
  --rx: 0deg; --ry: 0deg; --px: 0; --py: 0;
}
.scene__sway, .scene__inner { position: absolute; inset: 0; transform-style: preserve-3d; }
.scene__sway { animation: sway 9s ease-in-out infinite; }
.scene__inner { transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .25s ease-out; }
@keyframes sway {
  0%, 100% { transform: rotateY(-5deg) rotateX(2deg); }
  50%      { transform: rotateY(5deg) rotateX(-2deg); }
}

.layer--disc {
  inset: 7% 4% 5% 8%;
  border-radius: 46% 54% 50% 50% / 52% 46% 54% 48%;
  background: var(--taupe); opacity: .55;
}
.layer--disc::after {
  content: ''; position: absolute; inset: 9%;
  border: 2px dashed var(--orange); border-radius: inherit; opacity: .7;
}

/* The four questions as a deck of cards in the hero */
.qcard {
  width: 76%; padding: .85rem 1.1rem 1rem;
  border: var(--border); border-radius: 16px; box-shadow: var(--hard);
}
.qcard__tag { display: block; font-size: 1.1rem; margin: 0 0 .1rem; color: var(--orange); }
.qcard__q { margin: 0; font-size: clamp(1.05rem, 1.9vw, 1.3rem); line-height: 1.2; font-weight: 600; }
.qcard--1 { top: 4%;  left: 2%;  rotate: -3deg; background: var(--card);  color: var(--navy); }
.qcard--2 { top: 27%; left: 22%; rotate: 2deg;  background: var(--sand);  color: var(--navy); }
.qcard--3 { top: 50%; left: 4%;  rotate: -2deg; background: var(--taupe); color: var(--navy); }
.qcard--3 .qcard__tag { color: var(--cream); }
.qcard--4 { top: 73%; left: 21%; rotate: 3deg;  background: var(--navy);  color: var(--cream); }
.qcard--4 .qcard__q { color: var(--cream); }

.layer--sticker {
  top: -3%; right: -3%; width: 46%;
  padding: .7rem .9rem; rotate: 6deg;
  background: var(--orange); color: var(--cream);
  border: var(--border); border-radius: 10px; box-shadow: 4px 4px 0 var(--ink);
  font-size: clamp(1.05rem, 1.9vw, 1.25rem); line-height: 1.1; text-align: center;
}
.layer--star { bottom: 1%; right: 5%; width: 30px; fill: var(--orange); }

.hero__free { margin: .8rem 0 0; font-size: 1.3rem; color: var(--orange); }

/* ---------- Sound familiar ---------- */
.familiar .pile {
  list-style: none; padding: 0; margin: 2rem auto 1.8rem; max-width: 54rem;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem 1rem;
}
.pile li {
  font-size: clamp(.9rem, 1.8vw, 1.1rem); font-weight: 600;
  padding: .7rem 1.2rem; border: var(--border); border-radius: 14px;
  box-shadow: 4px 4px 0 var(--ink); background: var(--card); color: var(--navy);
  rotate: var(--r, 0deg);
  animation: bob 5.5s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.7s);
  transition: transform .2s ease, box-shadow .2s ease;
}
.pile li:nth-child(4n+2) { background: var(--orange); color: var(--cream); }
.pile li:nth-child(4n+3) { background: var(--sand); }
.pile li:nth-child(4n)   { background: var(--navy); color: var(--cream); }
@media (hover: hover) { .pile li:hover { transform: translateY(-4px) scale(1.04); box-shadow: 6px 7px 0 var(--ink); } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.familiar__line { font-family: var(--font-serif); font-size: clamp(1.2rem, 2.6vw, 1.7rem); color: var(--navy); margin: 0; }

/* ---------- What I look at ---------- */
.lede--center { margin-left: auto; margin-right: auto; }
.qsvc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; margin-top: 1.4rem; }
@media (max-width: 1000px) { .qsvc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .qsvc-grid { grid-template-columns: 1fr; } }
.card--taupe { background: var(--taupe); color: var(--navy); }
.card--taupe .tags li { background: var(--sand); }
.qsvc { padding-top: 1.7rem; }
.qsvc__stage { color: var(--orange); font-size: 1.3rem; margin: .3rem 0 0; }
.card--taupe .qsvc__stage { color: var(--navy); }
.card--brown .qsvc__stage { color: var(--sand); }
.card--navy .qsvc__stage { color: var(--orange); }
.qsvc h3 { font-size: 1.2rem; margin: .1rem 0 .5rem; }
.qsvc__fix { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: 1rem 0 0; opacity: .75; }
.qsvc__goal { margin: .2rem 0 0; font-size: .92rem; font-weight: 500; }

.system-note {
  margin: 2.4rem auto 0; max-width: 46rem; padding: 1.2rem 1.6rem; text-align: center;
  background: var(--cream); border: var(--border); border-radius: var(--radius); box-shadow: var(--hard);
}
.system-note__head { font-size: 1.6rem; color: var(--orange); margin: 0 0 .2rem; }
.system-note p:last-child { margin: 0; font-size: .95rem; }

/* ---------- Work: anatomy summary ---------- */
.anatomy-list { margin: 1rem 0 0; display: grid; gap: .75rem; }
.anatomy-list > div { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: .8rem; align-items: baseline; }
.anatomy-list dt { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--orange); }
.anatomy-list dd { margin: 0; font-size: .92rem; }

/* ---------- Local Lore ---------- */
.lore__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.lore__copy p:not(.eyebrow) { max-width: 42ch; }
.lore__copy .btn { margin-top: .6rem; }
.lore__card {
  display: block; position: relative; text-decoration: none; color: var(--navy);
  background: var(--card); border: var(--border); border-radius: 18px; box-shadow: var(--hard);
  padding: 10px 10px 0; overflow: hidden;
}
.lore__card img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; }
.lore__cap { display: block; padding: .7rem .4rem .8rem; font-size: 1.25rem; text-align: center; }

/* ---------- Process: sticky card stack ---------- */
.stack { list-style: none; padding: 0; margin: 2.2rem 0 0; --stack-top: 5.6rem; }
.stack__card {
  position: sticky; top: calc(var(--stack-top) + var(--i) * 1.1rem);
  display: grid; grid-template-columns: auto 1fr auto; gap: clamp(1rem, 3vw, 2rem); align-items: center;
  padding: clamp(1.3rem, 3vw, 2rem) clamp(1.3rem, 3.5vw, 2.4rem);
  margin-bottom: 1.4rem; min-height: 9.5rem;
  border: var(--border); border-radius: 20px; box-shadow: var(--hard);
  transform: scale(var(--s, 1)); transform-origin: 50% 0;
  filter: brightness(var(--b, 1));
  transition: transform .25s ease-out, filter .25s ease-out;
}
.stack__card:last-child { margin-bottom: 0; }
.stack__num { font-size: clamp(3rem, 8vw, 5.4rem); line-height: 1; font-weight: 600; min-width: 1.3em; }
.stack__body h3 { margin: 0 0 .35rem; font-size: clamp(1.25rem, 3vw, 1.8rem); }
.stack__body p { margin: 0; font-size: clamp(.9rem, 1.6vw, 1.02rem); max-width: 42ch; }
.stack__icon { width: clamp(46px, 7vw, 72px); height: auto; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }

.stack__card--light { background: var(--card); color: var(--brown); }
.stack__card--light .stack__num { color: var(--orange); }
.stack__card--sand  { background: var(--sand); color: var(--brown); }
.stack__card--sand .stack__num { color: var(--navy); }
.stack__card--taupe { background: var(--taupe); color: var(--navy); }
.stack__card--taupe .stack__num { color: var(--cream); }
.stack__card--taupe h3 { color: var(--navy); }
.stack__card--navy  { background: var(--navy); color: var(--cream); }
.stack__card--navy .stack__num { color: var(--orange); }
.stack__card--navy h3 { color: var(--cream); }
.stack__card--navy p { font-weight: 500; letter-spacing: .01em; }

/* ---------- Work: laptop showcase ---------- */
.showcase {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr);
  gap: clamp(1.2rem, 4vw, 3rem); align-items: center; margin-top: 1rem;
}
.showcase__stage {
  position: relative; perspective: 1500px;
  padding: 2.4rem clamp(.6rem, 3vw, 2rem) 2.4rem;
  --rx: 0deg; --ry: 0deg; --px: 0; --py: 0;
}
.showcase__inner { position: relative; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .25s ease-out; }

.laptop { position: relative; width: 100%; max-width: 660px; margin: 0 auto; transform-style: preserve-3d; --open-rx: 38deg; }
.laptop__lid { transform-origin: 50% 100%; transform: rotateX(var(--open-rx)); transform-style: preserve-3d; }
.laptop__bezel {
  position: relative; background: var(--navy); border: 2px solid var(--navy);
  border-radius: 16px 16px 4px 4px; padding: 14px 14px 16px; box-shadow: var(--hard-lg);
}
.laptop__cam { position: absolute; top: 5px; left: 50%; width: 5px; height: 5px; margin-left: -2px; border-radius: 50%; background: #3b4573; }
.laptop__screen { aspect-ratio: 16 / 10; background: var(--card); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; }
.laptop__chrome { display: flex; align-items: center; gap: 6px; padding: 7px 10px; background: var(--sand); flex: 0 0 auto; }
.laptop__chrome i { width: 8px; height: 8px; border-radius: 50%; background: #c9b394; }
.laptop__chrome span { margin-left: 8px; font-size: .68rem; background: var(--card); color: var(--brown); padding: 2px 12px; border-radius: 10px; }
.laptop__screen img { flex: 1 1 auto; min-height: 0; width: 100%; object-fit: cover; object-position: top; }
.laptop__base {
  height: 16px; margin: 0 -5%; position: relative;
  background: linear-gradient(var(--taupe), #8d7058); border: 2px solid var(--navy);
  border-radius: 3px 3px 18px 18px; box-shadow: var(--hard);
}
.laptop__base::after { content: ''; position: absolute; top: -1px; left: 50%; width: 18%; height: 5px; margin-left: -9%; background: #6f5844; border-radius: 0 0 8px 8px; }

.chip3d {
  position: absolute; z-index: 2; white-space: nowrap;
  font-size: .78rem; font-weight: 600; padding: .45rem .95rem; border-radius: 20px;
  background: var(--card); color: var(--navy); border: var(--border); box-shadow: 3px 3px 0 var(--ink);
  transform: translate3d(calc(var(--px, 0) * var(--d, 0) * 1px), calc(var(--py, 0) * var(--d, 0) * 1px), var(--z, 0px));
  transition: transform .25s ease-out;
}
.chip3d--a { left: -1%; top: 4%; background: var(--orange); color: var(--cream); rotate: -5deg; }
.chip3d--b { right: -1%; top: 22%; background: var(--navy); color: var(--cream); rotate: 4deg; }
.chip3d--c { left: 8%; bottom: -2%; background: var(--taupe); rotate: -2deg; }
.live-badge {
  position: absolute; z-index: 3; right: 3%; bottom: 6%;
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .78rem; font-weight: 600; padding: .4rem .85rem; border-radius: 20px;
  background: var(--card); color: var(--navy); border: var(--border); box-shadow: 3px 3px 0 var(--ink);
  transform: translate3d(calc(var(--px, 0) * var(--d, 0) * 1px), calc(var(--py, 0) * var(--d, 0) * 1px), var(--z, 0px));
  transition: transform .25s ease-out;
}
.live-badge i { width: 9px; height: 9px; border-radius: 50%; background: var(--orange); animation: livePulse 1.8s ease-in-out infinite; }
@keyframes livePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(205, 71, 33, .5); } 50% { box-shadow: 0 0 0 6px rgba(205, 71, 33, 0); } }

.showcase__info .tag { font-size: .6875rem; font-weight: 700; letter-spacing: .06em; color: var(--brown); margin: 0 0 .3rem; opacity: .75; }
.showcase__info h3 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); }
.showcase__info p:not(.tag) { font-size: .95rem; max-width: 36ch; }
.showcase__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.2rem; }

.desk-row { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; margin-top: 2.2rem; }
.desk-row__label { font-size: 1.25rem; color: var(--orange); }
.mini {
  display: flex; flex-direction: column; gap: .15rem; text-align: left; cursor: pointer;
  font-family: var(--font-sans); color: var(--body-text);
  padding: .65rem 1rem; background: transparent; border: 2px dashed var(--taupe); border-radius: 12px;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
@media (hover: hover) { .mini:hover { transform: translateY(-2px) rotate(-1deg); border-color: var(--navy); background: var(--card); } }
.mini__tag { font-size: .625rem; font-weight: 700; letter-spacing: .06em; color: var(--taupe); }
.mini__name { font-family: var(--font-serif); font-size: 1.05rem; color: var(--navy); font-weight: 600; }
.mini__status { font-size: .6875rem; font-weight: 600; color: var(--orange); }

/* ---------- Magnetic buttons ---------- */
[data-magnet] { transition: transform .16s ease, box-shadow .16s ease, translate .2s ease-out; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .hero { min-height: 0; }
  .hero__inner { flex-direction: column; align-items: stretch; gap: 1rem; }
  .scene { flex: none; width: min(420px, 100%); height: 480px; margin: 3.4rem auto 0; }
  .showcase { grid-template-columns: 1fr; }
  .lore__inner { grid-template-columns: 1fr; }
  .showcase__info { text-align: left; }
}

@media (max-width: 720px) {
  .stack { --stack-top: 1rem; }
  .stack__card { grid-template-columns: auto 1fr; }
  .stack__icon { display: none; }
  .stack__card { min-height: 8.5rem; }
  .scene { height: 540px; }
  .chip3d { font-size: .7rem; padding: .35rem .75rem; }
  .chip3d--a { left: 0; }
  .chip3d--b { right: 0; }
  /* Straighten the card tilts at phone width, same as the rest of the site. */
  .polaroid[data-tilt] { transform: perspective(900px) rotateZ(2deg); }
}

@media (max-width: 400px) {
  .scene { height: 520px; }
}

/* Touch devices: no cursor to follow, so drop the hover-only effects. */
@media (hover: none) {
  [data-tilt]::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .scene__sway { animation: none; }
  .pile li, .live-badge i { animation: none; }
  .js .reveal { opacity: 1; transform: none; }
  .laptop { --open-rx: 0deg !important; }
  .stack__card { transform: none !important; filter: none !important; }
}

/* Touch: give the small text links a 44px tap area without changing how they look. */
@media (hover: none) {
  .link-underline, .footer__ig, .nav__brand { position: relative; }
  .link-underline::after, .footer__ig::after, .nav__brand::after { content: ''; position: absolute; inset: -11px -6px; }
}

/* Both CTA buttons the same size, text centered. */
.cta__actions .btn { display: inline-flex; align-items: center; justify-content: center; min-width: 16.5rem; min-height: 3.3rem; text-align: center; }

@media (max-width: 720px) {
  .footer { align-items: center; text-align: center; }
}

@media (max-width: 400px) {
  .cta__option { width: 100%; }
}

@media (max-width: 900px) {
  .layer--sticker { top: 0; right: 1%; }
}

/* ==========================================================================
   Backgrounds: grain, patterns and layered shapes. Only tints of the locked
   five-colour palette, so nothing here is a new colour.
   ========================================================================== */
:root {
  --grain: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'200'%20height%3D'200'%3E%3Cfilter%20id%3D'n'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'.9'%20numOctaves%3D'2'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20values%3D'0%200%200%200%200.42%200%200%200%200%200.22%200%200%200%200%200.12%200%200%200%200.55%200'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23n)'%2F%3E%3C%2Fsvg%3E");
  --grain-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'200'%20height%3D'200'%3E%3Cfilter%20id%3D'n'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'.9'%20numOctaves%3D'2'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20values%3D'0%200%200%200%20.95%200%200%200%200%20.84%200%200%200%200%20.73%200%200%200%20.13%200'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url(%23n)'%2F%3E%3C%2Fsvg%3E");
  --dots: radial-gradient(rgba(107, 56, 31, .14) 1.3px, transparent 1.7px);
  --chair-orange: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20120%20160'%20fill%3D'none'%20stroke%3D'%23CD4721'%20stroke-width%3D'3'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M28%2022Q60%2010%2092%2022M30%2036Q60%2025%2090%2036'%2F%3E%3Cpath%20d%3D'M32%2022V84M88%2022V84M46%2030V82M60%2026V82M74%2030V82'%2F%3E%3Crect%20x%3D'22'%20y%3D'84'%20width%3D'76'%20height%3D'11'%20rx%3D'2'%2F%3E%3Cpath%20d%3D'M30%2095L25%20150M90%2095L95%20150M28%20124H92'%2F%3E%3C%2Fsvg%3E");
  --chair-sand: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20120%20160'%20fill%3D'none'%20stroke%3D'%23E8C7A0'%20stroke-width%3D'3'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M28%2022Q60%2010%2092%2022M30%2036Q60%2025%2090%2036'%2F%3E%3Cpath%20d%3D'M32%2022V84M88%2022V84M46%2030V82M60%2026V82M74%2030V82'%2F%3E%3Crect%20x%3D'22'%20y%3D'84'%20width%3D'76'%20height%3D'11'%20rx%3D'2'%2F%3E%3Cpath%20d%3D'M30%2095L25%20150M90%2095L95%20150M28%20124H92'%2F%3E%3C%2Fsvg%3E");
}

.hero {
  background:
    radial-gradient(52% 62% at 76% 50%, rgba(253, 247, 238, .6), transparent 72%),
    var(--dots), var(--grain), var(--cream);
  background-size: auto, 26px 26px, 200px 200px, auto;
}
.section--cream {
  background: var(--dots), var(--grain), var(--cream);
  background-size: 26px 26px, 200px 200px, auto;
}
.section--sand {
  background:
    repeating-linear-gradient(135deg, rgba(107, 56, 31, .06) 0 2px, transparent 2px 16px),
    var(--grain), var(--sand);
  background-size: auto, 200px 200px, auto;
}
.cta {
  background:
    repeating-radial-gradient(circle at 10% 115%, rgba(243, 215, 186, .05) 0 2px, transparent 2px 38px),
    var(--grain-light), var(--brown);
  background-size: auto, 200px 200px, auto;
}

/* Decorative shapes sit behind the content and drift at their own speed. */
.section, .hero { overflow: clip; }
.section > .wrap { position: relative; z-index: 1; }
.deco { position: absolute; pointer-events: none; z-index: 0; }
.deco--ring {
  width: clamp(180px, 28vw, 340px); aspect-ratio: 1; border-radius: 50%;
  border: 2px dashed var(--orange); opacity: .4;
  animation: spinSlow 70s linear infinite;
}
.deco--ring::after { content: ''; position: absolute; inset: 14%; border-radius: 50%; border: 2px solid var(--taupe); opacity: .6; }
.deco--blob { width: clamp(150px, 24vw, 280px); fill: var(--taupe); opacity: .3; }
.deco--blob-orange { fill: var(--orange); opacity: .16; }
.deco--chair {
  width: clamp(150px, 22vw, 280px); aspect-ratio: 120 / 160;
  background: var(--chair-orange) center / contain no-repeat; opacity: .2;
}
.deco--chair-sand { background-image: var(--chair-sand); opacity: .16; }
.deco--star { width: 26px; fill: var(--orange); opacity: .8; animation: floaty 6s ease-in-out infinite; }
.deco--star-taupe { fill: var(--taupe); }
@keyframes spinSlow { to { rotate: 360deg; } }
@keyframes floaty { 0%, 100% { margin-top: 0; } 50% { margin-top: -12px; } }

/* A soft spotlight behind the laptop. */
.showcase__stage::before {
  content: ''; position: absolute; z-index: 0; left: 50%; top: 50%;
  width: min(86%, 560px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(253, 247, 238, .85), rgba(253, 247, 238, 0) 68%);
}
.showcase__inner { z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .deco--ring, .deco--star { animation: none; }
}

.stitch { background: var(--dots), var(--grain), var(--cream); background-size: 26px 26px, 200px 200px, auto; }

/* Cursor attraction: the script writes --mx / --my on these. */
.deco--star, .deco--blob, .sparkle { transform: translate(var(--mx, 0px), var(--my, 0px)); }
.pile li { transform: translate(var(--mx, 0px), var(--my, 0px)); transition: box-shadow .2s ease; }
@media (hover: hover) {
  .pile li:hover { transform: translate(var(--mx, 0px), var(--my, 0px)) translateY(-4px) scale(1.04); }
}
.cursor-glow {
  position: fixed; left: 0; top: 0; width: 420px; height: 420px; border-radius: 50%;
  pointer-events: none; z-index: 60; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(circle, rgba(253, 247, 238, .22), rgba(253, 247, 238, 0) 65%);
}
.cursor-glow.is-on { opacity: 1; }