/* =============================================================================
   social-orbit.css -- the last section of social.html: the Chyk logo, and
   Instagram and YouTube in gold going round it.

   The user, 2026-10-01: "a small new section with the Chyk logo in the
   center and two logos -- one of instagram and the other of Youtube -- both
   made in gold (vector svgs), orbiting around the logo elliptically and
   leaving a small trail behind them. the trail should be made of the same
   ember material as 'Leaders' in the leader page and the diya + logo in the
   footer ... curved along the ellipse, and should be thin and sleek. When
   the user clicks on either one it re-directs them to the respective social
   media page." (schematic: "You know you are a (Presentation) (45).png":
   Instagram at the top with its trail running round the right, YouTube at
   the bottom with its trail running round the left; both going round
   anticlockwise, half a turn apart.)

     <section class="so-orbit">
       <div class="so-stage" data-so-orbit>
         <canvas class="so-canvas"></canvas>        the trails (js/social-orbit.js)
         <img class="so-logo">                      the logo, in the middle
         <a class="so-icon so-ig">…</a>             the two links, in gold
         <a class="so-icon so-yt">…</a>
       </div>
     </section>

   The ellipse is --so-rx of the stage's width across and --so-ry of its
   height up (half-axes), taken off the schematic. With no script the two
   sit still at the top and the bottom of it, and are links all the same.
   ========================================================================== */

.so-orbit {
  position: relative;
  background: #000;
  padding: clamp(2.5rem, 7vh, 5rem) 16px clamp(3.5rem, 9vh, 6rem);
  overflow: hidden;
}
.so-stage {
  --so-rx: .30; --so-ry: .33;
  --so-icon: clamp(44px, 4.8vw, 66px);
  position: relative;
  width: min(100%, 1100px); aspect-ratio: 16 / 9;
  margin: 0 auto;
}
.so-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; pointer-events: none;
  z-index: 0;
}
.so-logo {
  position: absolute; left: 50%; top: 50%;
  width: 38.5%; height: auto;
  transform: translate(-50%, -50%);
  z-index: 1; pointer-events: none;
  -webkit-user-select: none; user-select: none;
  filter: drop-shadow(0 .5rem 1.4rem rgba(0, 0, 0, .6));
}

/* ── the two links ────────────────────────────────────────────────────── */
.so-icon {
  position: absolute; left: 50%;
  width: var(--so-icon); height: var(--so-icon);
  margin: calc(var(--so-icon) / -2) 0 0 calc(var(--so-icon) / -2);
  display: block; z-index: 2;
  border-radius: 30%;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 0 .45rem rgba(255, 196, 90, .42)) drop-shadow(0 .2rem .4rem rgba(0, 0, 0, .6));
  transition: filter .35s ease;
}
/* the size is the picture's, not the link's: the link is placed by its
   transform every frame, and CSS applies scale before transform, so a scale
   on the link scaled where it was too -- 1.14 threw it 60 px off along the
   ellipse, out from under the pointer, and back as the hover went: the
   twitching (the user, 2026-10-06). On the picture it grows in place. */
.so-icon svg {
  display: block; width: 100%; height: 100%; overflow: visible;
  transition: scale .35s cubic-bezier(.2, .7, .2, 1);
}
.so-ig { top: calc(50% - var(--so-ry) * 100%); }
.so-yt { top: calc(50% + var(--so-ry) * 100%); }
/* once the script is going it places them itself, every frame */
.so-live .so-icon { left: 0; top: 0; will-change: transform; }
/* pointed at, the orbit stops (js/social-orbit.js) and the icon grows a little */
.so-icon:hover svg, .so-icon:focus-visible svg { scale: 1.12; }
.so-icon:hover, .so-icon:focus-visible {
  filter: drop-shadow(0 0 .8rem rgba(255, 210, 110, .8)) drop-shadow(0 .2rem .4rem rgba(0, 0, 0, .6));
}
/* its name under it, only while it is pointed at (the user, 2026-10-06: "the
   text 'INSTAGRAM' or 'YOUTUBE' in minimal clean sans capital font fading
   into life ... and fading out when they hover past. Keep the fade
   intentional and visible"): .8 s in, the letters drawing together from
   wide, out of a blur, rising 6 px; .6 s out, the same way back. It takes
   no pointer, so the empty space it sits in is not part of the link. The
   trailing letter-space is paid back on the left, so the word is centred. */
.so-name {
  position: absolute; left: 50%; top: calc(100% + .95rem);
  padding-left: .5em;
  font-family: var(--font-body, 'Inter'), system-ui, sans-serif;
  font-weight: 400; font-size: clamp(.62rem, .82vw, .78rem); line-height: 1;
  letter-spacing: .5em; text-transform: uppercase; white-space: nowrap;
  color: #f3e6c4;
  opacity: 0; filter: blur(5px);
  transform: translate(-50%, 6px);
  pointer-events: none; -webkit-user-select: none; user-select: none;
  transition: opacity .6s ease, filter .6s ease, transform .6s ease, letter-spacing .6s ease, padding-left .6s ease;
}
.so-icon:hover .so-name, .so-icon:focus-visible .so-name {
  opacity: 1; filter: blur(0); transform: translate(-50%, 0);
  letter-spacing: .34em; padding-left: .34em;
  transition: opacity .8s cubic-bezier(.2, .7, .2, 1), filter .8s cubic-bezier(.2, .7, .2, 1),
              transform .8s cubic-bezier(.2, .7, .2, 1), letter-spacing .8s cubic-bezier(.2, .7, .2, 1),
              padding-left .8s cubic-bezier(.2, .7, .2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .so-name, .so-icon:hover .so-name { filter: none; transform: translate(-50%, 0); letter-spacing: .34em; padding-left: .34em; }
}
.so-icon:focus { outline: none; }
.so-icon:focus-visible { outline: 2px solid #f5cf62; outline-offset: .45rem; }

@media (max-width: 700px) {
  .so-stage { --so-rx: .40; --so-ry: .355; aspect-ratio: 5 / 4; }
  .so-logo { width: 50%; }
}