/* ==========================================================================
   Ewoke Coffee: visual effects (assets/js/fx.js adds the elements and classes).
   Rule of thumb: nothing here moves text on scroll. Light, lines, dots and icons move.
   Everything is decoration, and every motion is switched off for people who ask for reduced motion.
   ========================================================================== */

/* 1. Aurora: slow red and gold light drifting behind the dark sections ------- */
.fx-aurora {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  opacity: 0.6;
}
.fx-aurora i {
  position: absolute;
  width: 56vmax;
  height: 56vmax;
  border-radius: 50%;
  will-change: transform;
}
.fx-aurora i:nth-child(1) { top: -30%; left: -12%; background: radial-gradient(circle, rgba(158, 47, 30, 0.5) 0%, rgba(158, 47, 30, 0.3) 28%, rgba(158, 47, 30, 0.1) 52%, transparent 72%); animation: fx-drift-a 38s ease-in-out infinite alternate; }
.fx-aurora i:nth-child(2) { bottom: -38%; right: -10%; background: radial-gradient(circle, rgba(176, 141, 94, 0.4) 0%, rgba(176, 141, 94, 0.24) 28%, rgba(176, 141, 94, 0.08) 52%, transparent 72%); animation: fx-drift-b 46s ease-in-out infinite alternate; }
.fx-aurora i:nth-child(3) { top: 10%; left: 38%; width: 40vmax; height: 40vmax; background: radial-gradient(circle, rgba(126, 36, 22, 0.46) 0%, rgba(126, 36, 22, 0.27) 28%, rgba(126, 36, 22, 0.09) 52%, transparent 72%); animation: fx-drift-c 52s ease-in-out infinite alternate; }
@keyframes fx-drift-a { to { transform: translate3d(22vw, 14vh, 0) scale(1.15); } }
@keyframes fx-drift-b { to { transform: translate3d(-24vw, -12vh, 0) scale(1.1); } }
@keyframes fx-drift-c { to { transform: translate3d(-14vw, 16vh, 0) scale(0.9); } }


/* 2. Dots that link up near the pointer (canvas in three inner-page heroes) ---------------------- */
.fx-net { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }

/* 4. Lines that draw themselves across the process steps ------------------------ */
.fx-ready .step-card__rule {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) var(--fx-delay, 0ms), max-width 0.5s ease;
}
.fx-ready .step-card.fx-in .step-card__rule { transform: none; }
.fx-ready .process__col { position: relative; border-top-color: rgba(255, 255, 255, 0.14); }
.fx-ready .process__col::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.75);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1) var(--fx-delay, 0ms);
}
.fx-ready .process__col.fx-in::before { transform: none; }

/* 6. Live dot beside "Forward booking" ------------------------------------------ */
.chip--booking { display: inline-flex; align-items: center; gap: 8px; }
.chip--booking::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3c9a5f;
  box-shadow: 0 0 0 0 rgba(60, 154, 95, 0.55);
}
@media (prefers-reduced-motion: no-preference) {
  .chip--booking::before { animation: fx-pulse 2.2s ease-out infinite; }
  @keyframes fx-pulse {
    0% { box-shadow: 0 0 0 0 rgba(60, 154, 95, 0.55); }
    70%, 100% { box-shadow: 0 0 0 8px rgba(60, 154, 95, 0); }
  }
}

/* 7. Cursor spotlight on cards: a soft glow follows the pointer and fades in with the hover.
   --fx-glow is a registered number, so the glow's strength can transition (a gradient cannot). */
@property --fx-glow { syntax: "<number>"; inherits: false; initial-value: 0; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  body .tile, body .help__card, body .overview__card, body .bag {
    background-image: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(158, 47, 30, calc(0.1 * var(--fx-glow))), transparent 65%);
    transition: translate 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), scale 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), rotate 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s, border-color 0.3s, background-color 0.2s, --fx-glow 0.4s ease;
    will-change: translate, scale, rotate;
    backface-visibility: hidden;
  }
  body .tile--dark { background-image: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, calc(0.12 * var(--fx-glow))), transparent 65%); }
  body .tile:hover, body .help__card:hover, body .overview__card:hover, body .bag:hover {
    --fx-glow: 1;
    box-shadow: 0 26px 48px rgba(38, 14, 10, 0.18), inset 0 0 0 1px rgba(158, 47, 30, 0.32);
  }
  body .tile--dark:hover { box-shadow: 0 26px 48px rgba(38, 14, 10, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.28); }
}

/* 5. Button light: one steady glide of light across the red and dark buttons.
   It moves the gradient's position (no restarts on hover, no layout shift), so it stays smooth. */
@media (prefers-reduced-motion: no-preference) {
  .btn--primary, .btn--secondary { position: relative; overflow: hidden; }
  .btn--primary::after, .btn--secondary::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, 0.26) 50%, transparent 62%) no-repeat;
    background-size: 280% 100%;
    background-position: 190% 0;
    animation: fx-sheen 7s cubic-bezier(0.45, 0, 0.25, 1) infinite;
    pointer-events: none;
  }
  .btn--secondary::after { animation-delay: -3.5s; }
  @keyframes fx-sheen { 0%, 58% { background-position: 190% 0; } 100% { background-position: -90% 0; } }
}

/* 8. Flavour wheel: a clean clockwise reveal. A conic mask opens around the wheel while the labels
   stay upright. The mask is dropped once it has finished, so nothing is ever clipped afterwards. */
@property --fx-sweep { syntax: "<angle>"; inherits: false; initial-value: 390deg; }
@media (prefers-reduced-motion: no-preference) {
  .fx-ready .wheel__svg:not(.fx-done) {
    -webkit-mask-image: conic-gradient(from 0deg, #000 calc(var(--fx-sweep) - 36deg), transparent var(--fx-sweep));
    mask-image: conic-gradient(from 0deg, #000 calc(var(--fx-sweep) - 36deg), transparent var(--fx-sweep));
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    transition: --fx-sweep 1.3s cubic-bezier(0.4, 0, 0.2, 1), scale 1.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
  }
  .fx-ready .wheel__svg.fx-pre { --fx-sweep: 0deg; scale: 0.94; opacity: 0.4; }
}

/* 9. Floating items placed by fx.js: coffee beans in the About band --- */
.fx-float {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  background-repeat: no-repeat;
  pointer-events: none;
  will-change: transform;
}