:root {
  /* Space Mono` from Google Fonts for short sequence strings */
  --rose: #FF6B8A;
  --peach: #FFB067;
  --gold: #FFD166;
  --cream: #FFF1DA;
  --violet: #9B5DE5;
  --plum: #2A1028;
  --lavender: #F7D7FF;
  --chrome: linear-gradient(90deg, #fff8f0, #FFD166 18%, #F7D7FF 42%, #9B5DE5 65%, #FFF1DA);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--plum);
  font-family: "Nunito Sans", Inter, sans-serif;
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 107, 138, .42), transparent 28rem),
    radial-gradient(circle at 83% 16%, rgba(155, 93, 229, .35), transparent 30rem),
    linear-gradient(135deg, #2A1028 0%, #572045 28%, #FFB067 72%, #FFF1DA 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image: radial-gradient(circle, rgba(255, 241, 218, .55) 0 1px, transparent 1.5px);
  background-size: 18px 18px;
  mix-blend-mode: screen;
  z-index: 3;
}

.vanity-scroll { position: relative; z-index: 1; }
.scene { min-height: 100vh; position: relative; display: grid; grid-template-columns: repeat(12, 1fr); padding: 7vw 5vw; isolation: isolate; }

.ambient-orb { position: fixed; width: 34vw; aspect-ratio: 1; border-radius: 50%; filter: blur(12px); opacity: .45; pointer-events: none; z-index: 0; }
.orb-one { left: -12vw; top: 18vh; background: radial-gradient(circle, #FF6B8A, transparent 68%); animation: floatOrb 9s ease-in-out infinite; }
.orb-two { right: -14vw; top: 55vh; background: radial-gradient(circle, #9B5DE5, transparent 70%); animation: floatOrb 11s ease-in-out infinite reverse; }

.chrome-thread { position: fixed; left: 2.2vw; top: 6vh; bottom: 5vh; width: 12px; background: var(--chrome); border-radius: 99px; box-shadow: 0 0 18px rgba(255, 209, 102, .55); z-index: 2; }
.chrome-thread span { position: absolute; left: 50%; width: 34px; height: 34px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #FFD166 36%, #FF6B8A 70%, #9B5DE5); box-shadow: 0 6px 20px rgba(42,16,40,.4); animation: charmTug 3.8s cubic-bezier(.2,1.45,.4,1) infinite; }
.chrome-thread span:nth-child(1){ top: 12%; } .chrome-thread span:nth-child(2){ top: 34%; animation-delay: .5s; } .chrome-thread span:nth-child(3){ top: 58%; animation-delay: 1s; } .chrome-thread span:nth-child(4){ top: 82%; animation-delay: 1.5s; }

.opening { overflow: hidden; align-items: center; }
.marble-slab, .marble-tide, .mirror-fragment, .glass-plaque {
  background:
    radial-gradient(circle at 20% 24%, rgba(255,255,255,.75), transparent 18%),
    radial-gradient(circle at 88% 20%, rgba(247, 215, 255, .75), transparent 25%),
    linear-gradient(123deg, rgba(255, 241, 218, .92), rgba(255, 176, 103, .62) 38%, rgba(255, 107, 138, .26) 55%, rgba(255, 241, 218, .88)),
    repeating-linear-gradient(114deg, transparent 0 24px, rgba(255, 209, 102, .36) 25px 27px, transparent 28px 58px);
  border: 2px solid rgba(255, 241, 218, .7);
  box-shadow: inset 0 0 36px rgba(255,255,255,.42), 0 28px 80px rgba(42,16,40,.34);
}

.hero-slab { grid-column: 2 / 11; grid-row: 1; height: 54vh; border-radius: 4rem 2rem 5rem 1.5rem; transform: rotate(-7deg) translateY(1vh); z-index: -1; animation: slabBreath 7s ease-in-out infinite; }
.site-title { grid-column: 1 / 13; grid-row: 1; margin: 0; font-family: Shrikhand, Georgia, serif; font-size: clamp(5rem, 16vw, 17rem); line-height: .78; letter-spacing: -.08em; color: transparent; background: linear-gradient(110deg, #FF6B8A 8%, #FFB067 35%, #FFD166 56%, #FFF1DA 66%, #9B5DE5 86%); -webkit-background-clip: text; background-clip: text; text-shadow: .04em .05em 0 rgba(42,16,40,.32), 0 0 34px rgba(255,209,102,.45); transform: translateX(-8vw) rotate(-2deg); }
.site-title em { font-style: normal; color: var(--cream); text-shadow: 0 0 28px var(--rose); }
.hero-wave { position: absolute; width: min(74rem, 108vw); left: 18vw; top: 47vh; filter: drop-shadow(0 0 16px rgba(255, 209, 102, .75)); }
.wave { overflow: visible; }
.wave-path { fill: none; stroke: url(#chromeWave); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 18 14; animation: waveRun 3.4s linear infinite; }
.wave-echo { stroke: #FF6B8A; opacity: .42; stroke-width: 4; animation-direction: reverse; }
.gold-path { stroke: #FFD166; stroke-width: 7; filter: drop-shadow(0 0 10px #FFB067); }

.sticker, .scene-label, .tag, .chrome-clamp { font-family: Bungee, Impact, sans-serif; text-transform: uppercase; letter-spacing: .06em; background: var(--chrome); border: 2px solid rgba(255,255,255,.65); border-radius: 999px; box-shadow: 0 12px 28px rgba(42,16,40,.22), inset 0 1px 0 rgba(255,255,255,.8); }
.sticker { position: absolute; padding: .7rem 1.1rem; font-size: .78rem; }
.sticker-hot { right: 10vw; top: 16vh; transform: rotate(11deg); color: var(--plum); }
.sticker-soft { left: 12vw; bottom: 18vh; transform: rotate(-9deg); color: var(--violet); }
.opening-note { grid-column: 8 / 12; align-self: end; font-size: clamp(1.1rem, 2vw, 1.55rem); line-height: 1.25; background: rgba(255, 241, 218, .74); border: 1px solid rgba(255,255,255,.65); border-radius: 2rem; padding: 1.3rem 1.5rem; transform: rotate(3deg); backdrop-filter: blur(12px); }
.charm { position: absolute; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; border: 2px solid rgba(255,255,255,.78); color: var(--cream); background: radial-gradient(circle at 35% 25%, #fff, #FF6B8A 35%, #9B5DE5 80%); box-shadow: 0 15px 35px rgba(42,16,40,.38), inset 0 0 14px rgba(255,255,255,.62); font-size: 1.5rem; cursor: pointer; transition: transform .45s cubic-bezier(.16,1.6,.4,1), filter .3s; }
.charm:hover, .charm.spark { transform: scale(1.22) rotate(18deg); filter: brightness(1.25); }
.charm-heart { right: 22vw; bottom: 22vh; } .charm-gem { left: 22vw; top: 18vh; } .charm-ring { right: 8vw; top: 44vh; background: radial-gradient(circle, transparent 38%, #FFD166 40% 54%, #F7D7FF 56%, #9B5DE5 80%); }

.signal { align-content: center; overflow: hidden; }
.scene-label { grid-column: 2 / 6; width: max-content; padding: .75rem 1.2rem; transform: rotate(-4deg); }
.sequence-band { grid-column: 1 / 13; display: flex; align-items: center; gap: clamp(.7rem, 2vw, 2rem); margin: 12vh -8vw 3vh; transform: rotate(-3deg); }
.capsule { min-width: 9rem; padding: 1.2rem 1.7rem; border-radius: 999px; text-align: center; font-family: "Space Mono", monospace; font-weight: 700; background: linear-gradient(145deg, #FFF1DA, #FFB067); border: 3px solid #FFD166; box-shadow: 0 18px 45px rgba(42,16,40,.28), inset 0 0 24px rgba(255,255,255,.62); animation: capsuleBounce 4s cubic-bezier(.2,1.45,.4,1) infinite; }
.capsule:nth-child(even) { transform: translateY(2.5rem); background: linear-gradient(145deg, #F7D7FF, #FF6B8A); animation-delay: .35s; }
.capsule:nth-child(3n) { transform: translateY(-2rem); color: var(--cream); background: linear-gradient(145deg, #9B5DE5, #2A1028); animation-delay: .7s; }
.chat-slip { position: relative; padding: 1rem 1.2rem; border-radius: 1.5rem; background: rgba(255,241,218,.78); border: 1px solid rgba(255,255,255,.72); backdrop-filter: blur(10px); box-shadow: 0 20px 40px rgba(42,16,40,.23); }
.chat-slip b { display: block; font-family: Bungee, Impact, sans-serif; font-size: .82rem; color: var(--rose); margin-bottom: .4rem; }
.slip-one { grid-column: 2 / 5; transform: rotate(4deg); }
.slip-two { grid-column: 8 / 12; transform: rotate(-5deg) translateY(4vh); }
.band-wave { position: absolute; left: -4vw; bottom: 10vh; width: 108vw; opacity: .84; }

.mirrors { align-content: center; }
.section-title { grid-column: 1 / 13; margin: 0; font-family: Shrikhand, Georgia, serif; font-size: clamp(3rem, 8vw, 8.6rem); line-height: .86; letter-spacing: -.05em; color: var(--cream); text-shadow: .06em .06em 0 rgba(155,93,229,.72), 0 0 30px rgba(255,107,138,.55); }
.mirror-grid { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; margin-top: -1vh; }
.mirror-fragment { min-height: 14rem; padding: 1.4rem; border-radius: 2rem; transition: transform .5s cubic-bezier(.16,1.6,.4,1), box-shadow .3s; }
.mirror-fragment:hover { transform: translateY(-.8rem) rotate(0deg) scale(1.03) !important; box-shadow: inset 0 0 45px rgba(255,255,255,.55), 0 35px 85px rgba(42,16,40,.4); }
.mirror-fragment span { font-family: Bungee, Impact, sans-serif; color: var(--violet); }
.mirror-fragment p { font-size: 1.35rem; line-height: 1.15; }
.fragment-signal { grid-column: 2 / 6; transform: rotate(-7deg); }
.fragment-repair { grid-column: 6 / 11; transform: rotate(4deg) translateY(3rem); }
.fragment-memory { grid-column: 1 / 5; transform: rotate(6deg) translateY(-1rem); }
.fragment-extension { grid-column: 8 / 13; transform: rotate(-5deg) translateY(-2rem); }
.microcopy { grid-column: 4 / 10; margin-top: 1rem; padding: 1rem 1.4rem; border-radius: 999px; background: #2A1028; color: #FFF1DA; text-align: center; font-family: "Space Mono", monospace; transform: rotate(2deg); }

.tide { overflow: hidden; align-content: center; }
.marble-tide { position: absolute; inset: 4vw -4vw; z-index: -1; border-radius: 5rem; transform: rotate(2deg); }
.tide-title { grid-column: 2 / 10; color: var(--plum); text-shadow: .04em .04em 0 rgba(255,209,102,.9), 0 0 32px rgba(255,255,255,.72); }
.glass-plaque { position: relative; padding: 1.4rem; border-radius: 2rem; backdrop-filter: blur(14px); }
.plaque-one { grid-column: 2 / 6; transform: rotate(-4deg) translateY(6vh); }
.plaque-two { grid-column: 8 / 12; transform: rotate(5deg) translateY(-2vh); }
.tag { display: inline-block; padding: .45rem .8rem; font-size: .7rem; color: var(--plum); }
.glass-plaque p { font-size: 1.22rem; line-height: 1.22; }
.etched-wave { position: absolute; width: 112vw; left: -6vw; bottom: 18vh; opacity: .9; }

.extend { min-height: 110vh; align-content: center; overflow: hidden; }
.strand-closeup { grid-column: 2 / 12; position: relative; height: 24rem; display: flex; align-items: center; justify-content: center; gap: clamp(.8rem, 2.5vw, 2rem); transform: rotate(-5deg); }
.strand-closeup::before { content: ""; position: absolute; left: 4%; right: 7%; height: 14px; border-radius: 99px; background: var(--chrome); box-shadow: 0 0 22px rgba(255,209,102,.85); }
.bead { position: relative; width: clamp(3.5rem, 7vw, 7rem); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 30% 22%, #fff, #FFF1DA 20%, #FFB067 55%, #FF6B8A); box-shadow: 0 18px 48px rgba(42,16,40,.35), inset 0 0 26px rgba(255,255,255,.72); animation: charmTug 3.2s cubic-bezier(.2,1.45,.4,1) infinite; }
.bead.hot { background: radial-gradient(circle at 30% 22%, #fff, #FF6B8A 42%, #2A1028); animation-delay: .25s; }
.bead.gold { background: radial-gradient(circle at 30% 22%, #fff, #FFD166 45%, #FFB067); animation-delay: .5s; }
.bead.violet { background: radial-gradient(circle at 30% 22%, #fff, #F7D7FF 28%, #9B5DE5 70%); animation-delay: .75s; }
.endcap-halo { position: relative; width: clamp(5rem, 10vw, 10rem); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #FFF1DA 0 14%, #FFD166 18% 29%, #FF6B8A 36%, rgba(255,107,138,.1) 67%, transparent 72%); filter: drop-shadow(0 0 35px #FFD166); animation: haloPulse 2.4s ease-in-out infinite; }
.chrome-clamp { position: absolute; padding: .7rem 1rem; font-size: .72rem; }
.clamp-a { left: 11vw; top: 34vh; transform: rotate(9deg); }
.clamp-b { right: 8vw; bottom: 28vh; transform: rotate(-7deg); }
.closing-copy { grid-column: 3 / 8; margin-top: -3rem; padding: 1.3rem 1.5rem; border-radius: 1.7rem; background: rgba(255,241,218,.82); font-size: 1.35rem; line-height: 1.25; transform: rotate(3deg); }
.signature { grid-column: 6 / 13; font-family: Shrikhand, Georgia, serif; font-size: clamp(3rem, 9vw, 9rem); color: transparent; background: linear-gradient(110deg, #FFF1DA, #FFD166, #FF6B8A, #9B5DE5); -webkit-background-clip: text; background-clip: text; text-shadow: 0 0 30px rgba(255,209,102,.35); transform: rotate(-4deg) translateY(2rem); }

.is-visible { animation: settleIn .85s cubic-bezier(.16,1.6,.4,1) both; }
.ripple { filter: brightness(1.25) saturate(1.25) drop-shadow(0 0 18px #FFD166); }

@keyframes waveRun { to { stroke-dashoffset: -128; } }
@keyframes slabBreath { 0%,100% { transform: rotate(-7deg) translateY(1vh) scale(1); } 50% { transform: rotate(-4deg) translateY(-1vh) scale(1.025); } }
@keyframes charmTug { 0%,100% { translate: 0 0; } 45% { translate: 0 -12px; } 62% { translate: 0 5px; } }
@keyframes floatOrb { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(4vw,-5vh,0) scale(1.12); } }
@keyframes capsuleBounce { 0%,100% { margin-top: 0; } 48% { margin-top: -1.4rem; } 65% { margin-top: .5rem; } }
@keyframes haloPulse { 0%,100% { transform: scale(.96); opacity: .78; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes settleIn { from { opacity: 0; transform: translateY(50px) rotate(-7deg) scale(.96); } to { opacity: 1; } }

@media (max-width: 760px) {
  .scene { padding: 6rem 1.2rem; grid-template-columns: repeat(6, 1fr); }
  .site-title, .section-title, .sequence-band, .strand-closeup { grid-column: 1 / 7; }
  .hero-slab { grid-column: 1 / 7; }
  .opening-note, .slip-one, .slip-two, .tide-title, .plaque-one, .plaque-two, .closing-copy, .signature { grid-column: 1 / 7; }
  .mirror-grid { grid-column: 1 / 7; display: block; }
  .mirror-fragment { margin: 1rem 0; }
  .chrome-thread { opacity: .35; }
  .sequence-band { flex-wrap: wrap; margin-left: 0; margin-right: 0; }
  .capsule { min-width: 6.5rem; }
}