/* The magicians' link pages — jin.html, and zlwin.html and chris.html when they are added.
   One narrow column: a portrait, a name, a stack of links and the enquiry form, in the
   MADgicians' dark theme. Loads after styles.css and madgicians.css. */

/* the ground is not flat black: a dark that is itself a little blue, with a soft blue
   light low on the right and another on the left, further down among the buttons. there
   is none behind the name: it was tried, and it pulled the eye away from the words.
   the buttons take the same tint so they sit in it */
.lk{
  position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  --vd:#070A12;--vd2:#0D1522;--vd3:#15233A;
  background:
    radial-gradient(95% 34rem at 100% 100%,rgba(28,127,168,.26),transparent 70%),
    radial-gradient(85% 30rem at 0% 68%,rgba(48,84,160,.18),transparent 70%),
    linear-gradient(180deg,#0B1827 0%,#080E19 48%,#06080E 100%);
  /* a solid colour under the gradient. without one the page's own colour is empty, and
     Safari then paints its bars, and the strip past either end of the page, white */
  background-color:#06080E;
}
.lk__wrap{
  position:relative;flex:1;width:min(100%,35rem);margin-inline:auto;
  padding:0 1.25rem 2.5rem;
}

/* ---------- the opening: the portrait, with cards or feathers falling into it ---------- */
/* the photo runs edge to edge on a phone. the loose cards are separate pictures placed
   exactly where they were in the photo, each by a percentage of the photo's size, so
   they stay in place at any width */
.lk__head{margin-bottom:1.75rem}
.lk__stage{
  position:relative;overflow:hidden;margin-inline:-1.25rem;aspect-ratio:var(--ar,10 / 9);
  background:#7C9DB1;   /* the backdrop's own blue, while the photo loads */
}
.lk__plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lk__fall{position:absolute;height:auto;max-width:none}
/* a feather is a holder that falls, with the picture inside it turned to its resting angle */
.lk__sway{display:block}
span.lk__fall img{display:block;width:100%;height:auto;transform:rotate(var(--rest,0deg))}
.lk__fall--far img{filter:blur(1.2px);opacity:.82}
/* the photo fades out at its foot, under the name, so the page's own colour shows through
   it. it is the photo that turns see-through, not a dark panel laid over it */
.lk__stage{
  -webkit-mask-image:linear-gradient(to bottom,#000 var(--f1,54%),rgba(0,0,0,.4) var(--f2,80%),transparent var(--f3,98%));
          mask-image:linear-gradient(to bottom,#000 var(--f1,54%),rgba(0,0,0,.4) var(--f2,80%),transparent var(--f3,98%));
}
/* on a wide screen the photo is a column in the middle, so its sides fade out as well */
@media (min-width:35.01rem){
  .lk__stage{
    -webkit-mask-image:linear-gradient(to right,transparent,#000 16%,#000 84%,transparent),linear-gradient(to bottom,#000 var(--f1,54%),rgba(0,0,0,.4) var(--f2,80%),transparent var(--f3,98%));
            mask-image:linear-gradient(to right,transparent,#000 16%,#000 84%,transparent),linear-gradient(to bottom,#000 var(--f1,54%),rgba(0,0,0,.4) var(--f2,80%),transparent var(--f3,98%));
    -webkit-mask-composite:source-in;mask-composite:intersect;
  }
}

/* a playing card drops from above the photo, turning, and slows to a stop in its place */
@keyframes lkFall{
  from{transform:translateY(calc(var(--up) * -1)) rotate(var(--spin))}
}
/* a feather does three things at once, each on its own layer so that none of them
   interrupts the others. lkSink is the fall: steady almost all the way, easing to rest. */
@keyframes lkSink{
  from{transform:translateY(calc(var(--up) * -1))}
}
/* lkSway is the swing, on the layer inside: a pendulum running down. at the end of each
   swing it hangs for a moment, lifted a little and tilted; through the middle it is level,
   lowest and fastest. each swing is smaller than the last until it is still. the easing is
   set per step: gathering speed towards the middle, losing it towards the end of the swing */
@keyframes lkSway{
  0%   {transform:translate(var(--sway),-14%) rotate(var(--spin));animation-timing-function:cubic-bezier(.4,0,1,1)}
  9%   {transform:none;animation-timing-function:cubic-bezier(0,0,.6,1)}
  18%  {transform:translate(calc(var(--sway) * -.8),-11%) rotate(calc(var(--spin) * -.8));animation-timing-function:cubic-bezier(.4,0,1,1)}
  27%  {transform:none;animation-timing-function:cubic-bezier(0,0,.6,1)}
  36%  {transform:translate(calc(var(--sway) * .62),-8%) rotate(calc(var(--spin) * .62));animation-timing-function:cubic-bezier(.4,0,1,1)}
  45%  {transform:none;animation-timing-function:cubic-bezier(0,0,.6,1)}
  54%  {transform:translate(calc(var(--sway) * -.45),-6%) rotate(calc(var(--spin) * -.45));animation-timing-function:cubic-bezier(.4,0,1,1)}
  63%  {transform:none;animation-timing-function:cubic-bezier(0,0,.6,1)}
  72%  {transform:translate(calc(var(--sway) * .3),-4%) rotate(calc(var(--spin) * .3));animation-timing-function:cubic-bezier(.4,0,1,1)}
  80%  {transform:none;animation-timing-function:cubic-bezier(0,0,.6,1)}
  88%  {transform:translate(calc(var(--sway) * -.15),-2%) rotate(calc(var(--spin) * -.15));animation-timing-function:cubic-bezier(.4,0,.6,1)}
  100% {transform:none}
}
/* lkTwist is on the picture itself: a real feather does not come down flat. it spins about
   its own shaft, so it thins to a line and opens out again; it tips towards you and away;
   and it turns like a hand on a clock. all three start fast and slow down, and it finishes
   lying at its resting angle */
@keyframes lkTwist{
  from{transform:rotate(calc(var(--rest,0deg) + var(--turn,0deg))) rotateX(var(--tumble,0deg)) rotateY(var(--twist,360deg))}
  to  {transform:rotate(var(--rest,0deg)) rotateX(0deg) rotateY(0deg)}
}
/* the same swing to a slower beat, five swings where the other has six, so that
   neighbouring feathers are not in step */
@keyframes lkSwayB{
  0%   {transform:translate(var(--sway),-15%) rotate(var(--spin));animation-timing-function:cubic-bezier(.4,0,1,1)}
  11%  {transform:none;animation-timing-function:cubic-bezier(0,0,.6,1)}
  22%  {transform:translate(calc(var(--sway) * -.76),-11%) rotate(calc(var(--spin) * -.76));animation-timing-function:cubic-bezier(.4,0,1,1)}
  33%  {transform:none;animation-timing-function:cubic-bezier(0,0,.6,1)}
  44%  {transform:translate(calc(var(--sway) * .55),-8%) rotate(calc(var(--spin) * .55));animation-timing-function:cubic-bezier(.4,0,1,1)}
  55%  {transform:none;animation-timing-function:cubic-bezier(0,0,.6,1)}
  66%  {transform:translate(calc(var(--sway) * -.36),-5%) rotate(calc(var(--spin) * -.36));animation-timing-function:cubic-bezier(.4,0,1,1)}
  76%  {transform:none;animation-timing-function:cubic-bezier(0,0,.6,1)}
  86%  {transform:translate(calc(var(--sway) * .18),-2%) rotate(calc(var(--spin) * .18));animation-timing-function:cubic-bezier(.4,0,.6,1)}
  100% {transform:none}
}
@keyframes lkRise{
  from{opacity:0;transform:translateY(14px)}
}
/* waiting for the pictures: nothing that is about to arrive shows yet */
.lk-js:not(.lk-go) .lk__fall{visibility:hidden}
.lk-js:not(.lk-go) .lk__id{opacity:0}
/* go: the cards or feathers fall, and the name comes up. the buttons are simply there */
.lk-go .lk__fall{animation:lkFall var(--t,1s) cubic-bezier(.2,.72,.24,1) var(--d,0s) both}
.lk-go .lk__fall--drift{animation-name:lkSink;animation-timing-function:cubic-bezier(.34,.52,.5,1)}
.lk-go .lk__sway{animation:lkSway var(--t,3s) linear var(--d,0s) both}
.lk-go .lk__sway--b{animation-name:lkSwayB}
.lk-go .lk__fall--drift img{animation:lkTwist var(--t,3s) cubic-bezier(.2,.46,.38,1) var(--d,0s) both}
.lk-go .lk__id{animation:lkRise .7s cubic-bezier(.16,1,.3,1) .25s both}

/* ---------- who it is ---------- */
/* his name sits over the foot of the photo, where it has faded into the page */
.lk__id{position:relative;display:grid;justify-items:center;text-align:center;margin-top:calc(var(--over,5.25rem) * -1)}
.lk__id .eyebrow{margin:0 0 .7rem;font-size:.6875rem}
.lk__name{font-size:clamp(2.5rem,11vw,3.25rem);line-height:1}
.lk__handle{margin:.5rem 0 0;font-weight:600;color:var(--inv)}
.lk__bio{margin:.9rem 0 0;max-width:32ch;color:var(--dim);text-wrap:balance}
.lk__bio a{color:var(--inv);text-underline-offset:.2em}
.lk__bio a:hover{color:var(--glow)}

/* ---------- the links ---------- */
.lk__list{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
/* a picture on the left, the same width left empty on the right for the arrow, so the
   words sit in the true middle of the button */
.lk__link{
  display:grid;grid-template-columns:48px 1fr 48px;align-items:center;gap:.5rem;
  min-height:66px;padding:.5rem;
  border:1px solid var(--faint);border-radius:14px;background:var(--vd2);
  text-decoration:none;text-align:center;font-weight:600;line-height:1.3;
  transition:border-color .2s ease,background-color .2s ease,box-shadow .35s ease;
}
.lk__link:hover{border-color:var(--glow);background:var(--vd3);box-shadow:0 0 30px rgba(79,217,240,.14)}
.lk__link:focus-visible,.lk__social a:focus-visible{outline:2px solid var(--glow);outline-offset:3px}
.lk__thumb{width:48px;height:48px;border-radius:10px;overflow:hidden;display:grid;place-items:center}
.lk__thumb img{width:100%;height:100%;object-fit:cover}
.lk__thumb--logo{background:#fff;padding:7px}
.lk__thumb--logo img{object-fit:contain}
.lk__sub{display:block;margin-top:.1rem;font-size:.8125rem;font-weight:400;color:var(--dim);text-wrap:balance}
.lk__go{justify-self:center;color:var(--dim);transition:color .2s ease,transform .2s ease}
.lk__link:hover .lk__go{color:var(--glow);transform:translate(2px,-2px)}

/* ---------- showreel card ---------- */
/* the magician's showreel plays muted on a loop in the card (script.js, "link pages:
   showreel cards"); the whole card is one link that opens the full video with sound
   in the pop up. until the video plays, or where it cannot autoplay (Low Power Mode,
   less motion), the card shows the video's own cover picture */
.lk__reel{
  position:relative;padding:.5rem;
  border:1px solid var(--faint);border-radius:14px;background:var(--vd2);
  text-align:center;font-weight:600;line-height:1.3;
  transition:border-color .2s ease,background-color .2s ease,box-shadow .35s ease;
}
.lk__reel:hover{border-color:var(--glow);background:var(--vd3);box-shadow:0 0 30px rgba(79,217,240,.14)}
.lk__reel:has(.lk__reel-link:focus-visible){outline:2px solid var(--glow);outline-offset:3px}
.lk__reel-media{position:relative;display:block;aspect-ratio:16/9;border-radius:9px;overflow:hidden;background:#000}
.lk__reel-media > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lk__reel-loop{position:absolute;inset:0;opacity:0;transition:opacity .5s ease;pointer-events:none}
.lk__reel-loop.is-ready{opacity:1;transition-duration:.8s}   /* fades in slowly, out quickly */
/* a touch larger than the card, so YouTube's own edges never show */
.lk__reel-loop iframe{position:absolute;left:50%;top:50%;width:104%;height:104%;transform:translate(-50%,-50%);border:0}
/* "Watch showreel", with a play icon, on a short black gradient that slides up from the
   foot of the video: once, three seconds after the card settles in the middle of the
   screen, for three seconds (script.js adds .is-cue), and while the mouse is over it */
.lk__reel-cue{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:1.6rem 1rem .8rem;color:#fff;font-weight:600;line-height:1.2;
  background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.55) 55%,rgba(0,0,0,0) 100%);
  transform:translateY(101%);transition:transform .9s cubic-bezier(.16,1,.3,1);pointer-events:none;
}
.lk__reel-cue svg{width:18px;height:18px;fill:currentColor;flex:0 0 auto}
.lk__reel.is-cue .lk__reel-cue,
.lk__reel:hover .lk__reel-cue,
.lk__reel:has(.lk__reel-link:focus-visible) .lk__reel-cue{transform:none}
/* the card's link: invisible, over the whole card, so a tap anywhere opens the video */
.lk__reel-link{position:absolute;inset:0;z-index:2;border-radius:inherit;outline:none}
@media (prefers-reduced-motion:reduce){
  .lk__reel-loop{display:none}
  .lk__reel-cue{transform:none;transition:none}   /* no loop, no sliding: the words simply stay */
}

/* ---------- buttons that drop open: the profile request and the enquiry form ---------- */
/* a button that opens downwards into a short form. the profile's shows its cover
   large above its name; the enquiry's is the Email button under "Show/business enquiry" */
.lk__ask{
  border:1px solid var(--faint);border-radius:14px;background:var(--vd2);
  transition:border-color .2s ease,background-color .2s ease,box-shadow .35s ease;
}
.lk__ask:not([open]):hover{border-color:var(--glow);background:var(--vd3);box-shadow:0 0 30px rgba(79,217,240,.14)}
.lk__ask[open]{border-color:rgba(79,217,240,.55)}
.lk__ask summary{
  position:relative;display:block;padding:.75rem .75rem 1rem;border-radius:13px;
  list-style:none;cursor:pointer;text-align:center;font-weight:600;line-height:1.3;
}
.lk__ask summary::-webkit-details-marker{display:none}
.lk__ask summary:focus-visible{outline:2px solid var(--glow);outline-offset:3px}
.lk__cover{display:block;aspect-ratio:16/9;border-radius:9px;overflow:hidden;margin-bottom:.9rem;background:var(--vd3)}
.lk__cover img{width:100%;height:100%;object-fit:cover}
.lk__ask-name{display:block;padding-inline:2.25rem}   /* clear of the arrow, and still centred */
.lk__chev{
  position:absolute;right:1.1rem;bottom:1.45rem;width:20px;height:20px;
  color:var(--dim);transition:transform .25s ease,color .2s ease;
}
.lk__ask:hover .lk__chev{color:var(--glow)}
.lk__ask[open] .lk__chev{transform:rotate(180deg);color:var(--glow)}
.lk__ask-panel{margin:0 .75rem;padding:0 .5rem 1.25rem;border-top:1px solid var(--faint);scroll-margin:1rem 0 1.5rem}
.lk__ask-panel > p{margin:1rem auto 1.25rem;max-width:34ch;text-align:center;font-size:.9375rem;color:var(--dim)}
.lk__ask[open] .lk__ask-panel{animation:lkDrop .32s cubic-bezier(.16,1,.3,1)}
@keyframes lkDrop{from{opacity:0;transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.lk__ask[open] .lk__ask-panel{animation:none}}
/* "Request on", then the two ways to send it, side by side */
.lk__ask-send{display:grid;grid-template-columns:1fr 1fr;gap:.4rem .75rem}
.lk__ask-on{grid-column:1 / -1;margin:0;font-size:.8125rem;font-weight:600;color:var(--dim)}
.lk__ask-send button{display:flex;align-items:center;justify-content:center;gap:.55rem;padding-inline:.5rem}
.lk__ask-send button svg{width:22px;height:22px;flex:0 0 auto}
/* every button in the forms on these pages is outlined, not filled: the profile
   request's WhatsApp and Email, and the enquiry form's Send */
.mg.lk .form button{background:transparent;color:var(--inv);box-shadow:inset 0 0 0 1px rgba(243,242,239,.3)}
.mg.lk .form button:hover{background:transparent;color:var(--glow);box-shadow:inset 0 0 0 1px var(--glow)}

/* the button is already the raised colour, so the fields step back down to the page's */
.lk__ask .field input,.lk__ask .field textarea{background:var(--vd)}
.lk__ask .form{max-width:none}

/* ---------- show/business enquiry ---------- */
/* a short title between two hairlines, then WhatsApp and Email side by side */
.lk__rule{
  display:flex;align-items:center;gap:1rem;margin:2.25rem 0 1.1rem;
  font-size:.75rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;line-height:1.3;
}
.lk__rule::before,.lk__rule::after{content:"";flex:1;height:1px;background:var(--faint)}
.lk__rule span{margin-right:-.3em;white-space:nowrap}   /* the spacing after the last letter, taken back */

.lk__ways{display:flex;align-items:flex-start}
.lk__way,.lk__ask--way summary{
  display:flex;align-items:center;justify-content:center;gap:.55rem;
  font-weight:600;line-height:1.3;white-space:nowrap;
}
.lk__way svg,.lk__ask--way summary > svg:first-child{width:22px;height:22px;flex:0 0 auto}
/* no side padding and a see-through border, so it measures the same as Email beside it */
.lk__way{
  flex:1 1 0;min-width:0;min-height:56px;margin-right:.75rem;padding:.5rem 0;overflow:hidden;
  border:1px solid rgba(243,242,239,.3);border-radius:14px;background:var(--vd2);color:var(--inv);text-decoration:none;
  transition:flex-grow .4s cubic-bezier(.16,1,.3,1),margin-right .4s cubic-bezier(.16,1,.3,1),
             border-width .4s cubic-bezier(.16,1,.3,1),opacity .25s ease .15s,visibility 0s,
             background-color .2s ease,color .2s ease,box-shadow .35s ease;
}
.lk__way:hover{border-color:var(--glow);background:var(--vd3);box-shadow:0 0 30px rgba(79,217,240,.14)}
.lk__way:focus-visible{outline:2px solid var(--glow);outline-offset:3px}
.lk__ask--way{flex:1 1 0;min-width:0;border-color:rgba(243,242,239,.3)}
.lk__ask--way summary{min-height:54px;padding:.5rem .6rem}
/* the arrow sits beside the word, not out at the edge, so it cannot run into it on a narrow phone */
.lk__ask--way .lk__chev{position:static;width:18px;height:18px;flex:0 0 auto;margin-left:-.15rem}
/* Email opened: it takes the whole row and WhatsApp shrinks to nothing beside it */
.lk__ways.is-open .lk__way{
  flex-grow:0;margin-right:0;border-width:1px 0;opacity:0;visibility:hidden;pointer-events:none;
  transition:flex-grow .4s cubic-bezier(.16,1,.3,1),margin-right .4s cubic-bezier(.16,1,.3,1),
             border-width .4s cubic-bezier(.16,1,.3,1),opacity .15s ease,visibility 0s .4s;
}
@media (prefers-reduced-motion:reduce){.lk__way,.lk__ways.is-open .lk__way{transition:none}}

/* ---------- social icons ---------- */
.lk__social{list-style:none;margin:2rem 0 0;padding:0;display:flex;justify-content:center;gap:.75rem}
.lk__social a{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;color:var(--inv);transition:color .2s ease}
/* under the mouse each icon takes its own brand colours (below) */
.lk__social svg{width:26px;height:26px;fill:currentColor}
.lk__social a[aria-label^="Instagram"]:hover svg{fill:url(#lkIg)}          /* the gradient is in the page, inside the icon */
.lk__social a[aria-label^="YouTube"]:hover{color:#FF0000}
.lk__yt-play{fill:transparent;transition:fill .2s ease}                     /* the white triangle, shown only on hover */
.lk__social a[aria-label^="YouTube"]:hover .lk__yt-play{fill:#fff}
.lk__social a[aria-label^="TikTok"] svg{transition:filter .2s ease}
.lk__social a[aria-label^="TikTok"]:hover svg{filter:drop-shadow(-1.5px -1.2px 0 #25F4EE) drop-shadow(1.5px 1.2px 0 #FE2C55)}
/* RedNote has no drawn icon here: its mark (a rounded square with the characters cut out)
   is a picture used as a stencil, filled with the same colour as the icons beside it */
.lk__rednote{
  width:25px;height:25px;background:currentColor;
  -webkit-mask:url(../images/icon-rednote.png) center/contain no-repeat;
          mask:url(../images/icon-rednote.png) center/contain no-repeat;
}
/* under the mouse, the real app icon in its own red */
.lk__social a[aria-label^="RedNote"]:hover .lk__rednote{
  -webkit-mask:none;mask:none;border-radius:6px;
  background:url(../images/link-rednote.png) center/contain no-repeat;
}

/* ---------- who they perform with ---------- */
.lk__foot{position:relative;padding:0 1.25rem 2.25rem;text-align:center;font-size:.8125rem;color:var(--dim)}
.lk__foot p{margin:0 auto .5rem;max-width:44ch}
.lk__foot a{text-underline-offset:.2em}
.lk__foot a:hover{color:var(--inv)}