/* =====================================================
   МАРИЯ — typographic art site
   ===================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --paper:#f3f1ec;
  --ink:#0c0c0e;
  --soft:#8a877f;
  --accent:#6C63FF;
  --rgb-r:#ff2d6e;
  --rgb-b:#00e1ff;
  --line:rgba(12,12,14,.14);
  --ease:cubic-bezier(.19,1,.22,1);
  --ease2:cubic-bezier(.76,0,.24,1);
}

html{ -webkit-text-size-adjust:100%; }

body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--paper); color:var(--ink);
  overflow-x:hidden; line-height:1.45;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"ss01","cv05";
}
.mono{font-family:'Space Mono',ui-monospace,monospace;letter-spacing:.04em}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
.svg-defs{position:absolute;width:0;height:0}

/* ===== BACKGROUND ===== */
.bg{position:fixed;inset:0;z-index:-2;overflow:hidden}
.mesh{position:absolute;inset:-20%;opacity:.9}
.mesh__blob{position:absolute;border-radius:50%;mix-blend-mode:multiply;
  filter:blur(50px);will-change:transform;backface-visibility:hidden}
.b1{width:55vw;height:55vw;left:-8vw;top:-10vw;
  background:radial-gradient(circle at 40% 40%,#c7c2ff,transparent 62%);
  animation:floatA 26s var(--ease2) infinite alternate}
.b2{width:50vw;height:50vw;right:-10vw;top:18vh;
  background:radial-gradient(circle at 50% 50%,#bfe3ff,transparent 62%);
  animation:floatB 32s var(--ease2) infinite alternate}
.b3{width:46vw;height:46vw;left:30vw;bottom:-14vw;
  background:radial-gradient(circle at 50% 50%,#ffd9ec,transparent 62%);
  animation:floatA 30s var(--ease2) infinite alternate-reverse}
@keyframes floatA{to{transform:translate3d(7vw,5vh,0)}}
@keyframes floatB{to{transform:translate3d(-6vw,-4vh,0)}}

.grid{position:absolute;inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:11vw 11vw;
  mask-image:radial-gradient(130% 100% at 50% 0%,#000 30%,transparent 100%);
  -webkit-mask-image:radial-gradient(130% 100% at 50% 0%,#000 30%,transparent 100%);
  opacity:.6}

.grain{position:absolute;inset:0;filter:url(#grain);opacity:.13;
  pointer-events:none;mix-blend-mode:multiply}

/* ===== CURSOR ===== */
.cursor{position:fixed;top:0;left:0;z-index:9000;width:14px;height:14px;border-radius:50%;
  background:var(--ink);transform:translate(-50%,-50%);pointer-events:none;
  mix-blend-mode:difference;display:grid;place-items:center;
  transition:width .4s var(--ease),height .4s var(--ease),background .3s}
.cursor.is-active{width:84px;height:84px;background:#fff}
.cursor__label{font-family:'Space Mono',monospace;font-size:13px;color:#000;opacity:0;
  transform:scale(.5);transition:opacity .3s,transform .3s;mix-blend-mode:normal}
.cursor.is-active .cursor__label{opacity:1;transform:scale(1)}
@media (hover:none),(max-width:820px){.cursor{display:none}}
@media (hover:hover) and (min-width:821px){*{cursor:none!important}}

/* ===== HUD ===== */
.hud{position:fixed;top:0;left:0;width:100%;z-index:800;
  display:flex;align-items:center;justify-content:space-between;
  padding:24px clamp(18px,4vw,52px);mix-blend-mode:difference;color:#fff}
.hud__brand{font-weight:900;font-size:18px;letter-spacing:-.02em;display:flex;gap:3px}
.hud__brand span{font-size:11px;opacity:.7}
.hud__meta{display:flex;gap:30px;font-size:11px;opacity:.85}
.hud__cta{font-size:12px;border:1px solid rgba(255,255,255,.5);padding:9px 16px;border-radius:99px;
  transition:background .3s,color .3s}
.hud__cta:hover{background:#fff;color:#000}
@media (max-width:820px){.hud__meta{display:none}}

.scrollbar{position:fixed;left:0;bottom:0;width:100%;height:3px;z-index:800;background:transparent}
.scrollbar i{display:block;height:100%;width:0;background:var(--accent);
  box-shadow:0 0 18px var(--accent)}

/* ===== PRELOADER ===== */
.loader{position:fixed;inset:0;z-index:9999;background:var(--ink);color:var(--paper);
  display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(20px,5vw,60px);
  transition:transform 1.1s var(--ease2);overflow:hidden}
.loader.is-done{transform:translateY(-100%)}
.loader__col{position:absolute;top:clamp(20px,5vw,60px);left:clamp(20px,5vw,60px)}
.loader__lbl{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.3em;opacity:.6}
.loader__num{font-weight:900;font-size:clamp(90px,26vw,300px);line-height:.8;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums}
.loader__bar{height:2px;background:rgba(255,255,255,.18);margin-top:28px}
.loader__bar i{display:block;height:100%;width:0;background:var(--paper)}

/* ===== SHARED ===== */
.section{position:relative;padding:clamp(90px,16vh,200px) clamp(18px,4vw,52px)}
.idx{display:block;font-size:12px;color:var(--soft);letter-spacing:.1em;margin-bottom:clamp(34px,6vw,72px)}
.fade-up{opacity:0;transform:translateY(30px)}

/* ===== HERO ===== */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:space-between;
  padding:120px clamp(18px,4vw,52px) clamp(30px,5vh,60px)}
.hero__top{display:flex;justify-content:space-between;font-size:12px;color:var(--soft)}
.poster{flex:1;display:flex;flex-direction:column;justify-content:center;gap:0;
  margin:clamp(20px,4vh,50px) 0}
.word{
  font-weight:900;line-height:.84;letter-spacing:-.045em;
  font-size:max(40px,min(13.2vw,18.5vh));
  text-transform:uppercase;position:relative;white-space:nowrap}
.w-r{align-self:flex-end;text-align:right}
.w-l{align-self:flex-start}
.outline{color:transparent;-webkit-text-stroke:clamp(1.2px,.28vw,3px) var(--ink)}

/* per-letter spans (injected by JS) */
.char{display:inline-block}
.word.is-clip{overflow:hidden}
.char-wrap{display:inline-block;overflow:hidden;vertical-align:top}

/* RGB split / chromatic aberration */
[data-rgb]{position:relative}
[data-rgb]::before,[data-rgb]::after{
  content:attr(data-text);position:absolute;inset:0;pointer-events:none;
  mix-blend-mode:multiply;opacity:.85;transition:transform .5s var(--ease)}
[data-rgb]::before{color:var(--rgb-r);transform:translate(-.016em,.011em)}
[data-rgb]::after{color:var(--rgb-b);transform:translate(.016em,-.011em)}
[data-rgb]:hover::before{transform:translate(-.03em,.018em)}
[data-rgb]:hover::after{transform:translate(.03em,-.018em)}

.hero__bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap}
.hero__lead{max-width:30ch;font-size:clamp(15px,1.5vw,18px);color:var(--soft);line-height:1.5}
.big-link{display:inline-flex;align-items:center;gap:18px;font-weight:900;font-size:clamp(26px,4vw,52px);
  letter-spacing:-.03em;text-transform:uppercase}
.big-link i{width:clamp(34px,4vw,58px);height:clamp(34px,4vw,58px);border-radius:50%;
  background:var(--accent);position:relative;flex:none;transition:transform .5s var(--ease)}
.big-link i::after{content:'↗';position:absolute;inset:0;display:grid;place-items:center;color:#fff;
  font-size:.5em;font-weight:400}
.big-link:hover i{transform:scale(1.15) rotate(8deg)}

/* ===== MARQUEE ===== */
.marquee{padding:clamp(20px,4vw,50px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;background:var(--ink);color:var(--paper)}
.marquee__row{display:flex;gap:.5em;width:max-content;white-space:nowrap;will-change:transform}
.marquee__row span{font-weight:900;font-size:clamp(40px,8vw,120px);letter-spacing:-.03em;text-transform:uppercase;padding:0 .25em}
.marquee__row .o{color:transparent;-webkit-text-stroke:1.5px var(--paper)}

/* ===== MANIFESTO ===== */
.manifesto__grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(34px,6vw,90px);align-items:center}
.manifesto__text{font-weight:800;font-size:clamp(24px,3.7vw,58px);line-height:1.08;letter-spacing:-.03em}
.manifesto__text em{color:var(--accent);font-style:normal}

/* ===== PORTRAIT (transparent cutout, no frame) ===== */
.portrait{position:relative;will-change:transform;max-width:480px;justify-self:end;width:100%}
.portrait__media{position:relative;display:flex;justify-content:center}
.portrait__glow{position:absolute;inset:-6% 4% 10% 4%;z-index:0;border-radius:50%;
  background:radial-gradient(60% 55% at 50% 38%,rgba(108,99,255,.5),rgba(0,225,255,.18) 55%,transparent 75%);
  filter:blur(48px);opacity:.85}
.portrait img{position:relative;z-index:1;width:100%;height:auto;display:block;
  transform:scale(1.04);transition:transform 1.4s var(--ease),filter .9s var(--ease);
  filter:drop-shadow(0 40px 60px rgba(60,52,140,.28))}
.portrait:hover img{transform:scale(1)}
.portrait figcaption{display:flex;flex-direction:column;gap:3px;margin-top:14px;font-size:12px;
  color:var(--ink);font-weight:700;letter-spacing:.08em;text-align:right}
.portrait figcaption span{color:var(--soft);font-weight:400}
@media (max-width:820px){
  .manifesto__grid{grid-template-columns:1fr;gap:30px}
  .portrait{max-width:380px;justify-self:center}
  .portrait figcaption{text-align:center}}
.reveal-word{display:inline-block;overflow:hidden;vertical-align:top}
.reveal-word>span{display:inline-block}

/* ===== SUBJECTS ===== */
.subjects{padding:clamp(40px,8vh,90px) clamp(18px,4vw,52px) clamp(90px,14vh,160px)}
.subj{display:block;padding:clamp(28px,5vw,60px) 0;border-top:1px solid var(--line);position:relative}
.subj:last-of-type{border-bottom:1px solid var(--line)}
.subj__no{position:absolute;top:clamp(28px,5vw,60px);right:0;font-size:13px;color:var(--soft)}
.subj__name{font-weight:900;font-size:clamp(54px,14vw,200px);line-height:.86;letter-spacing:-.045em;
  text-transform:uppercase;transition:transform .6s var(--ease);transform-origin:left center}
.subj:hover .subj__name{transform:translateX(clamp(10px,2vw,40px))}
.subj__tags{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:22px;font-size:12px;color:var(--soft);
  max-height:0;overflow:hidden;opacity:0;transition:max-height .6s var(--ease),opacity .5s,margin .6s}
.subj:hover .subj__tags{max-height:60px;opacity:1}

/* ===== SCALE STATEMENT (pinned) ===== */
.scale-stmt{height:100vh;position:relative;display:grid;place-items:center;overflow:hidden}
.scale-stmt__inner{position:absolute;inset:0;display:grid;place-items:center}
.scale-word{font-weight:900;font-size:clamp(40px,9vw,150px);letter-spacing:-.04em;text-transform:uppercase;
  color:transparent;-webkit-text-stroke:1.5px var(--ink);white-space:nowrap;will-change:transform;
  background:linear-gradient(120deg,var(--accent),var(--rgb-b),var(--rgb-r));
  -webkit-background-clip:text;background-clip:text}

/* ===== STEPS ===== */
.steps__list{display:grid;gap:0}
.step{display:grid;grid-template-columns:clamp(90px,12vw,180px) 1fr;gap:clamp(20px,4vw,60px);
  align-items:baseline;padding:clamp(26px,4vw,46px) 0;border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step__n{font-weight:900;font-size:clamp(40px,7vw,110px);letter-spacing:-.04em;line-height:.8;
  color:transparent;-webkit-text-stroke:1.4px var(--ink);transition:color .4s,-webkit-text-stroke .4s}
.step:hover .step__n{color:var(--accent);-webkit-text-stroke:1.4px var(--accent)}
.step h3{font-weight:900;font-size:clamp(26px,4vw,54px);letter-spacing:-.03em;text-transform:uppercase;grid-column:2}
.step p{grid-column:2;color:var(--soft);font-size:clamp(14px,1.4vw,17px);max-width:36ch;margin-top:10px}

/* ===== CONTACT ===== */
.contact__title{display:flex;flex-direction:column;margin-bottom:clamp(50px,8vw,90px)}
.contact__title .word{font-size:clamp(54px,15vw,210px)}
.qm{color:var(--accent);-webkit-text-stroke:0}
.contact__form{display:grid;gap:clamp(20px,3vw,34px);max-width:760px}
.line-field{position:relative;border-bottom:1px solid var(--line);padding-top:24px}
.line-field input,.line-field select{width:100%;background:none;border:none;outline:none;
  font-size:clamp(20px,3vw,34px);font-weight:700;letter-spacing:-.02em;padding:8px 0 14px}
.line-field select{appearance:none}
.line-field label{position:absolute;top:24px;left:0;font-family:'Space Mono',monospace;font-size:12px;
  color:var(--soft);letter-spacing:.1em;transition:transform .4s var(--ease),color .4s}
.line-field input:focus~label,.line-field input:not(:placeholder-shown)~label,
.line-field select:focus~label,.line-field select:valid~label{transform:translateY(-22px);color:var(--accent)}
.line-field::after{content:'';position:absolute;left:0;bottom:-1px;width:0;height:2px;background:var(--accent);
  transition:width .5s var(--ease)}
.line-field:focus-within::after{width:100%}
.submit{justify-self:start;margin-top:14px;background:var(--ink);color:var(--paper);border:none;
  border-radius:99px;padding:20px 44px;font-weight:900;letter-spacing:.02em;text-transform:uppercase;
  overflow:hidden;position:relative;transition:transform .5s var(--ease)}
.submit span{position:relative;z-index:2}
.submit::before{content:'';position:absolute;inset:0;z-index:1;background:var(--accent);
  transform:translateY(101%);transition:transform .5s var(--ease)}
.submit:hover{transform:scale(1.04)}
.submit:hover::before{transform:translateY(0)}
.form-note{color:var(--accent);font-size:12px;margin-top:4px}
.contact__socials{display:flex;gap:clamp(20px,4vw,50px);flex-wrap:wrap;margin-top:clamp(50px,8vw,90px);
  font-size:14px}
.contact__socials a{position:relative;padding-bottom:4px}
.contact__socials a::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.contact__socials a:hover::after{transform:scaleX(1);transform-origin:left}

/* ===== FOOTER ===== */
.footer{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:30px clamp(18px,4vw,52px) 36px;border-top:1px solid var(--line);font-size:11px;color:var(--soft)}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion:reduce){
  .mesh__blob,.grain,[data-rgb]::before,[data-rgb]::after{animation:none!important}
  .char{transform:none!important}
  .fade-up{opacity:1!important;transform:none!important}
}
@media (max-width:560px){
  .hud__cta{display:none}
  .step{grid-template-columns:1fr}.step h3,.step p{grid-column:1}
}