/* Treflyn Barn — fun interactions */

/* —— Cursor glow (desktop) —— */
.cursor-glow {
  position: fixed;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  background: radial-gradient(
    circle,
    rgba(201, 166, 107, 0.14) 0%,
    transparent 68%
  );
  transform: translate(-50%, -50%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity 0.35s ease;
  will-change: left, top;
}

.cursor-glow.on {
  opacity: 1;
}

/* —— Hero slide mouse parallax base —— */
.hero-slides {
  transition: transform 0.35s ease-out;
  will-change: transform;
}

/* —— Hero floating sparkles —— */
.hero-sparkles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.hero-sparkles span {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(224, 196, 154, 0.75);
  box-shadow: 0 0 10px rgba(224, 196, 154, 0.6);
  animation: sparkle float linear infinite;
  opacity: 0;
}

@keyframes sparkle {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.4);
  }
  15% {
    opacity: 0.9;
  }
  85% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    transform: translateY(-90vh) scale(1);
  }
}

/* —— Ripple —— */
.btn {
  isolation: isolate;
}

.btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transform: scale(0);
  animation: rippleOut 0.65s ease-out forwards;
  pointer-events: none;
  z-index: 0;
}

.btn > * {
  position: relative;
  z-index: 1;
}

@keyframes rippleOut {
  to {
    transform: scale(3.5);
    opacity: 0;
  }
}

/* —— 3D tilt wrappers —— */
.tilt {
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out, box-shadow 0.3s ease;
  will-change: transform;
}

.tilt-inner {
  transform: translateZ(20px);
  transition: transform 0.15s ease-out;
}

.gallery-item.tilt:hover,
.about-images figure.tilt:hover,
.sleep-card.tilt:hover {
  z-index: 2;
}

/* —— Magnetic pull feel —— */
.btn-magnetic {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* —— Confetti —— */
.confetti-piece {
  position: fixed;
  width: 8px;
  height: 12px;
  top: -20px;
  z-index: 9999;
  pointer-events: none;
  border-radius: 2px;
  animation: confettiFall linear forwards;
}

@keyframes confettiFall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(105vh) rotate(720deg);
    opacity: 0.15;
  }
}

/* —— Review topics marquee —— */
.topics-marquee {
  overflow: hidden;
  margin: 0 auto 2.25rem;
  max-width: 100%;
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
}

.topics-track {
  display: flex;
  gap: 0.55rem;
  width: max-content;
  animation: marquee 38s linear infinite;
}

.topics-marquee:hover .topics-track {
  animation-play-state: paused;
}

.topics-track .topic {
  flex-shrink: 0;
  cursor: default;
  user-select: none;
}

.topics-track .topic:active {
  transform: scale(0.94);
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* —— Interactive stars in reviews —— */
.score-big .stars {
  display: inline-block;
  letter-spacing: 0.14em;
  cursor: default;
}

.score-big .stars .s {
  display: inline-block;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s;
  color: var(--champagne);
}

.score-big .stars:hover .s {
  animation: starWave 0.6s ease both;
}

.score-big .stars .s:nth-child(1) {
  animation-delay: 0s;
}
.score-big .stars .s:nth-child(2) {
  animation-delay: 0.05s;
}
.score-big .stars .s:nth-child(3) {
  animation-delay: 0.1s;
}
.score-big .stars .s:nth-child(4) {
  animation-delay: 0.15s;
}
.score-big .stars .s:nth-child(5) {
  animation-delay: 0.2s;
}

@keyframes starWave {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  40% {
    transform: translateY(-8px) scale(1.25);
  }
}

/* —— Logo bounce —— */
.logo.logo-bounce .logo-mark {
  animation: logoBounce 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes logoBounce {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.18) rotate(-6deg);
  }
  60% {
    transform: scale(0.94) rotate(3deg);
  }
  100% {
    transform: scale(1) rotate(0);
  }
}

/* —— FAQ fun open —— */
.faq-item.open {
  animation: faqPop 0.4s cubic-bezier(0.34, 1.4, 0.64, 1);
}

@keyframes faqPop {
  0% {
    transform: scale(0.98);
  }
  60% {
    transform: scale(1.01);
  }
  100% {
    transform: scale(1);
  }
}

/* —— Promise number count feel —— */
.promise-card .p-num {
  transition: color 0.3s, letter-spacing 0.35s;
}

.promise-card:hover .p-num {
  color: var(--champagne);
  letter-spacing: 0.18em;
}

/* —— Sleep card wiggle on hover —— */
.sleep-card:hover .sleep-label {
  animation: wiggle 0.5s ease;
}

@keyframes wiggle {
  0%,
  100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-3deg);
  }
  75% {
    transform: rotate(3deg);
  }
}

/* —— Floating book nudge —— */
@keyframes nudge {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

.nav-cta {
  animation: nudge 3.2s ease-in-out infinite;
}

.site-header.scrolled .nav-cta {
  animation: none;
}

/* —— Image reveal scrub —— */
.about-images figure {
  overflow: hidden;
}

.about-images img {
  transition: transform 0.7s var(--ease), filter 0.5s ease;
}

/* —— Interactive meta pills —— */
.hero-meta span {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.25s, border-color 0.25s;
  cursor: default;
}

.hero-meta span:hover {
  transform: translateY(-3px) scale(1.05);
  background: rgba(255, 252, 248, 0.16);
  border-color: rgba(224, 196, 154, 0.55);
}

/* —— Form success celebrate —— */
.form-success.show .check {
  animation: checkBurst 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes checkBurst {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  60% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* —— Pill bounce on host badges —— */
.pill {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pill:hover {
  transform: scale(1.08) rotate(-2deg);
  cursor: default;
}

/* —— Lightbox zoom spring —— */
.lightbox.open img {
  animation: lbSpring 0.45s cubic-bezier(0.34, 1.4, 0.64, 1);
}

@keyframes lbSpring {
  from {
    opacity: 0;
    transform: scale(0.88);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* —— Drag hint on gallery —— */
.gallery-section .section-head .lead::after {
  content: " · hover & click to explore";
  opacity: 0.55;
  font-size: 0.9em;
}

@media (max-width: 720px) {
  .gallery-section .section-head .lead::after {
    content: " · tap to enlarge";
  }

  .cursor-glow {
    display: none !important;
  }

  .topics-track {
    animation-duration: 28s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cursor-glow,
  .hero-sparkles,
  .confetti-piece,
  .topics-track,
  .nav-cta,
  .score-big .stars .s,
  .logo.logo-bounce .logo-mark {
    animation: none !important;
  }

  .topics-track {
    flex-wrap: wrap;
    width: auto;
    justify-content: center;
    max-width: 100%;
  }

  .topics-marquee {
    mask-image: none;
    -webkit-mask-image: none;
    overflow: visible;
  }
}