/* ==========================================================================
   EWUPlay — landing motion system
   --------------------------------------------------------------------------
   Loaded by index.html only. Every rule is namespaced with .ewu- and the
   scroll-reveal states are gated behind .ewu-anim, which landing-animations.js
   adds before the first paint. Without JavaScript, or with
   prefers-reduced-motion: reduce, every section keeps its normal visible state.

   Only opacity and transform are animated. Geometry, sizes and positions stay
   untouched; transforms are applied on dedicated wrappers where the original
   layout already uses a transform (hero mascot, hero arrows).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Scroll reveal — progressive enhancement
   -------------------------------------------------------------------------- */
:root {
  --ewu-motion-ease: cubic-bezier(.4, 0, .2, 1);
  --ewu-reveal-distance: 10px;
}

@media (prefers-reduced-motion: no-preference) {
  .ewu-anim .ewu-reveal,
  .ewu-anim .ewu-reveal-surface {
    opacity: 0;
    transform: translateY(var(--ewu-reveal-distance));
  }

  .ewu-anim .ewu-reveal--fade { transform: none; }

  .ewu-anim .ewu-reveal.is-revealed,
  .ewu-anim .ewu-reveal-surface.is-revealed {
    opacity: 1;
    transform: none;
    transition:
      opacity var(--ewu-reveal-duration, 900ms) var(--ewu-motion-ease) var(--ewu-delay, 0ms),
      transform var(--ewu-reveal-duration, 900ms) var(--ewu-motion-ease) var(--ewu-delay, 0ms);
  }

  .ewu-anim .ewu-reveal-group .ewu-reveal-item {
    opacity: 0;
  }

  .ewu-anim .ewu-reveal-group .ewu-reveal-item:not(.ewu-reveal-item--fade) {
    transform: translateY(var(--ewu-reveal-distance));
  }

  /* Decorative items that already use transform for their own rotation
     (the arrows between the steps) only fade: this rule must never set
     transform on them. */
  .ewu-anim .ewu-reveal-group.is-revealed .ewu-reveal-item {
    opacity: 1;
    transition:
      opacity var(--ewu-reveal-duration, 900ms) var(--ewu-motion-ease) var(--ewu-reveal-delay, 0ms),
      transform var(--ewu-reveal-duration, 900ms) var(--ewu-motion-ease) var(--ewu-reveal-delay, 0ms);
  }

  .ewu-anim .ewu-reveal-group.is-revealed .ewu-reveal-item:not(.ewu-reveal-item--fade) {
    transform: none;
  }

  /* The information panel reveals as one surface; its content follows. */
  .ewu-anim .ewu-reveal-surface.is-revealed {
    transition-duration: 900ms;
  }

  /* Reveal items that are interactive keep a short hover transition of their
     own; without this the reveal transition would win and the hover would
     change colour instantly. */
  .ewu-anim .ewu-reveal-group.is-revealed .ewu-step {
    transition:
      opacity var(--ewu-reveal-duration, 900ms) var(--ewu-motion-ease) var(--ewu-reveal-delay, 0ms),
      transform var(--ewu-reveal-duration, 900ms) var(--ewu-motion-ease) var(--ewu-reveal-delay, 0ms),
      background-color 220ms ease 0ms;
  }

  .ewu-anim .ewu-reveal-group.is-revealed .ewu-support__cta {
    transition:
      opacity var(--ewu-reveal-duration, 900ms) var(--ewu-motion-ease) var(--ewu-reveal-delay, 0ms),
      transform var(--ewu-reveal-duration, 900ms) var(--ewu-motion-ease) var(--ewu-reveal-delay, 0ms),
      background-color 220ms ease 0ms,
      color 220ms ease 0ms;
  }
}

/* --------------------------------------------------------------------------
   2. Hero — one-time entrance on page load
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .ewu-hero-enter {
    animation: ewu-hero-enter 900ms var(--ewu-motion-ease) both;
    animation-delay: var(--ewu-delay, 0ms);
  }
}

@keyframes ewu-hero-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   3. Hero mascot — gentle vertical float
   --------------------------------------------------------------------------
   .ewu-hero-mascot keeps its own positioning transform (translateY(-10px) on
   mobile). The float lives on an inner wrapper so the two never collide. */
.ewu-mascot-float {
  display: flex;
  width: 100%;
  justify-content: center;
}

@media (prefers-reduced-motion: no-preference) {
  .ewu-mascot-float {
    animation: ewu-mascot-float 5.6s ease-in-out 900ms infinite;
    will-change: transform;
  }
}

@keyframes ewu-mascot-float {
  0%,
  100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(calc(-1 * var(--ewu-mascot-lift, 8px))) rotate(.6deg); }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 767.98px) {
  .ewu-mascot-float {
    --ewu-mascot-lift: 6px;
    animation-duration: 5.8s;
  }
}

/* --------------------------------------------------------------------------
   4. Decor — independent ambient motion in every illustrated section
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .ewu-cloud--top {
    animation: ewu-cloud-drift 18s ease-in-out -4s infinite alternate;
  }
  .ewu-cloud--bottom {
    animation: ewu-cloud-drift 23s ease-in-out -11s infinite alternate;
  }
  .ewu-support-footer__cloud {
    animation: ewu-cloud-drift-soft 22s ease-in-out -7s infinite alternate;
  }

  .ewu-star--a {
    --ewu-star-min: .58;
    animation: ewu-star-glow 4.4s ease-in-out -1.2s infinite;
  }
  .ewu-star--b {
    --ewu-star-min: .54;
    animation: ewu-star-glow 3.7s ease-in-out -2.4s infinite;
  }
  .ewu-star--c {
    --ewu-star-min: .56;
    animation: ewu-star-glow 4.9s ease-in-out -.7s infinite;
  }
  .ewu-star--d {
    --ewu-star-min: .52;
    animation: ewu-star-glow 5.2s ease-in-out -3.1s infinite;
  }

  .ewu-feature__star--a {
    --ewu-star-min: .5;
    animation: ewu-star-glow 3.8s ease-in-out -1.6s infinite;
  }
  .ewu-feature__star--b {
    --ewu-star-min: .56;
    animation: ewu-star-glow 4.6s ease-in-out -3s infinite;
  }

  .ewu-support-footer__star--a {
    --ewu-star-min: .58;
    animation: ewu-star-glow-soft 5.4s ease-in-out -1.8s infinite;
  }
  .ewu-support-footer__star--b {
    --ewu-star-min: .54;
    animation: ewu-star-glow-soft 6.2s ease-in-out -4.6s infinite;
  }
  .ewu-support-footer__star--c {
    --ewu-star-min: .56;
    animation: ewu-star-glow-soft 5.8s ease-in-out -3.2s infinite;
  }
}

@keyframes ewu-cloud-drift {
  from { transform: translate3d(-14px, 1px, 0); }
  to { transform: translate3d(16px, -6px, 0); }
}

@keyframes ewu-cloud-drift-soft {
  from { transform: translate3d(-10px, 2px, 0); }
  to { transform: translate3d(12px, -4px, 0); }
}

@keyframes ewu-star-glow {
  0%,
  100% {
    opacity: var(--ewu-star-min, .56);
    transform: scale(.92) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.08) rotate(6deg);
  }
}

@keyframes ewu-star-glow-soft {
  0%,
  100% {
    opacity: var(--ewu-star-min, .56);
    transform: scale(.95) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.05) rotate(-4deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .ewu-feature__mascot {
    transform-origin: 50% 100%;
    animation: ewu-feature-float 5.2s ease-in-out -1.1s infinite;
  }

  .ewu-support__mascot {
    animation: ewu-support-float 6.4s ease-in-out -1.4s infinite;
  }

  .ewu-support-footer__cube--a {
    --ewu-cube-angle: -8deg;
    animation: ewu-cube-float 5.8s ease-in-out -2.2s infinite;
  }

  .ewu-support-footer__cube--b {
    --ewu-cube-angle: 8deg;
    animation: ewu-cube-float 6.6s ease-in-out -4.1s infinite;
  }
}

@keyframes ewu-feature-float {
  0%,
  100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-5px) rotate(-.8deg); }
}

@keyframes ewu-support-float {
  0%,
  100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(.5deg); }
}

@keyframes ewu-cube-float {
  0%,
  100% { transform: translateY(0) rotate(var(--ewu-cube-angle)); }
  50% {
    transform: translateY(-9px) rotate(calc(var(--ewu-cube-angle) + 4deg));
  }
}

/* --------------------------------------------------------------------------
   5. Information panel — checks fade in with a restrained scale
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .ewu-anim .ewu-feature__benefits .ewu-reveal-item {
    transform: none;
    transition: opacity 650ms var(--ewu-motion-ease) var(--ewu-reveal-delay, 0ms);
  }

  .ewu-anim .ewu-feature__benefits .ewu-reveal-item .ewu-check {
    transform: scale(.96);
    transition: transform 650ms var(--ewu-motion-ease) var(--ewu-reveal-delay, 0ms);
  }

  .ewu-anim .ewu-feature.is-revealed .ewu-feature__benefits .ewu-reveal-item {
    opacity: 1;
    transform: none;
    transition: opacity 650ms var(--ewu-motion-ease) var(--ewu-reveal-delay, 0ms);
  }

  .ewu-anim .ewu-feature.is-revealed .ewu-feature__benefits .ewu-reveal-item .ewu-check {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   6. Micro-interactions
   -------------------------------------------------------------------------- */
.ewu-btn-hero {
  transition:
    background-color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.ewu-btn-hero .ewu-icon {
  transition: transform 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .ewu-btn-hero:hover .ewu-icon { transform: translateX(4px); }
}

.ewu-btn-hero:focus-visible .ewu-icon { transform: translateX(4px); }

/* Calm hover on tariff rows; the featured row keeps its stronger tint. */
.ewu-plan-table tbody tr { transition: background-color 170ms ease; }

.ewu-plan-btn {
  transition:
    background-color 160ms ease,
    color 160ms ease;
}

/* Slightly quicker than the old 300ms, no new movement added. */
.ewu-step {
  transition:
    background-color 170ms ease,
    transform 170ms ease;
}

.ewu-step__icon,
.ewu-plan-name img {
  transition: transform 240ms var(--ewu-motion-ease);
}

@media (hover: hover) and (pointer: fine) {
  .ewu-step:hover .ewu-step__icon {
    transform: translateY(-2px) rotate(-4deg);
  }

  .ewu-plan-table tbody tr:hover .ewu-plan-name img {
    transform: translateY(-2px) rotate(5deg);
  }
}

/* --------------------------------------------------------------------------
   7. Reduced motion — everything stays in its normal state
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ewu-anim .ewu-reveal,
  .ewu-anim .ewu-reveal-surface,
  .ewu-anim .ewu-reveal-group .ewu-reveal-item {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .ewu-hero-enter {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .ewu-mascot-float,
  .ewu-feature__mascot,
  .ewu-support__mascot,
  .ewu-cloud--top,
  .ewu-cloud--bottom,
  .ewu-support-footer__cloud,
  .ewu-star--a,
  .ewu-star--b,
  .ewu-star--c,
  .ewu-star--d,
  .ewu-feature__star--a,
  .ewu-feature__star--b,
  .ewu-support-footer__star--a,
  .ewu-support-footer__star--b,
  .ewu-support-footer__star--c,
  .ewu-support-footer__cube--a,
  .ewu-support-footer__cube--b {
    animation: none;
  }

  .ewu-btn-hero:hover,
  .ewu-step:hover,
  .ewu-btn-hero:hover .ewu-icon,
  .ewu-btn-hero:focus-visible .ewu-icon,
  .ewu-step:hover .ewu-step__icon,
  .ewu-plan-table tbody tr:hover .ewu-plan-name img {
    transform: none;
  }
}