/* Militant entrance. Orange Militant Media on the left, gold Militant Mind on the right.
   Clean on purpose: backgrounds stay low, the logos carry the page.
   Every animation moves only position, size and fade, so the browser's graphics layer runs it
   without repainting: that is what keeps it smooth on phones and older laptops. */
/* FONT: Manrope, served from this site (no wait on Google), one variable file per character set */
@font-face{font-family:"Manrope";font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/manrope-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400 800;font-display:swap;src:url(../fonts/manrope-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --ink:#f0ece4;--ink2:#ccc6bb;--ink3:#8a857c;
  --or:#d96218;--or-deep:#bd520f;
  --gold:#d9bf8f;--gold-ink:#1a150c;
  --ease:cubic-bezier(.22,.7,.2,1);
  --glide:cubic-bezier(.65,0,.35,1);
  --soft:cubic-bezier(.33,0,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#080706;color:var(--ink);font-family:"Manrope",sans-serif;-webkit-font-smoothing:antialiased}
body{overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.split{position:fixed;inset:0;display:flex;background:#080706}
.half{position:relative;flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;
  color:inherit;text-decoration:none;overflow:hidden;transition:opacity .7s var(--soft)}
.bg,.bg>*{position:absolute;inset:0}
.bg{transition:opacity .9s var(--soft),transform 1.4s var(--soft)}
.bg-field{width:100%;height:100%}

/* Media: the sunset from the current site's header, kept dark */
.media .bg{background:#0c0806}
.bg-video{width:100%;height:100%;object-fit:cover;object-position:16% 50%;opacity:.32;filter:saturate(.85) contrast(1.05)}
.media .bg-tone{background:
  radial-gradient(90% 70% at 30% 105%,rgba(217,98,24,.26),transparent 62%),
  radial-gradient(60% 50% at 50% 42%,rgba(217,98,24,.07),transparent 70%),
  linear-gradient(90deg,rgba(8,7,6,.55),transparent 30%,transparent 80%,rgba(8,7,6,.35)),
  linear-gradient(180deg,rgba(8,7,6,.45),transparent 30%,transparent 65%,rgba(8,7,6,.7))}

/* Mind: dark, with a gold web kept away from the logo and words */
.mind .bg{background:#0b0b0a}
.mind .bg-tone{background:
  radial-gradient(90% 70% at 70% 105%,rgba(217,191,143,.16),transparent 62%),
  radial-gradient(60% 50% at 50% 42%,rgba(217,191,143,.06),transparent 70%),
  linear-gradient(180deg,rgba(8,7,6,.35),transparent 30%,transparent 65%,rgba(8,7,6,.6))}
.mind .bg-field{opacity:.78;-webkit-mask-image:radial-gradient(48% 50% at 50% 50%,transparent 64%,#000 100%);mask-image:radial-gradient(48% 50% at 50% 50%,transparent 64%,#000 100%)}

/* the seam rides the edge of the Mind half */
.mind::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,transparent 4%,rgba(217,98,24,.55) 30%,rgba(240,236,228,.7) 50%,rgba(217,191,143,.6) 70%,transparent 96%);
  box-shadow:0 0 18px rgba(240,220,190,.28);transition:opacity .5s}

/* content */
.content{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 28px;
  transition:opacity .7s var(--soft),transform .9s var(--soft)}
.logo{position:relative;isolation:isolate;width:clamp(230px,22vw,340px)}
.logo img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
/* a soft shadow under the mark, painted once (no live blur) */
.logo::before{content:"";position:absolute;left:6%;right:6%;top:18%;bottom:8%;z-index:-1;
  background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);pointer-events:none}
.mark{position:relative}
.mark-silver{position:absolute;left:0;top:0;opacity:0}
.line{margin-top:18px;max-width:30ch;font-size:clamp(15px,1.15vw,17px);font-weight:500;line-height:1.5;color:var(--ink2)}
.cta{margin-top:26px;display:inline-flex;gap:10px;align-items:center;padding:13px 30px;border-radius:999px;
  font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
  border:1px solid rgba(240,236,228,.28);transition:background .35s,border-color .35s,color .35s,transform .35s var(--ease)}
.media .cta{border-color:rgba(217,98,24,.6)}
.mind .cta{border-color:rgba(217,191,143,.55)}

/* the metal catches the light: a soft band slides across the mark, clipped to the mark's own shape */
.sheen{position:absolute;inset:0;overflow:hidden;pointer-events:none;mix-blend-mode:screen;
  -webkit-mask:var(--mark) center/100% 100% no-repeat;mask:var(--mark) center/100% 100% no-repeat}
.media .sheen{--mark:url(assets/media-mark.webp)}
.mind .sheen{--mark:url(assets/mind-mark.webp)}
.sheen-band{position:absolute;top:-5%;bottom:-5%;left:0;width:48%;transform:translate3d(-105%,0,0);
  background:linear-gradient(100deg,transparent 0%,rgba(255,250,240,0) 22%,rgba(255,250,240,.5) 50%,rgba(255,250,240,0) 78%,transparent 100%)}
@keyframes sheen{from{transform:translate3d(-105%,0,0)}to{transform:translate3d(215%,0,0)}}

/* hover and keyboard focus: the chosen side leans in, the other side steps back */
@media (hover:hover){
  .split.hover-media .media .bg,.split.hover-mind .mind .bg{transform:scale(1.035)}
  .split.hover-media .mind .bg,.split.hover-mind .media .bg{opacity:.5}
  .split.hover-media .mind .content,.split.hover-mind .media .content{opacity:.55}
  .half:hover .sheen-band{animation:sheen 1.3s var(--soft) both}
}
.media:hover .cta,.media:focus-visible .cta{background:var(--or-deep);border-color:var(--or-deep);transform:translateY(-2px)}
.mind:hover .cta,.mind:focus-visible .cta{background:var(--gold);border-color:var(--gold);color:var(--gold-ink);transform:translateY(-2px)}
.half:focus-visible{outline:none}
.half:focus-visible .cta{outline:2px solid var(--ink);outline-offset:4px}

/* choosing a side: one even slide. The other side slides off the screen and the seam travels with it,
   the chosen side opens to fill the screen (its background grows from its own centre) and its logo
   glides to the middle. Transform only, so it runs on the graphics layer. Then the next page crossfades in. */
.split{--slide:cubic-bezier(.76,0,.24,1)}
.media::after{content:"";position:absolute;right:0;top:0;bottom:0;width:1px;z-index:3;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,transparent 4%,rgba(217,98,24,.55) 30%,rgba(240,236,228,.7) 50%,rgba(217,191,143,.6) 70%,transparent 96%);
  box-shadow:0 0 18px rgba(240,220,190,.28)}
.half{will-change:transform}
.split.go-media .media,.split.go-mind .mind{overflow:visible;z-index:1}
.split.go-media .mind,.split.go-mind .media{z-index:2}
.split.go-media .mind{transform:translate3d(100%,0,0);transition:transform 1s var(--slide)}
.split.go-mind .media{transform:translate3d(-100%,0,0);transition:transform 1s var(--slide)}
.split.go-mind .mind::before{opacity:0;transition:none}
.split.go-mind .media::after{opacity:1}
.split.go-media .media .bg{transform:translate3d(50%,0,0) scale(2);opacity:1;transition:transform 1s var(--slide)}
.split.go-mind .mind .bg{transform:translate3d(-50%,0,0) scale(2);opacity:1;transition:transform 1s var(--slide)}
.split.go-media .media .content{transform:translate3d(25vw,0,0);opacity:1;transition:transform 1s var(--slide)}
.split.go-mind .mind .content{transform:translate3d(-25vw,0,0);opacity:1;transition:transform 1s var(--slide)}
.split.go-media .media .cta,.split.go-mind .mind .cta{transition:none}
/* coming back with the Back button: snap to the start with no animation */
.split.reset *,.split.reset .half,.split.reset::before{transition:none !important}

/* the next page fades in over this one (browsers that support cross-page transitions) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s;animation-timing-function:cubic-bezier(.33,0,.2,1)}


/* ─── the opening: "Unite", about 4.5 seconds, once per visit ───
   0.2s  the silver MILITANT lockup fades up in the middle, with a quiet halo of light
   1.0s  one slow sheen crosses the metal
   2.0s  it splits at the seam and glides apart into Militant Media and Militant Mind; the silver warms
         into orange and gold, and both sites fade up behind them
   3.3s  MEDIA and MIND settle under the name, then the seam, the lines and the buttons */
.halo{position:absolute;left:50%;top:47%;width:min(90vh,760px);height:min(90vh,760px);margin:calc(min(90vh,760px) / -2) 0 0 calc(min(90vh,760px) / -2);
  z-index:4;pointer-events:none;opacity:0;border-radius:50%;
  background:radial-gradient(closest-side,rgba(226,228,236,.16),rgba(200,196,205,.06) 45%,transparent 100%)}
.media .content{--dx:25vw;--dy:0px}
.mind .content{--dx:-25vw;--dy:0px}

@keyframes u-in{from{opacity:0;transform:translate3d(var(--dx),var(--dy),0) scale(.6)}to{opacity:1;transform:translate3d(var(--dx),var(--dy),0) scale(.62)}}
@keyframes u-apart{from{transform:translate3d(var(--dx),var(--dy),0) scale(.62)}to{transform:translate3d(0,0,0) scale(1)}}
@keyframes halo{0%{opacity:0}40%{opacity:1}65%{opacity:1}100%{opacity:0}}
@keyframes up{from{opacity:0;transform:translate3d(0,6px,0)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes unfade{from{opacity:1}to{opacity:0}}
@keyframes rise{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}

/* during the opening each side shows only its own half of the mark, so the silver lockup
   reads as one piece that splits at the seam and extends outward, with no overlap */
.intro .content{z-index:5;will-change:transform,opacity;
  animation:u-in 1.3s var(--soft) .2s both,u-apart 1.9s var(--glide) 2s both}
.intro .halo{animation:halo 3.1s var(--soft) .1s both}
.intro .mark-silver{will-change:opacity;animation:unfade 1.7s var(--glide) 2.1s both}
.intro .sheen-band{animation:sheen 1.5s var(--soft) 1s both}
.intro .sub{will-change:opacity,transform;animation:up .8s var(--soft) 3.25s both}
.intro .bg{will-change:opacity;animation:fade 2s var(--soft) 2s both}
.intro .mind::before{animation:fade 1s var(--soft) 3s both}
.intro .line{animation:rise 1s var(--ease) 3.55s both}
.intro .cta{animation:rise 1s var(--ease) 3.7s both}

/* phones and narrow screens: stacked, Media on top */
@media (max-width:760px){
  .split{flex-direction:column}
  .mind::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1px;
    background:linear-gradient(90deg,transparent 4%,rgba(217,98,24,.55) 30%,rgba(240,236,228,.7) 50%,rgba(217,191,143,.6) 70%,transparent 96%)}
  .mind .bg-field{-webkit-mask-image:radial-gradient(62% 48% at 50% 52%,transparent 62%,#000 100%);mask-image:radial-gradient(62% 48% at 50% 52%,transparent 62%,#000 100%)}
  .logo{width:min(42vw,180px)}
  .line{margin-top:10px;font-size:14px;max-width:26ch}
  .cta{margin-top:16px;padding:11px 24px;font-size:12px}
  .media .content{--dx:0px;--dy:25vh}
  .mind .content{--dx:0px;--dy:-25vh}
  .halo{top:50%}
  .media::after{left:0;right:0;top:auto;bottom:0;width:auto;height:1px;
    background:linear-gradient(90deg,transparent 4%,rgba(217,98,24,.55) 30%,rgba(240,236,228,.7) 50%,rgba(217,191,143,.6) 70%,transparent 96%)}
  .split.go-media .mind{transform:translate3d(0,100%,0)}
  .split.go-mind .media{transform:translate3d(0,-100%,0)}
  .split.go-media .media .bg{transform:translate3d(0,50%,0) scale(2)}
  .split.go-mind .mind .bg{transform:translate3d(0,-50%,0) scale(2)}
  .split.go-media .media .content{transform:translate3d(0,25vh,0)}
  .split.go-mind .mind .content{transform:translate3d(0,-25vh,0)}
}
@media (max-width:760px) and (max-height:640px){
  .logo{width:min(34vw,140px)}
  .line{font-size:13px}
  .cta{margin-top:12px;padding:9px 20px}
}
@media (prefers-reduced-motion:reduce){
  .half,.bg,.content,.cta,.mind::before,.split[class*=go-] *{transition:none !important}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}
/* keep the moving parts on their own graphics layers from the start, so the click has nothing to prepare */
.bg,.content{will-change:transform,opacity}