/* --- CheckIn Odyssey 2050 Styles --- */
}
.checkin-page {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  padding: 8rem 0 6rem;

}
.checkin-page__bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 20% 25%, rgba(135, 206, 235, 0.35) 0%, transparent 55%),
    radial-gradient(circle at 70% 20%, rgba(255, 107, 157, 0.28) 0%, transparent 60%),
    radial-gradient(circle at 50% 80%, rgba(168, 85, 247, 0.28) 0%, transparent 65%),
    linear-gradient(200deg, rgba(19, 23, 48, 0.95) 0%, rgba(19, 18, 35, 0.98) 100%);
  animation: checkinAurora 24s ease-in-out infinite alternate;

@keyframes checkinAurora {
  0% { transform: scale(1) translateY(0); filter: hue-rotate(0deg); }
  50% { transform: scale(1.05) translateY(-2%); filter: hue-rotate(12deg); }
  100% { transform: scale(1.07) translateY(1%); filter: hue-rotate(-14deg); }

}}
.particles-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;

}
.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
  animation: particleFloat linear infinite;

@keyframes particleFloat {
  0% { transform: translateY(0) translateX(0) scale(0); opacity: 0; }
  10% { opacity: 1; transform: scale(1); }
  90% { opacity: 1; }
  100% { transform: translateY(-120vh) translateX(70px) scale(0); opacity: 0; }

}}
.hero-symphony {
  position: relative;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 2rem 8rem;

}
.hero-symphony__backdrop {
  position: absolute;
  inset: -20%;
  filter: blur(120px);
  z-index: -1;

}
.hero-symphony__gradient {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease, transform 1.2s ease;

}
.hero-symphony__gradient.is-visible {
  opacity: 1;
  transform: scale(1.02);

}
.hero-symphony__gradient--dawn {
  background: radial-gradient(circle at top left, rgba(255, 221, 170, 0.7), transparent 65%);

}
.hero-symphony__gradient--rain {
  background: radial-gradient(circle at center, rgba(60, 120, 255, 0.55), transparent 60%);

}
.hero-symphony__gradient--noon {
  background: radial-gradient(circle at 65% 35%, rgba(78, 205, 196, 0.55), transparent 60%);

}
.hero-symphony__gradient--golden {
  background: radial-gradient(circle at center right, rgba(255, 140, 105, 0.6), transparent 60%);

}
.hero-symphony__gradient--midnight {
  background: radial-gradient(circle at bottom, rgba(20, 15, 60, 0.7), transparent 70%);

}
.hero-symphony__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;

}
.hero-symphony__copy {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;

}
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(20px);

}
.hero-headline {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: clamp(3.2rem, 7vw, 6rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.04;
  text-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);

}
.hero-paragraph {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.85;
  max-width: 34rem;

}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;

}
.btn--primary {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.65));
  color: #1a1b2f;
  border-radius: 999px;
  padding: 1rem 2.6rem;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
  transition: transform 0.4s var(--transition-smooth), box-shadow 0.4s var(--transition-smooth);

}
.btn--primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.35);

}
.btn--ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 2.4rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.01em;
  backdrop-filter: blur(18px);
  transition: background 0.4s ease, transform 0.4s ease, border 0.4s ease;

}
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.55);
  transform: translateY(-2px);

}
.btn--magnetic {
  position: relative;
  overflow: hidden;

}
.hero-ribbon {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;

}
.hero-ribbon span {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.3rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;

}
.hero-symphony__visual {
  display: grid;
  gap: 2rem;
  justify-items: center;

}
.hero-celestial {
  position: relative;
  width: clamp(300px, 42vw, 380px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.05) 60%, transparent 70%);
  backdrop-filter: blur(35px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 45px 140px rgba(0, 0, 0, 0.38);
  overflow: hidden;

}
.hero-celestial__halo {
  position: absolute;
  inset: -25%;
  background: conic-gradient(from 0deg, rgba(255, 255, 255, 0.2), rgba(255, 107, 157, 0.4), rgba(168, 85, 247, 0.3), rgba(135, 206, 235, 0.35), rgba(255, 255, 255, 0.2));
  filter: blur(70px);
  animation: haloSpin 24s linear infinite;

}
.hero-celestial__core {
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.08));
  box-shadow: inset 0 0 45px rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;

}
.hero-celestial__orbit {
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  filter: blur(0.5px);
  animation: orbitSpin 18s linear infinite;

}
.hero-celestial__orbit--two {
  inset: 18%;
  animation-duration: 14s;
  animation-direction: reverse;

}
.hero-celestial__orbit--three {
  inset: 30%;
  animation-duration: 12s;

@keyframes haloSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }

@keyframes orbitSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }

}}}
.hero-symphony__scenes {
  display: grid;
  gap: 1rem;
  width: 100%;

}
.hero-scene {
  background: rgba(13, 16, 36, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(20px);
  border-radius: 26px;
  padding: 1.6rem;
  color: rgba(255, 255, 255, 0.72);
  display: grid;
  gap: 0.8rem;
  transition: transform 0.6s ease, box-shadow 0.6s ease, opacity 0.6s ease;
  opacity: 0.65;

}
.hero-scene header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;

}
.scene-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;

}
.hero-scene--active {
  transform: translateX(8px);
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.35);
  opacity: 1;
  color: rgba(255, 255, 255, 0.92);

}
.hero-progress {
  margin-top: 3rem;
  display: grid;
  gap: 1rem;

}
.hero-progress__label {
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);

}
.hero-progress__track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  position: relative;
  overflow: hidden;

}
.hero-progress__marker {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.8), rgba(78, 205, 196, 0.8), rgba(168, 85, 247, 0.8));
  transform-origin: left center;
  transform: scaleX(0.1);
  transition: transform 0.6s ease;

}
.story-marquee {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: 6rem 2rem;
  display: grid;
  gap: 3rem;

}
.story-marquee__timeline {
  position: relative;
  padding-left: clamp(2rem, 4vw, 4rem);
  display: grid;
  gap: 2.4rem;

}
.story-axis {
  position: absolute;
  left: clamp(0.75rem, 2vw, 2rem);
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), transparent);

}
.story-card {
  background: rgba(13, 16, 36, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 32px;
  padding: 2.4rem;
  display: grid;
  gap: 1.2rem;
  color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(24px);
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.32);
  position: relative;
  transition: transform 0.6s ease, box-shadow 0.6s ease;

}
.story-card::before {
  content: '';
  position: absolute;
  left: calc(-1.7rem);
  top: 2rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(78, 205, 196, 0.9));
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.8);

}
.story-card:hover {
  transform: translateX(12px) translateY(-6px);
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.35);

}
.story-card__index {
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;

}
.story-card h3 {
  font-size: 1.6rem;
  color: #fff;

}
.story-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);

}
.seasonal-gallery {
  max-width: 1300px;
  margin: 0 auto;
  padding: 6rem 2rem;
  display: grid;
  gap: 2.5rem;

}
.seasonal-gallery__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 340px);
  gap: 2rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  cursor: grab;

}
.seasonal-gallery__track::-webkit-scrollbar {
  display: none;

}
.seasonal-gallery__track.is-dragging {
  cursor: grabbing;

}
.seasonal-card {
  position: relative;
  padding: 2.4rem;
  border-radius: 32px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  backdrop-filter: blur(22px);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.35);
  scroll-snap-align: center;
  display: grid;
  gap: 1.4rem;
  transform-style: preserve-3d;
  transition: transform 0.6s ease, box-shadow 0.6s ease;

}
.seasonal-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;

}
.seasonal-card__tag {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.68);

}
.seasonal-card[data-season="spring"] {
  background: linear-gradient(140deg, rgba(128, 255, 219, 0.25), rgba(255, 255, 255, 0.08));

}
.seasonal-card[data-season="rain"] {
  background: linear-gradient(140deg, rgba(60, 100, 255, 0.28), rgba(255, 255, 255, 0.06));

}
.seasonal-card[data-season="summer"] {
  background: linear-gradient(140deg, rgba(255, 170, 85, 0.32), rgba(255, 255, 255, 0.08));

}
.seasonal-card[data-season="autumn"] {
  background: linear-gradient(140deg, rgba(255, 120, 100, 0.26), rgba(100, 60, 255, 0.2));

}
.seasonal-card[data-season="winter"] {
  background: linear-gradient(140deg, rgba(40, 60, 160, 0.35), rgba(20, 30, 80, 0.5));

}
.seasonal-card:hover {
  transform: translateY(-12px) rotateY(6deg);
  box-shadow: 0 40px 110px rgba(0, 0, 0, 0.4);

}
.seasonal-instructions {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.5);

}
.questions-lab {
  max-width: 1200px;
  margin: 0 auto;
  padding: 6rem 2rem;
  display: grid;
  gap: 2.5rem;

}
.questions-lab__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;

}
.question-card {
  background: rgba(14, 16, 38, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 28px;
  padding: 2.2rem;
  display: grid;
  gap: 1.4rem;
  color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(26px);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.32);

}
.question-card__tag {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);

}
.question-card__prompt {
  font-size: 1.3rem;
  color: #fff;
  line-height: 1.7;

}
.question-card__responses {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;

}
.question-chip {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  padding: 0.6rem 1.4rem;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease, border 0.3s ease;

}
.question-chip:hover {
  background: rgba(255, 255, 255, 0.24);
  border-color: rgba(255, 255, 255, 0.45);
  transform: translateY(-2px);

}
.question-chip--active {
  background: rgba(255, 255, 255, 0.32);
  border-color: rgba(255, 255, 255, 0.6);
  color: #ffffff;
  box-shadow: 0 12px 30px rgba(255, 255, 255, 0.18);

}
.unity-map {
  max-width: 1300px;
  margin: 0 auto;
  padding: 6rem 2rem;
  display: grid;
  gap: 2.5rem;

}
.unity-map__shell {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 2.5rem;
  background: rgba(8, 10, 30, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 38px;
  padding: 3rem;
  backdrop-filter: blur(30px);
  box-shadow: 0 35px 100px rgba(0, 0, 0, 0.38);

}
.legend-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.95rem;

}
.legend-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  filter: blur(0.2px);

}
.legend-dot--joy {
  background: linear-gradient(135deg, rgba(255, 183, 77, 0.9), rgba(255, 255, 255, 0.7));

}
.legend-dot--calm {
  background: linear-gradient(135deg, rgba(78, 205, 196, 0.9), rgba(255, 255, 255, 0.7));

}
.legend-dot--focus {
  background: linear-gradient(135deg, rgba(120, 160, 255, 0.9), rgba(255, 255, 255, 0.7));

}
.legend-dot--night {
  background: linear-gradient(135deg, rgba(70, 60, 180, 0.9), rgba(255, 255, 255, 0.6));

}
.legend-note {
  margin-top: 1.6rem;
  font-size: 0.9rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.65);

}
.unity-map__viewport {
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  min-height: 420px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.35);

}
.map-overlay--unity {
  background: rgba(10, 14, 44, 0.78);
  border-color: rgba(255, 255, 255, 0.25);

}
.collective-moments {
  max-width: 1180px;
  margin: 0 auto;
  padding: 6rem 2rem;
  display: grid;
  gap: 2.5rem;

}
.collective-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;

}
.collective-card {
  padding: 2.4rem;
  border-radius: 32px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(12, 14, 34, 0.55);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(24px);
  display: grid;
  gap: 1.4rem;
  color: rgba(255, 255, 255, 0.85);

}
.collective-card header {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.85rem;

}
.collective-avatar {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  letter-spacing: 0.06em;

}
.collective-card blockquote {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 1.1rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.9);

}
.checkin-section {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 6rem 2rem;

.checkin-section__intro,
.seasonal-gallery__intro,
.questions-lab__intro,
.unity-map__intro,
}
.collective-intro {
  display: grid;
  gap: 1.2rem;
  max-width: 720px;

.CTA-actions,
}
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  justify-content: center;
  margin-top: 2rem;

}
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);

}
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);

@media (max-width: 1200px) {
}}
  .hero-symphony__grid {
    grid-template-columns: 1fr;

}
  .hero-symphony__visual {
    order: -1;


@media (max-width: 980px) {
}}
  .unity-map__shell {
    grid-template-columns: 1fr;


@media (max-width: 760px) {
}}
  .hero-headline {
    font-size: clamp(2.6rem, 11vw, 3.6rem);

}
  .hero-actions {
    flex-direction: column;
    align-items: stretch;

}
  .hero-celestial {
    width: min(320px, 78vw);

}
  .story-card {
    padding: 2rem;

  .seasonal-card,
  .question-card,
}
  .collective-card {
    padding: 2rem;

}
  .unity-map__shell {
    padding: 2.2rem;


:root {
  --bg-pink: #ff6b9d;
  --bg-green: #4ecdc4;
  --bg-skyblue: #87ceeb;
  --bg-yellow: #ffd93d;
  --accent-cyan: #00d4ff;
  --accent-pink: #ff0080;
  --accent-purple: #a855f7;
  --accent-orange: #ff6b35;
  --accent-yellow: #ffd700;
  --text-dark: #1a1a2e;
  --text-light: #ffffff;
  --glass: rgba(255, 255, 255, 0.25);
  --glass-strong: rgba(255, 255, 255, 0.35);
  --shadow-soft: 0 20px 60px rgba(0, 0, 0, 0.15);
  --shadow-strong: 0 30px 80px rgba(0, 0, 0, 0.25);
  --shadow-premium: 0 40px 120px rgba(0, 0, 0, 0.2);
  --radius: 32px;
  --transition: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --transition-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;

html {
  scroll-behavior: smooth;
  overflow-x: hidden;

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: 
    radial-gradient(circle at 15% 30%, rgba(100, 200, 255, 0.35) 0%, transparent 50%),
    radial-gradient(circle at 85% 70%, rgba(120, 220, 180, 0.35) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(180, 150, 255, 0.25) 0%, transparent 60%),
    radial-gradient(circle at 70% 20%, rgba(255, 180, 200, 0.2) 0%, transparent 50%),
    linear-gradient(180deg, 
      #87ceeb 0%, 
      #a8e6cf 25%,
      #d4a5ff 50%, 
      #ffb6c1 75%,
      #ffd89b 100%);
  background-attachment: fixed;
  color: var(--text-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
  will-change: background;
  animation: backgroundShift 20s ease infinite;

@keyframes backgroundShift {
  0%, 100% { 
    background-position: 0% 50%, 100% 50%, 50% 50%, 0% 0%;}

  50% { 
    background-position: 100% 50%, 0% 50%, 50% 50%, 0% 0%;


a {
  color: inherit;
  text-decoration: none;

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;


}}}}}}}}/* Liquid Glass Top Navigation - Rounded Tab Style */
}
.top-nav {
  position: fixed;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  padding: 0;
  background: rgba(150, 150, 150, 0.2);
  backdrop-filter: blur(30px) saturate(180%);
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  max-width: fit-content;

}
.top-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, transparent 100%),
    radial-gradient(circle at 50% 0%, rgba(200, 200, 200, 0.1) 0%, transparent 70%);
  border-radius: 50px;
  pointer-events: none;

}
.top-nav__container {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0.5rem 1rem;
  position: relative;
  z-index: 1;

}
.top-nav__logo {
  display: none;

}
.top-nav__links {
  display: flex;
  list-style: none;
  gap: 0;
  align-items: center;
  margin: 0;
  padding: 0;

}
.top-nav__links li {
  position: relative;

}
.top-nav__links li:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
  background: rgba(255, 255, 255, 0.2);

}
.top-nav__links a {
  font-size: 0.9rem;
  font-weight: 600;
  color: white;
  text-decoration: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  letter-spacing: 0.01em;
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  transition: all 0.3s var(--transition-smooth);
  position: relative;
  display: block;

}
.top-nav__links a::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  opacity: 0;
  transition: opacity 0.3s;

}
.top-nav__links a:hover::before {
  opacity: 1;

}
.top-nav__links a:hover {
  transform: translateY(-1px);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);

/* Team Section */
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 3rem;
  margin-top: 3rem;

}
.team-member {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(30px);
  border-radius: var(--radius);
  padding: 3rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: all 0.4s var(--transition-smooth);
  cursor: pointer;

}
.team-member:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15);
  border-color: rgba(255, 255, 255, 0.6);

}
.team-member a {
  text-decoration: none;
  color: inherit;

}
.team-member__avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(20px);
  border: 3px solid rgba(255, 255, 255, 0.4);
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

}
.team-member__initials {
  font-size: 2.5rem;
  font-weight: 800;
  color: white;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  letter-spacing: -0.02em;

}
.team-member__name {
  font-size: 1.8rem;
  font-weight: 800;
  color: white;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  letter-spacing: -0.02em;

}
.team-member__role {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);

}
.team-member__bio {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);

}
.team-member__links {
  display: flex;
  gap: 1rem;
  justify-content: center;

}
.team-member__link {
  padding: 0.75rem 1.5rem;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  color: white;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s var(--transition-smooth);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);

}
.team-member__link:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);

/* Stage */
}
.stage {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-content: center;
  padding: 6rem 2rem 4rem;
  perspective: 1200px;
  overflow: hidden;

}
.stage__bg {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 15% 30%, rgba(100, 200, 255, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 85% 70%, rgba(120, 220, 180, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(180, 150, 255, 0.2) 0%, transparent 60%),
    radial-gradient(circle at 70% 20%, rgba(255, 180, 200, 0.15) 0%, transparent 50%);
  animation: bgPulse 15s ease infinite;
  pointer-events: none;

/* Glowing Jellyfish Silhouette - More Visible */
}
.stage__jellyfish {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 900px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.85;
  animation: jellyfishFloat 8s ease-in-out infinite;

}
.stage__jellyfish::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 500px;
  background: 
    radial-gradient(ellipse at center top, rgba(255, 255, 255, 0.7) 0%, rgba(255, 230, 150, 0.5) 20%, rgba(255, 180, 200, 0.4) 40%, rgba(220, 180, 255, 0.3) 60%, transparent 85%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  animation: jellyfishGlow 4s ease-in-out infinite;
  filter: blur(3px);
  box-shadow: 0 0 80px rgba(255, 230, 150, 0.4);

}
.stage__jellyfish::after {
  content: '';
  position: absolute;
  top: 350px;
  left: 50%;
  transform: translateX(-50%);
  width: 350px;
  height: 600px;
  background: 
    radial-gradient(ellipse at center, rgba(255, 180, 200, 0.5) 0%, rgba(220, 180, 255, 0.4) 25%, rgba(255, 200, 180, 0.3) 50%, transparent 75%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  clip-path: polygon(25% 0%, 75% 0%, 100% 100%, 0% 100%);
  animation: jellyfishGlow 4s ease-in-out infinite reverse;
  filter: blur(2px);

@keyframes jellyfishFloat {
  0%, 100% { 
    transform: translate(-50%, -50%) translateY(0px) rotate(0deg);}

  50% { 
    transform: translate(-50%, -50%) translateY(-20px) rotate(3deg);


@keyframes jellyfishGlow {
  0%, 100% { 
    opacity: 0.75;
    filter: blur(3px);}

  50% { 
    opacity: 0.95;
    filter: blur(4px);


@keyframes bgPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.1); }

}}}}}}
.stage__tagline {
  position: absolute;
  bottom: 4rem;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 5;

}
.tagline__text {
  font-size: clamp(0.9rem, 2vw, 1.1rem);
  color: rgba(255, 255, 255, 0.9);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0.25rem 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);

}
.tagline__text--accent {
  color: white;
  font-weight: 800;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);

/* Cards Container */
}
.cards-container {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 4rem;
  max-width: 900px;
  width: 100%;
  align-items: center;
  justify-items: center;

/* Floating Cards with 3D Depth */
}
.card {
  position: relative;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  padding: 3rem;
  display: grid;
  place-content: center;
  text-align: center;
  background: var(--glass);
  backdrop-filter: blur(30px) saturate(180%);
  border: 2px solid rgba(255, 255, 255, 0.4);
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  transform-style: preserve-3d;
  transition: all 0.6s var(--transition-smooth);
  cursor: pointer;
  overflow: hidden;
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  animation: cardEntrance 0.8s var(--transition-elastic) forwards;

@keyframes cardEntrance {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);


}}}
.card:nth-child(1) {
  animation-delay: 0.1s;

}
.card:nth-child(2) {
  animation-delay: 0.3s;

}
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent);
  opacity: 0;
  transition: opacity 0.6s var(--transition);

}
.card:hover::before {
  opacity: 1;

}
.card__glow {
  position: absolute;
  inset: -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent);
  opacity: 0;
  transition: opacity 0.6s var(--transition);
  pointer-events: none;

}
.card:hover .card__glow {
  opacity: 1;

}
.card__content {
  position: relative;
  z-index: 2;
  transform: translateZ(20px);

}
.card__badge {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  display: grid;
  place-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-dark);
  border: 1px solid rgba(255, 255, 255, 0.4);

}
.card__title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  margin-bottom: 0.5rem;
  color: white;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  transition: all 0.6s var(--transition);
  letter-spacing: -0.02em;
  line-height: 1.1;

}
.card:hover .card__title {
  transform: scale(1.05);
  text-shadow: 0 6px 30px rgba(0, 0, 0, 0.4);

}
.card__subtitle {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 2rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);

}
.card__arrow {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  display: grid;
  place-content: center;
  font-size: 1.5rem;
  color: var(--text-dark);
  border: 1px solid rgba(255, 255, 255, 0.4);
  transition: all 0.4s var(--transition);
  opacity: 0;
  transform: translate(10px, 10px);

}
.card:hover .card__arrow {
  opacity: 1;
  transform: translate(0, 0);

/* CheckIn Card Specific - Premium Style */
}
.card--checkin {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(78, 205, 196, 0.3), rgba(135, 206, 235, 0.3));
  border: 2px solid rgba(255, 255, 255, 0.3);

}
.card--checkin .card__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 1;
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(78, 205, 196, 0.3), rgba(135, 206, 235, 0.3));

}
.card--checkin .card__content {
  position: relative;
  z-index: 3;

}
.card--checkin .card__title--contrast {
  font-family: 'Poppins', 'Nunito', sans-serif;
  color: #ffffff;
  font-weight: 800;
  font-size: clamp(3.5rem, 7vw, 5.5rem);
  text-transform: none;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  filter: none;
  mix-blend-mode: difference;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform: perspective(1000px) rotateX(0deg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

}
.card--checkin:hover .card__title--contrast {
  transform: scale(1.05) perspective(1000px) rotateX(-3deg);
  text-shadow: 0 6px 30px rgba(0, 0, 0, 0.4);
  mix-blend-mode: difference;

}
.card--checkin:hover {
  box-shadow: 
    0 50px 120px rgba(255, 255, 255, 0.2),
    0 0 80px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-10px) rotateX(5deg) rotateY(-5deg) scale(1.02);

}
.card--checkin:hover .card__video {
  opacity: 1;
  transform: scale(1.05);

}
.card--checkin:not(:hover) {
  transition: all 0.6s var(--transition-smooth);

}
.card--checkin .card__glow {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent);
  opacity: 0.4;

/* Lexa Card Specific - Premium Style */
}
.card--lexa {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255, 107, 157, 0.3), rgba(255, 217, 61, 0.3));
  border: 2px solid rgba(255, 255, 255, 0.3);

}
.card--lexa .card__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 1;
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 107, 157, 0.3), rgba(255, 217, 61, 0.3));

}
.card--lexa .card__content {
  position: relative;
  z-index: 3;

}
.card--lexa .card__title--contrast {
  font-family: 'Poppins', 'Nunito', sans-serif;
  color: #ffffff;
  font-weight: 800;
  font-size: clamp(3.5rem, 7vw, 5.5rem);
  text-transform: none;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  filter: none;
  mix-blend-mode: difference;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform: perspective(1000px) rotateX(0deg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

}
.card--lexa:hover .card__title--contrast {
  transform: scale(1.05) perspective(1000px) rotateX(-3deg);
  text-shadow: 0 6px 30px rgba(0, 0, 0, 0.4);
  mix-blend-mode: difference;

}
.card--lexa:hover {
  box-shadow: 
    0 50px 120px rgba(255, 255, 255, 0.2),
    0 0 80px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-10px) rotateX(5deg) rotateY(-5deg) scale(1.02);

}
.card--lexa:hover .card__video {
  opacity: 1;
  transform: scale(1.05);

}
.card--lexa:not(:hover) {
  transition: all 0.6s var(--transition-smooth);

}
.card--lexa .card__glow {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent);
  opacity: 0.4;

/* 3D Parallax Effect on Cards */
}
.card {
  transform-style: preserve-3d;

/* Responsive */
@media (max-width: 768px) {
}}
  .cards-container {
    grid-template-columns: 1fr;
    gap: 3rem;

}
  .card {
    max-width: 100%;

}
  .menu-btn {
    top: 1.5rem;
    right: 1.5rem;
    width: 45px;
    height: 45px;

}
  .menu__panel {
    width: 100%;

}
  .stage__tagline {
    bottom: 2rem;


/* Card Click Animation */
}
.card:active {
  transform: scale(0.98);
  transition: transform 0.1s ease;

/* ============================================
   PAGE LAYOUTS (CheckIn, Lexa, About, etc.)
   ============================================ */

}
.page {
  position: relative;
  min-height: 100vh;
  padding: 6rem 2rem 2rem;
  overflow-x: hidden;

}
.page__bg {
  position: fixed;
  inset: 0;
  background: 
    radial-gradient(circle at 15% 30%, rgba(100, 200, 255, 0.35) 0%, transparent 50%),
    radial-gradient(circle at 85% 70%, rgba(120, 220, 180, 0.35) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(180, 150, 255, 0.25) 0%, transparent 60%),
    radial-gradient(circle at 70% 20%, rgba(255, 180, 200, 0.2) 0%, transparent 50%),
    linear-gradient(180deg, 
      #87ceeb 0%, 
      #a8e6cf 25%,
      #d4a5ff 50%, 
      #ffb6c1 75%,
      #ffd89b 100%);
  background-attachment: fixed;
  z-index: -1;

}
.page__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 30% 40%, rgba(100, 200, 255, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(120, 220, 180, 0.2) 0%, transparent 50%);
  animation: bgPulse 15s ease infinite;

}
.page__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3rem;
  padding-top: 1rem;

}
.page__back {
  padding: 0.75rem 1.5rem;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-weight: 600;
  color: var(--text-dark);
  transition: all 0.3s var(--transition);
  font-size: 0.9rem;

}
.page__back:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateX(-5px);

}
.page__badge {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  display: grid;
  place-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-dark);

}
.page__content {
  max-width: 1000px;
  margin: 0 auto;

/* Clean Typography - Dynamic & Bubbly */
}
.serif-font {
  font-family: 'Poppins', 'Nunito', system-ui, -apple-system, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: white;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);

}
.serif-font-large {
  font-family: 'Poppins', 'Nunito', system-ui, -apple-system, sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: 2rem;
  color: white;
  letter-spacing: -0.03em;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);

/* Careers Simple Email Section */
}
.careers-simple {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 50vh;
  margin-top: 4rem;

}
.careers-email {
  text-align: center;
  padding: 4rem 2rem;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(30px);
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);

}
.email-link {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  color: var(--text-dark);
  text-decoration: none;
  display: inline-block;
  padding: 1rem 2rem;
  border-radius: 12px;
  transition: all 0.3s var(--transition);
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);

}
.email-link:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);

/* Hero Section */
}
.hero-section {
  text-align: center;
  margin-bottom: 4rem;

}
.hero-section__title {
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 800;
  margin-bottom: 1.5rem;
  line-height: 1.1;
  display: grid;
  gap: 0.5rem;
  letter-spacing: -0.03em;
  color: white;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);

}
.gradient-text {
  color: white;
  font-weight: 800;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);

}
.hero-section__subtitle {
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.7;
  max-width: 600px;
  margin: 0 auto;
  font-weight: 600;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);

/* Features Grid */
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  margin-bottom: 4rem;

}
.feature-card {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(30px);
  border-radius: var(--radius);
  padding: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  transition: all 0.4s var(--transition);

}
.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15);
  border-color: rgba(255, 255, 255, 0.6);

}
.feature-card__icon {
  display: none;

}
.feature-card h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--text-dark);

}
.feature-card p {
  color: rgba(0, 0, 0, 0.7);
  line-height: 1.6;
  margin: 0;

/* Content Section */
}
.content-section {
  margin-bottom: 4rem;

}
.content-block {
  margin-bottom: 3rem;

}
.content-block h2 {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: var(--text-dark);

}
.content-block p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: rgba(0, 0, 0, 0.7);
  margin-bottom: 1rem;

/* Values Grid */
}
.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin-top: 2rem;

}
.value-item {
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);

}
.value-item h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--text-dark);

}
.value-item p {
  font-size: 0.95rem;
  color: rgba(0, 0, 0, 0.7);
  margin: 0;

/* Jobs Section */
}
.jobs-section {
  margin-bottom: 4rem;

}
.jobs-section h2 {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
  margin-bottom: 2rem;
  color: var(--text-dark);

}
.jobs-list {
  display: grid;
  gap: 1.5rem;

}
.job-card {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(30px);
  border-radius: var(--radius);
  padding: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  transition: all 0.4s var(--transition);

}
.job-card:hover {
  transform: translateX(10px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15);

}
.job-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;

}
.job-card__header h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0;

}
.job-card__badge {
  padding: 0.4rem 1rem;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-dark);
  border: 1px solid rgba(255, 255, 255, 0.5);

}
.job-card__location {
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.95rem;
  margin-bottom: 1rem;
  display: block;

}
.job-card__description {
  color: rgba(0, 0, 0, 0.7);
  line-height: 1.6;
  margin-bottom: 1.5rem;

}
.job-card__link {
  color: var(--accent-pink);
  font-weight: 600;
  transition: all 0.3s var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;

}
.job-card__link:hover {
  transform: translateX(5px);
  color: var(--accent-purple);

/* Benefits Grid */
}
.benefits-section {
  margin-bottom: 4rem;

}
.benefits-section h2 {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
  margin-bottom: 2rem;
  color: var(--text-dark);

}
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;

}
.benefit-item {
  padding: 2rem;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  text-align: center;
  transition: all 0.4s var(--transition);

}
.benefit-item:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.3);

}
.benefit-item h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--text-dark);
  letter-spacing: -0.01em;

}
.benefit-item h3::before {
  content: '';

}
.benefit-item p {
  color: rgba(0, 0, 0, 0.7);
  margin: 0;
  font-size: 0.95rem;

/* Investing Section */
}
.investing-section {
  margin-bottom: 4rem;

}
.investing-card {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(30px);
  border-radius: var(--radius);
  padding: 3rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  margin-bottom: 3rem;

}
.investing-card h2 {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
  margin-bottom: 2rem;
  color: var(--text-dark);

}
.investing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2rem;

}
.investing-item {
  text-align: center;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);

}
.investing-item__number {
  font-size: 2.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-pink));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;

}
.investing-item__label {
  color: rgba(0, 0, 0, 0.7);
  font-size: 0.9rem;
  font-weight: 500;

}
.opportunities-list {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;

}
.opportunity-item {
  padding: 2rem;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);

}
.opportunity-item h3 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--text-dark);

}
.opportunity-item p {
  color: rgba(0, 0, 0, 0.7);
  margin: 0;
  line-height: 1.6;

/* Contact Section */
}
.contact-section {
  margin-bottom: 4rem;

}
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  margin-bottom: 4rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;

}
.contact-card {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(30px);
  border-radius: var(--radius);
  padding: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: all 0.4s var(--transition);

}
.contact-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15);

}
.contact-card__icon {
  display: none;

}
.contact-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--text-dark);
  letter-spacing: -0.01em;

}
.contact-card a {
  color: var(--accent-pink);
  font-weight: 500;
  transition: all 0.3s var(--transition);

}
.contact-card a:hover {
  color: var(--accent-purple);

/* Contact Form */
}
.contact-form {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(30px);
  border-radius: var(--radius);
  padding: 3rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);

}
.form-group {
  margin-bottom: 2rem;

}
.form-group label {
  display: block;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 0.75rem;
  font-size: 0.95rem;

.form-group input,
}
.form-group textarea {
  width: 100%;
  padding: 1rem 1.5rem;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 16px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text-dark);
  transition: all 0.3s var(--transition);

.form-group input:focus,
}
.form-group textarea:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.5);
  border-color: var(--accent-pink);
  box-shadow: 0 0 0 3px rgba(255, 0, 128, 0.1);

}
.form-group textarea {
  resize: vertical;
  min-height: 120px;

/* Portfolio Grid */
}
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 4rem;

}
.portfolio-card {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(30px);
  border-radius: var(--radius);
  padding: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  transition: all 0.4s var(--transition);
  position: relative;
  display: block;

}
.portfolio-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15);
  border-color: rgba(255, 255, 255, 0.6);

}
.portfolio-card--coming {
  opacity: 0.7;
  cursor: not-allowed;

}
.portfolio-card__badge {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  display: grid;
  place-content: center;
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--text-dark);
  border: 1px solid rgba(255, 255, 255, 0.4);

}
.portfolio-card h3 {
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--text-dark);

}
.portfolio-card p {
  color: rgba(0, 0, 0, 0.7);
  line-height: 1.6;
  margin-bottom: 1.5rem;

}
.portfolio-card__arrow {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  display: grid;
  place-content: center;
  font-size: 1.2rem;
  color: var(--text-dark);
  border: 1px solid rgba(255, 255, 255, 0.4);
  transition: all 0.3s var(--transition);
  opacity: 0;

}
.portfolio-card:hover .portfolio-card__arrow {
  opacity: 1;
  transform: translate(-5px, -5px);

}
.portfolio-card__status {
  display: inline-block;
  padding: 0.4rem 1rem;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-dark);
  border: 1px solid rgba(255, 255, 255, 0.4);

/* CTA Section */
}
.cta-section {
  text-align: center;
  padding: 4rem 2rem;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(30px);
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);

}
.cta-section h2 {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--text-dark);

}
.cta-section p {
  font-size: 1.1rem;
  color: rgba(0, 0, 0, 0.7);
  margin-bottom: 2rem;

/* Button Styles - Minimal & Sophisticated */
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 2rem;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: all 0.3s var(--transition-smooth);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: var(--text-dark);
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.1);
  opacity: 0;
  transition: opacity 0.3s;

}
.btn:hover::before {
  opacity: 1;

}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.5);

}
.btn:active {
  transform: translateY(0);

}
.btn--primary {
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px);

}
.btn--primary:hover {
  background: rgba(0, 0, 0, 0.75);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);

/* Scroll Animations */
}
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s var(--transition-smooth), transform 0.8s var(--transition-smooth);

}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);

/* Resume Upload Area */
}
.resume-upload {
  position: relative;
  border: 2px dashed rgba(255, 255, 255, 0.4);
  border-radius: 20px;
  padding: 3rem 2rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  transition: all 0.4s var(--transition-smooth);
  cursor: pointer;

}
.resume-upload:hover {
  border-color: var(--accent-pink);
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);

}
.resume-upload.dragover {
  border-color: var(--accent-cyan);
  background: rgba(0, 212, 255, 0.1);
  transform: scale(1.02);

}
.resume-upload__icon {
  display: none;

}
.resume-upload__text {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-dark);
  margin-bottom: 0.5rem;

}
.resume-upload__hint {
  font-size: 0.85rem;
  color: rgba(0, 0, 0, 0.5);
  font-weight: 400;

}
.resume-upload input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;

}
.resume-preview {
  margin-top: 1rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 1rem;

}
.resume-preview__icon {
  display: none;

}
.resume-preview__info {
  flex: 1;
  text-align: left;

}
.resume-preview__name {
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 0.25rem;

}
.resume-preview__size {
  font-size: 0.85rem;
  color: rgba(0, 0, 0, 0.6);

}
.resume-preview__remove {
  background: rgba(255, 0, 0, 0.1);
  border: none;
  color: #ff0000;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s;

}
.resume-preview__remove:hover {
  background: rgba(255, 0, 0, 0.2);
  transform: scale(1.1);

/* Job Application Form */
}
.job-application-form {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(30px);
  border-radius: var(--radius);
  padding: 3rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  margin-top: 3rem;

}
.job-selector {
  margin-bottom: 2rem;

}
.job-selector select {
  width: 100%;
  padding: 1rem 1.5rem;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 16px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text-dark);
  transition: all 0.3s var(--transition-smooth);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%231a1a2e' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.5rem center;
  padding-right: 3rem;

}
.job-selector select:focus {
  outline: none;
  background-color: rgba(255, 255, 255, 0.5);
  border-color: var(--accent-pink);
  box-shadow: 0 0 0 3px rgba(255, 0, 128, 0.1);

/* Success Message */
}
.success-message {
  background: rgba(78, 205, 196, 0.2);
  backdrop-filter: blur(20px);
  border: 2px solid rgba(78, 205, 196, 0.4);
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  margin-top: 2rem;
  opacity: 0;
  transform: translateY(20px);
  animation: successFadeIn 0.6s var(--transition-elastic) forwards;

@keyframes successFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);


}}}
.success-message__icon {
  display: none;

@keyframes successBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }

}}
.success-message__text {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 0.5rem;

}
.success-message__subtext {
  color: rgba(0, 0, 0, 0.7);

/* Job Listings */
}
.job-listing {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(30px);
  border-radius: var(--radius);
  padding: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  transition: all 0.4s var(--transition-smooth);
  margin-bottom: 2rem;
  cursor: pointer;

}
.job-listing:hover {
  transform: translateX(10px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15);
  border-color: rgba(255, 255, 255, 0.6);

}
.job-listing.expanded {
  border-color: var(--accent-pink);

}
.job-listing__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;

}
.job-listing__title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 0.5rem;

}
.job-listing__meta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.875rem;
  color: rgba(0, 0, 0, 0.5);
  font-weight: 400;

}
.job-listing__meta span::before {
  content: '';

}
.job-listing__badge {
  padding: 0.4rem 1rem;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-dark);
  border: 1px solid rgba(255, 255, 255, 0.5);

}
.job-listing__description {
  color: rgba(0, 0, 0, 0.7);
  line-height: 1.6;
  margin-top: 1rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--transition-smooth);

}
.job-listing.expanded .job-listing__description {
  max-height: 500px;

}
.job-listing__apply-btn {
  margin-top: 1.5rem;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.4s var(--transition-smooth);

}
.job-listing.expanded .job-listing__apply-btn {
  opacity: 1;
  transform: translateY(0);

@media (max-width: 768px) {
}}
  .top-nav {
    top: 1rem;
    left: 1rem;
    right: 1rem;
    transform: none;
    max-width: none;

}
  .top-nav__links {
    flex-wrap: wrap;
    justify-content: center;

}
  .top-nav__links a {
    font-size: 0.8rem;
    padding: 0.6rem 1rem;

}
  .cards-container {
    grid-template-columns: 1fr;
    gap: 3rem;

}
  .card {
    max-width: 100%;

}
  .stage__tagline {
    bottom: 2rem;

}
  .team-grid {
    grid-template-columns: 1fr;

}
  .page {
    padding: 1rem;

  .features-grid,
  .contact-grid,
}
  .portfolio-grid {
    grid-template-columns: 1fr;

}
  .investing-grid {
    grid-template-columns: repeat(2, 1fr);

}
  .job-application-form {
    padding: 2rem 1.5rem;

}
  .checkin-hero {
    flex-direction: column;
    text-align: center;

}
  .mood-circle {
    width: 250px;
    height: 250px;
    margin-top: 3rem;

}
  .step-item {
    grid-template-columns: 1fr;
    text-align: center;

}
  .step-visual {
    order: -1;


/* CheckIn Page Styles */

}
.checkin-page {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  padding-top: 6rem;

}
.checkin-page__bg {
  position: fixed;
  inset: 0;
  background: 
    radial-gradient(circle at 20% 30%, rgba(255, 107, 157, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(168, 85, 247, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(0, 212, 255, 0.2) 0%, transparent 60%);
  z-index: -1;
  animation: checkinBgShift 15s ease infinite;

@keyframes checkinBgShift {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.1) rotate(2deg); }


}/* Particles */
}
.particles-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;

}
.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  animation: particleFloat linear infinite;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);

@keyframes particleFloat {
  0% {
    transform: translateY(0) translateX(0) scale(0);
    opacity: 0;

  10% {
    opacity: 1;
    transform: scale(1);

  90% {
    opacity: 1;

  100% {
    transform: translateY(-100vh) translateX(50px) scale(0);
    opacity: 0;}



}}}}/* Hero Section */
}
.checkin-hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4rem 2rem;
  max-width: 1400px;
  margin: 0 auto;
  z-index: 2;

}
.checkin-hero__content {
  flex: 1;
  max-width: 600px;
  z-index: 3;

}
.checkin-hero__badge {
  display: inline-block;
  padding: 0.5rem 1.5rem;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px);
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
  color: white;
  margin-bottom: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  animation: badgePulse 2s ease infinite;

@keyframes badgePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 20px rgba(255, 255, 255, 0.3); }
  50% { transform: scale(1.05); box-shadow: 0 0 30px rgba(255, 255, 255, 0.5); }

}}
.checkin-hero__title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 1.5rem;
  line-height: 1.1;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
  letter-spacing: -0.02em;

}
.checkin-hero__subtitle {
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  font-weight: 400;
  color: #ffffff;
  line-height: 1.7;
  margin-bottom: 3rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);

}
.checkin-hero__subtitle .line-reveal {
  display: block;
  margin-bottom: 0.5rem;

}
.checkin-cta-btn {
  padding: 1rem 2.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(20px);
  border: 2px solid rgba(255, 255, 255, 0.4);
  color: white;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);

}
.checkin-cta-btn:hover {
  transform: translateY(-3px) scale(1.05);
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);

/* Mood Visualization */
}
.mood-visualization {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;

}
.mood-circle {
  position: relative;
  width: 300px;
  height: 300px;

}
.mood-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.2));

}
.mood-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;

}
.mood-emoji {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;

}
.mood-emoji lottie-player {
  filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.3));

@keyframes emojiBounce {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.1) rotate(5deg); }

}}
.mood-value {
  font-size: 3rem;
  font-weight: 900;
  color: white;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);

}
.mood-label {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;

/* Features Section */
}
.checkin-features {
  position: relative;
  padding: 8rem 2rem;
  max-width: 1400px;
  margin: 0 auto;
  z-index: 2;

}
.checkin-section-header {
  text-align: center;
  margin-bottom: 5rem;

}
.checkin-section-header h2 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;

}
.checkin-section-header p {
  font-size: 1.2rem;
  font-weight: 400;
  color: #ffffff;
  opacity: 0.95;

}
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;

}
.feature-card-animated {
  position: relative;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(30px);
  border-radius: var(--radius);
  padding: 3rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;

}
.feature-card-animated::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
  opacity: 0;
  transition: opacity 0.4s;

}
.feature-card-animated:hover::before {
  opacity: 1;

}
.feature-card-animated:hover {
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);

}
.feature-icon {
  font-size: 3rem;
  margin-bottom: 1.5rem;
  display: inline-block;
  animation: iconFloat 3s ease infinite;

@keyframes iconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }

}}
.feature-card-animated h3 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;

}
.feature-card-animated p {
  color: #ffffff;
  opacity: 0.9;
  line-height: 1.8;
  font-size: 1rem;
  font-weight: 400;

}
.feature-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;

}
.feature-card-animated:hover .feature-glow {
  opacity: 1;

/* Stats Section */
}
.checkin-stats {
  position: relative;
  padding: 6rem 2rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(30px);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  z-index: 2;

}
.stats-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 3rem;
  max-width: 1000px;
  margin: 0 auto;

}
.stat-item {
  text-align: center;

}
.stat-number {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
  letter-spacing: -0.02em;

}
.stat-label {
  font-size: 0.95rem;
  color: #ffffff;
  opacity: 0.85;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;

/* How It Works */
}
.checkin-how {
  position: relative;
  padding: 8rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
  z-index: 2;

}
.how-steps {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  margin-top: 4rem;

}
.step-item {
  display: grid;
  grid-template-columns: 80px 1fr 100px;
  gap: 3rem;
  align-items: center;
  opacity: 0;
  transform: translateX(-50px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);

}
.step-item.step-visible {
  opacity: 1;
  transform: translateX(0);

}
.step-number {
  font-size: 3rem;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.3);
  line-height: 1;

}
.step-content h3 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 2rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;

}
.step-content p {
  color: #ffffff;
  opacity: 0.9;
  line-height: 1.8;
  font-size: 1.1rem;
  font-weight: 400;

}
.step-visual {
  display: flex;
  justify-content: center;

}
.step-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px);
  border: 2px solid rgba(255, 255, 255, 0.4);
  animation: stepPulse 2s ease infinite;

@keyframes stepPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 20px rgba(255, 255, 255, 0.3); }
  50% { transform: scale(1.1); box-shadow: 0 0 40px rgba(255, 255, 255, 0.5); }


}/* CTA Section */
}
.checkin-cta {
  position: relative;
  padding: 8rem 2rem;
  text-align: center;
  z-index: 2;

}
.cta-content h2 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;

}
.cta-content p {
  font-size: 1.3rem;
  font-weight: 400;
  color: #ffffff;
  opacity: 0.95;
  margin-bottom: 3rem;

}
.checkin-cta-btn-large {
  padding: 1.2rem 3rem;
  font-size: 1.2rem;
  font-weight: 700;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(20px);
  border: 2px solid rgba(255, 255, 255, 0.4);
  color: white;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);

}
.checkin-cta-btn-large:hover {
  transform: translateY(-3px) scale(1.05);
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);

/* --- CheckIn Reimagined 2025 Overrides --- */
}
.checkin-page {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  padding: 8rem 0 6rem;

}
.checkin-page__bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 20% 20%, rgba(135, 206, 235, 0.25) 0%, transparent 55%),
    radial-gradient(circle at 80% 30%, rgba(78, 205, 196, 0.25) 0%, transparent 55%),
    radial-gradient(circle at 50% 80%, rgba(168, 85, 247, 0.25) 0%, transparent 60%),
    linear-gradient(180deg, rgba(23, 32, 56, 0.8) 0%, rgba(30, 25, 46, 0.95) 100%);
  animation: checkinAurora 18s ease-in-out infinite;

@keyframes checkinAurora {
  0%, 100% { transform: scale(1); filter: hue-rotate(0deg); }
  50% { transform: scale(1.05); filter: hue-rotate(20deg); }

}}
.particles-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;

}
.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
  animation: particleFloat linear infinite;

}
.checkin-hero {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem 6rem;

}
.checkin-hero__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;

}
.checkin-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 2rem;

}
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(20px);

}
.hero-headline {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: clamp(3.2rem, 7vw, 5.8rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);

}
.hero-paragraph {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: clamp(1.1rem, 2.6vw, 1.45rem);
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.8;
  max-width: 32rem;

}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;

}
.btn--primary {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6));
  color: #1a1b2f;
  border-radius: 999px;
  padding: 1rem 2.6rem;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
  transition: transform 0.4s var(--transition-smooth), box-shadow 0.4s var(--transition-smooth);

}
.btn--ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 2.4rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.01em;
  backdrop-filter: blur(18px);
  transition: background 0.4s ease, transform 0.4s ease, border 0.4s ease;

}
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.55);
  transform: translateY(-2px);

}
.btn--primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.35);

}
.btn--magnetic {
  position: relative;
  overflow: hidden;

}
.hero-ribbon {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;

}
.hero-ribbon span {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 1.2rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;

}
.checkin-hero__visual {
  position: relative;
  display: grid;
  gap: 2rem;
  justify-items: center;

}
.hero-orb {
  position: relative;
  width: clamp(280px, 40vw, 360px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.05) 60%, transparent 70%);
  backdrop-filter: blur(30px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  animation: heroOrbDrift 12s ease-in-out infinite;

}
.hero-orb__halo {
  position: absolute;
  inset: -30%;
  background: conic-gradient(from 0deg, rgba(255, 255, 255, 0.2), rgba(255, 107, 157, 0.4), rgba(168, 85, 247, 0.35), rgba(135, 206, 235, 0.35), rgba(255, 255, 255, 0.2));
  filter: blur(50px);
  animation: haloSpin 18s linear infinite;

}
.hero-orb__core {
  position: relative;
  z-index: 1;
  width: 70%;
  height: 70%;
  margin: 15%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.1));
  box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.3);

@keyframes haloSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }

@keyframes heroOrbDrift {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-12px) rotate(2deg); }

}}}
.hero-snapshot {
  max-width: 260px;
  padding: 1.6rem;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(24px);
  color: #fff;
  display: grid;
  gap: 0.6rem;
  text-align: left;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.25);

}
.hero-snapshot__title {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);

}
.hero-snapshot__mood {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 1.6rem;
  font-weight: 600;

}
.hero-snapshot small {
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);

}
.checkin-section {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 6rem 2rem;

}
.checkin-section__intro {
  max-width: 720px;
  margin-bottom: 3.5rem;
  display: grid;
  gap: 1.2rem;

}
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.66);

}
.section-heading {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.15;

}
.section-text {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: clamp(1.05rem, 2.4vw, 1.25rem);
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.84);

}
.sensory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.8rem;

}
.sensory-card {
  position: relative;
  padding: 2.4rem;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  backdrop-filter: blur(22px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  display: grid;
  gap: 1.3rem;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 0.6s ease, box-shadow 0.6s ease;

}
.sensory-card::before {
  content: '';
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2), transparent 60%);
  opacity: 0.7;
  transition: transform 0.6s ease, opacity 0.6s ease;

}
.sensory-card h3 {
  font-size: 1.4rem;
  font-weight: 600;

}
.sensory-card p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.85);

}
.sensory-card span {
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);

}
.sensory-card[data-shade="dawn"] {
  background: linear-gradient(135deg, rgba(255, 182, 193, 0.22), rgba(135, 206, 235, 0.1));

}
.sensory-card[data-shade="noon"] {
  background: linear-gradient(135deg, rgba(78, 205, 196, 0.25), rgba(255, 255, 255, 0.05));

}
.sensory-card[data-shade="dusk"] {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(255, 107, 157, 0.18));

}
.sensory-card[data-shade="midnight"] {
  background: linear-gradient(135deg, rgba(30, 34, 84, 0.7), rgba(17, 18, 48, 0.85));

}
.sensory-card:hover {
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);

}
.journey-timeline {
  display: grid;
  gap: 2rem;

}
.journey-step {
  position: relative;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 2rem;
  padding: 2.8rem;
  border-radius: 36px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(15, 18, 40, 0.45);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(26px);
  transform-style: preserve-3d;

}
.journey-step__index {
  font-size: 2.5rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.2);
  letter-spacing: 0.18em;
  align-self: flex-start;

}
.journey-step__body h3 {
  font-size: 1.6rem;
  margin-bottom: 1rem;
  color: #fff;

}
.journey-step__body p {
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.8;
  margin-bottom: 1.2rem;

}
.journey-step__body ul {
  display: grid;
  gap: 0.6rem;
  padding: 0;
  margin: 0;
  list-style: none;

}
.journey-step__body li {
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68);

}
.checkin-atmospheres {
  padding-bottom: 4rem;

}
.atmospheres-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 340px);
  gap: 1.8rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  padding-left: 0.2rem;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  cursor: grab;

}
.atmospheres-track::-webkit-scrollbar {
  display: none;

}
.atmospheres-track.is-dragging {
  cursor: grabbing;

}
.atmosphere-card {
  position: relative;
  padding: 2.4rem;
  border-radius: 32px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  backdrop-filter: blur(22px);
  box-shadow: 0 28px 75px rgba(0, 0, 0, 0.35);
  scroll-snap-align: center;
  display: grid;
  gap: 1.4rem;
  transform-style: preserve-3d;

}
.atmosphere-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.4s ease;

}
.atmosphere-card[data-theme="home"] {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(78, 205, 196, 0.18));

}
.atmosphere-card[data-theme="atlas"] {
  background: linear-gradient(135deg, rgba(135, 206, 235, 0.2), rgba(168, 85, 247, 0.15));

}
.atmosphere-card[data-theme="circle"] {
  background: linear-gradient(135deg, rgba(255, 182, 193, 0.22), rgba(255, 255, 255, 0.08));

}
.atmosphere-card[data-theme="studio"] {
  background: linear-gradient(135deg, rgba(18, 22, 54, 0.8), rgba(85, 72, 206, 0.35));

}
.atmosphere-card__tag {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.68);

}
.atmosphere-card__header h3 {
  font-size: 1.5rem;
  margin-top: 0.6rem;

}
.atmosphere-card__copy {
  font-size: 1.05rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.85);

}
.atmosphere-card__footer {
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);

}
.atmosphere-card:hover {
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.35);

}
.atmosphere-card:hover::after {
  opacity: 0.8;

}
.checkin-map .map-shell {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3rem;
  align-items: start;
  border-radius: 36px;
  padding: 3rem;
  background: rgba(8, 10, 30, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(28px);

}
.map-panel {
  display: grid;
  gap: 1.2rem;

}
.map-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1rem;

}
.map-highlights span {
  padding: 0.5rem 1.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);

}
.map-viewport {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  min-height: 400px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.35);

}
.ambient-map {
  width: 100%;
  height: 100%;
  filter: saturate(1.3) drop-shadow(0 40px 80px rgba(0, 0, 0, 0.35));

}
.map-overlay {
  position: absolute;
  inset: auto 1.5rem 1.5rem 1.5rem;
  padding: 1rem 1.4rem;
  border-radius: 24px;
  background: rgba(15, 18, 40, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.95rem;
  letter-spacing: 0.04em;

}
.checkin-network .network-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;

}
.network-card {
  padding: 2.2rem;
  border-radius: 32px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(12, 14, 34, 0.55);
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(24px);
  display: grid;
  gap: 1.4rem;

}
.network-card__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.85rem;

}
.network-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  letter-spacing: 0.06em;

}
.network-card__quote {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 1.05rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.88);

}
.checkin-cta {
  text-align: center;
  padding-bottom: 0;

}
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  justify-content: center;
  margin-top: 2rem;

}
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);

}
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);

@media (max-width: 1100px) {
}}
  .checkin-hero__grid {
    grid-template-columns: 1fr;

}
  .checkin-hero__visual {
    order: -1;

}
  .checkin-hero {
    padding-top: 4rem;

}
  .checkin-map .map-shell {
    grid-template-columns: 1fr;


@media (max-width: 900px) {
}}
  .checkin-section {
    padding: 4.5rem 1.5rem;

}
  .journey-step {
    grid-template-columns: 1fr;

}
  .journey-step__index {
    order: -1;
    font-size: 2rem;


@media (max-width: 640px) {
}}
  .hero-headline {
    font-size: clamp(2.6rem, 11vw, 3.6rem);

}
  .hero-actions {
    flex-direction: column;
    align-items: stretch;

}
  .hero-snapshot {
    width: 100%;
    max-width: 100%;

  .sensory-card,
  .journey-step,
  .atmosphere-card,
}
  .network-card {
    padding: 2rem;

}
  .checkin-map .map-shell {
    padding: 2rem;


/* Legal/Terms Page Styles */
}
.legal-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem;

}
.legal-header {
  text-align: center;
  margin-bottom: 4rem;
  padding: 4rem 0 2rem;

}
.legal-badge {
  display: inline-block;
  padding: 0.5rem 1.5rem;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
  color: white;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  text-transform: uppercase;
  letter-spacing: 0.1em;

}
.legal-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 1rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);

}
.legal-subtitle {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 500;

}
.legal-content {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(30px);
  border-radius: 32px;
  padding: 3rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);

}
.legal-section {
  margin-bottom: 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

}
.legal-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;

}
.legal-section h2 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 1.8rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 1.2rem;
  letter-spacing: -0.01em;

}
.legal-section p {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 1.05rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 1rem;

}
.legal-section ul {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;

}
.legal-section li {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 1.05rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0.8rem;
  padding-left: 1.8rem;
  position: relative;

}
.legal-section li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;

}
.legal-section strong {
  color: #ffffff;
  font-weight: 700;

}
.legal-section a {
  color: rgba(135, 206, 235, 1);
  text-decoration: none;
  border-bottom: 1px solid rgba(135, 206, 235, 0.3);
  transition: all 0.3s ease;

}
.legal-section a:hover {
  color: rgba(135, 206, 235, 1);
  border-bottom-color: rgba(135, 206, 235, 1);

}
.highlight-section {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(135, 206, 235, 0.1));
  border-radius: 24px;
  padding: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;

}
.highlight-section::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  opacity: 0.5;
  pointer-events: none;

}
.contact-section .contact-box {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 2rem;
  margin: 1.5rem 0;
  border: 1px solid rgba(255, 255, 255, 0.15);

}
.contact-section .contact-box p {
  margin-bottom: 0.8rem;
  font-size: 1.1rem;

}
.contact-section .contact-box a {
  color: rgba(135, 206, 235, 1);
  font-weight: 600;
  font-size: 1.15rem;

}
.legal-footer {
  text-align: center;
  margin-top: 4rem;
  padding: 3rem 0;

}
.legal-footer p {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 2rem;
  font-style: italic;

}
.legal-footer-links {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;

}
.legal-footer-links a {
  display: inline-flex;
  align-items: center;
  padding: 0.9rem 2rem;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px);
  border-radius: 50px;
  color: white;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: all 0.3s ease;

}
.legal-footer-links a:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

@media (max-width: 768px) {
}}
  .legal-content {
    padding: 2rem;

}
  .legal-section {
    margin-bottom: 2rem;
    padding-bottom: 2rem;

}
  .legal-section h2 {
    font-size: 1.5rem;

  .legal-section p,
}
  .legal-section li {
    font-size: 1rem;

}
  .legal-title {
    font-size: clamp(2.5rem, 8vw, 3.5rem);

}
  .legal-footer-links {
    flex-direction: column;
    align-items: stretch;

}
  .legal-footer-links a {
    width: 100%;


/* ========================================
   CHECKIN ODYSSEY 2025 - 60 CHAPTERS
   Oscar-Winning Cinematic Experience
   ======================================== */

}
.checkin-odyssey {
  scroll-behavior: smooth;
  overflow-x: hidden;
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;

}
.checkin-odyssey-container {
  position: relative;
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100vh;
  scroll-behavior: smooth;

/* Scroll Progress Indicator */
}
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  z-index: 10000;
  backdrop-filter: blur(10px);

}
.scroll-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, #ff6b9d, #a855f7, #00d4ff, #4ade80);
  width: 0%;
  transition: width 0.1s linear;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);

}
.scroll-progress__chapter {
  position: fixed;
  top: 5rem;
  right: 2rem;
  padding: 0.6rem 1.4rem;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(20px);
  border-radius: 50px;
  color: white;
  font-size: 0.85rem;
  font-weight: 600;
  z-index: 10000;
  border: 1px solid rgba(255, 255, 255, 0.2);

/* Chapter Base Styles */
}
.chapter {
  position: relative;
  min-height: 100vh;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8rem 2rem;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;

}
.chapter::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transition: opacity 1.5s ease, transform 2s ease;

}
.chapter__content {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 10;

/* Base state - all chapters start hidden */
}
.chapter {
  opacity: 0;
  will-change: transform, opacity, filter, clip-path;
}

.chapter.active {
  opacity: 1;
}

/* Chapter 1 MUST be visible on page load */
#chapter-1 {
  opacity: 1 !important;
  transform: scale(1) !important;
  visibility: visible !important;
}

#chapter-1 .chapter__content {
  opacity: 1 !important;
}

@keyframes mirrorWorld {
  0% { 
    transform: scaleX(-1) rotateY(180deg) scale(0.5);
    filter: blur(30px) brightness(0.5);
    opacity: 0;

  50% {
    transform: scaleX(0) rotateY(90deg) scale(1.2);
    filter: blur(15px) brightness(1.5);
    opacity: 0.7;

  100% { 
    transform: scaleX(1) rotateY(0deg) scale(1);
    filter: blur(0) brightness(1);
    opacity: 1;}



}}}/* Advanced Transition: Water Surface */
}
.chapter-transition-15 {
}
  transform: translateY(100vh) rotateX(90deg);
  opacity: 0;
  filter: blur(20px);

.chapter-transition-15.active {
  animation: waterSurface 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;

@keyframes waterSurface {
  0% { 
    transform: translateY(100vh) rotateX(90deg) scale(0.8);
    filter: blur(20px) hue-rotate(180deg);
    opacity: 0;

  50% {
    transform: translateY(0) rotateX(45deg) scale(1.1);
    filter: blur(10px) hue-rotate(90deg);
    opacity: 0.8;

  100% { 
    transform: translateY(0) rotateX(0deg) scale(1);
    filter: blur(0) hue-rotate(0deg);
    opacity: 1;}



}}}/* Advanced Transition: Liquid Glass */
}
.chapter-transition-20 {
}
  transform: scale(0.3) rotateZ(45deg);
  opacity: 0;
  filter: blur(40px) brightness(2);
  backdrop-filter: blur(50px);

.chapter-transition-20.active {
  animation: liquidGlass 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;

@keyframes liquidGlass {
  0% { 
    transform: scale(0.3) rotateZ(45deg);
    filter: blur(40px) brightness(2);
    opacity: 0;

  60% {
    transform: scale(1.15) rotateZ(-5deg);
    filter: blur(20px) brightness(1.5);
    opacity: 0.9;

  100% { 
    transform: scale(1) rotateZ(0deg);
    filter: blur(0) brightness(1);
    opacity: 1;}



}}}/* Advanced Transition: Merge Away */
}
.chapter-transition-30 {
}
  transform: scale(2) translateZ(-1000px);
  opacity: 0;
  filter: blur(50px) saturate(0);

.chapter-transition-30.active {
  animation: mergeAwayTransition 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;

@keyframes mergeAwayTransition {
  0% { 
    transform: scale(2) translateZ(-1000px) rotateY(180deg);
    filter: blur(50px) saturate(0) brightness(0.3);
    opacity: 0;

  50% {
    transform: scale(0.9) translateZ(0) rotateY(90deg);
    filter: blur(25px) saturate(0.5) brightness(1.2);
    opacity: 0.6;

  100% { 
    transform: scale(1) translateZ(0) rotateY(0deg);
    filter: blur(0) saturate(1) brightness(1);
    opacity: 1;}



}}}/* Advanced Transition: Reality Break */
}
.chapter-transition-40 {
}
  transform: perspective(2000px) rotateX(90deg) rotateY(45deg) scale(0.1);
  opacity: 0;
  filter: blur(60px) hue-rotate(180deg);
  clip-path: polygon(50% 50%, 50% 50%, 50% 50%);

.chapter-transition-40.active {
  animation: realityBreak 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;

@keyframes realityBreak {
  0% { 
    transform: perspective(2000px) rotateX(90deg) rotateY(45deg) scale(0.1);
    filter: blur(60px) hue-rotate(180deg);
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%);
    opacity: 0;

  40% {
    transform: perspective(2000px) rotateX(45deg) rotateY(90deg) scale(1.3);
    filter: blur(30px) hue-rotate(90deg);
    clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
    opacity: 0.7;

  70% {
    transform: perspective(2000px) rotateX(-45deg) rotateY(-90deg) scale(0.95);
    filter: blur(15px) hue-rotate(45deg);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    opacity: 0.9;

  100% { 
    transform: perspective(2000px) rotateX(0deg) rotateY(0deg) scale(1);
    filter: blur(0) hue-rotate(0deg);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    opacity: 1;}



}}}}/* Advanced Transition: Coming Out of Water */
}
.chapter-transition-50 {
}
  transform: translateY(100vh) scale(0.5) rotateX(90deg);
  opacity: 0;
  filter: blur(30px) brightness(0.7);

.chapter-transition-50.active {
  animation: waterEmergence 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;

@keyframes waterEmergence {
  0% { 
    transform: translateY(100vh) scale(0.5) rotateX(90deg);
    filter: blur(30px) brightness(0.7) hue-rotate(200deg);
    opacity: 0;

  40% {
    transform: translateY(20vh) scale(1.1) rotateX(30deg);
    filter: blur(20px) brightness(1.2) hue-rotate(100deg);
    opacity: 0.8;

  70% {
    transform: translateY(-10px) scale(0.98) rotateX(-10deg);
    filter: blur(10px) brightness(1.1) hue-rotate(50deg);
    opacity: 0.95;

  100% { 
    transform: translateY(0) scale(1) rotateX(0deg);
    filter: blur(0) brightness(1) hue-rotate(0deg);
    opacity: 1;}



}}}}/* Advanced Transition: Mirror World (Chapter 10) */
}
.chapter-transition-10 {
}
  transform: scaleX(-1) rotateY(180deg);
  opacity: 0;
  filter: blur(30px) brightness(0.5);

.chapter-transition-10.active {
  animation: mirrorWorld 0.48s cubic-bezier(0.4, 0, 0.2, 1) forwards;

@keyframes mirrorWorld {
  0% { 
    transform: scaleX(-1) rotateY(180deg) scale(0.5);
    filter: blur(30px) brightness(0.5);
    opacity: 0;

  50% {
    transform: scaleX(0) rotateY(90deg) scale(1.2);
    filter: blur(15px) brightness(1.5);
    opacity: 0.7;

  100% { 
    transform: scaleX(1) rotateY(0deg) scale(1);
    filter: blur(0) brightness(1);
    opacity: 1;}



}}}/* Advanced Transition: Water Surface */
}
.chapter-transition-15 {
}
  transform: translateY(100vh) rotateX(90deg);
  opacity: 0;
  filter: blur(20px);

.chapter-transition-15.active {
  animation: waterSurface 0.63s cubic-bezier(0.4, 0, 0.2, 1) forwards;

@keyframes waterSurface {
  0% { 
    transform: translateY(100vh) rotateX(90deg) scale(0.8);
    filter: blur(20px) hue-rotate(180deg);
    opacity: 0;

  50% {
    transform: translateY(0) rotateX(45deg) scale(1.1);
    filter: blur(10px) hue-rotate(90deg);
    opacity: 0.8;

  100% { 
    transform: translateY(0) rotateX(0deg) scale(1);
    filter: blur(0) hue-rotate(0deg);
    opacity: 1;}



}}}/* Advanced Transition: Liquid Glass */
}
.chapter-transition-20 {
}
  transform: scale(0.3) rotateZ(45deg);
  opacity: 0;
  filter: blur(40px) brightness(2);
  backdrop-filter: blur(50px);

.chapter-transition-20.active {
  animation: liquidGlass 0.61s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;

@keyframes liquidGlass {
  0% { 
    transform: scale(0.3) rotateZ(45deg);
    filter: blur(40px) brightness(2);
    opacity: 0;

  60% {
    transform: scale(1.15) rotateZ(-5deg);
    filter: blur(20px) brightness(1.5);
    opacity: 0.9;

  100% { 
    transform: scale(1) rotateZ(0deg);
    filter: blur(0) brightness(1);
    opacity: 1;}



}}}/* Advanced Transition: Merge Away */
}
.chapter-transition-30 {
}
  transform: scale(2) translateZ(-1000px);
  opacity: 0;
  filter: blur(50px) saturate(0);

.chapter-transition-30.active {
  animation: mergeAwayTransition 0.63s cubic-bezier(0.4, 0, 0.2, 1) forwards;

@keyframes mergeAwayTransition {
  0% { 
    transform: scale(2) translateZ(-1000px) rotateY(180deg);
    filter: blur(50px) saturate(0) brightness(0.3);
    opacity: 0;

  50% {
    transform: scale(0.9) translateZ(0) rotateY(90deg);
    filter: blur(25px) saturate(0.5) brightness(1.2);
    opacity: 0.6;

  100% { 
    transform: scale(1) translateZ(0) rotateY(0deg);
    filter: blur(0) saturate(1) brightness(1);
    opacity: 1;}



}}}/* Advanced Transition: Reality Break */
}
.chapter-transition-40 {
}
  transform: perspective(2000px) rotateX(90deg) rotateY(45deg) scale(0.1);
  opacity: 0;
  filter: blur(60px) hue-rotate(180deg);
  clip-path: polygon(50% 50%, 50% 50%, 50% 50%);

.chapter-transition-40.active {
  animation: realityBreak 0.66s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;

@keyframes realityBreak {
  0% { 
    transform: perspective(2000px) rotateX(90deg) rotateY(45deg) scale(0.1);
    filter: blur(60px) hue-rotate(180deg);
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%);
    opacity: 0;

  40% {
    transform: perspective(2000px) rotateX(45deg) rotateY(90deg) scale(1.3);
    filter: blur(30px) hue-rotate(90deg);
    clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
    opacity: 0.7;

  70% {
    transform: perspective(2000px) rotateX(-45deg) rotateY(-90deg) scale(0.95);
    filter: blur(15px) hue-rotate(45deg);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    opacity: 0.9;

  100% { 
    transform: perspective(2000px) rotateX(0deg) rotateY(0deg) scale(1);
    filter: blur(0) hue-rotate(0deg);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    opacity: 1;}



}}}}/* Advanced Transition: Coming Out of Water */
}
.chapter-transition-50 {
}
  transform: translateY(100vh) scale(0.5) rotateX(90deg);
  opacity: 0;
  filter: blur(30px) brightness(0.7);

.chapter-transition-50.active {
  animation: waterEmergence 0.64s cubic-bezier(0.4, 0, 0.2, 1) forwards;

@keyframes waterEmergence {
  0% { 
    transform: translateY(100vh) scale(0.5) rotateX(90deg);
    filter: blur(30px) brightness(0.7) hue-rotate(200deg);
    opacity: 0;

  40% {
    transform: translateY(20vh) scale(1.1) rotateX(30deg);
    filter: blur(20px) brightness(1.2) hue-rotate(100deg);
    opacity: 0.8;

  70% {
    transform: translateY(-10px) scale(0.98) rotateX(-10deg);
    filter: blur(10px) brightness(1.1) hue-rotate(50deg);
    opacity: 0.95;

  100% { 
    transform: translateY(0) scale(1) rotateX(0deg);
    filter: blur(0) brightness(1) hue-rotate(0deg);
    opacity: 1;}



}}}}/* Transition 1: Zoom In from Center */
}
.chapter-transition-1 {
  transform: scale(0.3);
  opacity: 0;
}

.chapter-transition-1.active {
  animation: chapterZoomIn 0.36s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Transition 2: Slide Up with Elastic */
}
.chapter-transition-2 {
  transform: translateY(100vh) scale(0.8);
  opacity: 0;
}

.chapter-transition-2.active {
  animation: chapterSlideUpElastic 0.42s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;

/* Transition 3: Rotate In 3D */
}
.chapter-transition-3 {
  transform: rotateY(90deg) translateZ(-500px);
  opacity: 0;
}

.chapter-transition-3.active {
  animation: chapterRotate3D 0.75s cubic-bezier(0.4, 0, 0.2, 1) forwards;

/* Transition 4: Fade with Blur */
}
.chapter-transition-4 {filter: blur(20px);
  opacity: 0;
}

.chapter-transition-4.active {
  animation: chapterFadeBlur 0.81s cubic-bezier(0.4, 0, 0.2, 1) forwards;

/* Transition 5: Scale Out then In */
}
.chapter-transition-5 {transform: scale(1.5);
  opacity: 0;
}

.chapter-transition-5.active {
  animation: chapterScaleOutIn 0.84s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;

/* Transition 6: Slide from Right */
}
.chapter-transition-6 {transform: translateX(100vw) rotateZ(5deg);
  opacity: 0;
}

.chapter-transition-6.active {
  animation: chapterSlideRight 0.72s cubic-bezier(0.4, 0, 0.2, 1) forwards;

/* Transition 7: Slide from Left */
}
.chapter-transition-7 {transform: translateX(-100vw) rotateZ(-5deg);
  opacity: 0;
}

.chapter-transition-7.active {
  animation: chapterSlideLeft 0.72s cubic-bezier(0.4, 0, 0.2, 1) forwards;

/* Transition 8: Flip Horizontal */
}
.chapter-transition-8 {transform: rotateY(-180deg) scale(0.8);
  opacity: 0;
}

.chapter-transition-8.active {
  animation: chapterFlipHorizontal 0.78s cubic-bezier(0.4, 0, 0.2, 1) forwards;

/* Transition 9: Flip Vertical */
}
.chapter-transition-9 {transform: rotateX(180deg) scale(0.8);
  opacity: 0;
}

.chapter-transition-9.active {
  animation: chapterFlipVertical 0.78s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Transition 10: Uses Mirror World (defined in advanced transitions) */

/* Transition 11: Slide Down */
}
.chapter-transition-11 {transform: translateY(-100vh) scale(0.9);
  opacity: 0;
}

.chapter-transition-11.active {
  animation: chapterSlideDown 0.75s cubic-bezier(0.4, 0, 0.2, 1) forwards;

/* Transition 12: Rotate and Scale */
}
.chapter-transition-12 {transform: rotate(180deg) scale(0.3);
  opacity: 0;
}

.chapter-transition-12.active {
  animation: chapterRotateScale 0.81s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;

/* Transition 13: Clip Path Reveal */
}
.chapter-transition-13 {clip-path: circle(0% at 50% 50%);
  opacity: 0;
}

.chapter-transition-13.active {
  animation: chapterClipCircle 0.78s cubic-bezier(0.4, 0, 0.2, 1) forwards;

/* Transition 14: Clip Path Square */
}
.chapter-transition-14 {clip-path: inset(100% 0 0 0);
  opacity: 0;
}

.chapter-transition-14.active {
  animation: chapterClipSquare 0.75s cubic-bezier(0.4, 0, 0.2, 1) forwards;

/* Transition 15: Perspective Zoom */
}
.chapter-transition-15 {transform: perspective(2000px) rotateX(90deg) translateZ(-500px);
  opacity: 0;
}

.chapter-transition-15.active {
  animation: chapterPerspectiveZoom 0.81s cubic-bezier(0.4, 0, 0.2, 1) forwards;

/* Transition 16: Elastic Pop */
}
.chapter-transition-16 {transform: scale(0);
  opacity: 0;
}

.chapter-transition-16.active {
  animation: chapterElasticPop 0.72s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;

/* Transition 17: Slide Diagonal */
}
.chapter-transition-17 {transform: translate(100vw, -100vh) rotate(45deg);
  opacity: 0;
}

.chapter-transition-17.active {
  animation: chapterSlideDiagonal 0.75s cubic-bezier(0.4, 0, 0.2, 1) forwards;

/* Transition 18: Fade with Scale */
}
.chapter-transition-18 {transform: scale(0.5);
  opacity: 0;
}

.chapter-transition-18.active {
  animation: chapterFadeScale 0.78s cubic-bezier(0.4, 0, 0.2, 1) forwards;

/* Transition 19: Rotate Z */
}
.chapter-transition-19 {transform: rotateZ(360deg) scale(0.5);
  opacity: 0;
}

.chapter-transition-19.active {
  animation: chapterRotateZ 0.81s cubic-bezier(0.4, 0, 0.2, 1) forwards;

/* Transition 20: Slide Up Fast */
}
.chapter-transition-20 {transform: translateY(100vh);
  opacity: 0;
}

.chapter-transition-20.active {
  animation: chapterSlideUpFast 0.48s cubic-bezier(0.4, 0, 0.2, 1) forwards;

/* Transition 21: Zoom In Slow */
}
.chapter-transition-21 {transform: scale(0.1);
  opacity: 0;
}

.chapter-transition-21.active {
  animation: chapterZoomInSlow 0.96s cubic-bezier(0.4, 0, 0.2, 1) forwards;

/* Transition 22: Slide Right Fast */
}
.chapter-transition-22 {transform: translateX(100vw);
  opacity: 0;
}

.chapter-transition-22.active {
  animation: chapterSlideRightFast 0.63s cubic-bezier(0.4, 0, 0.2, 1) forwards;

/* Transition 23: Rotate Y Slow */
}
.chapter-transition-23 {transform: rotateY(-90deg);
  opacity: 0;
}

.chapter-transition-23.active {
  animation: chapterRotateYSlow 0.90s cubic-bezier(0.4, 0, 0.2, 1) forwards;

/* Transition 24: Scale Bounce */
}
.chapter-transition-24 {transform: scale(0);
  opacity: 0;
}

.chapter-transition-24.active {
  animation: chapterScaleBounce 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;

/* Transition 25: Fade In */
}
.chapter-transition-25 {opacity: 0;
}

.chapter-transition-25.active {
  animation: chapterFadeIn 0.81s cubic-bezier(0.4, 0, 0.2, 1) forwards;

/* Transition 26: Slide Left Fast */
}
.chapter-transition-26 {transform: translateX(-100vw);
  opacity: 0;
}

.chapter-transition-26.active {
  animation: chapterSlideLeftFast 0.63s cubic-bezier(0.4, 0, 0.2, 1) forwards;

/* Transition 27: Zoom Out */
}
.chapter-transition-27 {transform: scale(2);
  opacity: 0;
}

.chapter-transition-27.active {
  animation: chapterZoomOut 0.72s cubic-bezier(0.4, 0, 0.2, 1) forwards;

/* Transition 28: Rotate X */
}
.chapter-transition-28 {transform: rotateX(-90deg);
  opacity: 0;
}

.chapter-transition-28.active {
  animation: chapterRotateX 0.78s cubic-bezier(0.4, 0, 0.2, 1) forwards;

/* Transition 29: Clip Path Polygon */
}
.chapter-transition-29 {clip-path: polygon(50% 50%, 50% 50%, 50% 50%);
  opacity: 0;
}

.chapter-transition-29.active {
  animation: chapterClipPolygon 0.81s cubic-bezier(0.4, 0, 0.2, 1) forwards;

/* Transition 30: Slide Up Slow */
}
.chapter-transition-30 {transform: translateY(100vh);
  opacity: 0;
}

.chapter-transition-30.active {
  animation: chapterSlideUpSlow 0.96s cubic-bezier(0.4, 0, 0.2, 1) forwards;

/* Transition 31: Scale In Out */
}
.chapter-transition-31 {transform: scale(1.3);
  opacity: 0;
}

.chapter-transition-31.active {
  animation: chapterScaleInOut 0.84s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;

/* Transition 32: Rotate 3D Complex */
}
.chapter-transition-32 {transform: rotateX(45deg) rotateY(45deg) translateZ(-500px);
  opacity: 0;
}

.chapter-transition-32.active {
  animation: chapterRotate3DComplex 0.81s cubic-bezier(0.4, 0, 0.2, 1) forwards;

/* Transition 33: Fade Blur Fast */
}
.chapter-transition-33 {filter: blur(30px);
  opacity: 0;
}

.chapter-transition-33.active {
  animation: chapterFadeBlurFast 0.66s cubic-bezier(0.4, 0, 0.2, 1) forwards;

/* Transition 34: Slide Diagonal Reverse */
}
.chapter-transition-34 {transform: translate(-100vw, 100vh) rotate(-45deg);
  opacity: 0;
}

.chapter-transition-34.active {
  animation: chapterSlideDiagonalReverse 0.75s cubic-bezier(0.4, 0, 0.2, 1) forwards;

/* Transition 35: Zoom In Elastic */
}
.chapter-transition-35 {transform: scale(0);
  opacity: 0;
}

.chapter-transition-35.active {
  animation: chapterZoomInElastic 0.78s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;

/* Transition 36: Flip 3D */
}
.chapter-transition-36 {transform: rotateY(180deg) rotateX(20deg);
  opacity: 0;
}

.chapter-transition-36.active {
  animation: chapterFlip3D 0.81s cubic-bezier(0.4, 0, 0.2, 1) forwards;

/* Transition 37: Clip Path Wipe */
}
.chapter-transition-37 {clip-path: inset(0 100% 0 0);
  opacity: 0;
}

.chapter-transition-37.active {
  animation: chapterClipWipe 0.72s cubic-bezier(0.4, 0, 0.2, 1) forwards;

/* Transition 38: Rotate Z Fast */
}
.chapter-transition-38 {transform: rotateZ(-180deg);
  opacity: 0;
}

.chapter-transition-38.active {
  animation: chapterRotateZFast 0.63s cubic-bezier(0.4, 0, 0.2, 1) forwards;

/* Transition 39: Scale Pop */
}
.chapter-transition-39 {transform: scale(0.2);
  opacity: 0;
}

.chapter-transition-39.active {
  animation: chapterScalePop 0.69s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;

/* Transition 40: Slide Up Elastic */
}
.chapter-transition-40 {transform: translateY(150vh);
  opacity: 0;
}

.chapter-transition-40.active {
  animation: chapterSlideUpElastic2 0.81s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;

/* Transition 41: Zoom Out Slow */
}
.chapter-transition-41 {transform: scale(2.5);
  opacity: 0;
}

.chapter-transition-41.active {
  animation: chapterZoomOutSlow 0.96s cubic-bezier(0.4, 0, 0.2, 1) forwards;

/* Transition 42: Rotate Y Fast */
}
.chapter-transition-42 {transform: rotateY(90deg);
  opacity: 0;
}

.chapter-transition-42.active {
  animation: chapterRotateYFast 0.66s cubic-bezier(0.4, 0, 0.2, 1) forwards;

/* Transition 43: Fade Scale Slow */
}
.chapter-transition-43 {transform: scale(0.3);
  opacity: 0;
}

.chapter-transition-43.active {
  animation: chapterFadeScaleSlow 0.96s cubic-bezier(0.4, 0, 0.2, 1) forwards;

/* Transition 44: Slide Right Slow */
}
.chapter-transition-44 {transform: translateX(120vw);
  opacity: 0;
}

.chapter-transition-44.active {
  animation: chapterSlideRightSlow 0.90s cubic-bezier(0.4, 0, 0.2, 1) forwards;

/* Transition 45: Rotate X Fast */
}
.chapter-transition-45 {transform: rotateX(90deg);
  opacity: 0;
}

.chapter-transition-45.active {
  animation: chapterRotateXFast 0.66s cubic-bezier(0.4, 0, 0.2, 1) forwards;

/* Transition 46: Scale Bounce Fast */
}
.chapter-transition-46 {transform: scale(0);
  opacity: 0;
}

.chapter-transition-46.active {
  animation: chapterScaleBounceFast 0.63s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;

/* Transition 47: Clip Path Diamond */
}
.chapter-transition-47 {clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
  opacity: 0;
}

.chapter-transition-47.active {
  animation: chapterClipDiamond 0.78s cubic-bezier(0.4, 0, 0.2, 1) forwards;

/* Transition 48: Zoom In Fast */
}
.chapter-transition-48 {transform: scale(0.05);
  opacity: 0;
}

.chapter-transition-48.active {
  animation: chapterZoomInFast 0.48s cubic-bezier(0.4, 0, 0.2, 1) forwards;

/* Transition 49: Rotate Complex */
}
.chapter-transition-49 {transform: rotate(270deg) scale(0.4);
  opacity: 0;
}

.chapter-transition-49.active {
  animation: chapterRotateComplex 0.84s cubic-bezier(0.4, 0, 0.2, 1) forwards;

/* Transition 50: Slide Down Fast */
}
.chapter-transition-50 {transform: translateY(-100vh);
  opacity: 0;
}

.chapter-transition-50.active {
  animation: chapterSlideDownFast 0.63s cubic-bezier(0.4, 0, 0.2, 1) forwards;

/* Transition 51: Fade Blur Slow */
}
.chapter-transition-51 {filter: blur(40px);
  opacity: 0;
}

.chapter-transition-51.active {
  animation: chapterFadeBlurSlow 1.02s cubic-bezier(0.4, 0, 0.2, 1) forwards;

/* Transition 52: Scale Elastic */
}
.chapter-transition-52 {transform: scale(0.1);
  opacity: 0;
}

.chapter-transition-52.active {
  animation: chapterScaleElastic 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;

/* Transition 53: Rotate Z Slow */
}
.chapter-transition-53 {transform: rotateZ(270deg);
  opacity: 0;
}

.chapter-transition-53.active {
  animation: chapterRotateZSlow 0.96s cubic-bezier(0.4, 0, 0.2, 1) forwards;

/* Transition 54: Slide Left Slow */
}
.chapter-transition-54 {transform: translateX(-120vw);
  opacity: 0;
}

.chapter-transition-54.active {
  animation: chapterSlideLeftSlow 0.90s cubic-bezier(0.4, 0, 0.2, 1) forwards;

/* Transition 55: Zoom Out Elastic */
}
.chapter-transition-55 {transform: scale(3);
  opacity: 0;
}

.chapter-transition-55.active {
  animation: chapterZoomOutElastic 0.78s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;

/* Transition 56: Flip Vertical Fast */
}
.chapter-transition-56 {transform: rotateX(-180deg);
  opacity: 0;
}

.chapter-transition-56.active {
  animation: chapterFlipVerticalFast 0.66s cubic-bezier(0.4, 0, 0.2, 1) forwards;

/* Transition 57: Clip Path Star */
}
.chapter-transition-57 {clip-path: polygon(50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
  opacity: 0;
}

.chapter-transition-57.active {
  animation: chapterClipStar 0.81s cubic-bezier(0.4, 0, 0.2, 1) forwards;

/* Transition 58: Rotate 3D Fast */
}
.chapter-transition-58 {transform: rotateX(45deg) rotateY(-45deg);
  opacity: 0;
}

.chapter-transition-58.active {
  animation: chapterRotate3DFast 0.69s cubic-bezier(0.4, 0, 0.2, 1) forwards;

/* Transition 59: Scale Pop Slow */
}
.chapter-transition-59 {transform: scale(0.05);
  opacity: 0;
}

.chapter-transition-59.active {
  animation: chapterScalePopSlow 0.96s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;

/* Transition 60: Finale Explosion */
}
.chapter-transition-60 {transform: scale(0) rotate(360deg);
  filter: blur(50px);
  opacity: 0;
}

.chapter-transition-60.active {
  animation: chapterFinaleExplosion 0.96s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;

}
.chapter__number {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 2rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;

}
.chapter__title {
  font-size: clamp(3rem, 8vw, 7rem);
  color: #ffffff;
  margin-bottom: 2rem;
  line-height: 1.1;
  text-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
  font-weight: 700;

}
.chapter__subtitle {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 3rem;
  font-weight: 400;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);

}
.chapter__text {
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.8;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);

}
.chapter__subtext {
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.7;
  margin-top: 2rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);

}
.chapter__stat {
  font-size: clamp(4rem, 12vw, 10rem);
  color: #ffffff;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  margin: 2rem 0;
  display: block;

/* Font Classes */
.font-playfair { font-family: 'Playfair Display', serif; }
.font-cinzel { font-family: 'Cinzel', serif; }
.font-cormorant { font-family: 'Cormorant Garamond', serif; }
.font-bodoni { font-family: 'Bodoni Moda', serif; }
.font-space-grotesk { font-family: 'Space Grotesk', sans-serif; }
.font-crimson { font-family: 'Crimson Pro', serif; }
.font-dm-serif { font-family: 'DM Serif Display', serif; }
.font-fraunces { font-family: 'Fraunces', serif; }
.font-inter { font-family: 'Inter', sans-serif; }
.font-manrope { font-family: 'Manrope', sans-serif; }
.font-source-serif { font-family: 'Source Serif 4', serif; }
.font-lora { font-family: 'Lora', serif; }
.font-bebas { font-family: 'Bebas Neue', sans-serif; }
.font-righteous { font-family: 'Righteous', sans-serif; }
.font-archivo { font-family: 'Archivo Black', sans-serif; }
.font-permanent-marker { font-family: 'Permanent Marker', cursive; }
.font-jetbrains { font-family: 'JetBrains Mono', monospace; }
.font-azeret { font-family: 'Azeret Mono', monospace; }
.font-ibm-plex { font-family: 'IBM Plex Sans', sans-serif; }
.font-outfit { font-family: 'Outfit', sans-serif; }

/* 60 UNIQUE BACKGROUND SCENES */

[data-bg="deep-space"]::before {
  background: 
    radial-gradient(circle at 20% 30%, rgba(29, 39, 87, 1) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(17, 24, 57, 1) 0%, transparent 50%),
    radial-gradient(2px 2px at 20% 50%, white, transparent),
    radial-gradient(2px 2px at 60% 70%, white, transparent),
    radial-gradient(1px 1px at 50% 50%, white, transparent),
    radial-gradient(1px 1px at 80% 10%, white, transparent),
    #0a0e27;
  animation: starsTwinkle 4s ease infinite;

[data-bg="mountain-sunrise"]::before {
  background: 
    linear-gradient(180deg, 
      rgba(255, 107, 157, 0.8) 0%,
      rgba(255, 152, 0, 0.7) 30%,
      rgba(255, 193, 7, 0.6) 60%,
      rgba(135, 206, 235, 0.4) 100%
    ),
    radial-gradient(circle at 50% 80%, rgba(255, 87, 34, 0.6) 0%, transparent 50%);
  animation: sunriseGlow 8s ease infinite;

[data-bg="misty-forest"]::before {
  background:
    linear-gradient(180deg,
      rgba(78, 205, 196, 0.3) 0%,
      rgba(120, 180, 140, 0.5) 50%,
      rgba(40, 90, 70, 0.8) 100%
    ),
    radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.1) 0%, transparent 40%);
  animation: mistFlow 10s ease infinite;

[data-bg="abstract-gradient"]::before {
  background:
    linear-gradient(135deg,
      #667eea 0%,
      #764ba2 25%,
      #f093fb 50%,
      #4facfe 75%,
      #00f2fe 100%
    );
  animation: gradientShift 12s ease infinite;
  background-size: 200% 200%;

[data-bg="cozy-cafe"]::before {
  background:
    radial-gradient(circle at 40% 60%, rgba(139, 69, 19, 0.4) 0%, transparent 60%),
    linear-gradient(180deg,
      rgba(255, 222, 173, 0.3) 0%,
      rgba(210, 180, 140, 0.5) 50%,
      rgba(101, 67, 33, 0.7) 100%
    );

[data-bg="soft-gradient"]::before {
  background:
    linear-gradient(135deg,
      rgba(168, 85, 247, 0.4) 0%,
      rgba(135, 206, 235, 0.4) 100%
    );

[data-bg="neural-network"]::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(0, 212, 255, 0.3) 0%, transparent 50%),
    linear-gradient(180deg,
      rgba(15, 23, 42, 1) 0%,
      rgba(30, 41, 59, 1) 100%
    );

[data-bg="light-burst"]::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.4) 0%, transparent 70%),
    linear-gradient(180deg,
      rgba(255, 215, 0, 0.3) 0%,
      rgba(255, 152, 0, 0.4) 50%,
      rgba(255, 87, 34, 0.5) 100%
    );
  animation: lightPulse 3s ease infinite;

[data-bg="data-visualization"]::before {
  background:
    linear-gradient(180deg,
      rgba(99, 102, 241, 0.4) 0%,
      rgba(139, 92, 246, 0.5) 50%,
      rgba(168, 85, 247, 0.6) 100%
    );

[data-bg="weather-forecast"]::before {
  background:
    linear-gradient(180deg,
      rgba(135, 206, 235, 0.6) 0%,
      rgba(176, 224, 230, 0.5) 50%,
      rgba(255, 255, 255, 0.3) 100%
    );

[data-bg="peaceful-clouds"]::before {
  background:
    radial-gradient(ellipse at 30% 40%, rgba(255, 255, 255, 0.6) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 60%, rgba(255, 255, 255, 0.5) 0%, transparent 50%),
    linear-gradient(180deg,
      rgba(135, 206, 235, 0.8) 0%,
      rgba(176, 196, 222, 0.6) 100%
    );
  animation: cloudsDrift 15s ease infinite;

[data-bg="transition-flow"]::before {
  background:
    linear-gradient(135deg,
      rgba(255, 107, 157, 0.5),
      rgba(168, 85, 247, 0.5),
      rgba(0, 212, 255, 0.5),
      rgba(78, 205, 196, 0.5)
    );
  background-size: 400% 400%;
  animation: flowTransition 6s ease infinite;

[data-bg="health-tech"]::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(34, 197, 94, 0.3) 0%, transparent 60%),
    linear-gradient(180deg,
      rgba(6, 78, 59, 0.8) 0%,
      rgba(5, 46, 38, 1) 100%
    );

[data-bg="night-sky"]::before {
  background:
    radial-gradient(2px 2px at 15% 25%, white, transparent),
    radial-gradient(3px 3px at 85% 15%, white, transparent),
    radial-gradient(1px 1px at 45% 80%, white, transparent),
    linear-gradient(180deg,
      rgba(10, 14, 39, 1) 0%,
      rgba(25, 20, 45, 1) 100%
    );

[data-bg="music-waves"]::before {
  background:
    repeating-linear-gradient(90deg,
      rgba(168, 85, 247, 0.1) 0%,
      rgba(168, 85, 247, 0.2) 10%,
      rgba(168, 85, 247, 0.1) 20%
    ),
    linear-gradient(180deg,
      rgba(88, 28, 135, 0.8) 0%,
      rgba(126, 34, 206, 0.6) 100%
    );
  animation: musicPulse 2s ease infinite;

[data-bg="city-lights"]::before {
  background:
    radial-gradient(circle at 20% 80%, rgba(251, 191, 36, 0.3) 0%, transparent 30%),
    radial-gradient(circle at 80% 20%, rgba(251, 191, 36, 0.3) 0%, transparent 30%),
    radial-gradient(circle at 50% 50%, rgba(251, 191, 36, 0.2) 0%, transparent 40%),
    linear-gradient(180deg,
      rgba(15, 23, 42, 1) 0%,
      rgba(30, 41, 59, 1) 100%
    );

[data-bg="social-network"]::before {
  background:
    radial-gradient(circle at 30% 30%, rgba(236, 72, 153, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(139, 92, 246, 0.3) 0%, transparent 50%),
    linear-gradient(180deg,
      rgba(45, 25, 75, 0.9) 0%,
      rgba(30, 15, 50, 1) 100%
    );

[data-bg="rainy-window"]::before {
  background:
    linear-gradient(180deg,
      rgba(71, 85, 105, 0.9) 0%,
      rgba(51, 65, 85, 1) 100%
    );
  animation: rainDrift 8s linear infinite;

[data-bg="fitness-energy"]::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(234, 179, 8, 0.4) 0%, transparent 60%),
    linear-gradient(135deg,
      rgba(220, 38, 38, 0.6) 0%,
      rgba(234, 88, 12, 0.7) 100%
    );
  animation: energyPulse 1.5s ease infinite;

[data-bg="digital-glow"]::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.5) 0%, transparent 60%),
    linear-gradient(180deg,
      rgba(17, 24, 39, 1) 0%,
      rgba(31, 41, 55, 0.95) 100%
    );
  animation: screenGlow 3s ease infinite;

[data-bg="sunset-beach"]::before {
  background:
    radial-gradient(ellipse at 50% 60%, rgba(251, 146, 60, 0.6) 0%, transparent 60%),
    linear-gradient(180deg,
      rgba(252, 211, 77, 0.7) 0%,
      rgba(251, 146, 60, 0.8) 40%,
      rgba(239, 68, 68, 0.7) 70%,
      rgba(109, 40, 217, 0.6) 100%
    );

[data-bg="food-warmth"]::before {
  background:
    radial-gradient(circle at 40% 40%, rgba(251, 191, 36, 0.4) 0%, transparent 50%),
    linear-gradient(180deg,
      rgba(154, 52, 18, 0.6) 0%,
      rgba(120, 53, 15, 0.8) 100%
    );

[data-bg="medical-clean"]::before {
  background:
    linear-gradient(180deg,
      rgba(224, 242, 254, 0.95) 0%,
      rgba(186, 230, 253, 1) 100%
    );

[data-bg="calm-interior"]::before {
  background:
    radial-gradient(circle at 30% 30%, rgba(196, 181, 253, 0.3) 0%, transparent 60%),
    linear-gradient(180deg,
      rgba(67, 56, 202, 0.3) 0%,
      rgba(91, 33, 182, 0.5) 100%
    );

[data-bg="ai-assistant"]::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(34, 211, 238, 0.4) 0%, transparent 60%),
    linear-gradient(180deg,
      rgba(8, 47, 73, 1) 0%,
      rgba(7, 89, 133, 0.8) 100%
    );

[data-bg="earth-space"]::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.4) 0%, transparent 70%),
    radial-gradient(1px 1px at 25% 35%, white, transparent),
    radial-gradient(2px 2px at 75% 65%, white, transparent),
    #000000;

[data-bg="map-base"]::before {
  background: rgba(30, 41, 59, 0.95);

[data-bg="times-square-glow"]::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(251, 191, 36, 0.5) 0%, transparent 60%),
    radial-gradient(circle at 30% 70%, rgba(239, 68, 68, 0.4) 0%, transparent 50%),
    radial-gradient(circle at 70% 30%, rgba(59, 130, 246, 0.4) 0%, transparent 50%),
    linear-gradient(180deg,
      rgba(17, 24, 39, 1) 0%,
      rgba(31, 41, 55, 1) 100%
    );
  animation: neonPulse 2s ease infinite;

[data-bg="brooklyn-sunset"]::before {
  background:
    linear-gradient(180deg,
      rgba(251, 146, 60, 0.7) 0%,
      rgba(249, 115, 22, 0.8) 40%,
      rgba(220, 38, 38, 0.6) 100%
    );

[data-bg="coffee-shop-warm"]::before {
  background:
    radial-gradient(circle at 40% 40%, rgba(217, 119, 6, 0.4) 0%, transparent 60%),
    linear-gradient(180deg,
      rgba(124, 58, 237, 0.2) 0%,
      rgba(91, 33, 182, 0.4) 100%
    );

[data-bg="connection-web"]::before {
  background:
    radial-gradient(circle at 30% 30%, rgba(236, 72, 153, 0.4) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(59, 130, 246, 0.4) 0%, transparent 50%),
    linear-gradient(180deg,
      rgba(17, 24, 39, 1) 0%,
      rgba(55, 48, 163, 0.5) 100%
    );

[data-bg="neighborhood-map"]::before {
  background:
    linear-gradient(180deg,
      rgba(30, 58, 138, 0.8) 0%,
      rgba(30, 64, 175, 0.6) 100%
    );

[data-bg="hollywood-lights"]::before {
  background:
    radial-gradient(circle at 50% 100%, rgba(251, 191, 36, 0.6) 0%, transparent 70%),
    linear-gradient(180deg,
      rgba(15, 23, 42, 1) 0%,
      rgba(30, 27, 75, 1) 100%
    );
  animation: spotlightSweep 5s ease infinite;

[data-bg="celebrity-stage"]::before {
  background:
    radial-gradient(circle at 50% 80%, rgba(217, 70, 239, 0.5) 0%, transparent 60%),
    radial-gradient(circle at 30% 30%, rgba(56, 189, 248, 0.4) 0%, transparent 50%),
    linear-gradient(180deg,
      rgba(7, 11, 25, 1) 0%,
      rgba(20, 20, 60, 1) 100%
    );

[data-bg="concert-stage"]::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(236, 72, 153, 0.6) 0%, transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(139, 92, 246, 0.5) 0%, transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(59, 130, 246, 0.5) 0%, transparent 40%),
    #0f0f23;
  animation: concertLights 4s ease infinite;

[data-bg="debate-stage"]::before {
  background:
    linear-gradient(135deg,
      rgba(220, 38, 38, 0.4) 0%,
      rgba(30, 64, 175, 0.4) 100%
    );

[data-bg="stadium-energy"]::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(34, 197, 94, 0.5) 0%, transparent 60%),
    linear-gradient(180deg,
      rgba(20, 83, 45, 0.9) 0%,
      rgba(5, 46, 22, 1) 100%
    );
  animation: crowdRoar 2s ease infinite;

[data-bg="capitol-building"]::before {
  background:
    linear-gradient(180deg,
      rgba(30, 58, 138, 0.8) 0%,
      rgba(55, 48, 163, 0.6) 50%,
      rgba(91, 33, 182, 0.7) 100%
    );

[data-bg="personalized-feed"]::before {
  background:
    linear-gradient(135deg,
      rgba(168, 85, 247, 0.5) 0%,
      rgba(236, 72, 153, 0.5) 100%
    );

[data-bg="laboratory"]::before {
  background:
    linear-gradient(180deg,
      rgba(224, 242, 254, 1) 0%,
      rgba(186, 230, 253, 1) 100%
    );

[data-bg="data-proof"]::before {
  background:
    linear-gradient(135deg,
      rgba(6, 78, 59, 0.9) 0%,
      rgba(4, 120, 87, 0.8) 100%
    );

[data-bg="ai-brain"]::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.5) 0%, transparent 60%),
    linear-gradient(180deg,
      rgba(30, 27, 75, 1) 0%,
      rgba(49, 46, 129, 0.8) 100%
    );

[data-bg="warning-care"]::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(251, 191, 36, 0.3) 0%, transparent 60%),
    linear-gradient(180deg,
      rgba(146, 64, 14, 0.8) 0%,
      rgba(120, 53, 15, 1) 100%
    );

[data-bg="medical-trial"]::before {
  background:
    linear-gradient(180deg,
      rgba(219, 234, 254, 1) 0%,
      rgba(191, 219, 254, 1) 100%
    );

[data-bg="journal-pages"]::before {
  background:
    linear-gradient(180deg,
      rgba(254, 252, 232, 1) 0%,
      rgba(254, 249, 195, 1) 100%
    );

[data-bg="security-lock"]::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.4) 0%, transparent 60%),
    linear-gradient(180deg,
      rgba(17, 24, 39, 1) 0%,
      rgba(30, 41, 59, 1) 100%
    );

[data-bg="device-tech"]::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(34, 211, 238, 0.4) 0%, transparent 60%),
    linear-gradient(180deg,
      rgba(8, 47, 73, 1) 0%,
      rgba(12, 74, 110, 0.9) 100%
    );

[data-bg="testimonial-soft"]::before {
  background:
    linear-gradient(135deg,
      rgba(252, 231, 243, 0.9) 0%,
      rgba(251, 207, 232, 1) 100%
    );

[data-bg="testimonial-warm"]::before {
  background:
    linear-gradient(135deg,
      rgba(254, 215, 170, 0.9) 0%,
      rgba(254, 202, 202, 1) 100%
    );

[data-bg="testimonial-calm"]::before {
  background:
    linear-gradient(135deg,
      rgba(224, 242, 254, 1) 0%,
      rgba(224, 231, 255, 1) 100%
    );

[data-bg="testimonial-bright"]::before {
  background:
    linear-gradient(135deg,
      rgba(254, 249, 195, 1) 0%,
      rgba(253, 224, 71, 0.6) 100%
    );

[data-bg="growth-graph"]::before {
  background:
    linear-gradient(180deg,
      rgba(5, 150, 105, 0.4) 0%,
      rgba(4, 120, 87, 0.6) 50%,
      rgba(6, 78, 59, 0.8) 100%
    );

[data-bg="community-celebration"]::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(251, 191, 36, 0.5) 0%, transparent 60%),
    linear-gradient(135deg,
      rgba(236, 72, 153, 0.5) 0%,
      rgba(168, 85, 247, 0.5) 50%,
      rgba(59, 130, 246, 0.5) 100%
    );
  animation: celebrationPulse 3s ease infinite;

[data-bg="investment-gold"]::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(251, 191, 36, 0.6) 0%, transparent 60%),
    linear-gradient(180deg,
      rgba(146, 64, 14, 0.9) 0%,
      rgba(124, 45, 18, 1) 100%
    );
  animation: goldShimmer 4s ease infinite;

[data-bg="market-data"]::before {
  background:
    linear-gradient(180deg,
      rgba(30, 58, 138, 0.9) 0%,
      rgba(30, 64, 175, 0.8) 100%
    );

[data-bg="growth-chart"]::before {
  background:
    linear-gradient(135deg,
      rgba(6, 78, 59, 1) 0%,
      rgba(4, 120, 87, 0.9) 100%
    );

[data-bg="universe-infinite"]::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.3) 0%, transparent 70%),
    radial-gradient(2px 2px at 10% 20%, white, transparent),
    radial-gradient(1px 1px at 90% 80%, white, transparent),
    radial-gradient(3px 3px at 50% 40%, white, transparent),
    radial-gradient(1px 1px at 30% 90%, white, transparent),
    #0a0510;
  animation: universePulse 8s ease infinite;


}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}/* ========================================
   5 BACKGROUND STAGES
   ======================================== */

/* Stage 1: Multi-Color Gradient (Current) */
[data-stage="1"]::before {
  background:
    linear-gradient(135deg,
      rgba(255, 107, 157, 0.6) 0%,
      rgba(168, 85, 247, 0.6) 25%,
      rgba(0, 212, 255, 0.6) 50%,
      rgba(78, 205, 196, 0.6) 75%,
      rgba(255, 107, 157, 0.6) 100%
    );
  background-size: 400% 400%;
  animation: stage1Shift 8s ease infinite;

@keyframes stage1Shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }


}}/* Stage 2: Night Mode - Deep Dark with Stars */
[data-stage="2"]::before {
  background:
    radial-gradient(2px 2px at 15% 25%, rgba(255, 255, 255, 0.8) 0%, transparent 50%),
    radial-gradient(3px 3px at 85% 15%, rgba(255, 255, 255, 0.6) 0%, transparent 50%),
    radial-gradient(1px 1px at 45% 80%, rgba(255, 255, 255, 0.9) 0%, transparent 50%),
    radial-gradient(2px 2px at 70% 50%, rgba(255, 255, 255, 0.7) 0%, transparent 50%),
    radial-gradient(1px 1px at 30% 90%, rgba(255, 255, 255, 0.8) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 20%, rgba(59, 130, 246, 0.2) 0%, transparent 50%),
    linear-gradient(180deg,
      rgba(10, 14, 39, 1) 0%,
      rgba(15, 23, 42, 1) 50%,
      rgba(10, 14, 39, 1) 100%
    );
  animation: starsTwinkle 3s ease infinite;


}/* Stage 3: Liquid Glass - Water Surface */
[data-stage="3"]::before {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(59, 130, 246, 0.4) 0%, transparent 60%),
    radial-gradient(ellipse at 30% 70%, rgba(34, 211, 238, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 30%, rgba(14, 165, 233, 0.3) 0%, transparent 50%),
    linear-gradient(180deg,
      rgba(8, 47, 73, 0.9) 0%,
      rgba(7, 89, 133, 0.8) 50%,
      rgba(8, 47, 73, 0.9) 100%
    );
  animation: liquidFlow 6s ease infinite;
  backdrop-filter: blur(40px);

@keyframes liquidFlow {
  0%, 100% { 
    transform: translateY(0) scaleY(1);
    filter: hue-rotate(0deg);}

  50% { 
    transform: translateY(-10px) scaleY(1.05);
    filter: hue-rotate(20deg);



}}}/* Stage 4: Mirror World - Reality Break */
[data-stage="4"]::before {
  background:
    linear-gradient(45deg,
      rgba(139, 92, 246, 0.3) 0%,
      transparent 25%,
      rgba(236, 72, 153, 0.3) 50%,
      transparent 75%,
      rgba(59, 130, 246, 0.3) 100%
    ),
    linear-gradient(-45deg,
      rgba(34, 211, 238, 0.2) 0%,
      transparent 30%,
      rgba(168, 85, 247, 0.2) 60%,
      transparent 100%
    ),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 70%),
    linear-gradient(180deg,
      rgba(17, 24, 39, 0.95) 0%,
      rgba(30, 41, 59, 0.9) 100%
    );
  animation: mirrorBreak 4s ease infinite;
  backdrop-filter: blur(20px) brightness(1.1);
  transform-style: preserve-3d;

@keyframes mirrorBreak {
  0%, 100% { 
    transform: scale(1) rotateX(0deg);
    filter: hue-rotate(0deg) brightness(1);}

  25% { 
    transform: scale(1.02) rotateX(2deg);
    filter: hue-rotate(90deg) brightness(1.2);

  50% { 
    transform: scale(0.98) rotateX(-2deg);
    filter: hue-rotate(180deg) brightness(0.9);

  75% { 
    transform: scale(1.01) rotateX(1deg);
    filter: hue-rotate(270deg) brightness(1.1);



}}}}}/* Stage 5: Merge Away - Dissolving */
[data-stage="5"]::before {
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 107, 157, 0.5) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(168, 85, 247, 0.5) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(0, 212, 255, 0.4) 0%, transparent 50%),
    linear-gradient(135deg,
      rgba(15, 23, 42, 0.8) 0%,
      rgba(30, 41, 59, 0.6) 50%,
      rgba(15, 23, 42, 0.8) 100%
    );
  animation: mergeAway 5s ease infinite;
  backdrop-filter: blur(30px);

@keyframes mergeAway {
  0%, 100% { 
    opacity: 1;
    filter: blur(0px) saturate(1);
    transform: scale(1);}

  50% { 
    opacity: 0.7;
    filter: blur(15px) saturate(1.5);
    transform: scale(1.05);



}}}/* Animation Keyframes */

@keyframes starsTwinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }

@keyframes sunriseGlow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.2); }

@keyframes mistFlow {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(20px); }

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }

@keyframes lightPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.3); }

@keyframes cloudsDrift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(30px); }

@keyframes flowTransition {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }

@keyframes musicPulse {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.05); }

@keyframes rainDrift {
  0% { transform: translateY(0); }
  100% { transform: translateY(100px); }

@keyframes energyPulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.02); filter: brightness(1.15); }

@keyframes screenGlow {
  0%, 100% { box-shadow: inset 0 0 100px rgba(59, 130, 246, 0.2); }
  50% { box-shadow: inset 0 0 150px rgba(59, 130, 246, 0.4); }

@keyframes celebrationPulse {
  0%, 100% { filter: hue-rotate(0deg); }
  50% { filter: hue-rotate(30deg); }

@keyframes goldShimmer {
  0%, 100% { filter: brightness(1) saturate(1); }
  50% { filter: brightness(1.2) saturate(1.3); }

@keyframes neonPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.3); }

@keyframes concertLights {
  0% { filter: hue-rotate(0deg); }
  33% { filter: hue-rotate(120deg); }
  66% { filter: hue-rotate(240deg); }
  100% { filter: hue-rotate(360deg); }

@keyframes crowdRoar {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }

@keyframes spotlightSweep {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }

@keyframes universePulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.05); filter: brightness(1.2); }


}}}}}}}}}}}}}}}}}}/* Component Styles */

/* Device Preview (Chapter 4) */
}
.chapter__device-preview {
  margin-top: 4rem;

}
.device-frame {
  width: 300px;
  height: 600px;
  margin: 0 auto;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  border-radius: 40px;
  padding: 20px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 50px 100px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(30px);
  animation: deviceFloat 6s ease-in-out infinite;

}
.device-screen {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.95) 100%);
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 2rem;

}
.device-text {
  font-family: 'Inter', sans-serif;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;

@keyframes deviceFloat {
  0%, 100% { transform: translateY(0) rotateY(0deg); }
  50% { transform: translateY(-20px) rotateY(5deg); }


}/* Mood Selector (Chapter 5) */
}
.mood-selector {
  display: flex;
  gap: 2rem;
  justify-content: center;
  margin-top: 3rem;
  flex-wrap: wrap;

}
.mood-option {
  width: 120px;
  height: 120px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(20px);

}
.mood-option:hover {
  transform: scale(1.15) translateY(-10px);
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.6);

/* AI Visual (Chapter 7) */
}
.ai-visual {
  margin: 4rem 0;

}
.neural-svg {
  width: 100%;
  max-width: 600px;
  height: auto;
  filter: drop-shadow(0 10px 40px rgba(0, 212, 255, 0.5));

/* Insight Card (Chapter 8) */
}
.insight-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(30px);
  border-radius: 32px;
  padding: 3rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  margin: 3rem auto;
  max-width: 700px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
  animation: insightPulse 4s ease infinite;

}
.insight-icon {
  margin-bottom: 2rem;

}
.insight-text {
  font-size: 1.6rem;
  line-height: 1.7;
  color: #ffffff;
  font-style: italic;

@keyframes insightPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4); }
  50% { transform: scale(1.02); box-shadow: 0 40px 100px rgba(255, 255, 255, 0.2); }


}/* Mood Graph (Chapter 9) */
}
.mood-graph {
  margin: 4rem 0;

}
.graph-svg {
  width: 100%;
  max-width: 800px;
  height: auto;
  filter: drop-shadow(0 10px 40px rgba(168, 85, 247, 0.5));

}
.graph-line {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: drawLine 3s cubic-bezier(0.4, 0, 0.2, 1) forwards;

@keyframes drawLine {
  to { stroke-dashoffset: 0; }


}/* Forecast Card (Chapter 10) */
}
.forecast-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(40px);
  border-radius: 40px;
  padding: 4rem;
  border: 2px solid rgba(255, 255, 255, 0.4);
  margin: 3rem auto;
  max-width: 500px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);

}
.forecast-icon {
  margin-bottom: 2rem;

}
.forecast-value {
  font-size: 6rem;
  line-height: 1;
  color: #ffffff;
  text-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  margin: 1rem 0;

}
.forecast-label {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 1rem;

}
.forecast-detail {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;

/* Integration Grid (Chapter 13) */
}
.integration-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin: 4rem 0;

}
.integration-item {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  padding: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.4s ease;

}
.integration-item:hover {
  transform: translateY(-10px) scale(1.05);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);

}
.integration-label {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;

}
.integration-value {
  font-size: 3rem;
  color: #ffffff;
  font-weight: 700;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);

/* Music Insight (Chapter 15) */
}
.music-insight {
  background: rgba(168, 85, 247, 0.2);
  backdrop-filter: blur(25px);
  border-radius: 28px;
  padding: 2.5rem;
  border: 1px solid rgba(168, 85, 247, 0.4);
  margin: 3rem auto;
  max-width: 600px;
  box-shadow: 0 25px 70px rgba(168, 85, 247, 0.3);

}
.music-text {
  font-size: 1.5rem;
  line-height: 1.7;
  color: #ffffff;
  font-style: italic;

/* Location Highlight (Chapter 32) */
}
.location-highlight {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(25px);
  border-radius: 28px;
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  margin: 3rem auto;
  max-width: 500px;

}
.location-name {
  font-size: 1.8rem;
  color: #ffffff;
  margin-bottom: 1rem;
  font-weight: 700;

}
.location-mood {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: center;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.9);

/* Celebrity Grid (Chapter 37) */
}
.celebrity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2.5rem;
  margin-top: 4rem;
  padding: 0 2rem;

}
.celebrity-card {
  position: relative;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(30px);
  border-radius: 32px;
  padding: 3rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;

}
.celebrity-card:hover {
  transform: translateY(-15px) rotateX(5deg);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 255, 255, 0.4);

}
.celebrity-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 107, 157, 0.8), rgba(168, 85, 247, 0.8));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  font-weight: 900;
  color: white;
  margin: 0 auto 2rem;
  border: 3px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4);

}
.celebrity-name {
  font-size: 1.8rem;
  color: #ffffff;
  margin-bottom: 1.5rem;
  font-weight: 700;

}
.sentiment-meter {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  overflow: hidden;
  margin: 1.5rem 0;

}
.sentiment-bar {
  height: 100%;
  border-radius: 10px;
  transition: width 2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 20px currentColor;

}
.sentiment-value {
  font-size: 2rem;
  color: #ffffff;
  font-weight: 700;
  margin: 1rem 0;

}
.sentiment-reason {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.75);

/* Sentiment Wave (Chapter 38) */
}
.sentiment-wave {
  width: 100%;
  max-width: 900px;
  height: 300px;
  margin: 4rem auto;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  position: relative;
  overflow: hidden;

/* Stats Showcase (Chapter 44) */
}
.stats-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 3rem;
  margin: 4rem 0;

}
.stat-block {
  text-align: center;

}
.stat-number {
  font-size: 5rem;
  color: #ffffff;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  margin-bottom: 1rem;

}
.stat-label {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.8);

/* AI Suggestion (Chapter 25) */
}
.ai-suggestion {
  background: rgba(34, 211, 238, 0.15);
  backdrop-filter: blur(25px);
  border-radius: 28px;
  padding: 3rem;
  border: 1px solid rgba(34, 211, 238, 0.3);
  margin: 3rem auto;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  box-shadow: 0 25px 70px rgba(34, 211, 238, 0.2);

}
.suggestion-text {
  font-size: 1.5rem;
  line-height: 1.7;
  color: #ffffff;
  text-align: center;

/* Map Containers */
.chapter--fullscreen,
.chapter--map,
.chapter--map-detail,
}
.chapter--map-trail {
  padding: 0;

.chapter--map .chapter__content,
}
.chapter--map-detail .chapter__content {
  position: absolute;
  top: 8rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  text-align: center;

}
.chapter__content--overlay {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(30px);
  border-radius: 32px;
  padding: 2.5rem 4rem;
  border: 1px solid rgba(255, 255, 255, 0.3);

.map-container,
.map-detail,
}
.trail-map {
  width: 100%;
  height: 100vh;
  position: relative;

}
.globe-container {
  width: 100%;
  height: 100vh;
  position: absolute;
  inset: 0;

/* Trail Timeline (Chapter 33) */
}
.trail-timeline {
  position: absolute;
  bottom: 4rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2rem;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(30px);
  padding: 2rem 3rem;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  z-index: 100;

}
.trail-point {
  text-align: center;

}
.trail-point::before {
  content: attr(data-time);
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0.5rem;

}
.trail-point::after {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin: 0.5rem auto 0;
  box-shadow: 0 0 20px currentColor;

}
.trail-point[data-mood="calm"]::after {
  background: #87ceeb;

}
.trail-point[data-mood="focused"]::after {
  background: #00d4ff;

}
.trail-point[data-mood="stressed"]::after {
  background: #ef4444;

}
.trail-point[data-mood="relieved"]::after {
  background: #4ade80;

}
.trail-point[data-mood="happy"]::after {
  background: #ffd700;

/* Testimonial Cards */
}
.chapter--testimonial {
  background: none;

}
.testimonial-card {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(35px);
  border-radius: 36px;
  padding: 4rem;
  border: 2px solid rgba(255, 255, 255, 0.3);
  max-width: 700px;
  margin: 0 auto;
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.4);

}
.testimonial-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4ade80, #22c55e);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 900;
  color: white;
  margin: 0 auto 2rem;
  border: 3px solid rgba(255, 255, 255, 0.5);

}
.testimonial-name {
  font-size: 1.4rem;
  color: #ffffff;
  margin-bottom: 2rem;
  font-weight: 700;

}
.testimonial-quote {
  font-size: 1.4rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.95);
  font-style: italic;
  margin-bottom: 2rem;

}
.testimonial-stat {
  font-size: 2.5rem;
  color: #4ade80;
  font-weight: 900;
  text-shadow: 0 4px 20px rgba(74, 222, 128, 0.5);

}
.testimonial-mood-change {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  margin-top: 3rem;

.mood-before,
}
.mood-after {
  text-align: center;

}
.mood-label {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;

}
.mood-arrow {
  font-size: 3rem;
  color: rgba(255, 255, 255, 0.6);

/* Privacy Grid (Chapter 49) */
}
.privacy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin-top: 3rem;

}
.privacy-item {
  background: rgba(99, 102, 241, 0.2);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  padding: 2rem;
  border: 1px solid rgba(99, 102, 241, 0.4);

}
.privacy-label {
  font-size: 1.2rem;
  color: #ffffff;
  font-weight: 600;

/* Proof Stats (Chapter 55) */
}
.proof-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 3rem;
  margin: 4rem 0;

}
.proof-stat {
  text-align: center;

}
.proof-number {
  font-size: 5rem;
  color: #ffffff;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  margin-bottom: 1rem;

}
.proof-label {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.85);

/* Market Stats (Chapter 58) */
}
.market-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 3rem;
  margin: 4rem 0;

}
.market-item {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(25px);
  border-radius: 28px;
  padding: 3rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  text-align: center;

}
.market-value {
  font-size: 4rem;
  color: #fbbf24;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 6px 30px rgba(251, 191, 36, 0.6);
  margin-bottom: 1.5rem;

}
.market-label {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;

/* Traction Visual (Chapter 59) */
}
.traction-visual {
  margin: 4rem 0;

}
.growth-svg {
  width: 100%;
  max-width: 800px;
  height: auto;

}
.growth-line {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: drawLine 4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  filter: drop-shadow(0 0 20px rgba(168, 85, 247, 0.8));

}
.traction-stats {
  display: grid;
  gap: 1.5rem;
  margin-top: 3rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;

}
.traction-item {
  font-size: 1.4rem;
  color: rgba(255, 255, 255, 0.9);
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);

/* Finale (Chapter 60) */
}
.chapter--finale {
  min-height: 100vh;

}
.finale-actions {
  display: flex;
  gap: 2rem;
  justify-content: center;
  margin: 4rem 0;
  flex-wrap: wrap;

}
.btn--large {
  padding: 1.5rem 4rem;
  font-size: 1.4rem;
  font-weight: 700;
  border-radius: 60px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}
.btn--primary {
  background: linear-gradient(135deg, #ffffff, rgba(255, 255, 255, 0.8));
  color: #0a0e27;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 30px 80px rgba(255, 255, 255, 0.3);

}
.btn--primary:hover {
  transform: translateY(-5px) scale(1.08);
  box-shadow: 0 40px 100px rgba(255, 255, 255, 0.5);

}
.btn--invest {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.9), rgba(217, 119, 6, 0.8));
  color: #ffffff;
  border: 2px solid rgba(251, 191, 36, 0.8);
  box-shadow: 0 30px 80px rgba(251, 191, 36, 0.4);

}
.btn--invest:hover {
  transform: translateY(-5px) scale(1.08);
  box-shadow: 0 40px 100px rgba(251, 191, 36, 0.6);

}
.finale-contact {
  margin: 4rem 0;

}
.contact-label {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 1rem;

}
.contact-email {
  font-size: 2rem;
  color: #00d4ff;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid rgba(0, 212, 255, 0.5);
  transition: all 0.3s ease;

}
.contact-email:hover {
  color: #00f2ff;
  border-bottom-color: #00f2ff;
  text-shadow: 0 0 30px rgba(0, 212, 255, 0.8);

}
.finale-signature {
  margin-top: 6rem;

}
.signature-text {
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 1rem;

}
.signature-company {
  font-size: 3rem;
  color: #ffffff;
  letter-spacing: 0.3em;
  text-shadow: 0 6px 30px rgba(255, 255, 255, 0.5);

}
.finale-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;

/* Particles System */
}
.chapter__particles {
  position: absolute;
  inset: 0;
  pointer-events: none;

/* Premium Hover Effects */
}
.btn--magnetic {
  position: relative;
  overflow: hidden;

}
.btn--magnetic::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.2), transparent 50%);
  opacity: 0;
  transition: opacity 0.3s ease;

}
.btn--magnetic:hover::before {
  opacity: 1;

/* Responsive */
@media (max-width: 768px) {
}}
  .chapter {
    padding: 6rem 1.5rem;

}
  .chapter__title {
    font-size: clamp(2rem, 10vw, 4rem);

}
  .chapter__text {
    font-size: clamp(1rem, 4vw, 1.4rem);

}
  .device-frame {
    width: 250px;
    height: 500px;

}
  .mood-selector {
    gap: 1rem;

}
  .mood-option {
    width: 80px;
    height: 80px;

}
  .celebrity-grid {
    grid-template-columns: 1fr;

}
  .finale-actions {
    flex-direction: column;
    align-items: stretch;

}
  .btn--large {
    padding: 1.2rem 2rem;
    font-size: 1.2rem;

}
  .trail-timeline {
    flex-wrap: wrap;
    bottom: 2rem;


/* ========================================
   60 UNIQUE KEYFRAME ANIMATIONS
   ======================================== */

@keyframes chapterZoomIn {
  from { transform: scale(0.3); opacity: 0; }
  to { transform: scale(1); opacity: 1; }

@keyframes chapterSlideUpElastic {
  from { transform: translateY(100vh) scale(0.8); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }

@keyframes chapterRotate3D {
  from { transform: rotateY(90deg) translateZ(-500px); opacity: 0; }
  to { transform: rotateY(0deg) translateZ(0); opacity: 1; }

@keyframes chapterFadeBlur {
  from { filter: blur(20px); opacity: 0; }
  to { filter: blur(0); opacity: 1; }

@keyframes chapterScaleOutIn {
  from { transform: scale(1.5); opacity: 0; }
  50% { transform: scale(0.8); opacity: 0.5; }
  to { transform: scale(1); opacity: 1; }

@keyframes chapterSlideRight {
  from { transform: translateX(100vw) rotateZ(5deg); opacity: 0; }
  to { transform: translateX(0) rotateZ(0deg); opacity: 1; }

@keyframes chapterSlideLeft {
  from { transform: translateX(-100vw) rotateZ(-5deg); opacity: 0; }
  to { transform: translateX(0) rotateZ(0deg); opacity: 1; }

@keyframes chapterFlipHorizontal {
  from { transform: rotateY(-180deg) scale(0.8); opacity: 0; }
  to { transform: rotateY(0deg) scale(1); opacity: 1; }

@keyframes chapterFlipVertical {
  from { transform: rotateX(180deg) scale(0.8); opacity: 0; }
  to { transform: rotateX(0deg) scale(1); opacity: 1; }

@keyframes chapterZoomOutFar {
  from { transform: scale(3) translateZ(-2000px); opacity: 0; }
  to { transform: scale(1) translateZ(0); opacity: 1; }

@keyframes chapterSlideDown {
  from { transform: translateY(-100vh) scale(0.9); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }

@keyframes chapterRotateScale {
  from { transform: rotate(180deg) scale(0.3); opacity: 0; }
  to { transform: rotate(0deg) scale(1); opacity: 1; }

@keyframes chapterClipCircle {
  from { clip-path: circle(0% at 50% 50%); opacity: 0; }
  to { clip-path: circle(150% at 50% 50%); opacity: 1; }

@keyframes chapterClipSquare {
  from { clip-path: inset(100% 0 0 0); opacity: 0; }
  to { clip-path: inset(0 0 0 0); opacity: 1; }

@keyframes chapterPerspectiveZoom {
  from { transform: perspective(2000px) rotateX(90deg) translateZ(-500px); opacity: 0; }
  to { transform: perspective(2000px) rotateX(0deg) translateZ(0); opacity: 1; }

@keyframes chapterElasticPop {
  from { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.2); opacity: 1; }
  80% { transform: scale(0.9); }
  to { transform: scale(1); }

@keyframes chapterSlideDiagonal {
  from { transform: translate(100vw, -100vh) rotate(45deg); opacity: 0; }
  to { transform: translate(0, 0) rotate(0deg); opacity: 1; }

@keyframes chapterFadeScale {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }

@keyframes chapterRotateZ {
  from { transform: rotateZ(360deg) scale(0.5); opacity: 0; }
  to { transform: rotateZ(0deg) scale(1); opacity: 1; }

@keyframes chapterSlideUpFast {
  from { transform: translateY(100vh); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }

@keyframes chapterZoomInSlow {
  from { transform: scale(0.1); opacity: 0; }
  to { transform: scale(1); opacity: 1; }

@keyframes chapterSlideRightFast {
  from { transform: translateX(100vw); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }

@keyframes chapterRotateYSlow {
  from { transform: rotateY(-90deg); opacity: 0; }
  to { transform: rotateY(0deg); opacity: 1; }

@keyframes chapterScaleBounce {
  from { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.15); opacity: 1; }
  75% { transform: scale(0.95); }
  to { transform: scale(1); }

@keyframes chapterFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }

@keyframes chapterSlideLeftFast {
  from { transform: translateX(-100vw); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }

@keyframes chapterZoomOut {
  from { transform: scale(2); opacity: 0; }
  to { transform: scale(1); opacity: 1; }

@keyframes chapterRotateX {
  from { transform: rotateX(-90deg); opacity: 0; }
  to { transform: rotateX(0deg); opacity: 1; }

@keyframes chapterClipPolygon {
  from { clip-path: polygon(50% 50%, 50% 50%, 50% 50%); opacity: 0; }
  to { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); opacity: 1; }

@keyframes chapterSlideUpSlow {
  from { transform: translateY(100vh); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }

@keyframes chapterScaleInOut {
  from { transform: scale(1.3); opacity: 0; }
  50% { transform: scale(0.9); opacity: 0.7; }
  to { transform: scale(1); opacity: 1; }

@keyframes chapterRotate3DComplex {
  from { transform: rotateX(45deg) rotateY(45deg) translateZ(-500px); opacity: 0; }
  to { transform: rotateX(0deg) rotateY(0deg) translateZ(0); opacity: 1; }

@keyframes chapterFadeBlurFast {
  from { filter: blur(30px); opacity: 0; }
  to { filter: blur(0); opacity: 1; }

@keyframes chapterSlideDiagonalReverse {
  from { transform: translate(-100vw, 100vh) rotate(-45deg); opacity: 0; }
  to { transform: translate(0, 0) rotate(0deg); opacity: 1; }

@keyframes chapterZoomInElastic {
  from { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  80% { transform: scale(0.95); }
  to { transform: scale(1); }

@keyframes chapterFlip3D {
  from { transform: rotateY(180deg) rotateX(20deg); opacity: 0; }
  to { transform: rotateY(0deg) rotateX(0deg); opacity: 1; }

@keyframes chapterClipWipe {
  from { clip-path: inset(0 100% 0 0); opacity: 0; }
  to { clip-path: inset(0 0 0 0); opacity: 1; }

@keyframes chapterRotateZFast {
  from { transform: rotateZ(-180deg); opacity: 0; }
  to { transform: rotateZ(0deg); opacity: 1; }

@keyframes chapterScalePop {
  from { transform: scale(0.2); opacity: 0; }
  70% { transform: scale(1.1); opacity: 1; }
  85% { transform: scale(0.98); }
  to { transform: scale(1); }

@keyframes chapterSlideUpElastic2 {
  from { transform: translateY(150vh); opacity: 0; }
  60% { transform: translateY(-20px); opacity: 1; }
  80% { transform: translateY(10px); }
  to { transform: translateY(0); }

@keyframes chapterZoomOutSlow {
  from { transform: scale(2.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }

@keyframes chapterRotateYFast {
  from { transform: rotateY(90deg); opacity: 0; }
  to { transform: rotateY(0deg); opacity: 1; }

@keyframes chapterFadeScaleSlow {
  from { transform: scale(0.3); opacity: 0; }
  to { transform: scale(1); opacity: 1; }

@keyframes chapterSlideRightSlow {
  from { transform: translateX(120vw); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }

@keyframes chapterRotateXFast {
  from { transform: rotateX(90deg); opacity: 0; }
  to { transform: rotateX(0deg); opacity: 1; }

@keyframes chapterScaleBounceFast {
  from { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.2); opacity: 1; }
  70% { transform: scale(0.9); }
  to { transform: scale(1); }

@keyframes chapterClipDiamond {
  from { clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); opacity: 0; }
  to { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); opacity: 1; }

@keyframes chapterZoomInFast {
  from { transform: scale(0.05); opacity: 0; }
  to { transform: scale(1); opacity: 1; }

@keyframes chapterRotateComplex {
  from { transform: rotate(270deg) scale(0.4); opacity: 0; }
  to { transform: rotate(0deg) scale(1); opacity: 1; }

@keyframes chapterSlideDownFast {
  from { transform: translateY(-100vh); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }

@keyframes chapterFadeBlurSlow {
  from { filter: blur(40px); opacity: 0; }
  to { filter: blur(0); opacity: 1; }

@keyframes chapterScaleElastic {
  from { transform: scale(0.1); opacity: 0; }
  60% { transform: scale(1.18); opacity: 1; }
  80% { transform: scale(0.92); }
  to { transform: scale(1); }

@keyframes chapterRotateZSlow {
  from { transform: rotateZ(270deg); opacity: 0; }
  to { transform: rotateZ(0deg); opacity: 1; }

@keyframes chapterSlideLeftSlow {
  from { transform: translateX(-120vw); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }

@keyframes chapterZoomOutElastic {
  from { transform: scale(3); opacity: 0; }
  60% { transform: scale(0.85); opacity: 1; }
  80% { transform: scale(1.05); }
  to { transform: scale(1); }

@keyframes chapterFlipVerticalFast {
  from { transform: rotateX(-180deg); opacity: 0; }
  to { transform: rotateX(0deg); opacity: 1; }

@keyframes chapterClipStar {
  from { clip-path: polygon(50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%); opacity: 0; }
  to { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); opacity: 1; }

@keyframes chapterRotate3DFast {
  from { transform: rotateX(45deg) rotateY(-45deg); opacity: 0; }
  to { transform: rotateX(0deg) rotateY(0deg); opacity: 1; }

@keyframes chapterScalePopSlow {
  from { transform: scale(0.05); opacity: 0; }
  50% { transform: scale(1.25); opacity: 1; }
  70% { transform: scale(0.88); }
  85% { transform: scale(1.05); }
  to { transform: scale(1); }

@keyframes chapterFinaleExplosion {
  from { transform: scale(0) rotate(360deg); filter: blur(50px); opacity: 0; }
  50% { transform: scale(1.3) rotate(180deg); filter: blur(20px); opacity: 0.8; }
  to { transform: scale(1) rotate(0deg); filter: blur(0); opacity: 1; }


}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}/* ========================================
   60 UNIQUE TEXT REVEAL ANIMATIONS
   ======================================== */

/* Text Reveal 1: Fade Up Staggered */
}
.chapter.active .text-reveal-1 > * {
  opacity: 0;
  transform: translateY(40px);
  animation: textFadeUpStagger 0.32s cubic-bezier(0.4, 0, 0.2, 1) forwards;






/* Text Reveal 2: Scale In */
}
.chapter.active .text-reveal-2 > * {
  opacity: 0;
  transform: scale(0.5);
  animation: textScaleIn 0.36s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;






/* Text Reveal 3: Rotate In */
}
.chapter.active .text-reveal-3 > * {
  opacity: 0;
  transform: rotate(-10deg) translateY(30px);
  animation: textRotateIn 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






/* Text Reveal 4: Slide Left */
}
.chapter.active .text-reveal-4 > * {
  opacity: 0;
  transform: translateX(-100px);
  animation: textSlideLeft 0.32s cubic-bezier(0.4, 0, 0.2, 1) forwards;






/* Text Reveal 5: Slide Right */
}
.chapter.active .text-reveal-5 > * {
  opacity: 0;
  transform: translateX(100px);
  animation: textSlideRight 0.32s cubic-bezier(0.4, 0, 0.2, 1) forwards;






/* Text Reveal 6: Fade with Blur */
}
.chapter.active .text-reveal-6 > * {
  opacity: 0;
  filter: blur(10px);
  animation: textFadeBlur 0.48s cubic-bezier(0.4, 0, 0.2, 1) forwards;






/* Text Reveal 7: Zoom Out */
}
.chapter.active .text-reveal-7 > * {
  opacity: 0;
  transform: scale(2);
  animation: textZoomOut 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






/* Text Reveal 8: Elastic Pop */
}
.chapter.active .text-reveal-8 > * {
  opacity: 0;
  transform: scale(0);
  animation: textElasticPop 0.44s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;






/* Text Reveal 9: Rotate Y */
}
.chapter.active .text-reveal-9 > * {
  opacity: 0;
  transform: rotateY(90deg);
  animation: textRotateY 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






/* Text Reveal 10: Clip Path */
}
.chapter.active .text-reveal-10 > * {
  opacity: 0;
  clip-path: inset(100% 0 0 0);
  animation: textClipPath 0.48s cubic-bezier(0.4, 0, 0.2, 1) forwards;






/* Continue with more text reveals... (11-60) */
/* For brevity, I'll create a pattern generator */

/* Text Reveal Keyframes with Glow and Movement */
@keyframes textFadeUpStagger {
  to { 
    opacity: 1; 
    transform: translateY(0);
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 0 40px rgba(255, 255, 255, 0.4);



}}/* Glowing Text Animation */
.chapter.active .chapter__title,
}
.chapter.active .chapter__subtitle {
  animation: textGlow 3s ease-in-out infinite;

@keyframes textGlow {
  0%, 100% { 
    text-shadow: 
      0 0 10px rgba(255, 255, 255, 0.5),
      0 0 20px rgba(255, 255, 255, 0.3),
      0 0 30px rgba(255, 255, 255, 0.2);}

  50% { 
    text-shadow: 
      0 0 20px rgba(255, 255, 255, 0.8),
      0 0 40px rgba(255, 255, 255, 0.5),
      0 0 60px rgba(255, 255, 255, 0.3),
      0 0 80px rgba(168, 85, 247, 0.4);



}}/* Moving Text - Float Animation */
}
.chapter.active .chapter__text {
  animation: textFloat 4s ease-in-out infinite;

@keyframes textFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }


}/* Pulsing Stats */
}
.chapter.active .chapter__stat {
  animation: statPulse 2s ease-in-out infinite;

@keyframes statPulse {
  0%, 100% { 
    transform: scale(1);
    text-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);}

  50% { 
    transform: scale(1.05);
    text-shadow: 0 12px 60px rgba(255, 255, 255, 0.6), 0 0 40px rgba(168, 85, 247, 0.8);


@keyframes textScaleIn {
  to { 
    opacity: 1; 
    transform: scale(1);
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.6);


@keyframes textRotateIn {
  to { 
    opacity: 1; 
    transform: rotate(0deg) translateY(0);
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.7);


@keyframes textSlideLeft {
  to { opacity: 1; transform: translateX(0); }

@keyframes textSlideRight {
  to { opacity: 1; transform: translateX(0); }

@keyframes textFadeBlur {
  to { opacity: 1; filter: blur(0); }

@keyframes textZoomOut {
  to { opacity: 1; transform: scale(1); }

@keyframes textElasticPop {
  60% { transform: scale(1.2); opacity: 1; }
  80% { transform: scale(0.9); }
  to { transform: scale(1); opacity: 1; }

@keyframes textRotateY {
  to { opacity: 1; transform: rotateY(0deg); }

@keyframes textClipPath {
  to { opacity: 1; clip-path: inset(0 0 0 0); }


}}}}}}}}}}}}}/* Generate remaining text reveals (11-60) with variations */
/* Pattern: Each uses different combinations of transforms and delays */

/* Tabs Section */
}
.checkin-tabs-section {
  position: relative;
  padding: 8rem 2rem;
  max-width: 1400px;
  margin: 0 auto;
  z-index: 2;

}
.tabs-container {
  margin-top: 4rem;

}
.tabs-nav {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;

}
.tab-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  color: white;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 600;
  min-width: 100px;

}
.tab-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

}
.tab-btn.active {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 10px 40px rgba(255, 255, 255, 0.2);
  transform: translateY(-3px) scale(1.05);

}
.tab-icon {
  font-size: 1.5rem;
  transition: transform 0.3s;

}
.tab-btn:hover .tab-icon {
  transform: scale(1.2) rotate(5deg);

}
.tab-label {
  font-size: 0.9rem;

}
.tabs-content {
  position: relative;
  min-height: 600px;

}
.tab-panel {
  display: none;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

}
.tab-panel.active {
  display: block;
  opacity: 1;
  transform: translateY(0);

/* Home Tab - Dashboard */
}
.dashboard-container {
  display: flex;
  flex-direction: column;
  gap: 3rem;

}
.dashboard-mood-indicator {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;

}
.mood-indicator-circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(30px);
  border: 3px solid rgba(255, 255, 255, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  animation: moodIndicatorPulse 3s ease infinite;

@keyframes moodIndicatorPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); }
  50% { transform: scale(1.05); box-shadow: 0 25px 80px rgba(255, 255, 255, 0.3); }

}}
.mood-indicator-emoji {
  font-size: 4rem;
  margin-bottom: 0.5rem;
  animation: emojiFloat 2s ease infinite;

@keyframes emojiFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(5deg); }

}}
.mood-indicator-value {
  font-size: 2.5rem;
  font-weight: 900;
  color: white;
  margin-bottom: 0.25rem;

}
.mood-indicator-label {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.1em;

}
.forecast-timeline {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(30px);
  border-radius: var(--radius);
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.3);

}
.forecast-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: white;
  margin-bottom: 1.5rem;

}
.timeline-scroll {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  scrollbar-width: thin;

}
.timeline-scroll::-webkit-scrollbar {
  height: 6px;

}
.timeline-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;

}
.timeline-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 10px;

}
.timeline-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  min-width: 60px;

}
.timeline-time {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;

}
.timeline-mood {
  font-size: 2rem;
  animation: moodBounce 2s ease infinite;

@keyframes moodBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }

}}
.timeline-bar {
  width: 40px;
  background: linear-gradient(180deg, #ff6b9d 0%, #a855f7 50%, #00d4ff 100%);
  border-radius: 20px 20px 0 0;
  min-height: 20px;
  box-shadow: 0 4px 20px rgba(255, 107, 157, 0.4);
  transition: height 1s cubic-bezier(0.4, 0, 0.2, 1);

}
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem;

}
.metric-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(30px);
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}
.metric-card:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);

}
.metric-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  animation: iconSpin 3s ease infinite;

@keyframes iconSpin {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(10deg); }

}}
.metric-value {
  font-size: 2rem;
  font-weight: 900;
  color: white;
  margin-bottom: 0.5rem;

}
.metric-label {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;

}
.ai-summary-box {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(30px);
  border-radius: var(--radius);
  padding: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);

}
.ai-summary-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;

}
.ai-icon {
  font-size: 2rem;
  animation: aiPulse 2s ease infinite;

@keyframes aiPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }

}}
.ai-summary-header h4 {
  font-size: 1.5rem;
  font-weight: 800;
  color: white;

}
.ai-summary-text {
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.8;
  font-size: 1.1rem;

/* Location Tab */
}
.location-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;

}
.map-search {
  display: flex;
  gap: 1rem;
  max-width: 600px;
  margin: 0 auto;

}
.map-search-input {
  flex: 1;
  padding: 1rem 1.5rem;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50px;
  color: white;
  font-size: 1rem;
  outline: none;

}
.map-search-input::placeholder {
  color: rgba(255, 255, 255, 0.6);

}
.map-search-btn {
  padding: 1rem 1.5rem;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50px;
  color: white;
  cursor: pointer;
  font-size: 1.2rem;
  transition: all 0.3s;

}
.map-search-btn:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: scale(1.1);

}
.mood-map {
  position: relative;
  height: 500px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(30px);
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.3);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);

}
.mood-map #map {
  width: 100%;
  height: 100%;
  border-radius: var(--radius);

}
.mood-map .map-tiles {
  filter: brightness(0.7) contrast(1.2) saturate(1.3);
  border-radius: var(--radius);

}
.map-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1000;

}
.map-overlay .mood-circle-map {
  pointer-events: all;

}
.custom-marker {
  position: relative;
  width: 60px;
  height: 60px;

}
.marker-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  animation: markerPulse 2s ease infinite;

}
.marker-core {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(20px);
  border: 2px solid rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;

@keyframes markerPulse {
  0% {
    transform: scale(1);
    opacity: 0.8;

  50% {
    transform: scale(1.5);
    opacity: 0.4;

  100% {
    transform: scale(2);
    opacity: 0;}


}}}}
.mood-circle-map {
  position: absolute;
  width: 80px;
  height: 80px;
  cursor: pointer;

}
.circle-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  animation: circlePulse 2s ease infinite;

@keyframes circlePulse {
  0% {
    transform: scale(1);
    opacity: 0.8;

  50% {
    transform: scale(1.5);
    opacity: 0.4;

  100% {
    transform: scale(2);
    opacity: 0;}


}}}}
.circle-core {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(20px);
  border: 2px solid rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  transition: all 0.3s;

}
.mood-circle-map:hover .circle-core {
  transform: scale(1.2);
  box-shadow: 0 15px 40px rgba(255, 255, 255, 0.3);

}
.location-details {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(30px);
  border-radius: var(--radius);
  padding: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.3);

}
.location-details h3 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 2rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 2rem;
  letter-spacing: -0.01em;

}
.location-insights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;

}
.insight-item h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 1rem;

}
.insight-item ul {
  list-style: none;
  padding: 0;

}
.insight-item li {
  color: #ffffff;
  opacity: 0.9;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  font-weight: 400;

}
.location-emotion-summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  margin-top: 1rem;

}
.emotion-emoji {
  font-size: 2.5rem;

}
.emotion-word {
  font-size: 1.2rem;
  font-weight: 700;
  color: white;

/* Contacts Tab */
}
.contacts-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;

}
.contacts-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;

}
.contacts-header h3 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 2rem;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.01em;

}
.add-contact-btn {
  padding: 0.75rem 1.5rem;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50px;
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;

}
.add-contact-btn:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: translateY(-2px);

}
.contacts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;

}
.contact-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(30px);
  border-radius: 20px;
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;

}
.contact-card:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);

}
.contact-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff6b9d, #a855f7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: white;
  font-size: 1.2rem;
  flex-shrink: 0;

}
.contact-info {
  flex: 1;

}
.contact-info h4 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0.25rem;

}
.contact-location {
  font-size: 0.9rem;
  color: #ffffff;
  opacity: 0.7;
  margin-bottom: 0.5rem;
  font-weight: 400;

}
.contact-mood {
  display: flex;
  align-items: center;
  gap: 0.5rem;

}
.mood-emoji-small {
  font-size: 1.2rem;

}
.mood-status {
  font-size: 0.9rem;
  color: #ffffff;
  opacity: 0.9;
  font-weight: 400;

}
.contact-action {
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.6);
  transition: all 0.3s;

}
.contact-card:hover .contact-action {
  transform: translateX(5px);
  color: white;

/* Celebrities Tab */
}
.celebrities-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;

}
.celebrities-header {
  text-align: center;
  margin-bottom: 2rem;

}
.celebrities-header h3 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 2rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;

}
.celebrities-header p {
  color: #ffffff;
  opacity: 0.85;
  font-size: 1.1rem;
  font-weight: 400;

}
.celebrities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;

}
.celebrity-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(30px);
  border-radius: var(--radius);
  padding: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}
.celebrity-card:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-5px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);

}
.celebrity-avatar-large {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff6b9d, #a855f7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: white;
  font-size: 1.5rem;
  margin-bottom: 1.5rem;

}
.celebrity-info h4 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;

}
.sentiment-trend {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 50px;
  margin-bottom: 1.5rem;
  font-weight: 600;

}
.sentiment-trend.up {
  background: rgba(0, 255, 0, 0.2);
  color: #00ff00;

}
.sentiment-trend.neutral {
  background: rgba(255, 255, 255, 0.2);
  color: white;

}
.trend-icon {
  font-size: 1.2rem;

}
.celebrity-topics h5 {
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  opacity: 0.95;
  margin-bottom: 0.75rem;

}
.celebrity-topics ul {
  list-style: none;
  padding: 0;
  margin-bottom: 1.5rem;

}
.celebrity-topics li {
  color: #ffffff;
  opacity: 0.85;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  font-weight: 400;

}
.follow-btn {
  width: 100%;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50px;
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;

}
.follow-btn:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: translateY(-2px);

/* Profile Tab */
}
.profile-container {
  display: flex;
  flex-direction: column;
  gap: 3rem;

}
.profile-header {
  text-align: center;
  margin-bottom: 2rem;

}
.profile-avatar-large {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff6b9d, #a855f7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: white;
  font-size: 2.5rem;
  margin: 0 auto 1.5rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);

}
.profile-header h3 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 2rem;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.01em;

}
.emotion-graph-section {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(30px);
  border-radius: var(--radius);
  padding: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.3);

}
.emotion-graph-section h4 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 2rem;
  letter-spacing: -0.01em;

}
.emotion-graph {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  height: 300px;
  gap: 1rem;

}
.graph-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  position: relative;

}
.bar-fill {
  width: 100%;
  background: linear-gradient(180deg, #ff6b9d 0%, #a855f7 50%, #00d4ff 100%);
  border-radius: 10px 10px 0 0;
  min-height: 20px;
  box-shadow: 0 4px 20px rgba(255, 107, 157, 0.4);
  transition: height 1.2s cubic-bezier(0.4, 0, 0.2, 1);

}
.bar-label {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;

}
.patterns-section {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(30px);
  border-radius: var(--radius);
  padding: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.3);

}
.patterns-section h4 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 2rem;
  letter-spacing: -0.01em;

}
.pattern-items {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;

}
.pattern-item {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  transition: all 0.3s;

}
.pattern-item:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateX(10px);

}
.pattern-icon {
  font-size: 2.5rem;
  flex-shrink: 0;

}
.pattern-content h5 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0.5rem;

}
.pattern-content p {
  color: #ffffff;
  opacity: 0.85;
  line-height: 1.7;
  font-weight: 400;

}
.settings-section {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(30px);
  border-radius: var(--radius);
  padding: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.3);

}
.settings-section h4 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 2rem;
  letter-spacing: -0.01em;

}
.settings-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;

}
.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;

}
.setting-label {
  font-size: 1.1rem;
  font-weight: 500;
  color: #ffffff;

}
.setting-controls {
  display: flex;
  gap: 0.5rem;

}
.setting-status {
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);

}
.setting-status.active {
  background: rgba(0, 255, 0, 0.2);
  color: #00ff00;

}
.setting-toggle {
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  font-size: 1.2rem;
  cursor: pointer;
  transition: all 0.3s;

}
.setting-toggle.active {
  background: rgba(255, 255, 255, 0.25);

}
.setting-toggle:hover {
  transform: scale(1.1);

}
.export-btn {
  padding: 0.75rem 1.5rem;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50px;
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;

}
.export-btn:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: translateY(-2px);

/* Responsive for Tabs */
@media (max-width: 768px) {
}}
  .tabs-nav {
    gap: 0.5rem;

}
  .tab-btn {
    min-width: 80px;
    padding: 0.75rem 1rem;

}
  .tab-icon {
    font-size: 1.2rem;

}
  .tab-label {
    font-size: 0.75rem;

  .contacts-grid,
}
  .celebrities-grid {
    grid-template-columns: 1fr;

}
  .location-insights {
    grid-template-columns: 1fr;

}
  .emotion-graph {
    height: 200px;


/* Additional Advanced Animations */
@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);

  to {
    opacity: 1;
    transform: translateX(0);


@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(50px);

  to {
    opacity: 1;
    transform: translateX(0);


@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.8);

  to {
    opacity: 1;
    transform: scale(1);


@keyframes rotateIn {
  from {
    opacity: 0;
    transform: rotate(-10deg) scale(0.9);

  to {
    opacity: 1;
    transform: rotate(0deg) scale(1);


@keyframes floatUp {
  0%, 100% {
    transform: translateY(0);}

  50% {
    transform: translateY(-20px);



}}}}}}}}}}}}}}/* Enhanced card animations */
}
.feature-card-animated {
  animation: scaleIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) backwards;

.feature-card-animated:nth-child(1) { animation-delay: 0.1s; }
.feature-card-animated:nth-child(2) { animation-delay: 0.2s; }
.feature-card-animated:nth-child(3) { animation-delay: 0.3s; }
.feature-card-animated:nth-child(4) { animation-delay: 0.4s; }
.feature-card-animated:nth-child(5) { animation-delay: 0.5s; }
.feature-card-animated:nth-child(6) { animation-delay: 0.6s; }

/* Lottie player styling */
lottie-player {
  display: block;
  margin: 0 auto;

}}
.circle-core lottie-player {
  width: 100% !important;
  height: 100% !important;

/* Enhanced hover effects */
.contact-card,
.celebrity-card,
}
.metric-card {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

.contact-card:hover,
}
.celebrity-card:hover {
  animation: floatUp 2s ease infinite;

/* Smooth entrance animations */
}
.tab-panel.active > * {
  animation: slideInFromRight 0.6s cubic-bezier(0.4, 0, 0.2, 1) backwards;

.tab-panel.active > *:nth-child(1) { animation-delay: 0.1s; }
.tab-panel.active > *:nth-child(2) { animation-delay: 0.2s; }
.tab-panel.active > *:nth-child(3) { animation-delay: 0.3s; }
.tab-panel.active > *:nth-child(4) { animation-delay: 0.4s; }

/* Arnav Simple Profile Styles */
}
.arnav-simple-hero {
  text-align: center;
  margin-bottom: 4rem;
  padding: 3rem 0;

}
.arnav-simple-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
  margin-bottom: 2rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}
.arnav-simple-photo:hover {
  transform: scale(1.05);
  box-shadow: 0 20px 60px rgba(255, 255, 255, 0.1);

}
.arnav-simple-name {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;

}
.arnav-simple-tagline {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  color: #ffffff;
  opacity: 0.95;
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;

}
.arnav-simple-location {
  font-size: 1rem;
  font-weight: 400;
  color: #ffffff;
  opacity: 0.8;

}
.arnav-simple-bio {
  max-width: 800px;
  margin: 0 auto 4rem;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(30px);
  border-radius: var(--radius);
  padding: 3rem;
  border: 1px solid rgba(255, 255, 255, 0.15);

}
.arnav-simple-bio p {
  font-size: 1.05rem;
  line-height: 1.9;
  color: #ffffff;
  opacity: 0.95;
  margin-bottom: 1.5rem;
  font-weight: 400;

}
.arnav-simple-bio p:last-child {
  margin-bottom: 0;

}
.arnav-simple-links {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;

}
.arnav-link {
  font-size: 1rem;
  font-weight: 500;
  color: #ffffff;
  opacity: 0.9;
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}
.arnav-link:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  opacity: 1;

/* Map Icon Overlay */
}
.mood-map-container {
  position: relative;

}
.map-icon-overlay {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 1001;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(20px);
  padding: 0.75rem 1.25rem;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

}
.map-icon-label {
  font-size: 1.5rem;

}
.map-icon-text {
  font-size: 0.9rem;
  font-weight: 600;
  color: #ffffff;

/* Investing Page Styles */
}
.investing-content-section {
  max-width: 1000px;
  margin: 0 auto;

}
.investing-intro {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(30px);
  border-radius: var(--radius);
  padding: 3rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 4rem;

}
.investing-intro h2 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 2rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 1.5rem;
  letter-spacing: -0.01em;

}
.investing-intro p {
  font-size: 1.1rem;
  line-height: 1.9;
  color: #ffffff;
  opacity: 0.95;
  font-weight: 400;

}
.investing-opportunities {
  margin-bottom: 4rem;

}
.investing-opportunities h2 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 2rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 2rem;
  letter-spacing: -0.01em;

}
.opportunities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;

}
.opportunity-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(30px);
  border-radius: var(--radius);
  padding: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}
.opportunity-card:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-5px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);

}
.opportunity-card h3 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;

}
.opportunity-card p {
  font-size: 1rem;
  line-height: 1.8;
  color: #ffffff;
  opacity: 0.9;
  font-weight: 400;

}
.investing-vision {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(30px);
  border-radius: var(--radius);
  padding: 3rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin-bottom: 4rem;

}
.investing-vision h2 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 2rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 1.5rem;
  letter-spacing: -0.01em;

}
.investing-vision p {
  font-size: 1.1rem;
  line-height: 1.9;
  color: #ffffff;
  opacity: 0.95;
  margin-bottom: 1.5rem;
  font-weight: 400;

}
.investing-vision p:last-child {
  margin-bottom: 0;

}
.investing-cta {
  text-align: center;
  padding: 3rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(30px);
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.2);

}
.investing-cta h2 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 2rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;

}
.investing-cta p {
  font-size: 1.1rem;
  color: #ffffff;
  opacity: 0.9;
  margin-bottom: 2rem;
  font-weight: 400;

/* Lottie Player Styles */
}
.lottie-container {
  display: inline-block;
  vertical-align: middle;

.mood-emoji-small .lottie-container,
.timeline-mood .lottie-container,
.mood-indicator-emoji .lottie-container,
.emotion-emoji .lottie-container,
.metric-icon .lottie-container,
}
.ai-icon .lottie-container {
  display: inline-block;
  vertical-align: middle;

/* Responsive Arnav */
@media (max-width: 768px) {
}}
  .arnav-simple-photo {
    width: 100px;
    height: 100px;

}
  .arnav-simple-name {
    font-size: 1.75rem;

}
  .arnav-simple-bio {
    padding: 2rem;

}
  .arnav-simple-links {
    flex-direction: column;
    align-items: center;

}
  .opportunities-grid {
    grid-template-columns: 1fr;


/* Text Reveal 11: Translatey */
}
.chapter.active .text-reveal-11 > * {
  opacity: 0;
  transform: translateY(-50px);
  animation: textReveal11 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






@keyframes textReveal11 {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }


}/* Text Reveal 12: Translatey */
}
.chapter.active .text-reveal-12 > * {
  opacity: 0;
  transform: translateY(50px);
  animation: textReveal12 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






@keyframes textReveal12 {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }


}/* Text Reveal 13: Translatex */
}
.chapter.active .text-reveal-13 > * {
  opacity: 0;
  transform: translateX(-80px);
  animation: textReveal13 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






@keyframes textReveal13 {
  to { opacity: 1; transform: translateX(0); }


}/* Text Reveal 14: Translatex */
}
.chapter.active .text-reveal-14 > * {
  opacity: 0;
  transform: translateX(80px);
  animation: textReveal14 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






@keyframes textReveal14 {
  to { opacity: 1; transform: translateX(0); }


}/* Text Reveal 15: Scale */
}
.chapter.active .text-reveal-15 > * {
  opacity: 0;
  transform: scale(0.3);
  animation: textReveal15 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






@keyframes textReveal15 {
  to { opacity: 1; transform: scale(1); }


}/* Text Reveal 16: Scale */
}
.chapter.active .text-reveal-16 > * {
  opacity: 0;
  transform: scale(1.5);
  animation: textReveal16 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






@keyframes textReveal16 {
  to { opacity: 1; transform: scale(1); }


}/* Text Reveal 17: Rotate */
}
.chapter.active .text-reveal-17 > * {
  opacity: 0;
  transform: rotate(-15deg);
  animation: textReveal17 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






@keyframes textReveal17 {
  to { opacity: 1; transform: rotate(0deg); }


}/* Text Reveal 18: Rotate */
}
.chapter.active .text-reveal-18 > * {
  opacity: 0;
  transform: rotate(15deg);
  animation: textReveal18 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






@keyframes textReveal18 {
  to { opacity: 1; transform: rotate(0deg); }


}/* Text Reveal 19: Rotatey */
}
.chapter.active .text-reveal-19 > * {
  opacity: 0;
  transform: rotateY(45deg);
  animation: textReveal19 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






@keyframes textReveal19 {
  to { opacity: 1; transform: rotateY(0deg); }


}/* Text Reveal 20: Rotatey */
}
.chapter.active .text-reveal-20 > * {
  opacity: 0;
  transform: rotateY(-45deg);
  animation: textReveal20 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






@keyframes textReveal20 {
  to { opacity: 1; transform: rotateY(0deg); }


}/* Text Reveal 21: Rotatex */
}
.chapter.active .text-reveal-21 > * {
  opacity: 0;
  transform: rotateX(30deg);
  animation: textReveal21 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






@keyframes textReveal21 {
  to { opacity: 1; transform: rotateX(0deg); }


}/* Text Reveal 22: Rotatex */
}
.chapter.active .text-reveal-22 > * {
  opacity: 0;
  transform: rotateX(-30deg);
  animation: textReveal22 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






@keyframes textReveal22 {
  to { opacity: 1; transform: rotateX(0deg); }


}/* Text Reveal 23: Rotatez */
}
.chapter.active .text-reveal-23 > * {
  opacity: 0;
  transform: rotateZ(20deg);
  animation: textReveal23 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






@keyframes textReveal23 {
  to { opacity: 1; transform: rotateZ(0deg); }


}/* Text Reveal 24: Rotatez */
}
.chapter.active .text-reveal-24 > * {
  opacity: 0;
  transform: rotateZ(-20deg);
  animation: textReveal24 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






@keyframes textReveal24 {
  to { opacity: 1; transform: rotateZ(0deg); }


}/* Text Reveal 25: Blur */
}
.chapter.active .text-reveal-25 > * {
  opacity: 0;
  transform: translateY(20px);
  animation: textReveal25 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






@keyframes textReveal25 {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }


}/* Text Reveal 26: Opacity */
}
.chapter.active .text-reveal-26 > * {
  opacity: 0;
  transform: translateY(30px);
  animation: textReveal26 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






@keyframes textReveal26 {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }


}/* Text Reveal 27: Translatey */
}
.chapter.active .text-reveal-27 > * {
  opacity: 0;
  transform: translateY(-50px);
  animation: textReveal27 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






@keyframes textReveal27 {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }


}/* Text Reveal 28: Translatey */
}
.chapter.active .text-reveal-28 > * {
  opacity: 0;
  transform: translateY(50px);
  animation: textReveal28 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






@keyframes textReveal28 {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }


}/* Text Reveal 29: Translatex */
}
.chapter.active .text-reveal-29 > * {
  opacity: 0;
  transform: translateX(-80px);
  animation: textReveal29 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






@keyframes textReveal29 {
  to { opacity: 1; transform: translateX(0); }


}/* Text Reveal 30: Translatex */
}
.chapter.active .text-reveal-30 > * {
  opacity: 0;
  transform: translateX(80px);
  animation: textReveal30 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






@keyframes textReveal30 {
  to { opacity: 1; transform: translateX(0); }


}/* Text Reveal 31: Scale */
}
.chapter.active .text-reveal-31 > * {
  opacity: 0;
  transform: scale(0.3);
  animation: textReveal31 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






@keyframes textReveal31 {
  to { opacity: 1; transform: scale(1); }


}/* Text Reveal 32: Scale */
}
.chapter.active .text-reveal-32 > * {
  opacity: 0;
  transform: scale(1.5);
  animation: textReveal32 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






@keyframes textReveal32 {
  to { opacity: 1; transform: scale(1); }


}/* Text Reveal 33: Rotate */
}
.chapter.active .text-reveal-33 > * {
  opacity: 0;
  transform: rotate(-15deg);
  animation: textReveal33 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






@keyframes textReveal33 {
  to { opacity: 1; transform: rotate(0deg); }


}/* Text Reveal 34: Rotate */
}
.chapter.active .text-reveal-34 > * {
  opacity: 0;
  transform: rotate(15deg);
  animation: textReveal34 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






@keyframes textReveal34 {
  to { opacity: 1; transform: rotate(0deg); }


}/* Text Reveal 35: Rotatey */
}
.chapter.active .text-reveal-35 > * {
  opacity: 0;
  transform: rotateY(45deg);
  animation: textReveal35 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






@keyframes textReveal35 {
  to { opacity: 1; transform: rotateY(0deg); }


}/* Text Reveal 36: Rotatey */
}
.chapter.active .text-reveal-36 > * {
  opacity: 0;
  transform: rotateY(-45deg);
  animation: textReveal36 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






@keyframes textReveal36 {
  to { opacity: 1; transform: rotateY(0deg); }


}/* Text Reveal 37: Rotatex */
}
.chapter.active .text-reveal-37 > * {
  opacity: 0;
  transform: rotateX(30deg);
  animation: textReveal37 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






@keyframes textReveal37 {
  to { opacity: 1; transform: rotateX(0deg); }


}/* Text Reveal 38: Rotatex */
}
.chapter.active .text-reveal-38 > * {
  opacity: 0;
  transform: rotateX(-30deg);
  animation: textReveal38 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






@keyframes textReveal38 {
  to { opacity: 1; transform: rotateX(0deg); }


}/* Text Reveal 39: Rotatez */
}
.chapter.active .text-reveal-39 > * {
  opacity: 0;
  transform: rotateZ(20deg);
  animation: textReveal39 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






@keyframes textReveal39 {
  to { opacity: 1; transform: rotateZ(0deg); }


}/* Text Reveal 40: Rotatez */
}
.chapter.active .text-reveal-40 > * {
  opacity: 0;
  transform: rotateZ(-20deg);
  animation: textReveal40 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






@keyframes textReveal40 {
  to { opacity: 1; transform: rotateZ(0deg); }


}/* Text Reveal 41: Blur */
}
.chapter.active .text-reveal-41 > * {
  opacity: 0;
  transform: translateY(20px);
  animation: textReveal41 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






@keyframes textReveal41 {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }


}/* Text Reveal 42: Opacity */
}
.chapter.active .text-reveal-42 > * {
  opacity: 0;
  transform: translateY(30px);
  animation: textReveal42 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






@keyframes textReveal42 {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }


}/* Text Reveal 43: Translatey */
}
.chapter.active .text-reveal-43 > * {
  opacity: 0;
  transform: translateY(-50px);
  animation: textReveal43 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






@keyframes textReveal43 {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }


}/* Text Reveal 44: Translatey */
}
.chapter.active .text-reveal-44 > * {
  opacity: 0;
  transform: translateY(50px);
  animation: textReveal44 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






@keyframes textReveal44 {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }


}/* Text Reveal 45: Translatex */
}
.chapter.active .text-reveal-45 > * {
  opacity: 0;
  transform: translateX(-80px);
  animation: textReveal45 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






@keyframes textReveal45 {
  to { opacity: 1; transform: translateX(0); }


}/* Text Reveal 46: Translatex */
}
.chapter.active .text-reveal-46 > * {
  opacity: 0;
  transform: translateX(80px);
  animation: textReveal46 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






@keyframes textReveal46 {
  to { opacity: 1; transform: translateX(0); }


}/* Text Reveal 47: Scale */
}
.chapter.active .text-reveal-47 > * {
  opacity: 0;
  transform: scale(0.3);
  animation: textReveal47 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






@keyframes textReveal47 {
  to { opacity: 1; transform: scale(1); }


}/* Text Reveal 48: Scale */
}
.chapter.active .text-reveal-48 > * {
  opacity: 0;
  transform: scale(1.5);
  animation: textReveal48 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






@keyframes textReveal48 {
  to { opacity: 1; transform: scale(1); }


}/* Text Reveal 49: Rotate */
}
.chapter.active .text-reveal-49 > * {
  opacity: 0;
  transform: rotate(-15deg);
  animation: textReveal49 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






@keyframes textReveal49 {
  to { opacity: 1; transform: rotate(0deg); }


}/* Text Reveal 50: Rotate */
}
.chapter.active .text-reveal-50 > * {
  opacity: 0;
  transform: rotate(15deg);
  animation: textReveal50 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






@keyframes textReveal50 {
  to { opacity: 1; transform: rotate(0deg); }


}/* Text Reveal 51: Rotatey */
}
.chapter.active .text-reveal-51 > * {
  opacity: 0;
  transform: rotateY(45deg);
  animation: textReveal51 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






@keyframes textReveal51 {
  to { opacity: 1; transform: rotateY(0deg); }


}/* Text Reveal 52: Rotatey */
}
.chapter.active .text-reveal-52 > * {
  opacity: 0;
  transform: rotateY(-45deg);
  animation: textReveal52 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






@keyframes textReveal52 {
  to { opacity: 1; transform: rotateY(0deg); }


}/* Text Reveal 53: Rotatex */
}
.chapter.active .text-reveal-53 > * {
  opacity: 0;
  transform: rotateX(30deg);
  animation: textReveal53 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






@keyframes textReveal53 {
  to { opacity: 1; transform: rotateX(0deg); }


}/* Text Reveal 54: Rotatex */
}
.chapter.active .text-reveal-54 > * {
  opacity: 0;
  transform: rotateX(-30deg);
  animation: textReveal54 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






@keyframes textReveal54 {
  to { opacity: 1; transform: rotateX(0deg); }


}/* Text Reveal 55: Rotatez */
}
.chapter.active .text-reveal-55 > * {
  opacity: 0;
  transform: rotateZ(20deg);
  animation: textReveal55 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






@keyframes textReveal55 {
  to { opacity: 1; transform: rotateZ(0deg); }
}

/* Text Reveal 56: Rotatez */
}
.chapter.active .text-reveal-56 > * {
  opacity: 0;
  transform: rotateZ(-20deg);
  animation: textReveal56 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






@keyframes textReveal56 {
  to { opacity: 1; transform: rotateZ(0deg); }


}/* Text Reveal 57: Blur */
}
.chapter.active .text-reveal-57 > * {
  opacity: 0;
  transform: translateY(20px);
  animation: textReveal57 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






@keyframes textReveal57 {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }


}/* Text Reveal 58: Opacity */
}
.chapter.active .text-reveal-58 > * {
  opacity: 0;
  transform: translateY(30px);
  animation: textReveal58 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






@keyframes textReveal58 {
  to { opacity: 1; transform: translateY(0); }
}

/* Text Reveal 59: Translatey */
}
.chapter.active .text-reveal-59 > * {
  opacity: 0;
  transform: translateY(-50px);
  animation: textReveal59 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;






@keyframes textReveal59 {
  to { opacity: 1; transform: translateY(0); }
}

/* Text Reveal 60: Translatey */
}
.chapter.active .text-reveal-60 > * {
  opacity: 0;
  transform: translateY(50px);
  animation: textReveal60 0.40s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}






@keyframes textReveal60 {
  to { opacity: 1; transform: translateY(0); }
}

/* End of CheckIn Odyssey Styles */