/* =========================================================
   BLOVEDWORLD — teaser
   Tokens
   ========================================================= */
:root{
  --black:        #050403;
  --black-2:      #0b0908;
  --ink:          #f3ede4;
  --ink-dim:      #948a80;
  --ink-faint:    #4a443e;
  --blood:        #6e1414;
  --blood-bright: #a3241f;
  --blood-deep:   #2c0808;

  --ease-slow: cubic-bezier(.19,1,.22,1);
  --ease-soft: cubic-bezier(.33,1,.68,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ background:var(--black); }

body{
  background:var(--black);
  color:var(--ink);
  font-family:'Jost', sans-serif;
  min-height:100svh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  cursor:default;
}

::selection{ background:var(--blood); color:var(--ink); }

button{ font-family:inherit; }

a{ color:inherit; }

/* focus visibility, kept quiet but present */
:focus-visible{
  outline:1px solid var(--ink-dim);
  outline-offset:6px;
}

/* =========================================================
   Ambient texture
   ========================================================= */
.grain{
  position:fixed; inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.cursor-glow{
  position:fixed;
  top:0; left:0;
  width:520px; height:520px;
  margin-left:-260px; margin-top:-260px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(163,36,31,.10) 0%, rgba(163,36,31,.04) 35%, rgba(163,36,31,0) 70%);
  pointer-events:none;
  z-index:0;
  opacity:0;
  transition:opacity 1.2s var(--ease-soft);
  will-change:transform;
}
.cursor-glow.active{ opacity:1; }

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position:relative;
  z-index:2;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: 8vh 6vw 4vh;
  transition: opacity 1s var(--ease-soft), filter 1s var(--ease-soft), transform 1s var(--ease-soft);
}

.hero-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap: clamp(1.6rem, 4vh, 3.2rem);
}

.headline{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-weight:300;
  font-size: clamp(2.1rem, 6vw, 4.4rem);
  letter-spacing: 0.32em;
  color:var(--ink);
  opacity:0;
  filter: blur(14px);
  transform: translateY(6px);
  transition: opacity 1.6s var(--ease-slow), filter 1.6s var(--ease-slow), letter-spacing 1.8s var(--ease-slow), transform 1.6s var(--ease-slow);
}
.headline span{ display:inline-block; }

body.loaded .headline{
  opacity:1;
  filter: blur(0);
  letter-spacing: 0.14em;
  transform: translateY(0);
  transition-delay: .5s;
}

.logo-wrap{
  width: min(72vw, 460px);
  opacity:0;
  filter: blur(18px);
  transform: scale(.94);
  transition: opacity 1.9s var(--ease-slow), filter 1.9s var(--ease-slow), transform 1.9s var(--ease-slow);
}

body.loaded .logo-wrap{
  opacity:1;
  filter: blur(0);
  transform: scale(1);
  transition-delay: 1.15s;
}

.logo{
  width:100%;
  height:auto;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
  animation: breathe 7s ease-in-out infinite;
  animation-delay: 3.5s;
  transform-origin:50% 50%;
}

@keyframes breathe{
  0%, 100%{ transform:scale(1); }
  50%{ transform:scale(1.014); }
}

/* subtle parallax layer, moved by JS via CSS vars */
body.loaded .hero-inner{
  transform: translate(calc(var(--mx, 0) * 1px), calc(var(--my, 0) * 1px));
  transition: transform .6s var(--ease-soft);
}

/* =========================================================
   Enter cue
   ========================================================= */
.enter-btn{
  position:relative;
  margin-top: clamp(2.4rem, 6vh, 4.5rem);
  background:none;
  border:none;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: .9rem;
  padding: 1rem .75rem;
  color: var(--ink-dim);
  font-weight:300;
  letter-spacing:.4em;
  font-size:.7rem;
  opacity:0;
  transform: translateY(8px);
  transition: opacity 1.4s var(--ease-slow), transform 1.4s var(--ease-slow), color .5s ease;
}

body.loaded .enter-btn{
  opacity:1;
  transform:translateY(0);
  transition-delay: 2s;
}

.enter-btn:hover,
.enter-btn:focus-visible{ color:var(--ink); }

.enter-line{
  position:relative;
  width:1px;
  height:30px;
  background:linear-gradient(to bottom, var(--ink-faint), transparent);
  transition: height .7s var(--ease-soft), background .7s ease;
}

.enter-btn:hover .enter-line,
.enter-btn:focus-visible .enter-line{
  height:42px;
  background:linear-gradient(to bottom, var(--blood-bright), transparent);
}

.drip{
  position:absolute;
  left:50%;
  top:60%;
  width:3px; height:5px;
  transform:translateX(-50%);
  background:var(--blood-bright);
  border-radius:0 0 50% 50%;
  opacity:0;
  animation: dripFall 9s ease-in infinite;
  animation-delay: 5.5s;
}

@keyframes dripFall{
  0%{   opacity:0;   height:4px; transform:translate(-50%,0) scaleY(1); }
  6%{   opacity:.85; height:7px; }
  30%{  opacity:.55; height:9px; transform:translate(-50%,16px) scaleY(1.5); }
  48%{  opacity:0;   height:9px; transform:translate(-50%,24px) scaleY(1.7); }
  100%{ opacity:0;   height:4px; transform:translate(-50%,0) scaleY(1); }
}

.micro-footer{
  position:absolute;
  bottom: max(1.6rem, env(safe-area-inset-bottom));
  left:0; right:0;
  text-align:center;
  font-size:.62rem;
  letter-spacing:.3em;
  color:var(--ink-faint);
  opacity:0;
  transition: opacity 1.6s var(--ease-slow);
}
body.loaded .micro-footer{ opacity:1; transition-delay:2.6s; }

/* =========================================================
   Manifesto overlay
   ========================================================= */
.manifesto{
  position:fixed;
  inset:0;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 8vh 7vw;
  background: var(--black);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition: opacity 1.1s var(--ease-soft), visibility 0s linear 1.1s;
}

body.manifesto-open .hero{
  opacity:0;
  filter: blur(20px);
  transform: scale(.97);
  pointer-events:none;
}

body.manifesto-open .manifesto{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition: opacity 1.1s var(--ease-soft), visibility 0s linear 0s;
}

.manifesto-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap: clamp(1.8rem, 5vh, 3.2rem);
  max-width: 640px;
}

.m-line{
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-weight:300;
  font-size: clamp(1.05rem, 2.6vw, 1.55rem);
  line-height:1.6;
  color: var(--ink-dim);
  opacity:0;
  filter: blur(10px);
  transform: translateY(10px);
  transition: opacity 1.1s var(--ease-slow), filter 1.1s var(--ease-slow), transform 1.1s var(--ease-slow);
}

body.manifesto-open .m-line{ opacity:1; filter:blur(0); transform:translateY(0); color:var(--ink); }

.manifesto-inner .m-line:nth-child(1){ transition-delay:.4s; }
.manifesto-inner .m-line:nth-child(2){ transition-delay:.75s; }
.manifesto-inner .m-line:nth-child(3){ transition-delay:1.1s; }
.manifesto-inner .m-line:nth-child(4){ transition-delay:1.55s; }
.manifesto-inner .m-line:nth-child(5){ transition-delay:1.85s; }

.m-mark{
  font-family:'Jost', sans-serif;
  font-style:normal;
  font-weight:400;
  letter-spacing:.5em;
  font-size: clamp(.85rem, 2vw, 1rem);
  color: var(--ink) !important;
  margin-top:.4rem;
}

.m-sub{
  font-family:'Jost', sans-serif;
  font-style:normal;
  font-weight:300;
  letter-spacing:.08em;
  font-size:.72rem;
  color: var(--ink-faint) !important;
  text-transform:uppercase;
}

.close-btn{
  position:absolute;
  top: max(2rem, env(safe-area-inset-top));
  right: max(2rem, env(safe-area-inset-right));
  width:44px; height:44px;
  background:none;
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.close-btn span{
  position:absolute;
  width:16px; height:1px;
  background:var(--ink-dim);
  transition: background .4s ease;
}
.close-btn span:first-child{ transform:rotate(45deg); }
.close-btn span:last-child{ transform:rotate(-45deg); }
.close-btn:hover span,
.close-btn:focus-visible span{ background:var(--blood-bright); }

/* =========================================================
   Responsive tuning
   ========================================================= */
@media (max-width: 560px){
  .headline{ letter-spacing:.24em; }
  body.loaded .headline{ letter-spacing:.1em; }
  .logo-wrap{ width:min(80vw, 360px); }
  .enter-btn{ margin-top:2.2rem; }
  .m-line br{ display:inline; }
}

@media (max-width: 380px){
  .headline{ font-size:1.85rem; }
}

@media (min-width: 1400px){
  .logo-wrap{ width:min(38vw, 560px); }
}

/* fine pointer only: ambient glow + parallax */
@media (hover: none), (pointer: coarse){
  .cursor-glow{ display:none; }
}

/* reduced motion: keep it essentially static, no looping motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
  .logo{ animation:none; }
  .drip{ display:none; }
  body.loaded .hero-inner{ transform:none !important; }
}