/*
Theme Name: Ketnal Orbit
Theme URI: https://www.ketnal.co.za/
Author: Ketnal Creations
Author URI: https://www.ketnal.co.za/
Description: One-screen redirect page for the MPlanet to Ketnal Creations rebrand. The Ketnal mark plays out at planet scale: a live glossy sphere lights up as MPlanet hands over to Ketnal, an orbit ring carries the four services into place, and two equal buttons send visitors to ketnal.co.za or to their webmail. Phone and both email addresses sit underneath. Poppins throughout. Every word, link and the background video are editable in Appearance > Customize > Ketnal Orbit Page.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ketnal-orbit
Tags: one-column, full-width-template, custom-logo, translation-ready
*/

/* ==========================================================================
   Ketnal Orbit
   --------------------------------------------------------------------------
   The page is the Ketnal mark at planet scale. assets/js/orbit.js draws the
   sphere, its swoosh orbit and the wide service ring in one WebGL pass, and
   places the four service stations on that ring. This stylesheet owns the
   type, the buttons and every fallback: with no WebGL the hero gets a CSS
   sphere and the services sit in a plain row.

   TYPE SCALE (Poppins)
     Brand line   700  clamp(3rem, 6.6vw, 7.5rem)    lh 1     ls -.035em
     Was line     300  .42em of the brand line (lighter, softer, always smaller)
     Lead         300  clamp(.95rem, .3vw + .85rem, 1.15rem)  lh 1.6
     Station      600  clamp(.9rem, .35vw + .78rem, 1.05rem)
     Station tag  500  .68rem  ls .14em  uppercase
     Button       600  1.02rem
     Contact      500  clamp(.9rem, .2vw + .82rem, 1rem)
     Credit       300  .74rem

   LAYOUT
     .ko-screen is a flex column: logo row, headline, lower block. The logo
     row and the lower block share the free height equally, so the headline
     (and the planet centred on it) sits in the middle of the viewport. When
     the lower block (service band, buttons, contact rail) needs more than
     its half, it keeps its height and the headline rises to make room.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */

:root {
  /* Ground */
  --ko-night:   #07030a;
  --ko-plum:    #1c0913;

  /* The mark's reds and the silk's pinks */
  --ko-crimson: #a8122a;
  --ko-wine:    #4a0613;
  --ko-coral:   #ff5266;
  --ko-magenta: #ff4d8f;
  --ko-pink:    #ff8fb8;
  --ko-blush:   #ffd3e1;
  --ko-shell:   #fff4f7;

  /* Ink, tinted from the blush rather than grey */
  --ko-text:    #fff7fa;
  --ko-muted:   rgba(255, 233, 241, 0.84);
  --ko-faint:   rgba(255, 226, 236, 0.64);
  --ko-line:    rgba(255, 168, 198, 0.3);

  --ko-font: "Poppins", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  --ko-node:   2.75rem;
  --ko-gutter: clamp(1rem, 4vw, 2.5rem);
  --ko-gap:    clamp(1rem, 3.4vh, 2.6rem);

  --ko-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ----------------------------------------------------------- 2. Foundation */

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

html {
  -webkit-text-size-adjust: 100%;
  background-color: var(--ko-night);
  color-scheme: dark;
}

/* No body background: with html painting the ground, a body background
   would sit above the negative z-index video layer and hide it. */
body {
  margin: 0;
  color: var(--ko-text);
  font-family: var(--ko-font);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; border: 0; }
svg { display: block; }

a { color: inherit; }

h1, p, ul, address { margin: 0; }
ul { padding: 0; list-style: none; }
address { font-style: normal; }

::selection {
  background: rgba(255, 77, 143, 0.5);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--ko-blush);
  outline-offset: 4px;
  border-radius: 6px;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------ 3. Backdrop layers */

.ko-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 42%, #2a0d1c 0%, #12060d 48%, var(--ko-night) 100%);
}

.ko-bg__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* functions.php overrides brightness from the Customizer slider. */
  filter: brightness(0.7) saturate(1.08);
}

/* Dark at first, lifting as the planet lights. */
.ko-bg__veil {
  position: absolute;
  inset: 0;
  background: var(--ko-night);
  opacity: 0;
}

/* Edges fall to night so the sphere owns the middle of the frame. */
.ko-bg__shade {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(75% 65% at 50% 46%, rgba(7, 3, 10, 0) 0%, rgba(7, 3, 10, 0.3) 68%, rgba(7, 3, 10, 0.72) 100%),
    linear-gradient(180deg, rgba(7, 3, 10, 0.5) 0%, rgba(7, 3, 10, 0) 24%, rgba(7, 3, 10, 0) 68%, rgba(7, 3, 10, 0.66) 100%);
}

/* --------------------------------------------------------------- 4. Screen */

.ko-screen {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(1rem, 2.8vh, 1.9rem) var(--ko-gutter) clamp(0.9rem, 2.4vh, 1.6rem);
  overflow-x: clip;
}

@supports not (height: 100svh) {
  .ko-screen { min-height: 100vh; }
}

.ko-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.ko-screen > :not(.ko-scene) {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------------- 5. Brand */

.ko-brand {
  flex: 1 1 0;
}

.ko-brand img {
  width: auto;
  height: clamp(2.6rem, 6vh, 3.75rem);
  filter: drop-shadow(0 10px 24px rgba(7, 3, 10, 0.7));
}

/* ---------------------------------------------------------------- 6. Stage */

.ko-hero {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.85rem, 2.2vh, 1.5rem);
  max-width: 64rem;
  margin-block: var(--ko-gap);
  text-align: center;
}

.ko-lower {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: var(--ko-gap);
  width: 100%;
  min-width: 0;
  text-align: center;
}

.ko-title {
  font-size: clamp(3rem, 6.6vw, 7.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  text-wrap: balance;
  text-shadow: 0 6px 30px rgba(7, 3, 10, 0.6);
}

/* The old name leads in: light weight and the muted ink set it apart, and
   it never grows past .42 of the new name. */
.ko-title__was {
  display: block;
  margin-bottom: 0.28em;
  font-size: 0.42em;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--ko-muted);
  /* At this size the line can reach the planet's highlight; a tight dark
     edge plus a soft halo keep the light weight readable over it. */
  text-shadow: 0 0 3px rgba(7, 3, 10, 0.6), 0 2px 22px rgba(7, 3, 10, 0.85);
}

.ko-word { display: inline-block; }

.ko-title__brand {
  position: relative;
  display: block;
  padding: 0.04em 0.08em 0.1em;
}

.ko-lead {
  max-width: 46ch;
  font-size: clamp(0.95rem, 0.3vw + 0.85rem, 1.15rem);
  font-weight: 300;
  line-height: 1.6;
  color: var(--ko-muted);
  text-wrap: pretty;
  text-shadow: 0 2px 16px rgba(7, 3, 10, 0.85);
}

/* The CSS planet, shown only when the WebGL scene is not running. */
.no-js .ko-hero::before,
.ko-no-gl .ko-hero::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: clamp(15rem, min(60vh, 40vw), 46rem);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 23% 21%, rgba(255, 222, 231, 0.8) 0 1.4%, rgba(255, 222, 231, 0) 7%),
    radial-gradient(circle at 21% 19%, rgba(255, 82, 102, 0.85) 0%, rgba(255, 82, 102, 0) 40%),
    radial-gradient(circle at 50% 50%, #120309 0%, #14040a 58%, #3a0815 78%, #b3164a 96%, #ff6fa0 100%);
  box-shadow: 0 -12px 120px -18px rgba(242, 56, 127, 0.55);
}

/* ------------------------------------------------------------- 7. Stations */

.ko-stations {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 2vw, 2rem);
  width: min(100%, 62rem);
}

.ko-station {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.ko-station__node {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--ko-node);
  height: var(--ko-node);
  border: 1px solid rgba(255, 143, 184, 0.55);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #521022 0%, #1d0611 62%, #0d0308 100%);
  color: var(--ko-pink);
  box-shadow: inset 0 1px 0 rgba(255, 214, 227, 0.2), 0 10px 24px -10px rgba(255, 77, 143, 0.8);
}

.ko-station__node svg {
  width: 48%;
  height: 48%;
}

.ko-station__label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  text-shadow: 0 2px 12px rgba(7, 3, 10, 0.95), 0 0 2px rgba(7, 3, 10, 0.8);
}

.ko-station__name {
  font-size: clamp(0.9rem, 0.35vw + 0.78rem, 1.05rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ko-text);
}

.ko-station__tag {
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ko-blush);
}

/* Orbit mode: orbit.js lifts each station onto the ring. The band keeps its
   height so nothing below it moves. */
@media (min-width: 1000px) and (min-height: 600px) {
  .ko-stations { height: 5.75rem; }
}

.ko-stations.is-orbiting {
  position: relative;
  display: block;
}

.ko-stations.is-orbiting .ko-station {
  position: absolute;
  top: 0;
  left: 0;
  width: 15rem;
  margin: calc(var(--ko-node) / -2) 0 0 -7.5rem;
  will-change: transform;
}

/* Transitions live on the arriving states only, so lifting the stations out
   of the row hides them at once instead of fading them out in a heap. */
.ko-stations.is-orbiting .ko-station__node {
  opacity: 0;
  transform: scale(0.5);
}

.ko-stations.is-orbiting .ko-station__label {
  opacity: 0;
  transform: translateY(-0.4rem);
}

.ko-stations.is-orbiting .is-travelling .ko-station__node {
  opacity: 1;
  transform: scale(0.62);
  transition: opacity 0.35s ease-out, transform 0.35s ease-out;
}

.ko-stations.is-orbiting .is-docked .ko-station__node {
  opacity: 1;
  transform: none;
  transition: opacity 0.35s ease-out, transform 0.7s var(--ko-ease-out);
}

.ko-stations.is-orbiting .is-docked .ko-station__label {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s var(--ko-ease-out), transform 0.8s var(--ko-ease-out);
}

/* -------------------------------------------------------------- 8. Buttons */

.ko-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.65rem, 1.2vw, 1rem);
  width: min(100%, 36rem);
}

.ko-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-height: 3.5rem;
  padding: 0.9rem 1.5rem;
  overflow: hidden;
  border-radius: 999px;
  background-color: var(--ko-shell);
  color: var(--ko-wine);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -2px 0 rgba(168, 18, 42, 0.14),
    0 4px 12px -6px rgba(7, 3, 10, 0.6),
    0 18px 40px -20px rgba(255, 77, 143, 0.9);
  transition: transform 0.45s var(--ko-ease-out), box-shadow 0.45s var(--ko-ease-out);
}

/* A soft pink light that follows the pointer across the button. */
.ko-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(9rem circle at var(--mx, 50%) var(--my, 50%), rgba(255, 77, 143, 0.26), rgba(255, 77, 143, 0) 70%);
  opacity: 0;
  transition: opacity 0.35s ease-out;
}

.ko-btn > * { position: relative; }

.ko-btn:hover,
.ko-btn:focus-visible {
  color: var(--ko-wine);
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -2px 0 rgba(168, 18, 42, 0.14),
    0 8px 18px -8px rgba(7, 3, 10, 0.6),
    0 26px 50px -18px rgba(255, 77, 143, 1);
}

.ko-btn:hover::before,
.ko-btn:focus-visible::before { opacity: 1; }

.ko-btn:active { transform: translateY(-1px) scale(0.985); }

.ko-btn__icon {
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
  color: var(--ko-crimson);
  transition: transform 0.45s var(--ko-ease-out);
}

.ko-btn--site:hover .ko-btn__icon { transform: translate(2px, -2px); }
.ko-btn--mail:hover .ko-btn__icon { transform: translateY(-2px); }

/* -------------------------------------------------------------- 9. Contact */

.ko-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.5rem, 1.4vh, 0.85rem);
  margin-top: clamp(0rem, 2vh, 1.25rem);
}

.ko-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 2.25rem;
}

.ko-contact__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ko-text);
  font-size: clamp(0.9rem, 0.2vw + 0.82rem, 1rem);
  font-weight: 500;
  line-height: 1.4;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.32em;
  text-shadow: 0 2px 12px rgba(7, 3, 10, 0.9);
  transition: text-decoration-color 0.3s ease-out, color 0.3s ease-out;
}

.ko-contact__item:hover {
  color: #fff;
  text-decoration-color: var(--ko-pink);
}

/* A small red bead between items, the mark's satellite. */
.ko-contact__item + .ko-contact__item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -1.4rem;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff8fa0 0%, var(--ko-crimson) 55%, #4a0613 100%);
  transform: translateY(-50%);
}

.ko-contact__item svg {
  flex: none;
  width: 1rem;
  height: 1rem;
  color: var(--ko-pink);
}

.ko-credit {
  font-size: 0.74rem;
  font-weight: 300;
  line-height: 1.4;
  color: var(--ko-faint);
}

.ko-credit a {
  text-decoration: none;
  transition: color 0.3s ease-out;
}

.ko-credit a:hover { color: var(--ko-pink); }

/* --------------------------------------------------------- 10. The handover */

/* header.php adds .ko-intro before first paint unless the visitor prefers
   reduced motion. Every element is fully visible without it, and each
   animation only fills backwards, so hover states keep working after. */

@keyframes ko-veil {
  from { opacity: 0.88; }
  to   { opacity: 0; }
}

@keyframes ko-rise {
  from { opacity: 0; transform: translateY(0.75rem); }
  to   { opacity: 1; transform: none; }
}

@keyframes ko-blur-in {
  from { opacity: 0; transform: translateY(0.35em); filter: blur(10px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes ko-wipe {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; transform: translateY(0.06em); }
  to   { -webkit-mask-position: 0 0; mask-position: 0 0; transform: none; }
}

@keyframes ko-glint {
  from { -webkit-mask-position: 110% 0; mask-position: 110% 0; }
  to   { -webkit-mask-position: -10% 0; mask-position: -10% 0; }
}

.ko-intro .ko-bg__veil { animation: ko-veil 2.2s cubic-bezier(0.4, 0, 0.2, 1) backwards; }

.ko-intro .ko-brand { animation: ko-rise 1s var(--ko-ease-out) 0.1s backwards; }

.ko-intro .ko-title__was .ko-word {
  animation: ko-blur-in 1s var(--ko-ease-out) backwards;
  animation-delay: calc(0.22s + var(--i, 0) * 0.14s);
}

/* The new name is revealed by the same light that rises on the planet. */
.ko-intro .ko-title__brand {
  -webkit-mask: linear-gradient(90deg, #000 42%, transparent 58%) 0 0 / 260% 100% no-repeat;
  mask: linear-gradient(90deg, #000 42%, transparent 58%) 0 0 / 260% 100% no-repeat;
  animation: ko-wipe 1.5s var(--ko-ease-out) 0.7s backwards;
}

/* The glint is a second copy of the name. The empty alt text keeps screen
   readers from reading it twice; browsers without that syntax skip the
   glint entirely, which is the right failure. */
.ko-intro .ko-title__brand::after {
  content: attr(data-text) / "";
  position: absolute;
  inset: 0;
  padding: inherit;
  color: var(--ko-blush);
  text-shadow: none;
  pointer-events: none;
  -webkit-mask: linear-gradient(100deg, transparent 38%, #000 50%, transparent 62%) -10% 0 / 320% 100% no-repeat;
  mask: linear-gradient(100deg, transparent 38%, #000 50%, transparent 62%) -10% 0 / 320% 100% no-repeat;
  animation: ko-glint 1.7s cubic-bezier(0.45, 0, 0.2, 1) 1.5s backwards;
}

.ko-intro .ko-lead { animation: ko-rise 1s var(--ko-ease-out) 1.05s backwards; }

.ko-intro .ko-stations:not(.is-orbiting) .ko-station {
  animation: ko-rise 0.9s var(--ko-ease-out) backwards;
  animation-delay: calc(1.25s + var(--i, 0) * 0.08s);
}

.ko-intro .ko-btn {
  animation: ko-rise 0.9s var(--ko-ease-out) backwards;
  animation-delay: calc(1.1s + var(--i, 0) * 0.08s);
}

.ko-intro .ko-foot { animation: ko-rise 1s var(--ko-ease-out) 1.45s backwards; }

/* ---------------------------------------------------------- 11. Responsive */

/* Tablet: the planet grows with the height, so the name grows with it.
   Services stay one row of four until it gets tight. */
@media (max-width: 999px) {
  .ko-title { font-size: clamp(2.9rem, 8.6vw, 5.4rem); }
  .ko-title__was { font-size: 0.44em; }
  .ko-stations { width: min(100%, 44rem); }
}

@media (max-width: 760px) {
  .ko-stations {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem 1rem;
    width: min(100%, 26rem);
  }

  .ko-station {
    flex-direction: row;
    gap: 0.7rem;
    text-align: left;
  }

  .ko-station__label { gap: 0.1rem; }
}

@media (max-width: 640px) {
  :root {
    --ko-node: 2.35rem;
    --ko-gap: clamp(0.9rem, 2.6vh, 1.4rem);
  }

  .ko-brand img { height: 2.5rem; }

  .ko-title { font-size: clamp(2.7rem, 13.4vw, 3.6rem); }
  .ko-title__was { font-size: 0.44em; }

  .ko-lead { font-size: 0.92rem; line-height: 1.55; }

  /* The bigger name takes the room this margin used to hold. */
  .ko-foot { margin-top: 0; }

  .ko-station__name { font-size: 0.86rem; }
  .ko-station__tag { font-size: 0.6rem; letter-spacing: 0.1em; }

  .ko-actions {
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 23rem);
    gap: 0.6rem;
  }

  .ko-btn { min-height: 3.25rem; }

  .ko-contact {
    flex-direction: column;
    gap: 0.45rem;
  }

  .ko-contact__item + .ko-contact__item::before { display: none; }
}

/* Short desktop screens: tighten rather than push the foot off the fold. */
@media (min-width: 1000px) and (max-height: 760px) {
  :root { --ko-gap: clamp(0.8rem, 2.6vh, 1.6rem); }
  .ko-title { font-size: clamp(2.8rem, 5.6vw, 5.75rem); }
  .ko-brand img { height: 2.6rem; }
}

/* Very short, such as a phone held sideways: let the page scroll instead of
   clipping anything. */
@media (max-height: 480px) {
  .ko-screen { min-height: 0; }
}

/* ---------------------------------------------------- 12. Motion and print */

@media (prefers-reduced-motion: reduce) {
  .ko-btn,
  .ko-btn__icon { transition: none; }
  .ko-btn:hover,
  .ko-btn:focus-visible,
  .ko-btn:hover .ko-btn__icon { transform: none; }
}

@media print {
  .ko-bg,
  .ko-bg__shade,
  .ko-scene { display: none !important; }
  body { background: #fff; color: #000; }
  .ko-title,
  .ko-lead,
  .ko-station__name,
  .ko-contact__item { color: #000; text-shadow: none; }
  .ko-btn { box-shadow: none; border: 1px solid #a8122a; }
}

/* WordPress admin bar */
body.admin-bar .ko-screen { min-height: calc(100svh - 32px); }

@media screen and (max-width: 782px) {
  body.admin-bar .ko-screen { min-height: calc(100svh - 46px); }
}