/* ═══════════════════════════════════════════════════════════════════════════
   СТУДИО КИРИЛОВ · the door, while the house is being built (2026-07-27)
   One page per tongue, never two tongues on one page. The studio's own dress:
   Cormorant against Inter, the gold thread, two days with the eclipse switch.
   Every glyph is DOM text; everything that moves, moves by transform or opacity.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:"Cormorant Garamond";src:url("fonts/cormorant-light.woff2") format("woff2"),url("fonts/CormorantGaramond-Light.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:"Cormorant Garamond";src:url("fonts/cormorant-italic.woff2") format("woff2"),url("fonts/CormorantGaramond-LightItalic.ttf") format("truetype");font-weight:300;font-style:italic;font-display:swap;}
@font-face{font-family:"Cormorant Garamond";src:url("fonts/cormorant-medium.woff2") format("woff2"),url("fonts/CormorantGaramond-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Inter";src:url("fonts/inter-light.woff2") format("woff2"),url("fonts/Inter_18pt-Light.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:"Inter";src:url("fonts/inter-thin.woff2") format("woff2"),url("fonts/Inter_28pt-Thin.ttf") format("truetype");font-weight:100;font-style:normal;font-display:swap;}

:root,:root[data-theme="light"]{
  --ivory:#f7f5f0;--ink:#15171c;--soft:#5f5b54;--gold:#c9a558;
  --ink-rgb:21,23,28;--gold-rgb:201,165,88;--ivory-rgb:247,245,240;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Inter","Segoe UI",system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --ivory:#14151a;--ink:#ece9e3;--soft:#a19b91;--gold:#d2ab5f;
  --ink-rgb:236,233,227;--gold-rgb:210,171,95;--ivory-rgb:20,21,26;
  color-scheme:dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --ivory:#14151a;--ink:#ece9e3;--soft:#a19b91;--gold:#d2ab5f;
    --ink-rgb:236,233,227;--gold-rgb:210,171,95;--ivory-rgb:20,21,26;
    color-scheme:dark;
  }
}

/* ── THE LIGHT IN THE ROOM ───────────────────────────────────────────────────
   Three layers of soft light on the paper: two that drift on their own, very
   slowly, and one that follows the reader's hand a beat behind. They are pure
   composited layers: only transform and opacity ever change, nothing repaints,
   and the whole thing costs one rAF per pointer move. Under reduced motion the
   drift stops and the light simply rests. */
.aura{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;}
.aura span{
  position:absolute;display:block;border-radius:50%;
  will-change:transform;transform:translate3d(0,0,0);
}
.a1{
  width:92vmax;height:92vmax;left:-26vmax;top:-34vmax;
  background:radial-gradient(closest-side,rgba(var(--gold-rgb),.13),rgba(var(--gold-rgb),0) 72%);
}
.a2{
  width:78vmax;height:78vmax;right:-24vmax;bottom:-30vmax;left:auto;top:auto;
  background:radial-gradient(closest-side,rgba(var(--gold-rgb),.10),rgba(var(--gold-rgb),0) 70%);
}
.a3{
  width:56vmax;height:56vmax;left:0;top:0;opacity:0;
  background:radial-gradient(closest-side,rgba(var(--gold-rgb),.11),rgba(var(--gold-rgb),0) 68%);
  transition:transform 1.1s cubic-bezier(.22,1,.36,1),opacity .8s ease-out;
}
:root[data-theme="dark"] .a1{background:radial-gradient(closest-side,rgba(var(--gold-rgb),.10),rgba(var(--gold-rgb),0) 72%);}
:root[data-theme="dark"] .a2{background:radial-gradient(closest-side,rgba(120,150,210,.07),rgba(120,150,210,0) 70%);}
:root[data-theme="dark"] .a3{background:radial-gradient(closest-side,rgba(var(--gold-rgb),.09),rgba(var(--gold-rgb),0) 68%);}
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) .a2{background:radial-gradient(closest-side,rgba(120,150,210,.07),rgba(120,150,210,0) 70%);}
}
@media (prefers-reduced-motion: no-preference){
  .a1{animation:driftA 74s cubic-bezier(.45,0,.55,1) infinite;}
  .a2{animation:driftB 92s cubic-bezier(.45,0,.55,1) infinite;}
}
@keyframes driftA{
  0%,100%{transform:translate3d(0,0,0) scale(1);}
  50%{transform:translate3d(6vmax,4vmax,0) scale(1.1);}
}
@keyframes driftB{
  0%,100%{transform:translate3d(0,0,0) scale(1.06);}
  50%{transform:translate3d(-5vmax,-5vmax,0) scale(1);}
}
/* the edges of the sheet fall away a little, so the middle is where the eye rests */
.vignette{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 95% at 50% 45%,transparent 52%,rgba(var(--shade-rgb,21,23,28),.05) 100%);
}
:root[data-theme="dark"] .vignette{background:radial-gradient(120% 95% at 50% 45%,transparent 44%,rgba(0,0,0,.42) 100%);}
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) .vignette{background:radial-gradient(120% 95% at 50% 45%,transparent 44%,rgba(0,0,0,.42) 100%);}
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{overflow-x:clip;}
body{
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:clamp(4.5rem,10vh,7rem) clamp(1.25rem,5vw,3rem) clamp(2.5rem,6vh,4rem);
  background:var(--ivory);color:var(--ink);
  font:300 1.0625rem/1.75 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-synthesis:none;
  overflow-x:clip;
}
a:focus-visible,button:focus-visible{outline:1px solid var(--gold);outline-offset:4px;}
::selection{background:rgba(var(--gold-rgb),.28);}

/* the two small controls, in reach without a bar to carry them */
.corner{
  position:fixed;top:clamp(1rem,2.4vh,1.7rem);right:clamp(1rem,3vw,2.4rem);z-index:5;
  display:flex;align-items:center;gap:clamp(.7rem,1.4vw,1.1rem);
}
.lang{
  position:relative;
  font:300 .64rem/1 var(--sans);letter-spacing:.2em;color:var(--soft);text-decoration:none;
  border:1px solid rgba(var(--ink-rgb),.22);padding:.5em .85em .45em 1.05em;white-space:nowrap;
}
.lang::after{content:"";position:absolute;inset:-1px;border:1px solid var(--gold);opacity:0;transition:opacity .35s ease-out;pointer-events:none;}
.lang:hover{color:var(--ink);}
.lang:hover::after{opacity:1;}
.mode{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:2.05rem;height:1.4rem;flex:none;
  border:1px solid rgba(var(--ink-rgb),.22);background:none;cursor:pointer;
  -webkit-appearance:none;appearance:none;
}
.mode::after{content:"";position:absolute;inset:-1px;border:1px solid var(--gold);opacity:0;transition:opacity .35s ease-out;pointer-events:none;}
.mode:hover::after{opacity:1;}
.disc{position:relative;display:block;width:9px;height:9px;border-radius:50%;background:var(--gold);overflow:hidden;box-shadow:0 0 9px rgba(var(--gold-rgb),.5);}
.disc::after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;background:var(--ivory);transform:translate(112%,0);transition:transform .6s var(--ease);}
:root[data-theme="dark"] .disc::after{transform:translate(34%,-26%);}
@media (prefers-color-scheme: dark){:root:not([data-theme]) .disc::after{transform:translate(34%,-26%);}}

.kicker{
  display:flex;align-items:center;justify-content:center;gap:clamp(1.1rem,2.2vw,1.7rem);
  font:100 clamp(.82rem,1.2vw,1rem)/1 var(--sans);
  letter-spacing:.58em;text-transform:uppercase;color:var(--soft);
}
.kicker::before,.kicker::after{content:"";width:clamp(2.2rem,4.5vw,4rem);height:1px;flex:none;}
.kicker::before{background:linear-gradient(to right,rgba(var(--gold-rgb),0),rgba(var(--gold-rgb),.75));}
.kicker::after{background:linear-gradient(to left,rgba(var(--gold-rgb),0),rgba(var(--gold-rgb),.75));margin-left:-.58em;}

.wordmark{
  margin-top:clamp(1.4rem,3vh,2.4rem);
  font-family:var(--serif);font-weight:300;
  font-size:clamp(3rem,8.4vw,9.4rem);line-height:.95;
  letter-spacing:.14em;padding-left:.14em;font-kerning:normal;color:var(--ink);
}
.wsp{display:inline-block;width:.42em;}
.wbr{display:none;}

.creed{
  margin-top:clamp(1.6rem,3.4vh,2.6rem);
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(1.25rem,2.4vw,2rem);line-height:1.4;color:var(--ink);
  max-width:24em;
}

/* the thread descends, and the state of the work hangs on it */
.thread{
  position:relative;width:1px;height:clamp(4.5rem,11vh,8rem);
  margin:clamp(2.4rem,5vh,3.6rem) auto 0;
  background:linear-gradient(to bottom,rgba(var(--gold-rgb),0),var(--gold));
  transform-origin:top center;
}
html.js .thread{transform:scaleY(0);animation:draw 1.1s var(--ease) .8s forwards;}
.dot{
  width:7px;height:7px;border-radius:50%;background:var(--gold);margin:0 auto;
  box-shadow:0 0 14px rgba(var(--gold-rgb),.55);
}
html.js .dot{opacity:0;transform:scale(.3);animation:pop .7s var(--ease) 1.7s forwards;}
/* once it has landed, the point keeps a slow pulse: the page is alive, not looping */
@media (prefers-reduced-motion: no-preference){
  html.js .dot{animation:pop .7s var(--ease) 1.7s forwards, breathe 6.5s ease-in-out 2.6s infinite;}
}
@keyframes breathe{
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:.62;transform:scale(.84);}
}

.state{
  margin-top:clamp(2.2rem,4.5vh,3.2rem);
  font:300 .74rem/1.9 var(--sans);letter-spacing:.34em;text-transform:uppercase;color:var(--soft);
}
.line{
  margin-top:clamp(1.4rem,2.8vh,2rem);
  font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.85;color:var(--soft);max-width:34em;
}
.mail{
  position:relative;display:inline-block;margin-top:clamp(2rem,4vh,2.8rem);
  font-family:var(--serif);font-weight:300;font-size:clamp(1.5rem,3.2vw,2.6rem);line-height:1.3;
  color:var(--ink);text-decoration:none;padding-bottom:.22em;overflow-wrap:anywhere;
}
.mail::before,.mail::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:1px;}
.mail::before{background:rgba(var(--ink-rgb),.22);}
.mail::after{background:var(--gold);transform:scaleX(0);transform-origin:left center;transition:transform .45s var(--ease);}
.mail:hover::after,.mail:focus-visible::after{transform:scaleX(1);}

.colophon{
  margin-top:clamp(3rem,7vh,5rem);
  font:300 .78rem/1.8 var(--sans);letter-spacing:.04em;color:var(--soft);
}

/* the first breath: everything has arrived inside three seconds */
@media (prefers-reduced-motion: no-preference){
  html.js .kicker{opacity:0;animation:fadeup .9s var(--ease) .08s forwards;}
  html.js .kicker::before,html.js .kicker::after{transform:scaleX(0);animation:draw 1.2s var(--ease) .55s forwards;}
  html.js .kicker::before{transform-origin:right center;}
  html.js .kicker::after{transform-origin:left center;}
  html.js .wordmark .g{
    display:inline-block;opacity:0;transform:translateY(.28em);
    animation:fadeup 1.15s var(--ease) forwards;animation-delay:calc(.16s + var(--i) * .025s);
  }
  html.js .creed{opacity:0;animation:fadeup 1s var(--ease) .66s forwards;}
  html.js .state{opacity:0;animation:fadeup .9s var(--ease) 1.85s forwards;}
  html.js .line{opacity:0;animation:fadeup .9s var(--ease) 2s forwards;}
  html.js .mail{opacity:0;animation:fadeup .9s var(--ease) 2.15s forwards;}
  html.js .colophon{opacity:0;animation:fadeup .9s var(--ease) 2.3s forwards;}
}
@keyframes fadeup{from{opacity:0;transform:translateY(.28em);}to{opacity:1;transform:none;}}
@keyframes draw{to{transform:scaleX(1);}}
@keyframes pop{to{opacity:1;transform:scale(1);}}

@media (max-width: 760px){
  .wordmark{font-size:clamp(2.8rem,13vw,5.4rem);}
  .wbr{display:block;}
  .wsp{display:none;}
  .state{letter-spacing:.26em;font-size:.68rem;}
}

/* the turning of the day */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal;}

@media (prefers-reduced-motion: reduce){
  html.js .thread{transform:none;animation:none;}
  html.js .dot{opacity:1;transform:none;animation:none;}
  html.js .kicker,html.js .creed,html.js .state,html.js .line,html.js .mail,html.js .colophon,
  html.js .wordmark .g{opacity:1;transform:none;animation:none;}
  .mail::after,.disc::after,.mode::after,.lang::after{transition:none;}
}