/* ============================================================
   Component: The Reality Check (reality.css)
   Figma Node 0:5907 — Interactive Sticky Notes Wall & Floating Counter
   BEM Architecture: Vanilla CSS + Design Tokens
   ============================================================ */

/* ------------------------------------------------------------
   Section Container: Solid White Base
   ------------------------------------------------------------ */
.section_reality {
  position: relative;
  width: 100%;
  background-color: var(--color-reality-bg);
  padding: 0;
  overflow: hidden;
}

/* ------------------------------------------------------------
   1. Section Header: Clean Solid White Background (No Dots)
   ------------------------------------------------------------ */
.reality_header-wrapper {
  position: relative;
  width: 100%;
  background-color: var(--color-reality-bg);
  padding: 80px 16px 40px;
  z-index: 3;
}

@media (min-width: 768px) {
  .reality_header-wrapper {
    padding: 100px 32px 48px;
  }
}

@media (min-width: 1024px) {
  .reality_header-wrapper {
    padding: 120px 80px 56px;
  }
}

/* ------------------------------------------------------------
   2. Sticky Notes Board Area (With Dot Grid Pattern)
   ------------------------------------------------------------ */
.reality_board-wrapper {
  position: relative;
  width: 100%;
  background-color: var(--color-reality-bg);
  background-image: radial-gradient(var(--color-reality-dot-grid) 1.2px, transparent 1.2px);
  background-size: 24px 24px;
  background-position: center top;
  padding: 24px 16px 0;
  z-index: 2;
}

@media (min-width: 768px) {
  .reality_board-wrapper {
    padding: 32px 32px 0;
  }
}

@media (min-width: 1024px) {
  .reality_board-wrapper {
    padding: 40px 80px 0;
  }
}

.reality_container {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* ------------------------------------------------------------
   Section Header Typography
   ------------------------------------------------------------ */
.reality_header {
  max-width: 720px;
}


.reality_eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-eyebrow);
  color: var(--color-reality-header-accent);
  text-transform: uppercase;
  margin-bottom: 16px;
}

.reality_title {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 4.2vw, 56px);
  font-weight: var(--font-weight-medium, 500);
  line-height: 1.12;
  letter-spacing: var(--letter-spacing-tighter);
  color: var(--color-text-primary);
  margin: 0 0 24px;
}

@media (max-width: 767px) {
  .reality_title {
    font-size: 40px;
    font-weight: 500;
  }
}

.reality_intro {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.reality_text {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0;
}

.reality_subtext {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.5;
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  margin: 0;
}

/* ------------------------------------------------------------
   Sticky Notes Board
   Mobile: 2 columns in a row (repeat(2, 1fr))
   Tablet (640px - 1023px): 3 columns in a row
   Desktop (1024px+): Authentic Scattered Layout
   ------------------------------------------------------------ */
.reality_board {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 10px;
  align-items: start;
}

@media (min-width: 640px) and (max-width: 1023px) {
  .reality_board {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 16px;
  }
}

@media (min-width: 1024px) {
  .reality_board {
    display: block;
    height: 920px;
    margin-top: 20px;
  }
}

/* ------------------------------------------------------------
   Individual Sticky Note Button (Interactive)
   ------------------------------------------------------------ */
.reality_note {
  position: relative;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  outline: none;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 100%;
  justify-self: center;
  transition: transform var(--duration-fast) var(--ease-out-smooth);
}

.reality_note:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 6px;
  border-radius: 4px;
}

/* Left-Side Peeling Shadow */
.reality_note-shadow {
  position: absolute;
  left: -8px;
  top: 6%;
  width: 24px;
  height: 88%;
  border-radius: 50%;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.06));
  filter: blur(5px);
  transform: rotate(-3deg);
  z-index: 1;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-out-smooth),
    transform var(--duration-fast) var(--ease-out-smooth),
    filter var(--duration-fast) var(--ease-out-smooth);
}

@media (min-width: 1024px) {
  .reality_note-shadow {
    left: -16px;
    width: 42px;
    filter: blur(8px);
  }
}

/* The Paper Note Surface */
.reality_note-paper {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  padding: 26px 10px 10px;
  border-radius: 2px 2px 4px 2px;
  box-shadow: -2px 6px 16px -2px rgba(0, 0, 0, 0.08), 0 2px 5px rgba(0, 0, 0, 0.04);
  transition: background-color var(--duration-fast) var(--ease-out-smooth),
    box-shadow var(--duration-fast) var(--ease-out-smooth),
    transform var(--duration-fast) var(--ease-out-smooth),
    filter var(--duration-fast) var(--ease-out-smooth);
}

/* Top Adhesive Strip Emulation */
.reality_note-paper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: rgba(0, 0, 0, 0.025);
  pointer-events: none;
  border-radius: 2px 2px 0 0;
}

/* Color Themes & Subtle Hover Darkening */
.reality_note--yellow .reality_note-paper {
  background-color: var(--color-reality-yellow);
}

.reality_note--yellow:hover .reality_note-paper,
.reality_note--yellow:focus-visible .reality_note-paper {
  background-color: var(--color-reality-yellow-hover);
  filter: brightness(0.97);
}

.reality_note--yellow-light .reality_note-paper {
  background-color: var(--color-reality-yellow-light);
}

.reality_note--yellow-light:hover .reality_note-paper,
.reality_note--yellow-light:focus-visible .reality_note-paper {
  background-color: var(--color-reality-yellow-light-hover);
  filter: brightness(0.97);
}

.reality_note--pink .reality_note-paper {
  background-color: var(--color-reality-pink);
}

.reality_note--pink:hover .reality_note-paper,
.reality_note--pink:focus-visible .reality_note-paper {
  background-color: var(--color-reality-pink-hover);
  filter: brightness(0.97);
}

.reality_note--green .reality_note-paper {
  background-color: var(--color-reality-green);
}

.reality_note--green:hover .reality_note-paper,
.reality_note--green:focus-visible .reality_note-paper {
  background-color: var(--color-reality-green-hover);
  filter: brightness(0.97);
}

.reality_note--teal .reality_note-paper {
  background-color: var(--color-reality-teal);
}

.reality_note--teal:hover .reality_note-paper,
.reality_note--teal:focus-visible .reality_note-paper {
  background-color: var(--color-reality-teal-hover);
  filter: brightness(0.97);
}

.reality_note--blue .reality_note-paper {
  background-color: var(--color-reality-blue);
}

.reality_note--blue:hover .reality_note-paper,
.reality_note--blue:focus-visible .reality_note-paper {
  background-color: var(--color-reality-blue-hover);
  filter: brightness(0.97);
}

/* Hover & Focus Interactions */
.reality_note:hover .reality_note-shadow,
.reality_note:focus-visible .reality_note-shadow {
  opacity: 0.95;
  filter: blur(10px);
  transform: rotate(-3deg) scale(1.08);
}

.reality_note:hover .reality_note-paper,
.reality_note:focus-visible .reality_note-paper {
  box-shadow: -4px 10px 22px -3px rgba(0, 0, 0, 0.12), 0 3px 8px rgba(0, 0, 0, 0.05);
}

/* Selection State (Active) */
.reality_note.is-selected .reality_note-shadow {
  opacity: 1;
  filter: blur(12px);
  transform: rotate(-3deg) scale(1.15);
}

.reality_note.is-selected .reality_note-paper {
  box-shadow: -6px 14px 28px -4px rgba(0, 0, 0, 0.22), 0 4px 10px rgba(0, 0, 0, 0.08);
}

/* Checkmark / Hover Selection Badge */
.reality_note-tick {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 18px;
  height: 18px;
  z-index: 10;
  display: block;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity var(--duration-fast) var(--ease-out-smooth),
    transform var(--duration-fast) var(--ease-out-smooth);
  pointer-events: none;
}

.reality_note-tick-circle,
.reality_note-tick-checked {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  transition: opacity var(--duration-fast) var(--ease-out-smooth);
}

.reality_note-tick-circle {
  opacity: 1;
}

.reality_note-tick-checked {
  opacity: 0;
}

/* Hover & Focus: Show empty circle button when not selected (desktop only) */
@media (hover: hover) and (pointer: fine) {

  .reality_note:hover .reality_note-tick,
  .reality_note:focus-visible .reality_note-tick {
    opacity: 1;
    transform: scale(1);
  }
}

/* Selected: Show checked tick button */
.reality_note.is-selected .reality_note-tick {
  opacity: 1;
  transform: scale(1);
}

.reality_note.is-selected .reality_note-tick-circle {
  opacity: 0;
}

.reality_note.is-selected .reality_note-tick-checked {
  opacity: 1;
}

/* Handwritten Typography (Mobile Base) */
.reality_note-content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  z-index: 3;
}

.reality_note-text {
  font-family: var(--font-accent);
  font-size: clamp(12px, 3.4vw, 15px);
  line-height: 1.22;
  color: var(--color-reality-text);
  margin: 0;
  word-break: break-word;
}

@media (max-width: 767px) {

  /* Tighter font & padding */
  .reality_note-text {
    font-size: clamp(12px, 3.8vw, 15px);
    line-height: 1.3;
  }

  /* Give the note enough room — padding accounts for the adhesive strip */
  /* Center text vertically & horizontally inside the note on mobile */
  .reality_note-paper {
    padding: 20px 10px 12px;
    justify-content: center;
    align-items: center;
  }

  .reality_note-paper::before {
    height: 18px;
  }

  .reality_note-content {
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 100%;
    gap: 4px;
  }

  .reality_note-text {
    text-align: center;
    font-size: clamp(12px, 3.6vw, 15px);
    line-height: 1.25;
  }

  /* --- Mobile Tick: crisp SVG vector, hidden by default, direct select tick on tap --- */
  .reality_note-tick {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 22px;
    height: 22px;
    opacity: 0;
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.2));
    pointer-events: none;
    transition: opacity var(--duration-fast) var(--ease-out-smooth),
      transform var(--duration-fast) var(--ease-out-smooth);
    transform: scale(0.9);
  }

  /* On mobile: suppress hover & focus on unselected notes so touch doesn't retain tick */
  .reality_note:hover .reality_note-tick,
  .reality_note:focus .reality_note-tick,
  .reality_note:focus-visible .reality_note-tick {
    opacity: 0;
    transform: scale(0.9);
  }

  /* On mobile: no empty circle is ever shown, only the tick inside circle upon selection */
  .reality_note-tick-circle {
    display: none !important;
  }

  .reality_note-tick-checked {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-out-smooth);
  }

  .reality_note.is-selected .reality_note-tick,
  .reality_note.is-selected:hover .reality_note-tick,
  .reality_note.is-selected:focus .reality_note-tick,
  .reality_note.is-selected:focus-visible .reality_note-tick {
    opacity: 1;
    transform: scale(1);
  }

  .reality_note.is-selected .reality_note-tick-checked {
    display: block;
    opacity: 1;
  }
}

/* Hand-Drawn Illustrations & Underlines (Mobile Base) */
.reality_note-illustration {
  display: block;
  pointer-events: none;
  user-select: none;
}

/* Inline Underline Wrap (Notes 1 & 9) */
.reality_underline-wrap {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.reality_note-illustration--underline-01 {
  position: absolute;
  left: -2px;
  bottom: -4px;
  width: 68px;
  height: auto;
  pointer-events: none;
}

.reality_note-illustration--underline-02 {
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 44px;
  height: auto;
  pointer-events: none;
}

/* Circle Note Wrap (Note 12) */
.reality_circle-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 70px;
  margin: auto 0;
}

.reality_note-text--centered {
  text-align: center;
  position: relative;
  z-index: 2;
  margin: 0 auto;
}

.reality_note-illustration--circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 163px;
  height: 110px;
  pointer-events: none;
  z-index: 1;
}

/* Sad Face (Note 3) */
.reality_note-illustration--sad-face {
  width: 24px;
  height: 26px;
  margin: 4px auto 0;
  display: block;
}

/* Arrow Zigzag (Note 8) */
.reality_note-illustration--arrow-zigzag {
  width: 30px;
  height: auto;
  margin: 4px 0 0 auto;
  display: block;
}

/* Arrow Curve (Note 4) */
.reality_note-illustration--arrow-curve {
  width: 44px;
  height: auto;
  margin: 4px 0 0 auto;
  display: block;
}

/* Arrow Loop (Note 10) */
.reality_note-illustration--arrow-loop {
  width: 20px;
  height: auto;
  margin: 2px 4px 0 auto;
  display: block;
}

/* Mobile: scale down illustrations to fit inside small notes */
@media (max-width: 767px) {
  .reality_note-illustration--sad-face {
    width: 20px;
    height: 22px;
    margin: 2px auto 0;
  }

  .reality_note-illustration--arrow-zigzag {
    width: 22px;
    margin: 2px 0 0 auto;
  }

  .reality_note-illustration--arrow-curve {
    width: 30px;
    margin: 2px 0 0 auto;
  }

  .reality_note-illustration--arrow-loop {
    width: 16px;
    margin: 2px 2px 0 auto;
  }

  /* Keep underlines proportional */
  .reality_note-illustration--underline-01 {
    width: 50px;
  }

  .reality_note-illustration--underline-02 {
    width: 34px;
  }

  /* Circle illustration (Note 12): scale to fit the small note */
  .reality_note-illustration--circle {
    width: 150px;
    height: 100px;
  }

  .reality_circle-wrap {
    min-height: 50px;
  }
}


/* ------------------------------------------------------------
   Mobile & Tablet Organic Tilt / Rotation (Figma Node 1:7919 - 390px)
   Matches Figma Responsive 2-column mobile board
   ------------------------------------------------------------ */
@media (max-width: 1023px) {
  .reality_board {
    gap: 18px 12px;
    padding-inline: 4px;
  }

  .reality_note[data-note-id="1"] {
    transform: rotate(2deg);
  }

  .reality_note[data-note-id="2"] {
    transform: rotate(-1deg);
  }

  .reality_note[data-note-id="3"] {
    transform: rotate(-1.5deg);
  }

  .reality_note[data-note-id="4"] {
    transform: rotate(2.5deg);
  }

  .reality_note[data-note-id="5"] {
    transform: rotate(-3deg);
  }

  .reality_note[data-note-id="6"] {
    transform: rotate(1.5deg);
  }

  .reality_note[data-note-id="7"] {
    transform: rotate(-1deg);
  }

  .reality_note[data-note-id="8"] {
    transform: rotate(1.5deg);
  }

  .reality_note[data-note-id="9"] {
    transform: rotate(-2deg);
  }

  .reality_note[data-note-id="10"] {
    transform: rotate(2.5deg);
  }

  .reality_note[data-note-id="11"] {
    transform: rotate(-2deg);
  }

  .reality_note[data-note-id="12"] {
    transform: rotate(3deg);
  }

  .reality_note[data-note-id="1"]:hover,
  .reality_note[data-note-id="1"]:focus-visible {
    transform: rotate(2deg) translateY(-3px);
  }

  .reality_note[data-note-id="2"]:hover,
  .reality_note[data-note-id="2"]:focus-visible {
    transform: rotate(-1deg) translateY(-3px);
  }

  .reality_note[data-note-id="3"]:hover,
  .reality_note[data-note-id="3"]:focus-visible {
    transform: rotate(-1.5deg) translateY(-3px);
  }

  .reality_note[data-note-id="4"]:hover,
  .reality_note[data-note-id="4"]:focus-visible {
    transform: rotate(2.5deg) translateY(-3px);
  }

  .reality_note[data-note-id="5"]:hover,
  .reality_note[data-note-id="5"]:focus-visible {
    transform: rotate(-3deg) translateY(-3px);
  }

  .reality_note[data-note-id="6"]:hover,
  .reality_note[data-note-id="6"]:focus-visible {
    transform: rotate(1.5deg) translateY(-3px);
  }

  .reality_note[data-note-id="7"]:hover,
  .reality_note[data-note-id="7"]:focus-visible {
    transform: rotate(-1deg) translateY(-3px);
  }

  .reality_note[data-note-id="8"]:hover,
  .reality_note[data-note-id="8"]:focus-visible {
    transform: rotate(1.5deg) translateY(-3px);
  }

  .reality_note[data-note-id="9"]:hover,
  .reality_note[data-note-id="9"]:focus-visible {
    transform: rotate(-2deg) translateY(-3px);
  }

  .reality_note[data-note-id="10"]:hover,
  .reality_note[data-note-id="10"]:focus-visible {
    transform: rotate(2.5deg) translateY(-3px);
  }

  .reality_note[data-note-id="11"]:hover,
  .reality_note[data-note-id="11"]:focus-visible {
    transform: rotate(-2deg) translateY(-3px);
  }

  .reality_note[data-note-id="12"]:hover,
  .reality_note[data-note-id="12"]:focus-visible {
    transform: rotate(3deg) translateY(-3px);
  }

  .reality_note[data-note-id="1"].is-selected {
    transform: rotate(2deg) scale(1.03);
  }

  .reality_note[data-note-id="2"].is-selected {
    transform: rotate(-1deg) scale(1.03);
  }

  .reality_note[data-note-id="3"].is-selected {
    transform: rotate(-1.5deg) scale(1.03);
  }

  .reality_note[data-note-id="4"].is-selected {
    transform: rotate(2.5deg) scale(1.03);
  }

  .reality_note[data-note-id="5"].is-selected {
    transform: rotate(-3deg) scale(1.03);
  }

  .reality_note[data-note-id="6"].is-selected {
    transform: rotate(1.5deg) scale(1.03);
  }

  .reality_note[data-note-id="7"].is-selected {
    transform: rotate(-1deg) scale(1.03);
  }

  .reality_note[data-note-id="8"].is-selected {
    transform: rotate(1.5deg) scale(1.03);
  }

  .reality_note[data-note-id="9"].is-selected {
    transform: rotate(-2deg) scale(1.03);
  }

  .reality_note[data-note-id="10"].is-selected {
    transform: rotate(2.5deg) scale(1.03);
  }

  .reality_note[data-note-id="11"].is-selected {
    transform: rotate(-2deg) scale(1.03);
  }

  .reality_note[data-note-id="12"].is-selected {
    transform: rotate(3deg) scale(1.03);
  }
}

/* ------------------------------------------------------------
   Desktop Organic Scatter Positioning (1024px+)
   Exact visual alignment matching Screenshot 1
   ------------------------------------------------------------ */
@media (min-width: 1024px) {
  .reality_board {
    display: block;
    position: relative;
    width: 100%;
    max-width: 1280px;
    height: 900px;
    margin: 0 auto;
  }

  .reality_note {
    position: absolute;
    max-width: none;
    width: 235px;
    height: 235px;
    aspect-ratio: 1 / 1;
  }

  .reality_note-paper {
    padding: 38px 20px 20px;
  }

  .reality_note-paper::before {
    height: 36px;
  }

  .reality_note-tick {
    width: 26px;
    height: 26px;
    top: 14px;
    left: 14px;
  }

  .reality_note-text {
    font-size: 22px;
    line-height: 1.3;
  }

  .reality_note-illustration--underline-01 {
    width: 125px;
    bottom: -6px;
  }

  .reality_note-illustration--underline-02 {
    width: 76px;
    bottom: -6px;
  }

  .reality_circle-wrap {
    min-height: 120px;
  }

  .reality_note-illustration--circle {
    width: 196px;
    height: 120px;
  }

  .reality_note-illustration--sad-face {
    width: 44px;
    height: 48px;
    margin: 14px auto 0;
  }

  .reality_note-illustration--arrow-zigzag {
    width: 54px;
    height: 38px;
    margin: 8px 0 0 auto;
  }

  .reality_note-illustration--arrow-curve {
    width: 86px;
    height: 24px;
    margin: 8px 0 0 auto;
  }

  .reality_note-illustration--arrow-loop {
    width: 38px;
    height: 52px;
    margin: 4px 6px 0 auto;
  }

  /* Note-specific desktop text sizing and padding adjustments for optimal visual fill */
  .reality_note[data-note-id="1"] .reality_note-paper {
    padding-top: 30px;
  }

  .reality_note[data-note-id="1"] .reality_note-text {
    font-size: 25px;
    line-height: 1.3;
  }

  .reality_note[data-note-id="2"] .reality_note-paper {
    padding-top: 36px;
  }

  .reality_note[data-note-id="2"] .reality_note-text {
    font-size: 23px;
    line-height: 1.28;
  }

  .reality_note[data-note-id="5"] .reality_note-paper {
    padding-top: 34px;
  }

  .reality_note[data-note-id="5"] .reality_note-text {
    font-size: 25px;
    line-height: 1.32;
  }

  .reality_note[data-note-id="6"] .reality_note-paper {
    padding-top: 34px;
    padding-left: 48px;
    padding-right: 12px;
  }

  .reality_note[data-note-id="6"] .reality_note-text {
    font-size: 25px;
    line-height: 1.32;
    white-space: nowrap;
  }

  .reality_note[data-note-id="7"] .reality_note-paper {
    padding-top: 34px;
  }

  .reality_note[data-note-id="7"] .reality_note-text {
    font-size: 24px;
    line-height: 1.3;
  }

  .reality_note[data-note-id="8"] .reality_note-paper {
    padding-top: 30px;
  }

  .reality_note[data-note-id="8"] .reality_note-text {
    font-size: 21px;
    line-height: 1.26;
  }

  .reality_note[data-note-id="11"] .reality_note-paper {
    padding-top: 36px;
  }

  .reality_note[data-note-id="11"] .reality_note-text {
    font-size: 23px;
    line-height: 1.3;
  }

  /* Note 1: Yellow (Top Left-Center) */
  .reality_note[data-note-id="1"] {
    left: 235px;
    top: 15px;
    transform: rotate(-3.5deg);
    z-index: 4;
  }

  .reality_note[data-note-id="1"]:hover {
    transform: rotate(-3.5deg) translateY(-5px);
  }

  .reality_note[data-note-id="1"].is-selected {
    transform: rotate(-3.5deg) translateY(-8px) scale(1.02);
  }

  /* Note 2: Yellow-Light (Left) */
  .reality_note[data-note-id="2"] {
    left: 0px;
    top: 245px;
    transform: rotate(0.8deg);
    z-index: 2;
  }

  .reality_note[data-note-id="2"]:hover {
    transform: rotate(0.8deg) translateY(-5px);
  }

  .reality_note[data-note-id="2"].is-selected {
    transform: rotate(0.8deg) translateY(-8px) scale(1.02);
  }

  /* Note 3: Teal (Center Left) */
  .reality_note[data-note-id="3"] {
    left: 235px;
    top: 350px;
    transform: rotate(0deg);
    z-index: 2;
  }

  .reality_note[data-note-id="3"]:hover {
    transform: translateY(-5px);
  }

  .reality_note[data-note-id="3"].is-selected {
    transform: translateY(-8px) scale(1.02);
  }

  /* Note 4: Pink (Bottom Left) */
  .reality_note[data-note-id="4"] {
    left: 15px;
    top: 550px;
    transform: rotate(3deg);
    z-index: 2;
  }

  .reality_note[data-note-id="4"]:hover {
    transform: rotate(3deg) translateY(-5px);
  }

  .reality_note[data-note-id="4"].is-selected {
    transform: rotate(3deg) translateY(-8px) scale(1.02);
  }

  /* Note 5: Yellow (Bottom Center-Left) */
  .reality_note[data-note-id="5"] {
    left: 310px;
    top: 640px;
    transform: rotate(-3deg);
    z-index: 3;
  }

  .reality_note[data-note-id="5"]:hover {
    transform: rotate(-3deg) translateY(-5px);
  }

  .reality_note[data-note-id="5"].is-selected {
    transform: rotate(-3deg) translateY(-8px) scale(1.02);
  }

  /* Note 6: Pink (Center Top) */
  .reality_note[data-note-id="6"] {
    left: 430px;
    top: 185px;
    transform: rotate(1.2deg);
    z-index: 3;
  }

  .reality_note[data-note-id="6"]:hover {
    transform: rotate(1.2deg) translateY(-5px);
  }

  .reality_note[data-note-id="6"].is-selected {
    transform: rotate(1.2deg) translateY(-8px) scale(1.02);
  }

  /* Note 7: Green (Center Lower) */
  .reality_note[data-note-id="7"] {
    left: 500px;
    top: 450px;
    transform: rotate(0deg);
    z-index: 2;
  }

  .reality_note[data-note-id="7"]:hover {
    transform: translateY(-5px);
  }

  .reality_note[data-note-id="7"].is-selected {
    transform: translateY(-8px) scale(1.02);
  }

  /* Note 8: Green (Top Center-Right) */
  .reality_note[data-note-id="8"] {
    left: 675px;
    top: 95px;
    transform: rotate(-1.5deg);
    z-index: 2;
  }

  .reality_note[data-note-id="8"]:hover {
    transform: rotate(-1.5deg) translateY(-5px);
  }

  .reality_note[data-note-id="8"].is-selected {
    transform: rotate(-1.5deg) translateY(-8px) scale(1.02);
  }

  /* Note 9: Yellow-Light (Middle Center-Right) */
  .reality_note[data-note-id="9"] {
    left: 725px;
    top: 360px;
    transform: rotate(1deg);
    z-index: 2;
  }

  .reality_note[data-note-id="9"]:hover {
    transform: rotate(1deg) translateY(-5px);
  }

  .reality_note[data-note-id="9"].is-selected {
    transform: rotate(1deg) translateY(-8px) scale(1.02);
  }

  /* Note 10: Blue (Top Far-Right) */
  .reality_note[data-note-id="10"] {
    left: 935px;
    top: 130px;
    transform: rotate(0deg);
    z-index: 2;
  }

  .reality_note[data-note-id="10"]:hover {
    transform: translateY(-5px);
  }

  .reality_note[data-note-id="10"].is-selected {
    transform: translateY(-8px) scale(1.02);
  }

  /* Note 11: Pink (Middle Far-Right) */
  .reality_note[data-note-id="11"] {
    left: 985px;
    top: 395px;
    transform: rotate(3.2deg);
    z-index: 2;
  }

  .reality_note[data-note-id="11"]:hover {
    transform: rotate(3.2deg) translateY(-5px);
  }

  .reality_note[data-note-id="11"].is-selected {
    transform: rotate(3.2deg) translateY(-8px) scale(1.02);
  }

  /* Note 12: Blue (Bottom Right) */
  .reality_note[data-note-id="12"] {
    left: 800px;
    top: 620px;
    transform: rotate(-2deg);
    z-index: 2;
  }

  .reality_note[data-note-id="12"]:hover {
    transform: rotate(-2deg) translateY(-5px);
  }

  .reality_note[data-note-id="12"].is-selected {
    transform: rotate(-2deg) translateY(-8px) scale(1.02);
  }
}

/* Responsive Laptop Scaling (1024px to 1440px) to guarantee 80px side margins */
@media (min-width: 1024px) and (max-width: 1439px) {
  .reality_board {
    transform-origin: top center;
    transform: scale(calc((100vw - 160px) / 1280));
    margin-bottom: calc((calc((100vw - 160px) / 1280) - 1) * 900px);
  }
}

/* ------------------------------------------------------------
   3. Bottom Container with Linear Gradient Overlay (Figma Node 0:6028)
   Matches SS 2 & SS 3:
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.50) 100%);
   ------------------------------------------------------------ */
.reality_bottom-container {
  position: relative;
  width: 100%;
  min-height: 240px;
  margin-top: -120px;
  padding: 140px 16px 48px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.50) 100%);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 10;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .reality_bottom-container {
    min-height: 401px;
    margin-top: -240px;
    padding: 240px 40px 64px;
  }
}

/* ------------------------------------------------------------
   Floating Counter Banner (Fixed at Viewport Bottom)
   ------------------------------------------------------------ */
.reality_counter {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out-smooth),
    transform var(--duration-base) var(--ease-out-smooth),
    visibility var(--duration-base);
  max-width: calc(100% - 32px);
}

.reality_counter.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.reality_counter-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  background-color: var(--color-counter-bg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: 10px 14px 10px 10px;
  box-shadow: 0 20px 40px -4px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.2);
}

.reality_counter-count-box {
  border: 1px solid #FFFFFF2E;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.reality_counter-label {
  font-family: var(--font-heading);
  font-size: 14px;
  color: var(--color-counter-subtext);
  font-weight: var(--font-weight-regular);
}

.reality_counter-number {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: var(--font-weight-bold);
  color: var(--color-counter-text);
  letter-spacing: 0.02em;
}

.reality_counter-message {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-counter-text);
  margin: 0;
  white-space: nowrap;
}

.reality_counter-close {
  background: transparent;
  border: none;
  color: #FFFFFF;
  padding: 6px;
  margin-left: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: opacity var(--duration-fast) var(--ease-out-smooth),
    background-color var(--duration-fast) var(--ease-out-smooth);
}

.reality_counter-close svg path {
  stroke: #FFFFFF;
}

.reality_counter-close:hover,
.reality_counter-close:focus-visible {
  color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.15);
  outline: none;
}

@media (max-width: 600px) {
  .reality_counter {
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    width: calc(100% - 24px);
    max-width: 480px;
  }

  .reality_counter.is-visible {
    transform: translateX(-50%) translateY(0);
  }

  .reality_counter-inner {
    gap: 10px;
    padding: 8px 10px 8px 8px;
    justify-content: space-between;
  }

  .reality_counter-message {
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ------------------------------------------------------------
   Accessibility: Reduced Motion (WCAG 2.1 AA)
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {

  .reality_note,
  .reality_note-shadow,
  .reality_note-paper,
  .reality_note-tick,
  .reality_counter {
    transition: none;
  }

  .reality_note:hover,
  .reality_note.is-selected {
    transform: none;
  }
}