/* ============================================================
   JP-WEBDesign – samlet stylesheet
   Indeholder: grundstile + animationer
   ============================================================ */

/* ---------- Grundstile ---------- */
[v-cloak]{display:none!important}
html{scroll-behavior:smooth;background:#000}

.aurora{
  background:
    radial-gradient(60% 70% at 15% 110%,rgba(88,159,67,.45),transparent 60%),
    radial-gradient(45% 55% at 90% 0%,rgba(88,159,67,.22),transparent 60%),
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px) 0 0/48px 48px,
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/48px 48px,#000;
  animation:drift 18s ease-in-out infinite alternate;
}
@keyframes drift{to{background-position:8% 0,0 0,0 0,0 0,0 0}}

.pop-enter-active,.pop-leave-active{transition:opacity .2s}
.pop-enter-active .pop-panel,.pop-leave-active .pop-panel{transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.pop-enter-from,.pop-leave-to{opacity:0}
.pop-enter-from .pop-panel,.pop-leave-to .pop-panel{transform:translateY(-12px) scale(.97)}

/* ---------- Hero "rise" – blød opstigning ved load ---------- */
.rise{
  opacity:0;
  transform:translateY(30px);
  animation:riseIn 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes riseIn{to{opacity:1;transform:translateY(0)}}

/* ---------- Scroll-reveal ---------- */
.reveal{
  opacity:0;
  filter:blur(6px);
  transition:
    opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 900ms ease;
  will-change:opacity, transform, filter;
}
.reveal-left  { transform: translateX(-140px) rotate(-6deg) scale(0.92); }
.reveal-right { transform: translateX(140px)  rotate(6deg)  scale(0.92); }
.reveal-up    { transform: translateY(80px)   rotate(2deg)  scale(0.94); }
.reveal-down  { transform: translateY(-80px)  rotate(-2deg) scale(0.94); }
.reveal-zoom  { transform: scale(0.7) rotate(-4deg); }
.reveal-extreme{
  transform: translateY(120px) rotate(8deg) scale(0.85);
  filter: blur(10px);
}

.reveal.is-visible,
.reveal.visible{
  opacity:1;
  filter:blur(0);
  transform:none;
  animation:revealBounce 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes revealBounce{
  0%   { transform: translateY(0)    scale(1); }
  55%  { transform: translateY(-6px) scale(1.015); }
  100% { transform: translateY(0)    scale(1); }
}

/* ---------- Forsinkelser ---------- */
.delay-1, .reveal-delay-1 { transition-delay: 100ms; }
.delay-2, .reveal-delay-2 { transition-delay: 200ms; }
.delay-3, .reveal-delay-3 { transition-delay: 300ms; }
.delay-4, .reveal-delay-4 { transition-delay: 400ms; }
.delay-5, .reveal-delay-5 { transition-delay: 500ms; }
.delay-6, .reveal-delay-6 { transition-delay: 600ms; }

/* ---------- Ryste ---------- */
@keyframes shake{
  0%, 100% { transform: translateX(0) rotate(0); }
  10%      { transform: translateX(-14px) rotate(-2deg); }
  25%      { transform: translateX(12px)  rotate(2deg); }
  40%      { transform: translateX(-9px)  rotate(-1.4deg); }
  55%      { transform: translateX(7px)   rotate(1deg); }
  70%      { transform: translateX(-4px)  rotate(-0.6deg); }
  85%      { transform: translateX(2px)   rotate(0.3deg); }
}
.shake{ animation: shake 800ms cubic-bezier(0.36, 0.07, 0.19, 0.97) 1; }

/* ---------- Puls / glød ---------- */
@keyframes softPulse{
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    filter: drop-shadow(0 0 0 rgba(255,255,255,0));
  }
  50% {
    transform: scale(1.12);
    box-shadow: 0 0 0 14px rgba(255, 255, 255, 0.06);
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.35));
  }
}
.pulse,
.icon-pulse{ animation: softPulse 2.6s ease-in-out infinite; }

/* ---------- Float ---------- */
@keyframes float{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.float      { animation: float 3.6s ease-in-out infinite; }
.float-slow { animation: float 6s ease-in-out infinite; }

/* ---------- Shine ---------- */
.shine{ position: relative; overflow: hidden; }
.shine::after{
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 40%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0.15) 60%,
    transparent 100%
  );
  transform: skewX(-20deg);
  pointer-events: none;
}
.shine.is-visible::after,
.shine.visible::after,
.shine.shine-run::after{
  animation: shineRun 1400ms ease-out 1;
}
@keyframes shineRun{
  0%   { left: -150%; }
  100% { left: 150%; }
}

/* ---------- Hover-effekter ---------- */
.hover-lift{
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 350ms ease;
}
.hover-lift:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 40px -18px rgba(88, 159, 67, 0.55);
}
.hover-glow{
  transition: box-shadow 350ms ease, border-color 350ms ease;
}
.hover-glow:hover{
  border-color: rgba(134, 207, 107, 0.55);
  box-shadow: 0 0 0 1px rgba(134, 207, 107, 0.25),
              0 0 40px -8px rgba(134, 207, 107, 0.45);
}

/* ---------- Reduceret bevægelse ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .hero-video{ display: none; }
  .aurora{ animation: none; }
  .rise{
    animation: none;
    opacity: 1;
    transform: none;
  }
  .reveal,
  .reveal.is-visible,
  .reveal.visible,
  .reveal-extreme,
  .shake,
  .pulse,
  .icon-pulse,
  .float,
  .float-slow,
  .shine.is-visible::after,
  .shine.visible::after,
  .shine.shine-run::after,
  .pop-enter-active,
  .pop-leave-active,
  .pop-panel{
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}