@font-face{
  font-family:"Gothicha";
  src:url("https://static.wfonts.com/download/data/2024/10/30/gothicha/Gothicha.woff") format("woff");
  font-display:swap;
}
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=DM+Sans:wght@300;400;500&display=swap');

@font-face{
  font-family:"California Sun";
  src:url("https://db.onlinewebfonts.com/t/cfd4a2d3682970b73d45c7dd15591eb2.woff2") format("woff2");
  font-display:swap;
}
@font-face{
  font-family:"S&S GreyHood Seven";
  src:url("https://db.onlinewebfonts.com/t/98ad1dd1549abf7ea4871bf9416cbf93.woff2") format("woff2");
  font-display:swap;
}

:root{
  --bg:#0e0f11;
  --text:#f0efeb;
  --muted:#9a9ba0;
  --faint:#64666c;
  --line:rgba(255,255,255,.13);
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}
body{
  min-height:100dvh;
  overflow-x:hidden;
  font-family:"DM Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button,a{font:inherit;color:inherit}
button{border:0}
button,a{-webkit-tap-highlight-color:transparent}
a{text-decoration:none}
::selection{background:#deddd8;color:#111}

@media (hover:hover) and (pointer:fine){
  body,a,button{
    cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cpath d='M13 1.4l1.35 6.1 3.95-2.14-2.18 3.91 6.18 1.35-6.18 1.36 2.18 3.9-3.95-2.13L13 19.7l-1.34-6.05-3.96 2.13 2.2-3.9-6.2-1.36 6.2-1.35-2.2-3.91 3.96 2.14L13 1.4z' fill='%23eae9e4'/%3E%3Ccircle cx='13' cy='10.6' r='1.8' fill='%230e0f11'/%3E%3C/svg%3E") 13 11, auto;
  }
}

/* ---------- animated gothic scene ---------- */
.scene{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 31%,rgba(187,190,192,.08),transparent 32%),
    linear-gradient(180deg,#111216 0%,#0e0f11 60%,#090a0c 100%);
}
.cathedral{position:absolute;inset:0;opacity:1}

.window{
  position:absolute;
  top:3vh;
  width:25vw;
  min-width:220px;
  height:74vh;
  opacity:.17;
  filter:drop-shadow(0 0 18px rgba(220,224,225,.08));
}
.window-left{left:-2vw;transform:perspective(900px) rotateY(18deg) scale(.93)}
.window-center{left:50%;transform:translateX(-50%);width:31vw;opacity:.23}
.window-right{right:-2vw;transform:perspective(900px) rotateY(-18deg) scale(.93)}

.window-glass{
  position:absolute;
  inset:9% 7% 0;
  border:1px solid rgba(220,222,222,.68);
  border-radius:50% 50% 5% 5% / 24% 24% 3% 3%;
  background:
    repeating-linear-gradient(90deg,transparent 0 15%,rgba(255,255,255,.14) 15.3% 15.7%),
    repeating-linear-gradient(0deg,transparent 0 13%,rgba(255,255,255,.10) 13.2% 13.6%);
}
.window-glass::before,
.window-glass::after{
  content:"";
  position:absolute;
  background:rgba(255,255,255,.22);
}
.window-glass::before{left:50%;top:0;width:1px;height:100%}
.window-glass::after{top:38%;left:0;width:100%;height:1px}

.rose{
  position:absolute;
  top:3%;
  left:50%;
  width:42%;
  aspect-ratio:1;
  transform:translateX(-50%);
  border:1px solid rgba(255,255,255,.55);
  border-radius:50%;
  background:
    radial-gradient(circle,transparent 0 15%,rgba(255,255,255,.18) 16% 18%,transparent 19% 37%,rgba(255,255,255,.13) 38% 40%,transparent 41%),
    repeating-conic-gradient(from 0deg,rgba(255,255,255,.18) 0 3deg,transparent 3deg 22.5deg);
}

.light-beam{
  position:absolute;
  top:-8vh;
  height:95vh;
  filter:blur(16px);
  opacity:.12;
  mix-blend-mode:screen;
  animation:lightBreathe 8s ease-in-out infinite;
}
.beam-left{
  left:4vw;width:30vw;
  background:linear-gradient(102deg,transparent 18%,rgba(220,225,225,.25) 48%,transparent 76%);
  transform:rotate(9deg);
}
.beam-center{
  left:34vw;width:32vw;opacity:.15;
  background:linear-gradient(90deg,transparent 15%,rgba(230,232,230,.29) 50%,transparent 85%);
}
.beam-right{
  right:4vw;width:30vw;
  background:linear-gradient(78deg,transparent 18%,rgba(220,225,225,.25) 48%,transparent 76%);
  transform:rotate(-9deg);
  animation-delay:-3s;
}
@keyframes lightBreathe{
  0%,100%{opacity:.08;filter:blur(19px)}
  50%{opacity:.19;filter:blur(13px)}
}

.smoke{
  position:absolute;
  left:-20%;
  width:140%;
  height:48%;
  border-radius:50%;
  filter:blur(55px);
  opacity:.14;
  mix-blend-mode:screen;
  background:
    radial-gradient(ellipse at 20% 60%,rgba(180,184,185,.34),transparent 31%),
    radial-gradient(ellipse at 52% 48%,rgba(160,164,165,.29),transparent 34%),
    radial-gradient(ellipse at 82% 63%,rgba(190,192,191,.25),transparent 28%);
}
.smoke-back{
  bottom:-20%;
  animation:smokeA 23s ease-in-out infinite alternate;
}
.smoke-mid{
  bottom:-10%;
  opacity:.11;
  transform:scaleX(-1);
  animation:smokeB 17s ease-in-out infinite alternate;
}
.smoke-front{
  bottom:-28%;
  opacity:.16;
  filter:blur(38px);
  animation:smokeA 13s ease-in-out infinite alternate-reverse;
}
@keyframes smokeA{
  from{transform:translate3d(-4%,2%,0) scale(1.04)}
  to{transform:translate3d(5%,-8%,0) scale(1.14)}
}
@keyframes smokeB{
  from{transform:translate3d(6%,0,0) scaleX(-1) scale(1)}
  to{transform:translate3d(-6%,-10%,0) scaleX(-1) scale(1.18)}
}

.leaf-field,.ember-field{position:absolute;inset:0;overflow:hidden}
.leaf{
  position:absolute;
  top:var(--y);
  left:-8vw;
  width:var(--w);
  height:calc(var(--w) * .52);
  border-radius:100% 0 100% 0;
  background:#050607;
  opacity:var(--o);
  filter:blur(var(--blur));
  animation:windLeaf var(--dur) linear var(--delay) infinite;
}
.leaf::after{
  content:"";
  position:absolute;
  width:70%;
  height:1px;
  left:15%;
  top:50%;
  background:rgba(180,180,180,.15);
  transform:rotate(-18deg);
}
@keyframes windLeaf{
  0%{transform:translate3d(-10vw,5vh,0) rotate(var(--r));opacity:0}
  7%{opacity:var(--o)}
  46%{transform:translate3d(55vw,-4vh,0) rotate(calc(var(--r) + 210deg))}
  72%{transform:translate3d(85vw,7vh,0) rotate(calc(var(--r) + 340deg))}
  100%{transform:translate3d(120vw,-7vh,0) rotate(calc(var(--r) + 520deg));opacity:0}
}

.ember{
  position:absolute;
  left:var(--x);
  bottom:-8px;
  width:2px;height:2px;border-radius:50%;
  background:rgba(181,143,92,.72);
  box-shadow:0 0 8px rgba(181,143,92,.25);
  opacity:0;
  animation:emberRise var(--dur) linear var(--delay) infinite;
}
@keyframes emberRise{
  0%{transform:translate3d(0,0,0);opacity:0}
  15%{opacity:.45}
  70%{opacity:.25}
  100%{transform:translate3d(var(--sway),-106vh,0);opacity:0}
}

.vignette{
  position:absolute;inset:0;
  box-shadow:inset 0 0 170px 58px rgba(0,0,0,.78);
}
.grain{
  position:absolute;inset:0;opacity:.035;mix-blend-mode:soft-light;
  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='.84' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter id='n'/%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

/* ---------- global controls ---------- */
.global-controls{
  position:fixed;
  z-index:80;
  top:max(22px,env(safe-area-inset-top));
  left:50%;
  width:min(980px,calc(100% - 48px));
  transform:translateX(-50%);
  display:flex;
  justify-content:space-between;
  align-items:center;
  pointer-events:none;
}
.sound-button,.lang-toggle{
  pointer-events:auto;
  background:transparent;
  color:var(--muted);
}
.sound-button{
  display:flex;align-items:center;gap:9px;padding:8px 0;
}

.sound-cross{
  width:15px;
  height:15px;
  object-fit:contain;
  filter:invert(1);
  opacity:.72;
  flex:0 0 auto;
  transition:opacity .3s ease, transform .3s ease;
}
.sound-button:hover .sound-cross{opacity:1;transform:scale(1.05)}

.sound-label{
  font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;
}
.sound-bars{
  display:flex;align-items:flex-end;gap:2px;height:11px;
}
.sound-bars i{
  width:2px;border-radius:2px;background:currentColor;
  animation:soundBar 1.05s ease-in-out infinite;
}
.sound-bars i:nth-child(1){height:3px}
.sound-bars i:nth-child(2){height:9px;animation-delay:-.3s}
.sound-bars i:nth-child(3){height:6px;animation-delay:-.55s}
.sound-bars i:nth-child(4){height:4px;animation-delay:-.18s}
.sound-button.muted .sound-bars i{height:2px;animation:none}
@keyframes soundBar{50%{height:2px}}

.lang-toggle{
  display:flex;gap:8px;padding:8px 0;
  font-size:.66rem;letter-spacing:.18em;
}
.lang-option{opacity:.35;transition:opacity .3s}
.lang-option.active{opacity:1}
.lang-divider{opacity:.2}

/* ---------- intro ---------- */
.intro{
  position:fixed;inset:0;z-index:30;
  display:grid;place-items:center;
  background:rgba(7,8,10,.12);
  transition:opacity 1.05s var(--ease),visibility 1.05s;
}
.intro.hidden{opacity:0;visibility:hidden;pointer-events:none}
.intro-content{
  width:min(1000px,92vw);
  text-align:center;
  margin:auto;
  transform:none;
}
.intro-word{
  width:100%;
  display:flex;justify-content:center;align-items:center;
  gap:.018em;padding:0;margin:0 auto;
  font-family:"Times New Roman",Times,serif;
  font-weight:400;
  font-size:clamp(5.8rem,13.2vw,10.9rem);
  line-height:.86;
  letter-spacing:.018em;
  color:#e8e7e2;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.72));
  transform:scaleX(1.075);
}

.intro-word span{
  opacity:0;
  transform:translateY(30px) scale(.96);
  filter:blur(6px);
  text-shadow:
    0 1px 0 #f4f3ee,
    0 2px 0 #b7b8b8,
    0 4px 0 #606268,
    0 7px 12px rgba(0,0,0,.64),
    0 0 22px rgba(255,255,255,.035);
  animation:letterIn 1.25s var(--ease) forwards;
}
.intro-word span:nth-child(1){animation-delay:.08s}
.intro-word span:nth-child(2){animation-delay:.15s}
.intro-word span:nth-child(3){animation-delay:.22s}
.intro-word span:nth-child(4){animation-delay:.29s}
.intro-word span:nth-child(5){animation-delay:.36s}
.intro-word span:nth-child(6){animation-delay:.43s}
@keyframes letterIn{to{opacity:1;transform:none;filter:blur(0)}}

.ornament,.section-divider{
  display:flex;justify-content:center;align-items:center;gap:12px;
  color:rgba(255,255,255,.34);
}
.ornament{margin:2.1rem auto 0;opacity:0;animation:fadeUp .8s 1s forwards}
.ornament i,.section-divider i{
  height:1px;width:min(115px,18vw);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.30));
}
.ornament i:last-child,.section-divider i:last-child{transform:scaleX(-1)}
.ornament b,.section-divider b{
  font-family:"Cinzel",serif;font-size:.7rem;font-weight:500;
}

.enter-button{
  margin-top:1.05rem;padding:1rem 1.6rem;
  background:transparent;color:#b4b4b4;
  text-transform:uppercase;letter-spacing:.42em;font-size:.66rem;
  opacity:0;animation:fadeUp .8s 1.18s forwards;
  transition:color .3s,letter-spacing .3s;
}
.enter-button:hover{color:#efeee9;letter-spacing:.49em}

@keyframes fadeUp{
  from{opacity:0}
  to{opacity:1}
}

/* ---------- main profile ---------- */
.site{
  position:relative;z-index:20;
  min-height:100dvh;
  display:grid;
  grid-template-rows:1fr auto;
  justify-items:center;
  padding:max(76px,calc(env(safe-area-inset-top) + 58px)) 24px max(18px,env(safe-area-inset-bottom));
  opacity:0;transform:scale(.992);pointer-events:none;
  transition:opacity 1s .16s var(--ease),transform 1s .16s var(--ease);
}
.site.visible{opacity:1;transform:none;pointer-events:auto}

.profile{
  width:min(660px,100%);
  align-self:center;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  transform:translateY(-1.5vh);
}

.avatar-wrap{
  position:relative;width:116px;height:116px;
  border-radius:50%;padding:0;background:transparent;
  margin-bottom:21px;
}
.avatar{
  width:100%;height:100%;display:block;object-fit:cover;border-radius:50%;
  filter:grayscale(1) contrast(1.06);
}
.avatar-ring{
  position:absolute;inset:-7px;border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 0 20px rgba(255,255,255,.025);
}

.name{
  margin:0;
  font-family:"California Sun",Georgia,"Times New Roman",serif;
  font-size:clamp(4.3rem,10vw,6.35rem);
  font-weight:400;
  line-height:.94;
  letter-spacing:.002em;
  color:#f2f1ed;
  -webkit-text-stroke:.65px rgba(12,12,13,.95);
  text-shadow:
    0 1px 0 #c8c7c3,
    0 3px 0 #3d3e42,
    0 7px 12px rgba(0,0,0,.72),
    0 0 15px rgba(255,255,255,.055);
}
.location{
  margin:15px 0 0;color:#aaa9a6;
  font-family:"Cinzel",serif;font-size:.68rem;letter-spacing:.29em;text-transform:uppercase;
}

.nav{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:21px;margin-top:38px;
}
.nav-link{
  position:relative;background:transparent;padding:9px 2px;
  color:#b0afb0;font-family:"Cinzel",serif;
  text-transform:uppercase;letter-spacing:.14em;font-size:.68rem;
  transition:color .32s,letter-spacing .32s;
}
.nav-link::after{
  content:"";position:absolute;left:50%;bottom:1px;
  width:0;height:1px;background:#e7e6e1;transform:translateX(-50%);
  transition:width .35s var(--ease);
}
.nav-link.active,.nav-link:hover{color:#f0efea;letter-spacing:.17em}
.nav-link.active::after{width:22px}

.section-divider{width:100%;margin-top:23px}
.section-divider i{flex:1;max-width:none}

.panel-shell{
  width:min(560px,100%);
  min-height:155px;
  margin-top:22px;
  position:relative;
}
.panel{
  position:absolute;inset:0;
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.panel.active{position:relative;opacity:1;transform:none;pointer-events:auto}

.about-quote{
  margin:0 auto;max-width:520px;
  font-family:Georgia,"Times New Roman",serif;
  font-style:italic;
  color:#cfceca;
  font-size:clamp(1.08rem,2.8vw,1.28rem);
  line-height:1.65;
}
.about-quote cite{
  display:block;margin-top:13px;
  color:#8c8d91;
  font-family:"Cinzel",serif;
  font-style:normal;
  font-size:.61rem;letter-spacing:.22em;text-transform:uppercase;
}

.link-list{display:grid}
.profile-link{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,.075);
  text-align:left;color:#dad9d5;
  transition:padding .3s var(--ease),color .3s;
}
.profile-link:last-child{border-bottom:0}
.profile-link:hover{padding-left:7px;color:#fff}
.link-meta{color:#77797e;font-size:.77rem}

.panel-kicker{
  margin:0 0 10px;color:#77797e;font-family:"Cinzel",serif;
  text-transform:uppercase;letter-spacing:.18em;font-size:.63rem;
}
.panel-text{margin:0;color:#b4b5b9;font-size:.9rem}

.footer{
  align-self:end;
  display:flex;justify-content:center;align-items:center;gap:10px;
  color:#686a6f;font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;
  padding-top:18px;
}

@media (max-width:640px){
  .global-controls{width:calc(100% - 34px)}
  .sound-label{display:none}
  .window{opacity:.13;height:67vh}
  .window-center{width:58vw;min-width:260px;opacity:.19}
  .window-left{left:-31vw}
  .window-right{right:-31vw}
  .light-beam{opacity:.10}
  .intro-word{font-size:clamp(4.4rem,21vw,7rem);letter-spacing:0}
  .intro-content{transform:none}
  .site{padding-left:20px;padding-right:20px}
  .profile{transform:translateY(-1vh)}
  .avatar-wrap{width:103px;height:103px}
  .name{font-size:clamp(4rem,18.5vw,5.15rem);margin-top:33px}
  .nav-link{font-size:.61rem}
  .section-divider{margin-top:20px}
  .panel-shell{margin-top:20px}
  .footer{font-size:.53rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .smoke,.leaf-field,.ember-field,.light-beam{display:none}
}