/* ---------------------------------------------------------------
   queen-arietta.com — jc thoughtz xoxo
   --------------------------------------------------------------- */

:root {
  --pink: #ff0ae2;
  --page-pad: clamp(20px, 5.9vw, 85px);
  /* 1px at the 1440px design width, shrinking with the viewport */
  --u: clamp(0.42px, 100vw / 1440, 1px);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ------------------------------------------------ secret bunny easter egg */

/* Peanut hides on the root layer, behind the page — only overscroll
   reveals him. 🐰 Sized to the page width, one copy peeking from each
   edge, so he shows at his natural scale. */
html {
  background:
    url("assets/secret-bunny.jpg") top center / 100% auto no-repeat fixed,
    url("assets/secret-bunny.jpg") bottom center / 100% auto no-repeat fixed,
    #f5fed5;
}

/* Desktop: the native elastic bounce only ever shows a flat color, so
   suppress it; script.js rubber-bands the page itself off the bunny. */
@media (hover: hover) and (pointer: fine) {
  html {
    overscroll-behavior-y: none;
  }
}

/* iOS ignores fixed background attachment but natively reveals the root
   background when rubber-banding: pin a copy to each edge instead. */
@supports (-webkit-touch-callout: none) {
  html {
    background:
      url("assets/secret-bunny.jpg") top center / 100vw auto no-repeat,
      url("assets/secret-bunny.jpg") bottom center / 100vw auto no-repeat,
      #f5fed5;
  }
}

body {
  font-family: "Comic Neue", "Comic Sans MS", cursive;
  font-weight: 700;
  color: var(--pink);
  background-color: #f5fed5;
  background-image:
    linear-gradient(rgba(255, 251, 255, 0.45), rgba(255, 251, 255, 0.45)),
    url("assets/bg-pattern-small.png");
  background-size: auto, 150px 100px;
  background-repeat: repeat;
  overflow-x: hidden;
  /* Own stacking context: keeps the z-index:-1 sparkle layers above this
     background (once html gained a background, body stopped donating its
     background to the canvas and started painting over them). */
  isolation: isolate;
}

::selection {
  background: var(--pink);
  color: #fff;
}

/* ------------------------------------------------ speckled lop cursors */

/* Hotspots: default = arrow tip, pointer = fingertip, grab/grabbing =
   center of the bunny. Text keeps the native I-beam for usable selection. */
body {
  cursor: url("assets/cursor-default-32.png") 1 1, auto;
  cursor: -webkit-image-set(url("assets/cursor-default-64.png") 2x) 1 1,
          url("assets/cursor-default-32.png") 1 1,
          auto;
}

a {
  cursor: url("assets/cursor-pointer-32.png") 5 1, pointer;
  cursor: -webkit-image-set(url("assets/cursor-pointer-64.png") 2x) 5 1,
          url("assets/cursor-pointer-32.png") 5 1,
          pointer;
}

/* ------------------------------------------------ angelfire sparkle layers */

/* Two tiling star layers twinkling on offset rhythms, behind the content
   but on top of the glitter tile — very 2004 glitter-GIF. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: repeat;
}

body::before {
  background-image: url("assets/sparkle-a.svg");
  background-size: 280px 280px;
  animation: twinkle 1.9s ease-in-out infinite;
}

body::after {
  background-image: url("assets/sparkle-b.svg");
  background-size: 360px 360px;
  background-position: 140px 70px;
  animation: twinkle 2.7s ease-in-out -0.9s infinite reverse;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.1; }
  50%      { opacity: 0.95; }
}

/* ------------------------------------------------ hero */

.hero {
  padding: clamp(72px, 10vw, 147px) var(--page-pad) 0;
}

.hero h1 {
  font-size: clamp(3.4rem, 10.85vw, 9.76rem);
  line-height: 0.78;
  letter-spacing: -0.03em;
  text-align: center;
}

.hero .line {
  display: block;
}

.hero .line-1 { transform: translateX(1.5%); }
.hero .line-2 { transform: translateX(-3.5%); }
.hero .line-3 { transform: translateX(2%); }

.smiley {
  display: inline-block;
  transform: rotate(79.61deg) translateX(-0.08em);
  transform-origin: center;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.line-3:hover .smiley {
  transform: rotate(99deg) translateX(-0.08em);
}

/* ------------------------------------------------ carousel */

.carousel-section {
  margin-top: clamp(56px, 7.2vw, 104px);
}

.carousel {
  overflow-x: auto;
  overflow-y: hidden;
  cursor: url("assets/cursor-grab-32.png") 16 16, grab;
  cursor: -webkit-image-set(url("assets/cursor-grab-64.png") 2x) 16 16,
          url("assets/cursor-grab-32.png") 16 16,
          grab;
  -webkit-user-select: none;
  user-select: none;
  scrollbar-width: none;              /* firefox */
  -webkit-overflow-scrolling: touch;
}

.carousel::-webkit-scrollbar {
  display: none;                      /* safari + chrome */
}

.carousel.is-dragging {
  cursor: url("assets/cursor-grabbing-32.png") 16 16, grabbing;
  cursor: -webkit-image-set(url("assets/cursor-grabbing-64.png") 2x) 16 16,
          url("assets/cursor-grabbing-32.png") 16 16,
          grabbing;
}

.carousel-track {
  display: flex;
  align-items: center;
  gap: calc(80 * var(--u));
  width: max-content;
  padding-inline: var(--page-pad);
}

.pic {
  flex: none;
  pointer-events: none;
}

.pic-0 { height: calc(444 * var(--u)); }
.pic-1 { height: calc(367 * var(--u)); }
.pic-2 { height: calc(444 * var(--u)); }
.pic-3 { height: calc(367 * var(--u)); }
.pic-4 { height: calc(488 * var(--u)); }

/* ------------------------------------------------ shared section styles */

.stats,
.outro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 5.6vw, 80px);
  padding: clamp(64px, 8.3vw, 120px) var(--page-pad);
  text-align: center;
}

.stats h2,
.outro h2 {
  font-size: clamp(2rem, 5.6vw, 5rem);
  letter-spacing: -0.03em;
  line-height: normal;
  max-width: 1078px;
}

/* ------------------------------------------------ stats */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 450px));
  column-gap: clamp(48px, 11.2vw, 160px);
  row-gap: clamp(48px, 5.6vw, 80px);
  justify-content: center;
  width: 100%;
}

.stat {
  display: flex;
  flex-direction: column;
}

.num {
  font-size: clamp(4rem, 11.2vw, 10rem);
  font-style: italic;
  letter-spacing: -0.03em;
  line-height: normal;
}

.label {
  font-size: clamp(1.35rem, 3.4vw, 3rem);
  letter-spacing: -0.03em;
  line-height: normal;
}

@media (max-width: 640px) {
  .stat-grid {
    grid-template-columns: minmax(0, 450px);
  }
}

/* ------------------------------------------------ outro */

.board {
  position: relative;
  width: 100%;
  max-width: 1270px;
}

.board-link {
  display: block;
  border-radius: clamp(14px, 2.5vw, 36px);
  overflow: hidden;
}

.board-link img {
  display: block;
  width: 100%;
  height: auto;
}

.pill {
  position: absolute;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%);
  display: inline-block;
  background: var(--pink);
  color: #fff;
  text-decoration: none;
  font-size: clamp(0.95rem, 2.8vw, 2.5rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
  text-align: center;
  padding: 0.4em 1em;
  border-radius: 360px;
  max-width: 94%;
  width: max-content;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.pill:hover,
.pill:focus-visible {
  transform: translate(-50%, -50%) scale(1.06) rotate(-1.5deg);
  box-shadow: 0 10px 40px rgba(255, 10, 226, 0.45);
}

.pill:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.slack-note {
  width: min(460px, 92%);
  height: auto;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(255, 10, 226, 0.18);
}

/* ------------------------------------------------ reveal on scroll */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .smiley,
  .pill {
    transition: none;
  }
  body::before,
  body::after {
    animation: none;
    opacity: 0.35;
  }
}