/* Animated rocket logo for the Launchpad login screen — crane places the
   rocket on load, rocket launches straight up on successful login.
   See /Users/drewksparks/GitHub/etc/launchpad-logo-animation for the source
   sandbox this was developed and tuned in. */

:root {
  --primary-accent: var(--action);   /* Combustion lines, Crane, Hazard */
  --secondary-accent: var(--accent); /* Cyan Docking Chamber Ring*/
  --rocket-color: #ffffff;     /* Spacecraft Hull */
  --chamber-bg: var(--surface-raised);       /* Chamber Wall Dark BG*/

  --place-duration: 3.8s;
  --kinematic-ease: cubic-bezier(0.33, 1, 0.68, 1);

  /* Matches the DriverLanding brand logo's idle hover hum exactly */
  --rumble-speed: 0.5s;
  --rumble-intensity-x: 1px;
  --rumble-intensity-y: 1px;
}

.launchpad-svg {
  width: 100%;
  height: 100%;
}

.launchpad-svg .arrow {
  fill: var(--rocket-color);
}

/* Shared diagonal frame for the rocket + exhaust. Rest orientation converts
   the brand's native diagonal arrow to upright (12 o'clock) on the pad; the
   launch keyframes animate this same transform back toward the brand's
   native diagonal flight angle, so the exhaust (authored for that diagonal
   frame) stays glued to the engine at every instant of the rotation. */
.diagonal-frame {
  transform-origin: 51px 50px;
  transform: translate(2.15px, 2.2px) rotate(-45deg);
}

/* =========================================================
   Kinematic Pivot Points
   ========================================================= */
.shoulder-assembly,
.payload-shoulder-carrier {
  transform-origin: 27px 7.5px;
}

.elbow-assembly,
.payload-elbow-carrier {
  transform-origin: 39px 17.5px;
}

.claw-gripper {
  transform-origin: 41.3px 26px;
}

.rumble-group {
  transform-origin: 42.3px 48px;
}

/* =========================================================
   Placement Keyframes (Loading State)
   ========================================================= */

/* Shoulder sweep in, then retract fully out of the circular viewport —
   as if the crane has swung away to go work on the next job. */
@keyframes shoulderPlace {
  0%        { transform: translate(-70px, -60px) rotate(-100deg); }
  22%, 56%  { transform: translate(0, 0) rotate(0deg); }
  72%       { transform: translate(-4px, -6px) rotate(-25deg); }
  100%      { transform: translate(-70px, -60px) rotate(-100deg); }
}

/* Shoulder carrier for payload — mirrors shoulderPlace's entry sweep exactly
   (same pivot, same values) so the rocket reads as held by the claw and
   pulled in from off-screen, then locks in place once released at touchdown. */
@keyframes payloadShoulderSync {
  0%       { transform: translate(-70px, -60px) rotate(-100deg); }
  22%, 100% { transform: translate(0, 0) rotate(0deg); }
}

/* Elbow articulation */
@keyframes elbowPlace {
  0% { transform: rotate(32deg); }
  22%, 56% { transform: rotate(0deg); }
  68% { transform: rotate(-18deg); }
  100% { transform: rotate(32deg); }
}

/* Elbow carrier for payload */
@keyframes payloadElbowSync {
  0% { transform: rotate(32deg); }
  22%, 100% { transform: rotate(0deg); }
}

/* Claw release on touchdown */
@keyframes clawRelease {
  0%, 42% { transform: scale(1); }
  46%, 60% { transform: scale(1.22, 0.92); }
  75%, 100% { transform: scale(1); }
}

/* =========================================================
   Launch Keyframes (Login State)
   ========================================================= */

/* Low combustion hover hum — identical to the DriverLanding brand logo */
@keyframes coreRumble {
  0% { transform: translate(calc(-1 * var(--rumble-intensity-x)), calc(-1 * var(--rumble-intensity-y))); }
  20% { transform: translate(var(--rumble-intensity-x), 0px); }
  40% { transform: translate(0px, var(--rumble-intensity-y)); }
  60% { transform: translate(calc(-1 * var(--rumble-intensity-x)), var(--rumble-intensity-y)); }
  80% { transform: translate(var(--rumble-intensity-x), calc(-1 * var(--rumble-intensity-y))); }
  100% { transform: translate(calc(-1 * var(--rumble-intensity-x)), calc(-1 * var(--rumble-intensity-y))); }
}

/* Straight-up liftoff on .launch-lift (a plain outer wrapper, unaffected by
   diagonal-frame's rotation) — starts slow right after ignition and
   accelerates the whole way up through the top of the circular viewport. */
@keyframes rocketStraightLaunch {
  0%   { transform: translate(0, 0); opacity: 1; }
  100% { transform: translate(0, -170px); opacity: 0; }
}

/* Exhaust ramps in quickly at ignition, then rides along inside .diagonal-frame */
@keyframes exhaustReveal {
  0% { opacity: 0; }
  12% { opacity: 1; }
  100% { opacity: 1; }
}

/* Crane is already retracted out of frame by the time login is triggered
   (state-ready leaves it there) — this just holds it firmly out of the way. */
@keyframes craneStandClear {
  0%, 100% { transform: translate(-70px, -60px) rotate(-100deg); }
}

/* Particle flows — exact geometry/timing from the DriverLanding logo */
@keyframes flowThick { 0% { stroke-dashoffset: 180; } 100% { stroke-dashoffset: 0; } }
@keyframes flowDots { 0% { stroke-dashoffset: 60; } 100% { stroke-dashoffset: 0; } }
@keyframes flowStatic { 0%, 100% { stroke-dashoffset: 8; } 30% { stroke-dashoffset: 0; } }

.launchpad-svg .line { stroke: var(--primary-accent); stroke-linecap: round; animation-iteration-count: infinite; }
.launchpad-svg .lineThick { animation-name: flowThick; animation-timing-function: linear; }
.launchpad-svg .lineDots { animation-name: flowDots; animation-timing-function: linear; stroke-dasharray: 0, 30; stroke-width: 5.5; }
.launchpad-svg .lineStatic { animation-name: flowStatic; animation-timing-function: ease-in-out; stroke-dasharray: 22; stroke-width: 8; }
.launchpad-svg .line1 { animation-duration: 1.6s; stroke-dasharray: 8, 22, 3, 27, 16, 14; stroke-width: 4; }
.launchpad-svg .line2 { animation-duration: 1.3s; stroke-dasharray: 18, 12, 10, 20, 3, 27; stroke-width: 6; }
.launchpad-svg .line3 { animation-duration: 1.4s; stroke-dasharray: 3, 27, 10, 20, 20, 10; stroke-width: 4; }
.launchpad-svg .line4 { animation-duration: 0.4s; }
.launchpad-svg .line5 { animation-duration: 0.7s; }
.launchpad-svg .line6 { animation-duration: 0.8s; }
.launchpad-svg .line7 { animation-duration: 0.6s; }

/* =========================================================
   Active States
   ========================================================= */

/* Default / Idle: Hide exhaust streams until launch */
.exhaust-group {
  opacity: 0;
}

/* 1. Loading / Placement State */
/* Runs once (no infinite) — login-logo.js listens for this to end and hands
   off to state-ready, so the crane doesn't loop the placement forever. */
.launchpad-svg.state-loading .shoulder-assembly {
  animation: shoulderPlace var(--place-duration) var(--kinematic-ease) 1 forwards;
}
.launchpad-svg.state-loading .payload-shoulder-carrier {
  animation: payloadShoulderSync var(--place-duration) var(--kinematic-ease) 1 forwards;
}
.launchpad-svg.state-loading .elbow-assembly {
  animation: elbowPlace var(--place-duration) var(--kinematic-ease) 1 forwards;
}
.launchpad-svg.state-loading .payload-elbow-carrier {
  animation: payloadElbowSync var(--place-duration) var(--kinematic-ease) 1 forwards;
}
.launchpad-svg.state-loading .claw-gripper {
  animation: clawRelease var(--place-duration) var(--kinematic-ease) 1 forwards;
}

/* 2. Ready State (Rocket sitting on pad, crane retracted fully out of view) */
.launchpad-svg.state-ready .shoulder-assembly {
  transform: translate(-70px, -60px) rotate(-100deg);
}
.launchpad-svg.state-ready .rumble-group {
  animation: coreRumble var(--rumble-speed) infinite linear;
}

/* 3. Launching / Login Trigger State */
.launchpad-svg.state-launching .shoulder-assembly {
  animation: craneStandClear 0.5s ease-out forwards;
}
.launchpad-svg.state-launching .launch-lift {
  animation: rocketStraightLaunch 2.6s cubic-bezier(0.55, 0, 0.85, 0.3) forwards;
}
.launchpad-svg.state-launching .exhaust-group {
  animation: exhaustReveal 2.6s linear forwards;
}
.launchpad-svg.state-launching .rumble-group {
  animation: coreRumble var(--rumble-speed) infinite linear;
}