/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.view {
  width: 100%;
  height: 100vh;
  left: 0;
  top: 0;
  /* background-color: rgb(255, 161, 161); */
}

/* app/assets/stylesheets/grid.css */
.grid-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #05050500;
  background-image: 
    linear-gradient(to right, #5353533d 1px, transparent 1px),
    linear-gradient(to bottom, #5353533d 1px, transparent 1px);
  background-size: 280px 280px;
  z-index: 1;
  overflow-x: hidden;
}

.particle {
  position: absolute;
  width: 32px; /* Slightly smaller to fit the line width */
  height: 32px;
  background: #00f2ff;
  border-radius: 2px;
  box-shadow: 0 0 8px #00f2ff;
  z-index: 5;
  pointer-events: none;
  /* Ensure the particle is centered on the line intersection */
  margin-left: -2px; 
  margin-top: -2px;
}

.particle-trail {
  position: absolute;
  background: linear-gradient(to right, rgba(0, 242, 255, 0), rgba(0, 242, 255, 1));
  box-shadow: 0 0 15px #00f2ff;
  pointer-events: none;
  z-index: 5;
  /* Adjusts the gradient direction based on movement */
}

/* For vertical tails, override the gradient */
.particle-trail:nth-child(even) {
  background: linear-gradient(to bottom, rgba(0, 242, 255, 0), rgba(0, 242, 255, 1));
}


.gradient-text {
  background-size: 200% 200%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  display: block;
}


/* HUD */

:root {
  --ink-dim: #7b93b3;
  --volt:    #38d6ff;   /* electric cyan-blue */
  --hot:     #aef0ff;   /* hot white-blue (current) */
}

/* power-system HUD */
.hud {
  position: fixed;
  right: clamp(18px, 3vw, 46px);
  bottom: clamp(18px, 3vw, 36px);
  z-index: 1;
  pointer-events: none;
  text-align: right;
  font-family: "IBM Plex Mono", monospace;
  font-size: 14px;
  color: var(--ink-dim);
  line-height: 1.85;
}

.hud .v {
  color: var(--hot);
}

.hud .pill {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 7px;
  border-radius: 3px;
  border: 1px solid rgba(56, 214, 255, .35);
  color: var(--volt);
  font-size: 14px;
}

@media (max-width: 640px) { 
  .hud { 
    display: none; 
  } 
}


.eyebrow{
    font-family:"IBM Plex Mono",
    monospace; 
    display:flex; 
    align-items:center; 
    gap:13px; 
    margin-bottom:28px;
  }
  .eyebrow::before{ content:""; width:38px; height:1px;
    background:linear-gradient(90deg,var(--volt),transparent);
}


/* PARTNER LOGO */


.showcase-logo {
  width: auto;
  height: 25%;
  fill: #f59e0b; /* Changes vector path color to blue */
  transition: fill 0.2s ease-in-out;
}

.engineer-icon {
  width: 25%;
  height: auto;
  color: #f59e0b;
  transition: color 0.2s ease-in-out;
}

.engineer-icon:hover {
  color: #60a5fa;
}


/* =========================================================
   BASE LOGO
========================================================= */
/* =========================================================
   LOGO CHARGE COMPONENT
========================================================= */

/*
  Default state:
  Keep the original colours from eda-logo.svg.
*/
.eda-logo {
  overflow: visible;

  transition:
    opacity 300ms ease,
    filter 300ms ease,
    transform 300ms ease;
}

/* =========================================================
   ELECTRIC BUTTON — DEFAULT AND HOVER
========================================================= */

.electric-button {
  transition:
    color 300ms ease,
    border-color 300ms ease,
    opacity 300ms ease,
    visibility 300ms ease,
    transform 300ms ease,
    box-shadow 300ms ease;
}


/* =========================================================
   TURBULENCE EFFECT

   is-charging:
   Temporary effect for click 1 and click 2.

   is-charged:
   Permanent effect after click 3.
========================================================= */

.logo-charge.is-charging .eda-logo,
.logo-charge.is-charged .eda-logo {
  opacity: 1;

  /*
    !important ensures that no older logo filter or animation
    overrides the SVG turbulence filter.
  */
  filter:
    url(#eda-yellow-turbulence)
    drop-shadow(0 0 12px rgb(250 204 21 / 100%))
    drop-shadow(0 0 28px rgb(250 204 21 / 75%))
    drop-shadow(0 0 45px rgb(34 211 238 / 35%))
    !important;

  /*
    This animation only changes transform.
    It does not override the turbulence filter.
  */
  animation:
    electric-logo-shake 0.16s steps(2) infinite;
}

/* =========================================================
   CHANGE SVG FILLS TO YELLOW

   Applies during click 1, click 2, and permanently after
   click 3.
========================================================= */

.logo-charge.is-charging .eda-logo path,
.logo-charge.is-charging .eda-logo polygon,
.logo-charge.is-charging .eda-logo circle,
.logo-charge.is-charging .eda-logo ellipse,
.logo-charge.is-charged .eda-logo path,
.logo-charge.is-charged .eda-logo polygon,
.logo-charge.is-charged .eda-logo circle,
.logo-charge.is-charged .eda-logo ellipse {
  fill: #fde047 !important;
}

/*
  Preserve transparent shapes inside the SVG.
*/
.logo-charge.is-charging .eda-logo [fill="none"],
.logo-charge.is-charged .eda-logo [fill="none"] {
  fill: none !important;
}

/*
  Change visible SVG strokes to yellow.
*/
.logo-charge.is-charging
  .eda-logo
  [stroke]:not([stroke="none"]),
.logo-charge.is-charged
  .eda-logo
  [stroke]:not([stroke="none"]) {
  stroke: #fde047 !important;
}

/* =========================================================
   CONTINUOUS LOGO ELECTRIC MOVEMENT

   Only transform is animated here.
   Do not add the filter property to this animation.
========================================================= */

@keyframes electric-logo-shake {
  0% {
    transform: translate(0, 0) scale(1);
  }

  20% {
    transform: translate(1px, -1px) scale(1.02);
  }

  40% {
    transform: translate(-1px, 1px) scale(1.04);
  }

  60% {
    transform: translate(1px, 1px) scale(1.03);
  }

  80% {
    transform: translate(-1px, -1px) scale(1.02);
  }

  100% {
    transform: translate(0, 0) scale(1);
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .logo-charge .electric-button,
  .logo-charge .eda-logo {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* =========================================================
   ELECTRIC ICON BUTTON
========================================================= */

.electric-button {
  color: #fde047;
  background: transparent;
  border: 0;
  box-shadow: none;

  /* Keep the normal arrow cursor */
  cursor: default;
}

.electric-button-icon {
  transform-origin: center;

  filter:
    drop-shadow(0 0 3px rgb(250 204 21 / 35%));

  transition:
    color 300ms ease,
    filter 300ms ease,
    transform 300ms ease;
}

/* Click 1 and click 2 charging effect */
.logo-charge.is-charging .electric-button-icon {
  color: #ffffff;

  animation:
    electric-icon-charge 0.35s ease-in-out infinite alternate;
}

/* Keep the icon visible after click 3 */
.logo-charge.is-charged .electric-button {
  pointer-events: none;
  visibility: visible;
  opacity: 1;
}

/* Continue glowing after click 3 */
.logo-charge.is-charged .electric-button-icon {
  color: #fde047;

  animation:
    electric-icon-charged 0.8s ease-in-out infinite alternate;
}

/* =========================================================
   ELECTRIC ICON ANIMATIONS
========================================================= */

@keyframes electric-icon-charge {
  from {
    transform: scale(1) rotate(-3deg);

    filter:
      drop-shadow(0 0 4px rgb(250 204 21 / 65%))
      drop-shadow(0 0 8px rgb(34 211 238 / 25%));
  }

  to {
    transform: scale(1.3) rotate(3deg);

    filter:
      drop-shadow(0 0 9px rgb(250 204 21 / 100%))
      drop-shadow(0 0 20px rgb(34 211 238 / 65%));
  }
}

@keyframes electric-icon-charged {
  from {
    transform: scale(1);

    filter:
      drop-shadow(0 0 5px rgb(250 204 21 / 65%))
      drop-shadow(0 0 10px rgb(34 211 238 / 25%));
  }

  to {
    transform: scale(1.15);

    filter:
      drop-shadow(0 0 10px rgb(250 204 21 / 100%))
      drop-shadow(0 0 20px rgb(34 211 238 / 50%));
  }
}

/* =========================================================
   DYNAMIC ZAP LINES
========================================================= */

.zap-line {
  fill: none;

  stroke-linecap: round;
  stroke-linejoin: round;

  opacity: 0;

  stroke-dasharray: var(--zap-length);
  stroke-dashoffset: var(--zap-length);

  vector-effect: non-scaling-stroke;
}

/* Thick yellow outer electricity */
.zap-main-outer {
  stroke: #facc15;
  stroke-width: 4;

  filter:
    url(#eda-zap-glow);
}

/* Thin white centre of the main bolt */
.zap-main-core {
  stroke: #ffffff;
  stroke-width: 1.25;
}

/* Smaller cyan/yellow fork branches */
.zap-fork {
  stroke: #67e8f9;
  stroke-width: 1.5;

  filter:
    drop-shadow(
      0 0 4px rgb(250 204 21 / 85%)
    );
}

/* Run when Stimulus adds is-zapping */
.zap-line.is-zapping {
  animation:
    zap-travel var(--zap-duration)
      cubic-bezier(0.16, 1, 0.3, 1)
      forwards,

    zap-width-flicker 80ms
      steps(2)
      infinite;
}

/* Logo impact circle */
.zap-impact {
  fill: rgb(250 204 21 / 25%);
  stroke: #ffffff;
  stroke-width: 2;

  opacity: 0;

  transform-box: fill-box;
  transform-origin: center;

  filter:
    drop-shadow(
      0 0 9px rgb(250 204 21 / 100%)
    );

  animation:
    zap-impact-flash 450ms ease-out forwards;
}

/* =========================================================
   ZAP ANIMATIONS
========================================================= */

@keyframes zap-travel {
  0% {
    opacity: 0;
    stroke-dashoffset: var(--zap-length);
  }

  10% {
    opacity: 1;
  }

  55% {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  75% {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes zap-width-flicker {
  from {
    stroke-width: 1;
  }

  to {
    stroke-width: 3;
  }
}

@keyframes zap-impact-flash {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }

  30% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(4);
  }
}

/* Keep reduced-motion support */
@media (prefers-reduced-motion: reduce) {
  .zap-line,
  .zap-impact {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}