/*
  Elevated Visions: opstijgend logo
  ---------------------------------
  Het logo is in lagen geknipt: tekst (base), platform, dronelichaam en twee rotors.
  Alle lagen zijn even groot als het volledige logo (1413 x 426) of het teken (220 x 215),
  dus ze staan exact op elkaar met position:absolute; inset:0.

  Varianten (klasse op .ev-logo of .ev-mark):
    .ev-hop     kort sprongetje bij verschijnen (menubalk)
    .ev-hover   zweeft zolang de muis of focus erop staat (combineer met .ev-hop)
    .ev-away    stijgt op en vliegt uit beeld, platform blijft staan (bedankmoment)
    .ev-loader  blijft zweven zolang het element bestaat (laadindicator, alleen op .ev-mark)
    .ev-flight  groot moment: opstijgen, hangen, landen (Over-pagina, intro)

  Herstarten van een eenmalige animatie: klasse weghalen, reflow forceren, klasse terugzetten
  (zie ev-logo.js, methode replay()).
*/

.ev-logo, .ev-mark {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}
.ev-logo { aspect-ratio: 1413 / 426; height: 40px; }
.ev-mark { aspect-ratio: 220 / 215; width: 32px; }

.ev-logo img, .ev-mark img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; pointer-events: none; user-select: none;
  backface-visibility: hidden;
}
.ev-drone {
  position: absolute; inset: 0; display: block;
  will-change: transform; transform: translate3d(0, 0, 0); backface-visibility: hidden;
}

/* Rotors draaien elk om hun eigen as (gemeten op de naaf in het originele logo). */
.ev-logo .ev-pl { transform-origin: 44.02% 2%; }
.ev-logo .ev-pr { transform-origin: 52.58% 2%; }
.ev-mark .ev-pl { transform-origin: 23.6% 4%; }
.ev-mark .ev-pr { transform-origin: 78.6% 4%; }

/* Draaiende schijf rond elke rotor, alleen zichtbaar tijdens de vlucht. */
.ev-disc {
  position: absolute; display: block; opacity: 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(27,120,149,.45), rgba(27,120,149,.18) 70%, rgba(27,120,149,0));
}
.ev-logo .ev-dl { left: 41.1%; width: 5.8%; top: -0.4%; height: 4.8%; }
.ev-logo .ev-dr { left: 49.7%; width: 5.8%; top: -0.4%; height: 4.8%; }
.ev-mark .ev-dl { left: 6%;  width: 35%; top: -1%; height: 9.5%; }
.ev-mark .ev-dr { left: 61%; width: 35%; top: -1%; height: 9.5%; }

/* Schaduw op het platform. */
.ev-shadow {
  position: absolute; display: block; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, rgba(13,63,80,.32), rgba(13,63,80,0));
}
.ev-logo .ev-shadow { left: 42%; width: 13%; top: 31.5%; height: 3.4%; }
.ev-mark .ev-shadow { left: 20%; width: 60%; top: 64%;   height: 7%; }

/* ---------- keyframes ---------- */
@keyframes ev-spin  { 0% { transform: scaleX(1) }   50% { transform: scaleX(.3) } 100% { transform: scaleX(1) } }
@keyframes ev-spinb { 0% { transform: scaleX(.3) }  50% { transform: scaleX(1) }  100% { transform: scaleX(.3) } }
@keyframes ev-disc  { 0%, 100% { opacity: .9 } 50% { opacity: .6 } }

/* Timing per tussenstap, zodat de beweging niet stopt en weer optrekt. */
@keyframes ev-hop {
  0%   { transform: translate3d(0, 0, 0);     animation-timing-function: cubic-bezier(.4, 0, .6, 1) }
  12%  { transform: translate3d(0, -1.5%, 0); animation-timing-function: cubic-bezier(.3, 0, .2, 1) }
  46%  { transform: translate3d(0, -24%, 0);  animation-timing-function: cubic-bezier(.45, 0, .55, 1) }
  66%  { transform: translate3d(0, -20%, 0);  animation-timing-function: cubic-bezier(.45, 0, .55, 1) }
  100% { transform: translate3d(0, 0, 0) }
}
@keyframes ev-up  { 0% { transform: translate3d(0, 0, 0) } 100% { transform: translate3d(0, -20%, 0) } }
@keyframes ev-bob { 0%, 100% { transform: translate3d(0, -20%, 0) } 50% { transform: translate3d(0, -25%, 0) } }

@keyframes ev-load    { 0%, 100% { transform: translate3d(0, -18%, 0) } 50% { transform: translate3d(0, -28%, 0) } }
@keyframes ev-load-sh { 0%, 100% { transform: scaleX(.8); opacity: .45 } 50% { transform: scaleX(.6); opacity: .3 } }

@keyframes ev-away {
  0%, 14% { transform: translate3d(0, 0, 0) }
  24%     { transform: translate3d(0, -12%, 0) }
  100%    { transform: translate3d(0, -560%, 0); opacity: 0 }
}
@keyframes ev-away-sh { 0%, 12% { opacity: 0; transform: scaleX(.6) } 22% { opacity: .9; transform: scaleX(1) } 60% { opacity: .3; transform: scaleX(.5) } 100% { opacity: 0; transform: scaleX(.4) } }

@keyframes ev-flight {
  0%, 10% { transform: translate3d(0, 0, 0);    animation-timing-function: cubic-bezier(.4, 0, .6, 1) }
  16%     { transform: translate3d(0, -1.5%, 0); animation-timing-function: cubic-bezier(.3, 0, .2, 1) }
  36%     { transform: translate3d(0, -34%, 0);  animation-timing-function: cubic-bezier(.45, 0, .55, 1) }
  48%     { transform: translate3d(0, -30%, 0) rotate(-1deg); animation-timing-function: cubic-bezier(.45, 0, .55, 1) }
  60%     { transform: translate3d(0, -34%, 0) rotate(.8deg); animation-timing-function: cubic-bezier(.45, 0, .55, 1) }
  72%     { transform: translate3d(0, -32%, 0);  animation-timing-function: cubic-bezier(.5, 0, .4, 1) }
  94%     { transform: translate3d(0, 0, 0);     animation-timing-function: ease-out }
  97%     { transform: translate3d(0, -.8%, 0) }
  100%    { transform: translate3d(0, 0, 0) }
}
@keyframes ev-flight-sh { 0%, 12% { opacity: 0; transform: scaleX(.6) } 20% { opacity: .9; transform: scaleX(1) } 36%, 72% { opacity: .35; transform: scaleX(.55) } 92% { opacity: .9; transform: scaleX(1) } 100% { opacity: 0; transform: scaleX(.6) } }

@keyframes ev-rise { 0%, 55% { opacity: 0; transform: translateY(12px) } 100% { opacity: 1; transform: none } }

/* ---------- varianten ---------- */

/* hop: bij verschijnen van de pagina */
.ev-hop .ev-drone { animation: ev-hop 2.4s linear .35s both; }
.ev-hop .ev-pl    { animation: ev-spin  70ms linear 34 .35s; }
.ev-hop .ev-pr    { animation: ev-spinb 70ms linear 34 .35s; }
.ev-hop .ev-disc  { animation: ev-disc  70ms linear 34 .35s; }

/* hover: zweven zolang er aangewezen wordt (op het element zelf of een ouder met .ev-hover-host).
   Alleen op apparaten die echt kunnen aanwijzen. Op een telefoon blijft :hover na een tik
   'hangen' tot je ergens anders tikt, waardoor de drone eindeloos bleef zweven. Daar is
   een tik nu alleen de sprong (ev-hop), die vanzelf landt. */
@media (hover: hover) {
  .ev-hover:hover .ev-drone, .ev-hover-host:hover .ev-hover .ev-drone,
  .ev-hover-host:focus-visible .ev-hover .ev-drone {
    animation: ev-up 500ms cubic-bezier(.3, 0, .2, 1) both, ev-bob 1.8s ease-in-out 500ms infinite;
  }
  .ev-hover:hover .ev-pl, .ev-hover-host:hover .ev-hover .ev-pl, .ev-hover-host:focus-visible .ev-hover .ev-pl { animation: ev-spin  70ms linear infinite; }
  .ev-hover:hover .ev-pr, .ev-hover-host:hover .ev-hover .ev-pr, .ev-hover-host:focus-visible .ev-hover .ev-pr { animation: ev-spinb 70ms linear infinite; }
  .ev-hover:hover .ev-disc, .ev-hover-host:hover .ev-hover .ev-disc, .ev-hover-host:focus-visible .ev-hover .ev-disc { animation: ev-disc 70ms linear infinite; }
}

/* loader: blijft zweven */
.ev-loader .ev-drone  { animation: ev-load 1.2s ease-in-out infinite; }
.ev-loader .ev-pl     { animation: ev-spin  80ms linear infinite; }
.ev-loader .ev-pr     { animation: ev-spinb 80ms linear infinite; }
.ev-loader .ev-disc   { animation: ev-disc  80ms linear infinite; }
.ev-loader .ev-shadow { animation: ev-load-sh 1.2s ease-in-out infinite; }

/* away: opstijgen en uit beeld, platform blijft */
.ev-away .ev-drone  { animation: ev-away 2.4s cubic-bezier(.6, 0, .8, .4) .3s both; }
.ev-away .ev-pl     { animation: ev-spin  80ms linear 30 .4s; }
.ev-away .ev-pr     { animation: ev-spinb 80ms linear 30 .4s; }
.ev-away .ev-disc   { animation: ev-disc  80ms linear 30 .4s; }
.ev-away .ev-shadow { animation: ev-away-sh 2.6s ease .3s both; }
.ev-rise            { animation: ev-rise 3s ease both; }   /* tekst die na .ev-away verschijnt */

/* flight: groot moment, stijgt, hangt, landt */
.ev-flight .ev-drone  { animation: ev-flight 5.2s linear both; }
.ev-flight .ev-pl     { animation: ev-spin  80ms linear 56 .5s; }
.ev-flight .ev-pr     { animation: ev-spinb 80ms linear 56 .5s; }
.ev-flight .ev-disc   { animation: ev-disc  80ms linear 56 .5s; }
.ev-flight .ev-shadow { animation: ev-flight-sh 5.2s ease both; }

/* Beweging verminderen: alles stil, eindtoestand zichtbaar. */
@media (prefers-reduced-motion: reduce) {
  .ev-logo *, .ev-mark *, .ev-rise { animation: none !important; transition: none !important; }
}