:root{
  --bg:#000; --fg:#fff; --muted:#d0d0d0;
  --pad:clamp(16px,2.4vw,56px); --maxw:1200px;
  --e:cubic-bezier(.22,.61,.36,1);
  --dur:900ms;         
  --img-in:1200ms;     
  --fade-start: 80%;
  --fade-end:   100%;
}

*{box-sizing:border-box}

html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif
}

.loader{
  position:fixed; inset:0;
  display:grid; place-items:center;
  background:#000;
  z-index:9999;
  transition:opacity .5s var(--e), visibility .5s var(--e);
}
.loader.is-hide{ opacity:0; visibility:hidden; }

.spinner{
  width:56px; height:56px; border-radius:50%;
  border:3px solid rgba(255,255,255,.18);
  border-top-color:#fff;
  animation:spin 1s linear infinite;
}
.loader__text{
  margin-top:14px; font-size:14px; letter-spacing:.06em;
  color:#bdbdbd; text-transform:lowercase; opacity:.85; text-align:center
}
@keyframes spin{to{transform:rotate(360deg)}}

html.is-preload .media__img,
html.is-preload .reveal{ visibility:hidden }

.stage{position:relative; min-height:100svh; overflow:clip}

.media{
  position:fixed; inset:0 auto 0 0; width:50vw;
  display:grid; place-items:center; overflow:hidden
}

.media__img{
  width:100%;
  height:100svh;              
  object-fit:cover; object-position:center;
  transform:scale(1.04);
  opacity:0; filter:blur(10px);
  clip-path:polygon(0 0,0 100%,0 100%,0 0);  
  will-change:transform,filter,opacity,clip-path;

  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) var(--fade-start), rgba(0,0,0,0) var(--fade-end));
          mask-image: linear-gradient(to bottom, rgba(0,0,0,1) var(--fade-start), rgba(0,0,0,0) var(--fade-end));
  -webkit-mask-size: 100% 100%;  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;  mask-repeat:no-repeat;
}

.media__vignette{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 120% at 110% 50%,
    rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 48%, rgba(0,0,0,.6) 100%);
  opacity:0
}

.media__grain{
  position:absolute; inset:-50%; pointer-events:none; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.18; transform:translateZ(0); animation:drift 14s linear infinite
}

.copy{
  position:relative; margin-left:50vw; min-height:100svh;
  display:grid; place-items:center; padding:var(--pad);
  background:linear-gradient(90deg,rgba(0,0,0,0) 0%,
    rgba(0,0,0,.35) 12%, rgba(0,0,0,.6) 24%, rgba(0,0,0,1) 40%)
}
.copy__inner{width:100%; max-width:var(--maxw); text-wrap:balance}

h1{font-size:clamp(28px,4.6vw,60px); line-height:1.05; margin:0 0 .35em 0}
h2{font-size:clamp(18px,2.6vw,30px); font-weight:500; color:var(--muted); margin:0 0 .9em 0}
p {font-size:clamp(16px,1.4vw,19px); max-width:62ch; margin:0}

.reveal{
  opacity:0; transform:translateY(14px); filter:blur(8px);
  will-change:opacity,transform,filter; backface-visibility:hidden
}
@keyframes softFadeUp{
  0%{opacity:0; transform:translateY(14px); filter:blur(8px)}
  55%{opacity:1; transform:translateY(0);    filter:blur(2px)}
  100%{opacity:1; transform:translateY(0);   filter:blur(0)}
}
body.is-loaded .reveal--h1{animation:softFadeUp var(--dur) var(--e) forwards; animation-delay:.3s}
body.is-loaded .reveal--h2{animation:softFadeUp var(--dur) var(--e) forwards; animation-delay:.6s}
body.is-loaded .reveal--p {animation:softFadeUp var(--dur) var(--e) forwards; animation-delay:1.2s}

@keyframes imgIn{
  0%{opacity:0; filter:blur(10px); transform:scale(1.05) translateX(-1%);
     clip-path:polygon(0 0,0 100%,0 100%,0 0)}
  60%{opacity:1; filter:blur(2px); transform:scale(1.02) translateX(0);
     clip-path:polygon(0 0,0 100%,100% 100%,100% 0)}
  100%{opacity:1; filter:blur(0); transform:scale(1.02);
     clip-path:polygon(0 0,0 100%,100% 100%,100% 0)}
}
@keyframes drift{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-10%,-10%,0)}}

body.is-loaded .media__img{animation:imgIn var(--img-in) var(--e) forwards}
body.is-loaded .media__vignette{transition:opacity 800ms var(--e) 300ms; opacity:1}

@supports (-webkit-touch-callout: none){
  .media__img{ height:100svh; }

  .media__img{
    clip-path:none;
    -webkit-mask-image:none; mask-image:none;
    transform:scale(1.04) translateX(-2%); 
    }

  @keyframes imgInIOS{
    0%  { opacity:0; filter:blur(10px); transform:scale(1.05) translateX(-2%) }
    60% { opacity:1; filter:blur(2px);  transform:scale(1.02) translateX(0)   }
    100%{ opacity:1; filter:blur(0);    transform:scale(1.02) translateX(0)   }
  }
  body.is-loaded .media__img{ animation:imgInIOS var(--img-in) var(--e) forwards }

  .media::after{
    content:"";
    position:absolute; left:0; right:0; bottom:0;
    height:24svh; pointer-events:none;
    background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 100%);
  }
}

@media (max-width:1100px){
  .media{position:relative; width:100%; height:52svh}
  .media__img{height:50vh; width:50vh;} 
  .copy{
    margin-left:0; min-height:48svh;
    background:linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 28%)
  }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  .reveal{opacity:1 !important; transform:none !important; filter:none !important}
  .media__img{opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important}
  .media__vignette{opacity:1 !important}
}

.noscript{
  position:fixed; inset:auto var(--pad) var(--pad) var(--pad);
  background:#111; border:1px solid #222; padding:10px 12px; font-size:14px; border-radius:6px
}