/* KP Group — gold parent brand with two business cards (USP red, Voltara green). */

:root {
  --void: #070605;
  --ink: #0e0c0a;
  --line: #2a241c;
  --chalk: #f5f0e6;
  --ash: #a39b8b;

  --usp: #f24a3c;
  --volt: #5fd43a;

  --font-mono: "Martian Mono", ui-monospace, "SFMono-Regular", monospace;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

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

html { color-scheme: dark; overflow-x: clip; }

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--void);
  color: var(--chalk);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid #f3cf6a; outline-offset: 4px; }

.ribbons {
  position: fixed; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* ---------- layout ---------- */
.page {
  flex: 1;
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vh, 3rem) clamp(1rem, 4vw, 3rem) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.5rem, 4vh, 3rem);
}

.intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(.75rem, 2vh, 1.25rem);
  text-align: center;
}

.brand { margin: 0; }
.brand img {
  width: clamp(150px, 22vh, 230px);
  filter: drop-shadow(0 20px 50px rgba(214, 166, 55, .18));
}

.lede {
  margin: 0;
  max-width: 44ch;
  font-size: clamp(.85rem, 1.6vh, .95rem);
  line-height: 1.6;
  color: var(--ash);
  text-wrap: balance;
}
.lede a { color: var(--chalk); border-bottom: 1px solid var(--line); }
.lede a:hover { border-color: var(--chalk); }

/* ---------- cards ---------- */
.cards {
  flex: 1;
  width: 100%;
  display: flex;
  gap: clamp(1rem, 2vw, 1.5rem);
  min-height: clamp(340px, 56vh, 620px);
}

.card {
  --accent: 255, 255, 255;
  --mx: 50%;
  --my: 50%;
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 4vw, 3rem);
  padding-bottom: 5rem; /* room for .card__foot */
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--ink);
  overflow: hidden;
  isolation: isolate;
  transition: flex-grow .8s var(--ease-out), border-color .5s, opacity .5s;
}
.card--usp { --accent: 242, 74, 60; }
.card--volt { --accent: 95, 212, 58; }

/* resting brand tint + light that follows the pointer */
.card::before,
.card::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
}
.card::before {
  background: radial-gradient(80% 70% at 50% 110%, rgba(var(--accent), .22), transparent 70%);
  transition: opacity .6s;
}
.card::after {
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(var(--accent), .2), transparent 60%);
  opacity: 0;
  transition: opacity .5s;
}

.card img {
  width: min(78%, 420px);
  transition: transform .9s var(--ease-out);
}
.card--volt img { width: min(56%, 300px); }

.card__foot {
  position: absolute;
  left: clamp(1.25rem, 3vw, 2rem);
  right: clamp(1.25rem, 3vw, 2rem);
  bottom: clamp(1.25rem, 3vw, 1.8rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ash);
}
.card__go {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 2.2rem;
  color: rgb(var(--accent));
}
.card__go b {
  display: inline-grid; place-items: center;
  width: 2.2rem; height: 2.2rem;
  border-radius: 50%;
  border: 1px solid rgba(var(--accent), .5);
  font: 400 1.05rem/1 system-ui, sans-serif;
  transition: transform .6s var(--ease-out), background-color .4s, color .4s;
}

/* hover / focus: the card you're on grows, the other steps back */
@media (hover: hover) {
  a.card:hover,
  a.card:focus-visible { flex-grow: 1.35; border-color: rgba(var(--accent), .55); }
  .cards:has(a.card:hover) .card:not(:hover) { opacity: .55; }
  a.card:hover::after,
  a.card:focus-visible::after { opacity: 1; }
  a.card:hover img { transform: scale(1.06); }
  .card--usp:hover .card__go b { transform: translateX(4px) rotate(-45deg); border-color: rgb(var(--accent)); background: rgba(var(--accent), .12); }
}

/* not live yet: same card, quietly switched off */
.card--soon { cursor: default; border-style: dashed; }
.card--soon::before { opacity: .35; }
.card--soon img { filter: grayscale(.7) brightness(.7); opacity: .6; }
.card--soon .card__go {
  min-height: 0;
  padding: .45rem .8rem;
  border: 1px solid rgba(var(--accent), .3);
  border-radius: 999px;
  color: rgba(var(--accent), .85);
}

/* ---------- footer ---------- */
.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding: clamp(1.25rem, 3vh, 2rem) clamp(1rem, 4vw, 3rem);
  font-size: .8rem;
  color: var(--ash);
}
.footer address { font-style: normal; }

/* ---------- entrance ---------- */
.intro,
.card,
.footer { animation: rise 1.1s var(--ease-out) both; }
.card--usp { animation-delay: .15s; }
.card--volt { animation-delay: .25s; }
.footer { animation-delay: .4s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
}

/* ---------- cinematic intro (first visit per session) ----------
   html.kp-intro is set in <head>; the inline script after the footer measures the logo,
   sets --intro-y / --intro-s (centre of the screen, scaled up) and adds .kp-intro-play.
   Logo fades in → gold light sweeps across it → it glides up → ribbons and cards rise. */
.brand { position: relative; isolation: isolate; }
.brand::before,
.brand::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 0;
}
.brand::before { /* bloom behind the logo */
  inset: -45%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(243, 207, 106, .32), rgba(214, 166, 55, .08) 55%, transparent);
}
.brand::after { /* light sweep, clipped to the logo's shape */
  inset: 0;
  z-index: 1;
  background: linear-gradient(110deg, transparent 44.5%, rgba(255, 244, 205, .85) 50%, transparent 55.5%) 100% 0 / 300% 100% no-repeat;
  -webkit-mask: url(/assets/kp-logo.webp) center / 100% 100% no-repeat;
  mask: url(/assets/kp-logo.webp) center / 100% 100% no-repeat;
  mix-blend-mode: screen;
  mix-blend-mode: plus-lighter;
}

html.kp-intro .intro,
html.kp-intro .card,
html.kp-intro .footer { animation: none; }

html.kp-intro:not(.kp-intro-play) :is(.brand, .ribbons, .card, .footer) { opacity: 0; }

html.kp-intro-play .brand { animation: kp-logo 3.4s .2s backwards; }
html.kp-intro-play .brand::before { animation: kp-bloom 1.8s 1s ease-in-out backwards; }
html.kp-intro-play .brand::after { animation: kp-shine 1.3s 1.25s cubic-bezier(.45, 0, .25, 1) backwards; }
html.kp-intro-play .ribbons { animation: kp-fade 2.2s 2.4s ease-out backwards; }
html.kp-intro-play .card { animation: kp-card 1.3s 2.9s var(--ease-out) backwards; }
html.kp-intro-play .card--volt { animation-delay: 3.05s; }
html.kp-intro-play .card img { animation: kp-card-img 1.6s 3.1s var(--ease-out) backwards; }
html.kp-intro-play .card--volt img { animation-delay: 3.25s; }
html.kp-intro-play .card__foot { animation: kp-rise 1s 3.5s var(--ease-out) backwards; }
html.kp-intro-play .footer { animation: kp-fade 1s 3.8s ease-out backwards; }

/* any click, key or scroll skips straight to the page */
html.kp-intro-skip :is(.brand, .ribbons, .card, .card img, .card__foot, .footer),
html.kp-intro-skip .brand::before,
html.kp-intro-skip .brand::after { animation: none; }

@keyframes kp-logo {
  0% {
    opacity: 0;
    filter: blur(14px) brightness(.5);
    transform: translateY(var(--intro-y, 0)) scale(calc(var(--intro-s, 1) * .9));
    animation-timing-function: cubic-bezier(.2, .7, .2, 1);
  }
  38%, 62% {
    opacity: 1;
    filter: blur(0) brightness(1);
    transform: translateY(var(--intro-y, 0)) scale(var(--intro-s, 1));
    animation-timing-function: cubic-bezier(.7, 0, .15, 1);
  }
  100% { opacity: 1; filter: blur(0) brightness(1); transform: none; }
}
@keyframes kp-bloom {
  0%, 100% { opacity: 0; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1); }
}
@keyframes kp-shine {
  0% { opacity: 1; background-position-x: 100%; }
  100% { opacity: 1; background-position-x: 0%; }
}
@keyframes kp-fade {
  from { opacity: 0; }
}
@keyframes kp-card {
  from { opacity: .3; transform: translateY(56px); clip-path: inset(100% 0 0 0 round 28px); }
  to { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 28px); }
}
@keyframes kp-card-img {
  from { opacity: 0; transform: scale(1.14); }
}
@keyframes kp-rise {
  from { opacity: 0; transform: translateY(10px); }
}

/* ---------- small screens: stack the cards ---------- */
@media (max-width: 760px) {
  .cards { flex-direction: column; min-height: 0; }
  .card { min-height: 260px; }
  .card img { width: min(72%, 320px); }
  .card--volt img { width: min(46%, 200px); }
  .footer { justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .001ms !important;
  }
}