/* Aslan X. Shi — the two directions (home page, after the Bio).
   A split block: Classical Music on the left (first), Film & Media on the right.
   The circular mark sits on the divide. Hovering or focusing a half widens it a little,
   brightens its drawing and dims the other half (landing.js sets data-on / .is-on / .is-off).
   Tokens, fonts and the base focus style come from style.css. */
.landing{
  --split:50%;            /* where the divide sits */
  --art-w:54vw;           /* drawings are as wide as a half can grow, so widening only uncovers more */
  --hz:57%;               /* horizon: the two titles and the centre of the mark */
  --ease:cubic-bezier(.22,.7,.18,1);
  --bg-c:var(--bg); --bg-f:#161513;
  position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden;background:var(--bg-c);
}
.landing[data-on="c"]{--split:54%}
.landing[data-on="f"]{--split:46%}

/* ---------- the two halves ---------- */
.doors{position:absolute;inset:0;display:flex}
.door{position:relative;display:block;height:100%;overflow:hidden;color:var(--ink);-webkit-tap-highlight-color:transparent}
.door-c{flex:none;width:var(--split);background:var(--bg-c);transition:width 1.1s var(--ease)}
.door-f{flex:1 1 0;min-width:0;background:var(--bg-f)}
.door:focus-visible{outline:1px solid var(--line-3);outline-offset:-18px}

/* drawings: each fades out towards the edges; the inner edge fades on the half itself, so it follows the divide */
.door-art{position:absolute;top:0;bottom:0;width:var(--art-w);opacity:.62;transition:opacity 1s var(--ease)}
.door-fade{position:absolute;inset:0;display:block}
.door-art canvas{display:block;width:100%;height:100%}
/* the sketch passes quietly behind the label, as the credits do on the film side */
.door-c canvas{-webkit-mask-image:radial-gradient(ellipse 42% 26% at 48% 59%,rgba(0,0,0,.14),rgba(0,0,0,.3) 55%,#000);
  mask-image:radial-gradient(ellipse 42% 26% at 48% 59%,rgba(0,0,0,.14),rgba(0,0,0,.3) 55%,#000)}
.door-c .door-art{left:0;top:19%;bottom:8%;opacity:.5;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 16%);mask-image:linear-gradient(to right,transparent,#000 16%)}
.door-c .door-fade{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent)}
.door-f .door-art{right:0;
  -webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 96%);mask-image:linear-gradient(to bottom,#000 70%,transparent 96%)}
.door::after{content:"";position:absolute;z-index:1;top:0;bottom:0;width:9%;pointer-events:none}
.door-c::after{right:0;background:linear-gradient(to right,rgba(28,26,24,0),var(--bg-c))}
.door-f::after{left:0;background:linear-gradient(to left,rgba(22,21,19,0),var(--bg-f))}

/* label: kicker numeral, title on the horizon, subtitle, Enter */
.door-text{position:absolute;z-index:2;top:var(--hz);left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 40px);
  display:flex;flex-direction:column;align-items:center;text-align:center;transition:opacity .9s var(--ease)}
.door-c .door-text::before{content:"";position:absolute;z-index:-1;inset:-34% -16% -26%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(28,26,24,.9),rgba(28,26,24,.62) 55%,rgba(28,26,24,0))}
.door-head{position:relative;margin-top:-.5em;font-size:clamp(30px,min(3.6vw,6.6vh),62px)}   /* the title's middle sits on the horizon */
.door-t{position:relative;margin:0;font-family:var(--cond);font-weight:200;text-transform:uppercase;font-size:1em;
  line-height:1;letter-spacing:.14em;padding-left:.14em;text-wrap:balance;transition:letter-spacing 1.1s var(--ease),color .6s}
.door-t::after{content:"";position:absolute;left:50%;top:calc(100% + 18px);width:120px;height:1px;margin-left:-60px;background:var(--line-3);
  transform:scaleX(.2);transition:transform 1.1s var(--ease),background .6s}
.door-k{position:absolute;left:50%;bottom:calc(100% + 20px);transform:translateX(-50%);display:flex;align-items:center;gap:14px;
  font-family:var(--sc);font-weight:400;text-transform:none;font-size:16px;line-height:1;letter-spacing:.12em;color:var(--muted);white-space:nowrap}
.door-k::before,.door-k::after{content:"";width:18px;height:1px;background:var(--line-2)}
.door-s{margin:38px 0 0;max-width:30ch;font-family:var(--sc);font-size:clamp(16px,1.3vw,20px);line-height:1.3;letter-spacing:.06em;color:var(--ink-2);text-wrap:balance}
.door-go{display:inline-flex;align-items:center;gap:14px;margin-top:26px;padding-left:.32em;font-family:var(--cond);font-weight:300;text-transform:uppercase;
  letter-spacing:.32em;font-size:11.5px;color:var(--muted);transition:color .6s}
.door-go i{position:relative;display:block;width:30px;height:1px;background:currentColor;transition:width .9s var(--ease)}
.door-go i::after{content:"";position:absolute;right:.5px;top:-3px;width:6px;height:6px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}

/* chosen half: brighter drawing, wider title, the rule drawn out, Enter reaching forward; the other half recedes */
.door.is-on .door-art{opacity:1}
.door.is-on .door-t{letter-spacing:.18em;padding-left:.18em;color:#fff}
.door.is-on .door-t::after{transform:scaleX(1);background:var(--ink-2)}
.door.is-on .door-go{color:var(--ink)}
.door.is-on .door-go i{width:60px}
.door.is-off .door-art{opacity:.2}
.door.is-off .door-text{opacity:.4}

/* ---------- the divide, with the mark centred on it ---------- */
.l-axis{position:absolute;z-index:3;top:0;bottom:0;left:var(--split);width:0;pointer-events:none;transition:left 1.1s var(--ease)}
.l-axis::before{content:"";position:absolute;left:-.5px;width:1px;top:27%;bottom:9%;
  background:linear-gradient(to bottom,rgba(232,226,214,0),var(--line-2) 16%,var(--line-2) 84%,rgba(232,226,214,0))}
.l-mark{--m:min(50vh,31vw);position:absolute;left:0;top:var(--hz);width:var(--m);height:var(--m);max-width:none;transform:translate(-50%,-50%);
  opacity:.15;transition:transform 1.8s var(--ease)}
.landing[data-on="c"] .l-mark{transform:translate(-50%,-50%) rotate(-15deg)}
.landing[data-on="f"] .l-mark{transform:translate(-50%,-50%) rotate(15deg)}

/* ---------- name, tagline, former name: on the divide, above the halves ---------- */
.l-id{position:absolute;z-index:4;top:max(clamp(30px,6.5vh,80px),env(safe-area-inset-top,0px));left:var(--split);transform:translateX(-50%);
  width:max-content;max-width:min(92vw,860px);text-align:center;pointer-events:none;transition:left 1.1s var(--ease)}
.l-name{margin:0;font-family:var(--cond);font-weight:200;text-transform:uppercase;font-size:clamp(40px,min(5.4vw,9.4vh),96px);line-height:1;
  letter-spacing:.1em;padding-left:.1em;white-space:nowrap}
.l-tag{margin:20px 0 0;font-family:var(--sc);font-size:clamp(17px,1.45vw,22px);line-height:1.3;letter-spacing:.06em;color:var(--ink-2);text-wrap:balance}
.l-was{margin:8px 0 0;font-family:var(--sc);font-size:15px;letter-spacing:.08em;color:var(--dim)}

/* ---------- quiet links ---------- */
.l-links{position:absolute;z-index:4;left:0;right:0;bottom:max(16px,env(safe-area-inset-bottom,0px));pointer-events:none}
.l-links ul{list-style:none;margin:0;padding:0 var(--gr) 0 var(--gl);display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 34px}
.l-links a{pointer-events:auto;display:inline-block;padding:10px 0;font-family:var(--cond);font-weight:300;text-transform:uppercase;letter-spacing:.26em;
  font-size:11px;color:var(--muted);transition:color .3s}
.l-links a:hover,.l-links a:focus-visible{color:var(--ink)}
.l-links .full{display:flex;align-items:center;gap:34px}
.l-links .full::before{content:"";width:1px;height:12px;background:var(--line-2)}
.l-links .full a{color:var(--ink-2)}

/* ---------- cursor (fine pointers): a dot on the pointer and a ring that follows it over the halves ---------- */
.landing.has-cursor .door{cursor:none}
.l-cursor{position:fixed;z-index:50;left:0;top:0;pointer-events:none;opacity:0;transition:opacity .35s}
.l-cursor.on{opacity:1}
.l-cursor .d,.l-cursor .r{position:absolute;left:0;top:0;will-change:transform}
.l-cursor .d i{position:absolute;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--ink)}
.l-cursor .r i{position:absolute;width:36px;height:36px;margin:-18px 0 0 -18px;border:1px solid rgba(232,226,214,.38);border-radius:50%;
  transition:transform .6s var(--ease),border-color .6s}
.l-cursor.big .r i{transform:scale(1.9);border-color:rgba(232,226,214,.6)}

/* ---------- phones: the halves stacked, classical on top, the divide across ---------- */
@media (max-width:760px){
  .landing{height:auto;min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
  .l-id{position:relative;top:auto;left:auto;transform:none;width:auto;max-width:none;flex:none;
    padding:calc(34px + env(safe-area-inset-top,0px)) var(--gr) 22px var(--gl);transition:none}
  .l-name{font-size:clamp(34px,11vw,56px);letter-spacing:.08em;padding-left:.08em}
  .l-tag{margin:14px auto 0;font-size:17px;max-width:33ch}
  .l-was{font-size:14px}
  .doors{position:relative;inset:auto;flex:1 0 auto;flex-direction:column;min-height:600px}
  .door,.door-c{width:auto;height:auto;flex:1 1 0;min-height:300px;transition:none}
  /* the labels keep clear of the mark on the divide: classical sits a little high, film a little low */
  .door-c{--hz:40%}.door-f{--hz:55%}
  .door-art,.door-c .door-art,.door-f .door-art{left:0;right:0;top:0;bottom:0;width:auto}
  .door-c .door-art{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent)}
  .door-c .door-fade{-webkit-mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent)}
  .door-c canvas{-webkit-mask-image:radial-gradient(ellipse 48% 34% at 50% 54%,rgba(0,0,0,.14),rgba(0,0,0,.3) 55%,#000);
    mask-image:radial-gradient(ellipse 48% 34% at 50% 54%,rgba(0,0,0,.14),rgba(0,0,0,.3) 55%,#000)}
  .door-f .door-art{-webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent);mask-image:linear-gradient(to bottom,#000 80%,transparent)}
  .door::after{display:none}
  .door-head{font-size:clamp(28px,9vw,40px)}
  .door-k{bottom:calc(100% + 14px)}
  .door-s{margin-top:30px;font-size:16px}
  .door-go{margin-top:12px;padding:8px 0 8px .32em}
  .door:focus-visible{outline-offset:-10px}
  .l-axis{left:0;right:0;width:auto;top:50%;bottom:auto;height:0;transition:none}
  .l-axis::before{left:10%;right:10%;top:-.5px;bottom:auto;width:auto;height:1px;
    background:linear-gradient(to right,rgba(232,226,214,0),var(--line-2) 20%,var(--line-2) 80%,rgba(232,226,214,0))}
  .l-mark{--m:min(44vw,220px);left:50%;top:0;opacity:.12}
  .l-links{position:relative;bottom:auto;flex:none;padding:14px 0 calc(20px + env(safe-area-inset-bottom,0px))}
  .l-links ul{gap:0 24px}
  .l-links .full{flex-basis:100%;justify-content:center}
  .l-links .full::before{display:none}
}

/* ---------- on the home page: a block between Bio and contacts, not a whole screen ---------- */
.landing.dir{--hz:50%;height:min(76vh,800px);height:min(76svh,800px);min-height:540px;
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line)}
.landing.dir .door-c .door-art{top:5%;bottom:5%}
.landing.dir .l-axis::before{top:8%;bottom:8%}
.landing.dir .door-head{font-size:clamp(26px,min(3vw,5.6vh),52px)}   /* the longer names take two lines */
.landing.dir .door-t{max-width:13em}
.landing.dir .l-mark{--m:min(56vh,31vw,560px)}
@media (max-width:760px){
  .landing.dir{height:auto;min-height:0}
  .landing.dir .doors{min-height:640px}
  .landing.dir .door-c{--hz:42%}.landing.dir .door-f{--hz:56%}
}

/* ---------- home page: contacts above the icons in the footer ---------- */
footer.with-contacts{margin-top:0;padding-top:clamp(72px,9vw,120px);border-top:0}
/* (the contacts themselves are styled in style.css: they are in the footer of every page) */

/* ---------- reduced motion: the same composition, still; the halves keep their size ---------- */
@media (prefers-reduced-motion:reduce){
  .landing[data-on]{--split:50%}
  .landing[data-on] .l-mark{transform:translate(-50%,-50%)}
  .door-c,.l-axis,.l-id,.door-t,.door-t::after,.door-go i,.l-mark{transition:none}
}