:root {
  --walnut: #3A2D25;
  --cream: #F7EBD8;
  --lavender: #C9B7E8;
  --green: #7FA66A;
  --butter: #F2C66D;
  --red: #C94B4B;
  --blue: #3E79A8;
  --paper: rgba(247, 235, 216, 0.92);
  --shadow: rgba(58, 45, 37, 0.22);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--walnut);
  background:
    radial-gradient(circle at 50% 18%, rgba(242, 198, 109, 0.24), transparent 34rem),
    linear-gradient(90deg, rgba(127, 166, 106, 0.10), transparent 18%, transparent 82%, rgba(201, 183, 232, 0.13)),
    var(--cream);
  font-family: "Nunito Sans", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0.33;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(58,45,37,.18) 0 1px, transparent 1.4px),
    radial-gradient(circle at 84% 32%, rgba(62,121,168,.18) 0 1px, transparent 1.6px),
    radial-gradient(circle at 42% 78%, rgba(201,75,75,.14) 0 1px, transparent 1.5px),
    radial-gradient(circle at 65% 56%, rgba(127,166,106,.15) 0 1px, transparent 1.8px);
  background-size: 38px 38px, 51px 51px, 44px 44px, 63px 63px;
}

.pattern {
  position: fixed;
  top: 0;
  width: clamp(72px, 9vw, 132px);
  height: 100vh;
  pointer-events: none;
  opacity: .72;
  background:
    radial-gradient(ellipse at 50% 20%, var(--red) 0 18%, transparent 19%),
    radial-gradient(ellipse at 50% 54%, var(--green) 0 18%, transparent 19%),
    radial-gradient(circle at 50% 85%, var(--blue) 0 10%, transparent 11%),
    linear-gradient(90deg, transparent 46%, rgba(58,45,37,.22) 47% 53%, transparent 54%);
  background-size: 78px 150px;
  filter: saturate(.88);
}

.pattern-left { left: 0; transform: translateX(-18%); }
.pattern-right { right: 0; transform: translateX(18%) scaleX(-1); }

.cabinet { position: relative; z-index: 1; }

.scene {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(2rem, 5vw, 5rem) 1.25rem;
  position: relative;
}

.hearth-circle {
  width: min(92vw, 760px);
  aspect-ratio: 1;
  min-height: 620px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  background:
    radial-gradient(circle, rgba(247,235,216,.97) 0 58%, rgba(242,198,109,.20) 59% 62%, transparent 63%),
    repeating-conic-gradient(from -6deg, rgba(127,166,106,.17) 0 8deg, transparent 8deg 16deg);
  box-shadow: 0 28px 90px rgba(58, 45, 37, .16), inset 0 0 0 2px rgba(58,45,37,.11), inset 0 0 0 20px rgba(247,235,216,.48);
}

.eyebrow {
  position: absolute;
  top: 13%;
  margin: 0;
  font-family: "Patrick Hand", "Comic Sans MS", cursive;
  font-size: clamp(1rem, 2.1vw, 1.35rem);
  color: var(--blue);
  transform: rotate(-2deg);
}

.wordmark {
  position: absolute;
  top: 16%;
  margin: 0;
  font-family: "Caveat", "Bradley Hand", "Segoe Print", cursive;
  font-size: clamp(4rem, 12vw, 8.6rem);
  line-height: .78;
  color: transparent;
  -webkit-text-stroke: 1px rgba(58,45,37,.22);
  letter-spacing: -.035em;
}

.wordmark::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: var(--walnut);
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  border-right: 4px solid var(--red);
  animation: writeTitle 2.6s .45s steps(13, end) forwards, caretFade .5s 3.3s forwards;
}

.orbit-stage {
  position: relative;
  width: min(76vw, 520px);
  height: min(76vw, 520px);
  margin-top: 7rem;
}

.field-svg, .diagram { width: 100%; height: 100%; overflow: visible; }
.field-svg { position: absolute; inset: 0; }

.field-line {
  fill: none;
  stroke: var(--blue);
  stroke-width: 4.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1250;
  stroke-dashoffset: 1250;
  filter: drop-shadow(0 2px 0 rgba(247,235,216,.9));
  animation: drawLine 2.5s ease forwards, tremble 3.8s ease-in-out infinite;
}
.line-two { animation-delay: .28s, 2.5s; opacity: .88; }
.line-three { animation-delay: .48s, 2.5s; opacity: .74; }
.loose-a, .loose-b, .loose-c { stroke: var(--red); stroke-width: 3.2; animation-delay: .9s, 2.7s; }

.woven-rug {
  position: absolute;
  left: 50%;
  bottom: 7%;
  width: 58%;
  height: 24%;
  transform: translateX(-50%) rotate(-1deg);
  border-radius: 50%;
  background:
    repeating-linear-gradient(0deg, transparent 0 11px, rgba(58,45,37,.12) 12px 14px),
    repeating-linear-gradient(90deg, rgba(127,166,106,.28) 0 18px, rgba(242,198,109,.28) 18px 36px, rgba(201,183,232,.25) 36px 54px),
    var(--cream);
  box-shadow: inset 0 0 0 3px rgba(58,45,37,.14), 0 24px 36px rgba(58,45,37,.12);
}
.woven-rug span { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: var(--red); top: 45%; }
.woven-rug span:nth-child(1) { left: 18%; }
.woven-rug span:nth-child(2) { left: 38%; background: var(--blue); }
.woven-rug span:nth-child(3) { right: 38%; background: var(--green); }
.woven-rug span:nth-child(4) { right: 18%; }

.monopole-bead, .mini-charm {
  position: absolute;
  left: 50%;
  top: 47%;
  width: clamp(116px, 21vw, 164px);
  height: clamp(116px, 21vw, 164px);
  transform: translate(-50%, -50%);
  border-radius: 47% 53% 49% 51%;
  background: radial-gradient(circle at 32% 24%, #fff6c8 0 11%, var(--butter) 12% 45%, #d88c41 79%, #8e5b34 100%);
  box-shadow: 0 0 0 8px rgba(242,198,109,.18), 0 0 56px rgba(242,198,109,.86), 0 24px 34px rgba(58,45,37,.22), inset -13px -18px 23px rgba(58,45,37,.18);
  animation: hoverBead 4.2s ease-in-out infinite;
}
.pole-mark, .mini-charm span {
  position: absolute;
  inset: 34% auto auto 36%;
  font-family: "Caveat", cursive;
  font-size: 3.3rem;
  font-weight: 700;
  color: var(--red);
  transform: rotate(-9deg);
}
.shine { position: absolute; width: 32%; height: 20%; border-radius: 50%; background: rgba(255,255,255,.55); left: 23%; top: 18%; transform: rotate(-25deg); }

.felt-ghost {
  width: 78px;
  height: 92px;
  border-radius: 50% 50% 34% 36%;
  background: linear-gradient(180deg, rgba(255,255,255,.96), var(--lavender));
  box-shadow: inset 0 -9px 0 rgba(62,121,168,.10), 0 10px 18px rgba(58,45,37,.12);
  position: absolute;
}
.felt-ghost::before, .felt-ghost::after { content: ""; position: absolute; bottom: -1px; width: 24px; height: 24px; border-radius: 50%; background: var(--cream); }
.felt-ghost::before { left: 12px; }
.felt-ghost::after { right: 12px; }
.hero-ghost { left: 56%; top: 37%; opacity: 0; transform: translateY(18px) rotate(7deg); animation: ghostPeek 1.2s 3.25s ease forwards, driftGhost 4.8s 4.3s ease-in-out infinite; }
.eye { position: absolute; width: 8px; height: 9px; border-radius: 50%; background: var(--walnut); top: 34px; }
.eye-left { left: 24px; }
.eye-right { right: 24px; }
.cheek { position: absolute; width: 11px; height: 7px; border-radius: 50%; background: var(--red); opacity: .55; top: 49px; }
.cheek-left { left: 14px; }
.cheek-right { right: 14px; }
.speech-puff {
  position: absolute;
  left: 64%;
  top: 27%;
  padding: .25rem .65rem;
  border: 2px solid rgba(58,45,37,.5);
  border-radius: 999px;
  background: var(--paper);
  font-family: "Patrick Hand", cursive;
  font-size: 1.25rem;
  opacity: 0;
  transform: rotate(8deg) scale(.8);
  animation: puffIn .7s 4.05s ease forwards;
}

.paper-tabs { position: absolute; bottom: 6%; display: flex; gap: .8rem; flex-wrap: wrap; justify-content: center; }
.paper-tabs a, .drawer-links a {
  color: var(--walnut);
  text-decoration: none;
  font-weight: 900;
  font-size: .83rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .7rem 1rem;
  background: var(--cream);
  border: 2px solid rgba(58,45,37,.25);
  border-radius: 12px 12px 18px 18px;
  box-shadow: 0 8px 0 rgba(58,45,37,.1);
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.paper-tabs a:nth-child(2), .drawer-links a:nth-child(2) { background: #e7efd9; }
.paper-tabs a:nth-child(3) { background: #f7d8d2; }
.paper-tabs a:nth-child(4) { background: #e7ddf4; }
.paper-tabs a:hover, .drawer-links a:hover { transform: translateY(5px) rotate(-2deg); box-shadow: 0 3px 0 rgba(58,45,37,.12); }

.tableau { text-align: center; }
.plaque {
  font-family: "Patrick Hand", cursive;
  font-size: clamp(1.25rem, 2.8vw, 1.75rem);
  background: var(--butter);
  border: 3px solid rgba(58,45,37,.22);
  border-radius: 999px 999px 20px 20px;
  padding: .6rem 1.6rem;
  box-shadow: 0 12px 0 rgba(58,45,37,.09);
  margin-bottom: 1.5rem;
  transform: rotate(-1deg);
}
.plaque.green { background: var(--green); color: #fff7e7; }
.plaque.blue { background: var(--blue); color: #fff7e7; }
.plaque.red { background: var(--red); color: #fff7e7; }

.wall-hanging, .gathering, .corkboard {
  width: min(92vw, 830px);
  border-radius: 44px;
  background: var(--paper);
  border: 3px solid rgba(58,45,37,.16);
  box-shadow: 0 28px 78px rgba(58,45,37,.14), inset 0 0 0 14px rgba(242,198,109,.12);
  padding: clamp(2rem, 5vw, 4rem);
  position: relative;
}
.stitched-medallion { width: 86px; height: 86px; border-radius: 50%; margin: 0 auto 1rem; border: 4px dashed var(--red); background: radial-gradient(circle, var(--butter), #efb150); display: grid; place-items: center; font-family: "Caveat", cursive; font-size: 3rem; color: var(--red); }

h2 { margin: .25rem 0 1rem; font-family: "Caveat", "Bradley Hand", cursive; font-size: clamp(3rem, 8vw, 5.8rem); line-height: .9; color: var(--walnut); }
h3 { margin: .8rem 0 .45rem; font-family: "Caveat", cursive; font-size: 2.25rem; line-height: .9; }
p { font-size: clamp(1.04rem, 2.1vw, 1.28rem); line-height: 1.72; max-width: 620px; margin: 0 auto; }
.callout { margin-top: 1.2rem; font-family: "Patrick Hand", cursive; font-size: 1.55rem; color: var(--red); }
.underline-draw { display: inline-block; background: linear-gradient(var(--red), var(--red)) 0 100% / 0 4px no-repeat; transition: background-size .55s ease; }
.active-scene .underline-draw, .underline-draw:hover { background-size: 100% 4px; }

.annotation { position: absolute; font-family: "Patrick Hand", cursive; color: var(--blue); background: #fff5e4; border: 2px solid rgba(58,45,37,.15); padding: .35rem .7rem; border-radius: 14px; box-shadow: 0 8px 0 rgba(58,45,37,.08); }
.note-a { left: 7%; top: 28%; transform: rotate(-8deg); }
.note-b { right: 5%; bottom: 25%; transform: rotate(6deg); color: var(--green); }
.diagram { height: 260px; margin: 1rem auto 0; max-width: 620px; display: block; }
.draw-stroke { fill: none; stroke: var(--blue); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 900; stroke-dashoffset: 900; filter: drop-shadow(0 2px 0 #fff7e7); }
.diagram-bead { fill: var(--butter); stroke: var(--walnut); stroke-width: 4; }
.diagram text { font-family: "Caveat", cursive; font-size: 42px; fill: var(--red); }
.active-scene .draw-stroke { animation: drawLine 2s ease forwards; }
.active-scene .draw-stroke.slow { animation-delay: .32s; }

.keepsake-shelf { width: min(94vw, 980px); display: flex; align-items: stretch; justify-content: center; gap: clamp(1rem, 3vw, 2rem); flex-wrap: wrap; }
.charm-card { flex: 1 1 240px; max-width: 300px; min-height: 330px; background: var(--paper); border: 3px solid rgba(58,45,37,.16); border-radius: 34px; padding: 1.5rem; box-shadow: 0 20px 50px rgba(58,45,37,.13); position: relative; transition: transform .35s ease; }
.charm-card:nth-child(2) { transform: translateY(2rem); }
.charm-card:hover { transform: translateY(-.5rem) rotate(2deg); }
.charm-card:nth-child(2):hover { transform: translateY(1.2rem) rotate(-2deg); }
.icon { width: 118px; height: 118px; margin: .25rem auto; position: relative; }
.mug-icon { border: 5px solid var(--blue); border-radius: 18px 18px 30px 30px; background: #fff4df; }
.mug-icon::after { content:""; position:absolute; right:-31px; top:24px; width:34px; height:44px; border: 5px solid var(--blue); border-left: 0; border-radius: 0 24px 24px 0; }
.mug-icon span, .compass-icon span, .log-icon span { position:absolute; inset:-28px 14px auto; height:42px; border-top: 4px solid var(--red); border-radius: 50%; animation: steamArc 2.8s ease-in-out infinite; }
.compass-icon { border-radius: 50%; background: var(--lavender); border: 5px solid var(--walnut); }
.compass-icon::before { content:""; position:absolute; left:50%; top:20%; width:6px; height:62px; background: var(--red); transform: translateX(-50%) rotate(38deg); border-radius:99px; transform-origin: bottom; }
.log-icon { border-radius: 60px 34px 34px 60px; background: linear-gradient(90deg, #f4d8ab, #c98c54); border: 5px solid rgba(58,45,37,.4); }
.log-icon::before, .log-icon::after { content:""; position:absolute; top:43px; width:9px; height:11px; background: var(--walnut); border-radius:50%; }
.log-icon::before { left: 41px; } .log-icon::after { right: 41px; }
.retro-band { margin-top: 4rem; display:flex; justify-content:center; gap: 1rem; height: 62px; overflow: hidden; }
.retro-band span { width: 56px; height: 56px; background: var(--green); border-radius: 50% 50% 8px 8px; box-shadow: inset 0 -18px 0 var(--red); animation: textileTurn 5s ease-in-out infinite; }
.retro-band span:nth-child(even) { background: var(--blue); box-shadow: inset 0 -18px 0 var(--butter); animation-delay: -.8s; }

.corkboard { min-height: 610px; background: linear-gradient(135deg, rgba(242,198,109,.22), rgba(247,235,216,.94)); }
.note-ghost { right: 18%; top: 12%; animation: driftGhost 4.5s ease-in-out infinite; }
.pinned-note { position:absolute; background: #fff6e7; border: 2px solid rgba(58,45,37,.18); border-radius: 18px; box-shadow: 0 18px 28px rgba(58,45,37,.13); font-family: "Patrick Hand", cursive; }
.large-note { left: 12%; top: 25%; width: min(66vw, 470px); padding: 2.2rem; transform: rotate(-2deg); }
.large-note h2 { font-size: clamp(2.8rem, 7vw, 4.7rem); margin: 0 0 .5rem; }
.large-note p { font-family: "Patrick Hand", cursive; line-height: 1.35; font-size: clamp(1.25rem, 2.5vw, 1.65rem); }
.tape { position:absolute; width: 105px; height: 32px; background: rgba(127,166,106,.45); left: 50%; top: -17px; transform: translateX(-50%) rotate(2deg); border-radius: 5px; }
.small-note { padding: 1rem 1.2rem; font-size: 1.35rem; }
.red-note { right: 12%; bottom: 19%; background: #f8d8d0; transform: rotate(5deg); }
.lavender-note { left: 10%; bottom: 10%; background: #eee3f8; transform: rotate(4deg); }
.green-note { right: 28%; top: 10%; background: #e9f0df; transform: rotate(-4deg); }

.gathering { padding-top: 8rem; padding-bottom: 5rem; overflow: hidden; }
.gathering::before { content:""; position:absolute; left:50%; top:2rem; width:min(72vw, 520px); height:min(72vw, 520px); transform: translateX(-50%); border-radius:50%; border: 4px dashed rgba(62,121,168,.38); animation: textileTurn 20s linear infinite; }
.mini-charm { top: 2.7rem; width: 98px; height: 98px; }
.mini-charm span { font-size: 2.45rem; }
.drawer-links { display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; margin-top: 2rem; }

.scene:not(.active-scene) .plaque,
.scene:not(.active-scene) .wall-hanging,
.scene:not(.active-scene) .keepsake-shelf,
.scene:not(.active-scene) .corkboard,
.scene:not(.active-scene) .gathering { transform: translateY(28px); opacity: .72; }
.plaque, .wall-hanging, .keepsake-shelf, .corkboard, .gathering { transition: transform .7s ease, opacity .7s ease; }

@keyframes writeTitle { to { width: 100%; } }
@keyframes caretFade { to { border-color: transparent; } }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
@keyframes tremble { 0%,100% { transform: translate(0,0); } 35% { transform: translate(1px,-2px); } 70% { transform: translate(-1px,1px); } }
@keyframes hoverBead { 0%,100% { transform: translate(-50%, -50%) translateY(0) rotate(-2deg); } 50% { transform: translate(-50%, -50%) translateY(-16px) rotate(3deg); } }
@keyframes ghostPeek { to { opacity: 1; transform: translateY(0) rotate(7deg); } }
@keyframes driftGhost { 0%,100% { margin-top: 0; } 50% { margin-top: -10px; } }
@keyframes puffIn { to { opacity: 1; transform: rotate(8deg) scale(1); } }
@keyframes steamArc { 0%,100% { transform: translateY(0) scaleX(.9); opacity:.55; } 50% { transform: translateY(-9px) scaleX(1.1); opacity:1; } }
@keyframes textileTurn { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(5deg); } }

@media (max-width: 720px) {
  .pattern { opacity: .25; }
  .hearth-circle { min-height: 560px; border-radius: 42px; aspect-ratio: auto; }
  .orbit-stage { margin-top: 5rem; width: 90vw; height: 90vw; max-height: 455px; }
  .paper-tabs { bottom: 3%; gap: .45rem; }
  .paper-tabs a { padding: .55rem .7rem; font-size: .72rem; }
  .annotation { position: static; display: inline-block; margin: .5rem; }
  .diagram { height: 190px; }
  .charm-card:nth-child(2) { transform: none; }
  .corkboard { min-height: 760px; }
  .pinned-note { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin: 1rem auto; width: min(82vw, 430px); display: block; }
  .note-ghost { position: relative; right: auto; top: auto; margin: 0 auto 1rem; }
}