:root{color-scheme:dark;--bg:#020104;--text:#f8f3fb}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;min-height:100%;overflow:hidden;background:var(--bg);overscroll-behavior:none}
body{font-family:Inter,system-ui,sans-serif;color:var(--text)}
#app{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;overflow:hidden;background:#020104;--mx:50vw;--my:50vh;cursor:pointer}

#ambientPhoto{position:absolute;z-index:0;inset:-26%;background:url('./assets/foto-principal.jpeg') center/cover no-repeat;filter:blur(190px) saturate(1.22) brightness(.06) contrast(.64);transform:scale(1.42);opacity:0;transition:opacity 4.5s ease;will-change:opacity}
#ambientPhoto.visible{opacity:.095}
.ambient-dark{position:absolute;z-index:0;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 51%,rgba(105,20,142,.075),rgba(4,1,8,.56) 47%,rgba(0,0,0,.96) 100%),rgba(0,0,0,.32)}

#scene{position:absolute;z-index:2;inset:0;width:100%;height:100%;display:block;touch-action:none}
.vignette{position:absolute;z-index:4;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 34%,rgba(0,0,0,.10) 61%,rgba(0,0,0,.75) 100%)}
.grain{position:absolute;z-index:4;inset:-50%;width:200%;height:200%;opacity:.016;pointer-events:none;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='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");animation:grain .35s steps(2) infinite}
@keyframes grain{25%{transform:translate(2%,-1%)}50%{transform:translate(-1%,2%)}75%{transform:translate(1%,1%)}}

.word-field{position:absolute;z-index:1;inset:0;overflow:hidden;pointer-events:none;opacity:0;transition:opacity 3.2s ease;mask-image:radial-gradient(circle 300px at var(--mx) var(--my),#000 0,#000 27%,rgba(0,0,0,.72) 54%,transparent 100%);-webkit-mask-image:radial-gradient(circle 300px at var(--mx) var(--my),#000 0,#000 27%,rgba(0,0,0,.72) 54%,transparent 100%)}
.word-field.visible{opacity:.32}
.word-field span{position:absolute;white-space:nowrap;font-family:Georgia,"Times New Roman",serif;font-weight:400;color:rgba(238,220,255,.20);text-shadow:0 0 20px rgba(175,55,255,.12);user-select:none;transform:translate(-50%,-50%) rotate(var(--rot));font-size:var(--size);letter-spacing:.01em}

@media(max-width:700px){
  #ambientPhoto{filter:blur(125px) saturate(1.18) brightness(.072);opacity:0}
  .ambient-dark{background:radial-gradient(circle at 50% 48%,rgba(91,13,121,.07),rgba(0,0,0,.90) 79%)}
  .word-field{mask-image:radial-gradient(circle 165px at var(--mx) var(--my),#000 0,rgba(0,0,0,.72) 46%,transparent 100%);-webkit-mask-image:radial-gradient(circle 165px at var(--mx) var(--my),#000 0,rgba(0,0,0,.72) 46%,transparent 100%)}
}


.music-toggle{position:absolute;z-index:8;right:22px;bottom:22px;width:42px;height:42px;border:1px solid rgba(235,214,255,.16);border-radius:50%;background:rgba(5,2,9,.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:rgba(248,239,255,.74);font:500 15px/1 Inter,system-ui,sans-serif;display:grid;place-items:center;opacity:0;pointer-events:none;transform:translateY(5px);transition:opacity .6s ease,transform .6s ease,border-color .3s ease,background .3s ease;cursor:pointer}
.music-toggle.visible{opacity:.72;pointer-events:auto;transform:none}
.music-toggle:hover{opacity:1;border-color:rgba(235,214,255,.32);background:rgba(14,6,22,.48)}
@media(max-width:700px){.music-toggle{right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));width:40px;height:40px}}
@media(orientation:landscape) and (max-height:520px){.music-toggle{bottom:max(10px,env(safe-area-inset-bottom));right:max(12px,env(safe-area-inset-right));width:38px;height:38px}.word-field{mask-image:radial-gradient(circle 145px at var(--mx) var(--my),#000 0,rgba(0,0,0,.72) 46%,transparent 100%);-webkit-mask-image:radial-gradient(circle 145px at var(--mx) var(--my),#000 0,rgba(0,0,0,.72) 46%,transparent 100%)}}

@media (max-width:820px) and (orientation:portrait){
  html,body,#app{width:100%;height:100%;min-height:100%;}
  #app{height:100svh;height:100dvh;}
  #scene{width:100%;height:100%;max-width:none;max-height:none;}
  .vignette{background:radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,.08) 67%,rgba(0,0,0,.68) 100%)}
  .word-field.visible{opacity:.24}
  .word-field span{font-size:clamp(9px,var(--size),18px)!important}
}