/* madushka.com — immersive effects (loaded by js/effects.js) */

/* ---------- Gradient text shimmer ---------- */
.grad-text {
  background-size: 200% auto;
  animation: fx-shimmer 10s ease-in-out infinite;
}
@keyframes fx-shimmer {
  0%, 100% { background-position: 0% center; }
  50%      { background-position: 100% center; }
}

/* ---------- Aurora blob hue shift ---------- */
.blob.b1 { animation: drift 26s ease-in-out infinite, fx-aurora 48s ease-in-out infinite; }
.blob.b2 { animation: drift 26s ease-in-out infinite, fx-aurora 56s ease-in-out infinite reverse; }
.blob.b3 { animation: drift 26s ease-in-out infinite, fx-aurora 64s ease-in-out infinite; animation-delay: -14s, -8s; }
@keyframes fx-aurora {
  0%, 100% { filter: blur(80px) hue-rotate(0deg); }
  50%      { filter: blur(80px) hue-rotate(28deg); }
}

/* ---------- Film grain ---------- */
.bg-scene::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  animation: fx-grain 8s steps(8) infinite;
}
html.dark .bg-scene::after { opacity: .05; }
@keyframes fx-grain {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(-2%, -3%); }
  50%      { transform: translate(3%, 1%); }
  75%      { transform: translate(-1%, 2%); }
}

/* ---------- Reveal variants (only while hidden — never fight .visible) ---------- */
.reveal.reveal-left.reveal-armed:not(.visible)  { transform: translate3d(-32px, 28px, 0); }
.reveal.reveal-right.reveal-armed:not(.visible) { transform: translate3d(32px, 28px, 0); }
.reveal.reveal-scale.reveal-armed:not(.visible) { transform: translate3d(0, 28px, 0) scale(.94); }
.reveal.reveal-blur.reveal-armed:not(.visible)  { filter: blur(10px); opacity: 0; transform: translate3d(0, 28px, 0); }
.reveal.visible {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* ---------- Magnetic / tilt glass cards ---------- */
.glass.fx-tilt {
  transform: perspective(900px) rotateX(var(--fx-ry, 0deg)) rotateY(var(--fx-rx, 0deg)) translateY(var(--fx-lift, 0));
  transform-style: preserve-3d;
  will-change: transform;
}
.glass.fx-tilt.hoverable:hover,
.glass.fx-tilt.fx-tilt-hover { --fx-lift: -5px; }

/* ---------- Cursor spotlight on glass ---------- */
.glass.spotlight {
  position: relative;
  overflow: hidden;
}
.glass.spotlight::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s;
  background: radial-gradient(
    520px circle at var(--fx-spot-x, 50%) var(--fx-spot-y, 50%),
    rgba(255, 255, 255, .22),
    transparent 42%
  );
  z-index: 1;
}
html.dark .glass.spotlight::before {
  background: radial-gradient(
    520px circle at var(--fx-spot-x, 50%) var(--fx-spot-y, 50%),
    rgba(255, 255, 255, .08),
    transparent 42%
  );
}
.glass.spotlight.fx-spot-active::before { opacity: 1; }
.glass.spotlight > * { position: relative; z-index: 2; }

/* ---------- Ken Burns (photos) ---------- */
.fx-kenburns {
  overflow: hidden;
}
.fx-kenburns > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 7s cubic-bezier(.25, .1, .25, 1);
  will-change: transform;
}
.fx-kenburns:hover > img,
.fx-kenburns.fx-kenburns-on > img {
  transform: scale(1.08);
}

/* ---------- Number counters ---------- */
.stat .num.fx-counting {
  font-variant-numeric: tabular-nums;
}

/* ---------- Pin storytelling ---------- */
.pin-story {
  margin: clamp(48px, 8vw, 88px) 0;
}
.pin-story-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
@media (max-width: 820px) {
  .pin-story-layout { grid-template-columns: 1fr; }
}
.pin-story-pin {
  position: sticky;
  top: calc(var(--nav-h) + 20px);
}
.pin-story-panel {
  padding: clamp(22px, 3.5vw, 32px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.pin-slide {
  display: none;
  animation: fx-pin-in .45s cubic-bezier(.2, .7, .3, 1) both;
}
.pin-slide.is-active { display: block; }
@keyframes fx-pin-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pin-slide .pin-kicker {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.pin-slide h3 {
  font-size: clamp(22px, 3.2vw, 30px);
  font-weight: 800;
  margin-bottom: 10px;
}
.pin-slide p {
  color: var(--text-soft);
  font-size: 15.5px;
  line-height: 1.65;
  margin: 0;
}
.pin-story-dots {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}
.pin-story-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--divider);
  transition: transform .25s, background .25s;
}
.pin-story-dots span.is-active {
  background: var(--accent);
  transform: scale(1.25);
}
.pin-step {
  min-height: clamp(160px, 30vh, 280px);
  display: flex;
  align-items: center;
  padding: 20px 0;
}
@media (max-width: 820px) {
  .pin-step {
    min-height: clamp(120px, 22vh, 200px);
    padding: 14px 0;
  }
  .pin-story-pin {
    position: relative;
    top: auto;
  }
}
.pin-step-inner {
  max-width: 520px;
}
.pin-step .eyebrow { margin-bottom: 10px; }
.pin-step h3 {
  font-size: clamp(20px, 2.8vw, 26px);
  font-weight: 800;
  margin-bottom: 8px;
}
.pin-step p {
  color: var(--text-soft);
  font-size: 15.5px;
  line-height: 1.65;
  margin: 0;
}

/* ---------- Travel map storytelling ---------- */
.tm-route {
  stroke: var(--accent);
  stroke-width: 3;
  stroke-dasharray: 8 10;
  fill: none;
  opacity: .75;
}
.tm-marker-home .tm-pin {
  animation: fx-pin-pulse 2.4s ease-in-out infinite;
}
@keyframes fx-pin-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(96, 111, 248, .45); }
  50%      { box-shadow: 0 0 0 10px rgba(96, 111, 248, 0); }
}

/* ---------- Command palette polish ---------- */
.cp-overlay {
  transition: background .28s, backdrop-filter .28s;
}
body.cp-open .cp-overlay {
  background: rgba(20, 24, 40, .48);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}
html.dark body.cp-open .cp-overlay { background: rgba(0, 0, 0, .62); }
body.cp-open .cp-panel {
  animation: fx-cp-panel .32s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes fx-cp-panel {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.cp-item {
  transition: transform .18s, background .18s, box-shadow .18s;
}
.cp-item.fx-cp-enter {
  animation: fx-cp-item .28s cubic-bezier(.2, .7, .3, 1) both;
  animation-delay: calc(var(--fx-cp-i, 0) * 30ms);
}
@keyframes fx-cp-item {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
.cp-item.active {
  transform: translateX(4px);
  box-shadow: inset 3px 0 0 var(--accent);
  background: var(--glass-fill-soft);
}

/* ---------- Parallax layers ---------- */
[data-parallax] { will-change: transform; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .grad-text { animation: none; }
  .blob { animation: none !important; filter: blur(80px) !important; }
  .bg-scene::after { animation: none; opacity: .02; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
  .pin-slide { animation: none; }
  .tm-marker-home .tm-pin { animation: none; }
  .fx-kenburns > img { transition: none; }
  body.cp-open .cp-panel { animation: none; }
  .cp-item.fx-cp-enter { animation: none; }
}