/* PROVOKATIV.ART — Vanilla CSS */
:root{
  --bg:#0a0a0a;
  --paper:#f1eee7;
  --ink:#111;
  --acid:#ff3b1f;
  --lime:#d9ff3f;
  --blue:#345cff;
  --line:rgba(255,255,255,.18);
  --pad:clamp(20px,4vw,64px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--paper);
  font-family:Manrope,Arial,sans-serif;overflow-x:hidden;cursor:none;
}
body.menu-open{overflow:hidden}
a,button,input,textarea{font:inherit}
a{color:inherit;text-decoration:none}
button{color:inherit}
::selection{background:var(--lime);color:#000}
.noise{
  position:fixed;inset:0;pointer-events:none;opacity:.05;z-index:9998;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}
.cursor,.cursor-dot{
  position:fixed;pointer-events:none;z-index:9999;border-radius:50%;
  transform:translate(-50%,-50%);mix-blend-mode:difference;
}
.cursor{width:34px;height:34px;border:1px solid #fff;transition:width .2s,height .2s,background .2s}
.cursor-dot{width:5px;height:5px;background:#fff}
.cursor.active{width:70px;height:70px;background:#fff}
.preloader{
  position:fixed;inset:0;background:#111;z-index:10000;display:grid;
  place-content:center;gap:22px;text-align:center;transition:transform .9s cubic-bezier(.76,0,.24,1);
}
.preloader.hide{transform:translateY(-100%)}
.preloader-mark{font-weight:800;font-size:clamp(44px,8vw,100px);letter-spacing:-.06em}
.preloader-mark span{color:var(--acid)}
.preloader-line{width:min(400px,70vw);height:1px;background:#333;overflow:hidden}
.preloader-line span{display:block;width:100%;height:100%;background:var(--acid);animation:load 1.15s ease forwards;transform-origin:left}
.preloader p{font-family:"DM Mono";font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#888}
@keyframes load{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.site-header{
  position:fixed;top:0;left:0;right:0;padding:20px var(--pad);display:flex;
  justify-content:space-between;align-items:center;z-index:1000;
  mix-blend-mode:difference;color:#fff;
}
.brand{font-size:18px;font-weight:800;letter-spacing:-.04em}
.brand span{font-weight:400}
.nav{display:flex;gap:28px;font-family:"DM Mono";font-size:11px}
.nav a{position:relative}
.nav a:after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1px;background:currentColor;transition:.3s}
.nav a:hover:after{right:0}
.menu-toggle{display:none;background:none;border:0;width:40px;height:40px}
.menu-toggle span{display:block;height:1px;background:#fff;margin:8px 0}

.section{padding:120px var(--pad)}
.hero{
  min-height:100svh;position:relative;display:grid;grid-template-columns:1.1fr .9fr;
  gap:clamp(20px,4vw,70px);align-items:center;padding-top:120px;overflow:hidden;
}
.hero:before{
  content:"";position:absolute;width:40vw;height:40vw;border-radius:50%;
  background:var(--acid);filter:blur(120px);opacity:.08;left:-15vw;top:5vh;
}
.hero-index,.kicker,.eyebrow,.mono{
  font-family:"DM Mono";font-size:10px;letter-spacing:.18em;text-transform:uppercase;
}
.hero-index{position:absolute;left:var(--pad);top:110px;color:#777}
.eyebrow{margin-bottom:25px;color:#aaa}
.hero-title{
  font-size:clamp(64px,10vw,170px);line-height:.78;letter-spacing:-.085em;
  margin:0;text-transform:uppercase;position:relative;z-index:2;
}
.hero-title .line{display:block}
.hero-title .italic{font-family:"Playfair Display",serif;text-transform:none;font-weight:600}
.clip{overflow:hidden}
.clip>span{display:block;transform:translateY(120%);transition:transform 1s cubic-bezier(.16,1,.3,1)}
.loaded .clip>span{transform:translateY(0)}
.loaded .clip:nth-child(2)>span{transition-delay:.1s}
.loaded .clip:nth-child(3)>span{transition-delay:.2s}
.hero-bottom{margin-top:40px;display:flex;justify-content:space-between;align-items:flex-end;gap:30px}
.hero-bottom p{max-width:430px;color:#aaa;font-size:14px;line-height:1.6}
.circle-cta{
  width:110px;height:110px;border:1px solid #555;border-radius:50%;
  display:flex;align-items:center;justify-content:center;gap:12px;
  font-family:"DM Mono";font-size:11px;transition:.3s;
}
.circle-cta:hover{background:var(--lime);color:#000;border-color:var(--lime)}
.hero-art{position:relative;z-index:1}
.art-piece{position:relative;overflow:hidden;transform:translateZ(0)}
.art-hero{
  min-height:72vh;background:
    radial-gradient(circle at 65% 30%,transparent 0 12%,#111 12.5% 18%,transparent 18.5%),
    linear-gradient(135deg,var(--acid) 0 42%,#ff806e 42% 47%,#121212 47% 100%);
}
.art-glyph{position:absolute;font-size:40vw;line-height:.7;font-weight:800;right:-6vw;bottom:-3vw;color:#f0e9df;mix-blend-mode:difference}
.art-ring{position:absolute;border:1px solid rgba(255,255,255,.6);border-radius:50%}
.ring-a{width:240px;height:240px;left:-30px;top:40px}
.ring-b{width:150px;height:150px;left:15px;top:85px}
.art-stamp{position:absolute;right:18px;top:18px;font-family:"DM Mono";font-size:10px;writing-mode:vertical-rl}
.scroll-cue{position:absolute;bottom:20px;left:var(--pad);display:flex;gap:16px;align-items:center;font-family:"DM Mono";font-size:9px;color:#777}
.scroll-cue i{width:60px;height:1px;background:#444;position:relative;overflow:hidden}
.scroll-cue i:after{content:"";position:absolute;inset:0;background:#fff;animation:cue 2s infinite;transform:translateX(-100%)}
@keyframes cue{50%,100%{transform:translateX(100%)}}

.ticker{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0}
.ticker-track{display:flex;width:max-content;gap:26px;align-items:center;animation:ticker 22s linear infinite;font-size:clamp(20px,3vw,42px);font-weight:800;letter-spacing:-.05em}
.ticker-track b{color:var(--acid)}
@keyframes ticker{to{transform:translateX(-50%)}}

.section-head{display:grid;grid-template-columns:1.4fr .6fr;gap:40px;margin-bottom:80px}
.section-head h2,.studio h2,.vault h2,.contact h2{
  font-size:clamp(52px,8vw,130px);line-height:.86;letter-spacing:-.07em;margin:15px 0 0;
}
.section-head h2 em,.studio h2 em,.vault h2 em,.contact h2 em{
  font-family:"Playfair Display";font-weight:600;text-transform:none
}
.section-head>p{max-width:380px;align-self:end;color:#aaa;line-height:1.7}
.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:70px 24px}
.art-card{grid-column:span 5}
.art-card.offset{grid-column:7/span 6;margin-top:120px}
.art-card.wide{grid-column:2/span 8}
.art-frame{aspect-ratio:4/5;perspective:1000px}
.art-card.wide .art-frame{aspect-ratio:16/9}
.art-piece{width:100%;height:100%;transition:transform .15s ease-out}
.art-a{background:#dfd8ca;color:#111;display:grid;place-content:center;font-size:clamp(42px,7vw,100px);font-weight:800;letter-spacing:-.08em}
.art-a span{position:relative;z-index:2}
.art-a .strike{text-decoration:line-through;text-decoration-thickness:8px;color:var(--acid);transform:rotate(-7deg)}
.art-a i{position:absolute;width:50%;height:140%;background:#111;transform:rotate(25deg);right:-18%;top:-20%}
.art-b{background:#111;color:#eee;display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:clamp(50px,8vw,100px);font-weight:800;line-height:.75}
.art-b span:nth-of-type(2){color:var(--acid);font-family:"Playfair Display";font-style:italic}
.halo{width:44%;aspect-ratio:1;border:2px solid var(--lime);border-radius:50%;position:absolute;top:8%}
.art-b small{font-family:"DM Mono";font-size:9px;letter-spacing:.2em;position:absolute;bottom:20px}
.art-c{background:var(--lime);color:#080808;display:flex;align-items:center;justify-content:center}
.art-c>span{font-size:clamp(65px,12vw,190px);font-weight:800;letter-spacing:-.09em;line-height:.72;text-align:center}
.barcode{position:absolute;top:4%;left:4%;font-family:"DM Mono";letter-spacing:5px;transform:scaleY(4)}
.price-tag{position:absolute;right:3%;bottom:5%;background:#111;color:white;padding:8px 12px;font-family:"DM Mono";font-size:10px;transform:rotate(-4deg)}
.art-d{background:var(--blue);display:flex;flex-direction:column;justify-content:flex-end;padding:7%;font-weight:800}
.art-d .face{position:absolute;right:8%;top:6%;font-size:8vw;transform:rotate(90deg)}
.art-d span{font-size:clamp(42px,6vw,90px);line-height:.8;letter-spacing:-.07em}
.art-d small{font-family:"DM Mono";font-size:10px;margin-top:18px}
.art-meta{display:flex;justify-content:space-between;gap:20px;margin-top:16px;border-top:1px solid var(--line);padding-top:12px}
.art-meta h3{font-size:15px;margin:0 0 5px}
.art-meta p{margin:0;color:#777;font-size:11px}
.art-meta>div:last-child{text-align:right}
.art-meta strong{display:block}
.text-button{background:none;border:0;border-bottom:1px solid #777;padding:4px 0;margin-top:8px;font-family:"DM Mono";font-size:9px;cursor:none}

.break-section{background:var(--paper);color:#111;padding-top:150px;padding-bottom:150px}
.giant-quote{font-size:clamp(70px,15vw,230px);font-weight:800;line-height:.68;letter-spacing:-.09em}
.giant-quote span{display:block}
.giant-quote .outline{color:transparent;-webkit-text-stroke:2px #111}
.manifesto-grid{display:grid;grid-template-columns:1fr 2fr;gap:30px;margin-top:120px;border-top:1px solid #bbb;padding-top:30px}
.manifesto-text{font-size:clamp(28px,4vw,64px);line-height:1.1;letter-spacing:-.04em;margin:0}
.manifesto-text em{font-family:"Playfair Display"}

.studio{display:grid;grid-template-columns:.85fr 1.15fr;gap:8vw;align-items:start}
.studio-sticky{position:sticky;top:120px}
.studio h2{font-size:clamp(52px,6vw,100px)}
.studio-sticky>p{max-width:520px;color:#999;line-height:1.7}
.pill{display:inline-flex;gap:35px;align-items:center;border:1px solid #555;border-radius:100px;padding:16px 22px;margin-top:20px;font-family:"DM Mono";font-size:10px;transition:.25s}
.pill:hover{background:#fff;color:#000}
.project{padding:60px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:40px 1fr;gap:20px}
.project-no,.project-type{font-family:"DM Mono";font-size:9px;color:#777}
.project h3{font-size:clamp(38px,6vw,88px);line-height:.82;letter-spacing:-.07em;margin:10px 0 30px}
.project-visual{grid-column:2;aspect-ratio:16/10;overflow:hidden;display:grid;place-items:center}
.visual-1{background:var(--acid)}
.visual-1 span{font-size:8vw;font-weight:800;letter-spacing:-.08em;transform:rotate(-8deg)}
.visual-2{background:#ddd;color:#111}
.phone{border:12px solid #111;border-radius:30px;height:84%;aspect-ratio:9/16;display:grid;place-items:center;text-align:center;font-size:clamp(18px,3vw,42px);font-weight:800;background:var(--lime);transform:rotate(7deg)}
.visual-3{background:#171717}
.visual-3 span{font-size:clamp(70px,9vw,150px);font-weight:800;line-height:.7;color:transparent;-webkit-text-stroke:2px #fff}

.temptation{text-align:center;min-height:80vh;display:grid;place-content:center}
.dont-click{background:none;border:0;cursor:none;display:flex;flex-direction:column;align-items:center;font-size:clamp(80px,16vw,240px);line-height:.62;letter-spacing:-.09em;font-weight:800}
.dont-click span:nth-child(2){font-family:"Playfair Display";font-style:italic;color:var(--acid)}
.temptation p{font-family:"DM Mono";font-size:10px;color:#777;margin-top:50px}

.vault{background:#070707;border-top:1px solid #222}
.vault-top{display:flex;justify-content:space-between}
.vault-status{font-family:"DM Mono";font-size:9px}.vault-status i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--lime);margin-right:8px;box-shadow:0 0 12px var(--lime)}
.vault-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#222;margin-top:70px}
.vault-card{background:#0d0d0d;min-height:420px;padding:25px;display:flex;flex-direction:column;justify-content:space-between;transition:.3s}
.vault-card:hover{background:#151515}
.vault-card>span,.vault-card button{font-family:"DM Mono";font-size:9px;letter-spacing:.12em}
.vault-card strong{font-size:clamp(36px,4vw,72px);line-height:.85;letter-spacing:-.06em}
.vault-card button{align-self:flex-start;background:none;border:1px solid #444;padding:10px 13px}
.vault-card.locked{opacity:.45}

.contact{background:var(--acid);color:#0b0b0b;display:grid;grid-template-columns:1.1fr .9fr;gap:8vw}
.contact h2{font-size:clamp(58px,7vw,115px)}
.contact-copy>p{font-size:18px}
.contact-form{align-self:end}
.contact-form label{display:block;border-bottom:1px solid rgba(0,0,0,.35);padding:22px 0}
.contact-form label>span{display:block;font-family:"DM Mono";font-size:9px;letter-spacing:.14em;margin-bottom:12px}
.contact-form input,.contact-form textarea{
  width:100%;border:0;outline:0;background:transparent;color:#0b0b0b;
  font-size:clamp(20px,2vw,28px);resize:none
}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:rgba(0,0,0,.45)}
.submit-btn{margin-top:30px;width:100%;border:1px solid #111;background:#111;color:#fff;padding:20px;display:flex;justify-content:space-between;cursor:none}
.form-note{font-family:"DM Mono";font-size:10px}

footer{padding:50px var(--pad) 25px;background:#060606}
.footer-word{font-size:clamp(80px,17vw,260px);font-weight:800;letter-spacing:-.09em;line-height:.8;color:#141414;white-space:nowrap}
.footer-bottom{border-top:1px solid #222;padding-top:18px;margin-top:25px;display:flex;justify-content:space-between;font-family:"DM Mono";font-size:9px;color:#777}

.modal{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;visibility:hidden}
.modal.show{visibility:visible}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.8);backdrop-filter:blur(8px);opacity:0;transition:.3s}
.modal.show .modal-backdrop{opacity:1}
.modal-card{position:relative;z-index:1;background:var(--paper);color:#111;width:min(520px,90vw);padding:45px;transform:translateY(40px) scale(.96);opacity:0;transition:.35s}
.modal.show .modal-card{transform:none;opacity:1}
.modal-card h3{font-size:clamp(40px,6vw,70px);line-height:.85;letter-spacing:-.06em}
.modal-close{position:absolute;right:16px;top:12px;border:0;background:none;font-size:28px}
.modal-contact{border-color:#111}

.chaos-message{
  position:fixed;inset:0;z-index:12000;background:var(--lime);color:#000;
  display:grid;place-content:center;text-align:center;transform:scaleY(0);transform-origin:center;
  transition:transform .15s cubic-bezier(.7,0,.3,1)
}
.chaos-message.show{transform:scaleY(1)}
.chaos-message span{font-size:clamp(70px,14vw,220px);font-weight:800;letter-spacing:-.09em;line-height:.7}
.chaos-message small{font-family:"DM Mono";margin-top:30px}
body.chaos main{animation:glitch .12s steps(2) 5}
@keyframes glitch{0%{transform:translate(0)}25%{transform:translate(-9px,5px) skewX(1deg)}50%{transform:translate(8px,-4px)}75%{transform:translate(-5px,-3px)}100%{transform:translate(0)}}

.reveal{opacity:0;transform:translateY(20px);transition:.8s}
.reveal.in{opacity:1;transform:none}

@media (max-width:900px){
  body{cursor:auto}
  .cursor,.cursor-dot{display:none}
  .nav{position:fixed;inset:0;background:#0a0a0a;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:28px;gap:24px;transform:translateY(-100%);transition:.5s}
  .menu-open .nav{transform:none}
  .menu-toggle{display:block;position:relative;z-index:2}
  .hero{grid-template-columns:1fr;align-items:end;padding-top:140px}
  .hero-art{position:absolute;right:-12vw;top:12vh;width:55vw;opacity:.72}
  .art-hero{min-height:50vh}
  .hero-copy{position:relative;z-index:2}
  .hero-title{font-size:clamp(62px,17vw,120px)}
  .section-head,.studio,.contact{grid-template-columns:1fr}
  .studio-sticky{position:relative;top:auto}
  .art-card,.art-card.offset,.art-card.wide{grid-column:1/-1;margin-top:0}
  .gallery{gap:60px}
  .manifesto-grid{grid-template-columns:1fr}
  .vault-row{grid-template-columns:1fr}
  .vault-card{min-height:280px}
  .footer-bottom{flex-direction:column;gap:10px}
}
@media (max-width:560px){
  .section{padding:85px 18px}
  .site-header{padding:18px}
  .hero{padding-top:120px}
  .hero-index{left:18px;top:90px}
  .hero-title{font-size:17vw}
  .hero-bottom{align-items:center}
  .circle-cta{width:82px;height:82px;flex:0 0 auto}
  .section-head{margin-bottom:50px}
  .section-head h2,.studio h2,.vault h2,.contact h2{font-size:14vw}
  .art-frame{aspect-ratio:4/5}
  .project{grid-template-columns:28px 1fr}
  .project h3{font-size:13vw}
  .giant-quote{font-size:18vw}
  .vault-top{gap:20px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}