/* Motor Plus Co., Ltd. landing — HTML/CSS only */

:root {
  --bg: #06060a;
  --ink: #f7f4ee;

  /* palette as rgb triples so alpha can vary per layer */
  --magenta: 255 45 146;
  --cyan: 0 212 255;
  --amber: 255 176 32;
  --violet: 139 92 255;
  --coral: 255 92 58;
  --lime: 186 255 86;
  --white: 255 246 236;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
  color: var(--ink);
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

body {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    Inter,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;
  font-weight: 600;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--bg);
  min-height: 100vh;
  min-height: 100dvh;
}

.stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  padding:
    calc(24px + var(--safe-top))
    calc(20px + var(--safe-right))
    calc(24px + var(--safe-bottom))
    calc(20px + var(--safe-left));
  overflow: visible;
  isolation: isolate;
}

/* film grain over the lights */
.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

.splash {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* soft halo so the wordmark stays readable */
.glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120vmax;
  height: 120vmax;
  margin: -60vmax 0 0 -60vmax;
  background:
    radial-gradient(closest-side, rgb(var(--magenta) / 0.16), transparent 70%),
    radial-gradient(closest-side, rgb(var(--cyan) / 0.14), transparent 70%),
    radial-gradient(closest-side, rgb(var(--violet) / 0.12), transparent 70%);
  background-size: 62% 62%, 58% 58%, 66% 54%;
  background-position: 34% 40%, 68% 56%, 50% 34%;
  background-repeat: no-repeat;
  filter: blur(30px);
  animation: glow-in 1.4s ease-out both;
}

/*
  Bokeh light. Each circle sets its own depth of field:
  --size, --blur and --o read as distance from the lens.
*/
.bokeh {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  margin: calc(var(--size) / -2);
  border-radius: 50%;
  /* bright rim, softer core — the giveaway of an out-of-focus highlight */
  background: radial-gradient(
    circle at 50% 50%,
    rgb(var(--c) / 0.42) 0%,
    rgb(var(--c) / 0.5) 50%,
    rgb(var(--c) / 0.95) 78%,
    rgb(var(--c) / 1) 88%,
    rgb(var(--c) / 0.5) 95%,
    rgb(var(--c) / 0) 100%
  );
  filter: blur(var(--blur)) saturate(1.35);
  opacity: var(--o);
  mix-blend-mode: screen;
  will-change: translate, opacity;
  animation:
    bokeh-in 1.3s cubic-bezier(0.22, 1, 0.36, 1) var(--d) both,
    bokeh-drift var(--dur) ease-in-out calc(var(--d) + 1.3s) infinite;
}

/* far field — big, heavily defocused, dim */
.b1  { --x: 8%;  --y: 18%; --size: 30vmin; --blur: 34px; --o: 0.55; --c: var(--magenta); --d: 0.05s; --dur: 19s; --fx: 26px; --fy: 18px; }
.b2  { --x: 88%; --y: 26%; --size: 27vmin; --blur: 30px; --o: 0.52; --c: var(--cyan);    --d: 0.12s; --dur: 23s; --fx: -22px; --fy: 20px; }
.b3  { --x: 22%; --y: 84%; --size: 32vmin; --blur: 36px; --o: 0.46; --c: var(--violet);  --d: 0.18s; --dur: 21s; --fx: 20px; --fy: -16px; }
.b4  { --x: 78%; --y: 80%; --size: 26vmin; --blur: 30px; --o: 0.48; --c: var(--amber);   --d: 0.24s; --dur: 25s; --fx: -18px; --fy: -22px; }
.b5  { --x: 50%; --y: 6%;  --size: 24vmin; --blur: 32px; --o: 0.42; --c: var(--coral);   --d: 0.30s; --dur: 20s; --fx: 16px; --fy: 22px; }
.b6  { --x: 3%;  --y: 60%; --size: 22vmin; --blur: 28px; --o: 0.46; --c: var(--cyan);    --d: 0.36s; --dur: 24s; --fx: 24px; --fy: -14px; }
.b7  { --x: 97%; --y: 64%; --size: 25vmin; --blur: 32px; --o: 0.44; --c: var(--magenta); --d: 0.42s; --dur: 22s; --fx: -20px; --fy: -18px; }

/* mid field */
.b8  { --x: 30%; --y: 30%; --size: 16vmin; --blur: 14px; --o: 0.58; --c: var(--amber);   --d: 0.20s; --dur: 17s; --fx: 18px; --fy: -14px; }
.b9  { --x: 68%; --y: 15%; --size: 12vmin; --blur: 12px; --o: 0.55; --c: var(--violet);  --d: 0.26s; --dur: 19s; --fx: -14px; --fy: 16px; }
.b10 { --x: 17%; --y: 47%; --size: 14vmin; --blur: 13px; --o: 0.50; --c: var(--coral);   --d: 0.32s; --dur: 16s; --fx: 16px; --fy: 14px; }
.b11 { --x: 83%; --y: 45%; --size: 15vmin; --blur: 15px; --o: 0.52; --c: var(--cyan);    --d: 0.38s; --dur: 20s; --fx: -18px; --fy: -12px; }
.b12 { --x: 39%; --y: 73%; --size: 13vmin; --blur: 12px; --o: 0.54; --c: var(--magenta); --d: 0.44s; --dur: 18s; --fx: 14px; --fy: -18px; }
.b13 { --x: 62%; --y: 69%; --size: 17vmin; --blur: 16px; --o: 0.48; --c: var(--amber);   --d: 0.50s; --dur: 22s; --fx: -16px; --fy: 14px; }
.b14 { --x: 53%; --y: 37%; --size: 11vmin; --blur: 11px; --o: 0.46; --c: var(--lime);    --d: 0.56s; --dur: 15s; --fx: 12px; --fy: 16px; }
.b15 { --x: 11%; --y: 74%; --size: 12vmin; --blur: 13px; --o: 0.50; --c: var(--violet);  --d: 0.62s; --dur: 21s; --fx: 18px; --fy: -12px; }
.b16 { --x: 91%; --y: 11%; --size: 10vmin; --blur: 10px; --o: 0.52; --c: var(--amber);   --d: 0.68s; --dur: 18s; --fx: -12px; --fy: 18px; }

/* near field — small, nearly in focus, brightest */
.b17 { --x: 26%; --y: 13%; --size: 5vmin;  --blur: 3px; --o: 0.85; --c: var(--white);   --d: 0.34s; --dur: 14s; --fx: 10px; --fy: 14px; }
.b18 { --x: 72%; --y: 34%; --size: 4vmin;  --blur: 2px; --o: 0.80; --c: var(--cyan);    --d: 0.40s; --dur: 16s; --fx: -12px; --fy: 10px; }
.b19 { --x: 14%; --y: 36%; --size: 3vmin;  --blur: 2px; --o: 0.78; --c: var(--magenta); --d: 0.46s; --dur: 13s; --fx: 12px; --fy: -10px; }
.b20 { --x: 86%; --y: 72%; --size: 6vmin;  --blur: 4px; --o: 0.70; --c: var(--lime);    --d: 0.52s; --dur: 17s; --fx: -10px; --fy: -14px; }
.b21 { --x: 44%; --y: 90%; --size: 4vmin;  --blur: 3px; --o: 0.76; --c: var(--amber);   --d: 0.58s; --dur: 15s; --fx: 14px; --fy: -10px; }
.b22 { --x: 58%; --y: 52%; --size: 3vmin;  --blur: 2px; --o: 0.72; --c: var(--white);   --d: 0.64s; --dur: 12s; --fx: -8px; --fy: 12px; }
.b23 { --x: 34%; --y: 61%; --size: 5vmin;  --blur: 4px; --o: 0.68; --c: var(--violet);  --d: 0.70s; --dur: 18s; --fx: 12px; --fy: 12px; }
.b24 { --x: 93%; --y: 39%; --size: 3vmin;  --blur: 2px; --o: 0.74; --c: var(--coral);   --d: 0.76s; --dur: 14s; --fx: -10px; --fy: -12px; }
.b25 { --x: 5%;  --y: 27%; --size: 4vmin;  --blur: 3px; --o: 0.70; --c: var(--lime);    --d: 0.82s; --dur: 16s; --fx: 12px; --fy: 14px; }
.b26 { --x: 66%; --y: 89%; --size: 3vmin;  --blur: 2px; --o: 0.76; --c: var(--cyan);    --d: 0.88s; --dur: 13s; --fx: -12px; --fy: -10px; }
.b27 { --x: 47%; --y: 22%; --size: 2.4vmin; --blur: 2px; --o: 0.66; --c: var(--white);  --d: 0.94s; --dur: 15s; --fx: 10px; --fy: 12px; }
.b28 { --x: 78%; --y: 57%; --size: 2.6vmin; --blur: 2px; --o: 0.68; --c: var(--magenta); --d: 1s;   --dur: 17s; --fx: -10px; --fy: 12px; }

.title {
  position: relative;
  z-index: 2;
  margin: 0;
  flex-shrink: 0;
  overflow: visible;
  text-align: center;
  line-height: 1.4;
  color: var(--ink);
  animation: title-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}

.title-line,
.title-sub {
  display: block;
  overflow: visible;
  letter-spacing: var(--tracking);
}

.title-line > span,
.title-sub > span {
  display: inline-block;
  padding: 0.11em 0.14em;
  /* tracking also trails the last glyph, so pull it back to keep the ink centred */
  margin-right: calc(-1 * var(--tracking));
  color: var(--ink);
  text-shadow:
    0 2px 24px rgb(6 6 10 / 0.55),
    0 0 60px rgb(6 6 10 / 0.4);
}

.title-line {
  --tracking: -0.025em;
  font-size: clamp(2.25rem, calc((100vw - 5.5rem) / 7.4), 10.5rem);
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
}

.title-sub {
  --tracking: 0.04em;
  margin-top: 0.04em;
  font-size: clamp(1.15rem, calc((100vw - 5.5rem) / 16.5), 3.4rem);
  font-weight: 500;
  line-height: 1.2;
  opacity: 0.82;
}

@keyframes glow-in {
  from {
    opacity: 0;
    transform: scale(0.7);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* lens pulling into focus */
@keyframes bokeh-in {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
  to {
    opacity: var(--o);
    transform: scale(1);
  }
}

/*
  Starts and ends on the resting position, so the loop hands off
  from the entrance without a visible jump.
*/
@keyframes bokeh-drift {
  0% {
    translate: 0 0;
    opacity: var(--o);
  }
  25% {
    translate: var(--fx) calc(var(--fy) * -1);
  }
  50% {
    translate: calc(var(--fx) * 0.35) var(--fy);
    opacity: calc(var(--o) * 0.72);
  }
  75% {
    translate: calc(var(--fx) * -1) calc(var(--fy) * 0.4);
  }
  100% {
    translate: 0 0;
    opacity: var(--o);
  }
}

@keyframes title-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (min-width: 768px) {
  .stage {
    padding:
      calc(32px + var(--safe-top))
      calc(40px + var(--safe-right))
      calc(32px + var(--safe-bottom))
      calc(40px + var(--safe-left));
  }

  .title-line {
    font-size: clamp(4.2rem, calc((100vw - 5rem) / 7.2), 10.5rem);
  }

  .title-sub {
    font-size: clamp(1.6rem, calc((100vw - 5rem) / 16), 3.4rem);
  }
}

@media (min-width: 1024px) {
  .title-sub {
    --tracking: 0.06em;
  }
}

/* phones: thin out the smallest specks so the field stays readable */
@media (max-width: 599px) {
  .b14,
  .b22,
  .b27,
  .b28 {
    display: none;
  }

  .b17 { --size: 6vmin; }
  .b19 { --size: 4vmin; }
  .b24 { --size: 4vmin; }
  .b26 { --size: 4vmin; }
}

@media (max-width: 360px) {
  .title-line {
    font-size: clamp(1.85rem, calc((100vw - 2.5rem) / 7.2), 3rem);
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  .title-line {
    --tracking: -0.03em;
    font-size: clamp(2rem, 9vh, 4.8rem);
  }

  .title-sub {
    font-size: clamp(1rem, 4.8vh, 2rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .glow,
  .bokeh,
  .title {
    animation: none !important;
  }

  .glow {
    opacity: 1;
    transform: none;
  }

  .bokeh {
    opacity: var(--o);
    transform: none;
    translate: 0 0;
  }

  .title {
    opacity: 1;
    transform: none;
  }
}