@font-face{font-family:"GFS Didot";src:url(fonts/didot.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Raleway";src:url(fonts/raleway-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  --plum-deepest:#241014;
  --plum:#2B1218;
  --wine-deep:#3A1A22;
  --wine:#5C2A38;
  --rose:#C48A96;
  --blush:#E8C9CE;
  --rose-pale:#F3E3E4;
  --logo-tint:#F7EDEF;
  --hair:rgba(196,138,150,.24);
  --didot:"GFS Didot",Didot,"Bodoni 72",Georgia,serif;
  --raleway:"Raleway","Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;min-height:100vh;min-height:100svh;overflow:hidden;position:relative;
  display:flex;align-items:center;justify-content:center;
  background-color:var(--plum-deepest);
  background-image:radial-gradient(ellipse 80% 70% at 50% 50%,var(--plum) 0%,var(--plum-deepest) 75%);
  color:var(--blush);font-family:var(--raleway);
  -webkit-font-smoothing:antialiased;
}
/* Hairline frame */
body::before{
  content:"";position:fixed;inset:clamp(12px,1.6vw,22px);
  border:1px solid var(--hair);border-radius:2px;pointer-events:none;z-index:2;
}
p,h1{margin:0}

/* Two soft lights drifting slowly behind the note */
.glow{position:fixed;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:0}
.g1{width:56vmax;height:56vmax;left:-14vmax;top:-18vmax;background:radial-gradient(circle,rgba(92,42,56,.75),transparent 65%)}
.g2{width:48vmax;height:48vmax;right:-14vmax;bottom:-18vmax;background:radial-gradient(circle,rgba(196,138,150,.22),transparent 65%)}

.note{position:relative;z-index:1;text-align:center;padding:0 24px}

@keyframes logoGlow{
  0%,100%{text-shadow:0 0 6px rgba(232,201,206,.55),0 0 16px rgba(196,138,150,.75),0 0 34px rgba(196,138,150,.5),0 0 60px rgba(196,138,150,.3)}
  50%{text-shadow:0 0 10px rgba(243,227,228,.85),0 0 24px rgba(214,162,172,.95),0 0 50px rgba(196,138,150,.7),0 0 90px rgba(196,138,150,.45)}
}
.wordmark{
  font-family:var(--didot);font-weight:400;color:var(--logo-tint);
  font-size:clamp(22px,2.6vw,32px);letter-spacing:.42em;margin-right:-.42em;line-height:1;
  text-shadow:0 0 10px rgba(232,201,206,.6),0 0 26px rgba(196,138,150,.6);
}
.line{display:block;width:64px;height:1px;margin:clamp(30px,4.5vh,44px) auto;background:linear-gradient(90deg,transparent,var(--rose),transparent)}
h1{
  font-family:var(--didot);font-weight:400;color:var(--rose-pale);
  font-size:clamp(46px,8.4vw,124px);line-height:1;letter-spacing:.02em;white-space:nowrap;
}
.letters span{display:inline-block}
.letters .sp{width:.28em}
.label{
  margin-top:clamp(26px,4vh,40px);
  font-size:11px;font-weight:500;letter-spacing:.42em;margin-right:-.42em;text-transform:uppercase;color:var(--rose);
}
.copy{
  position:fixed;left:0;right:0;bottom:clamp(30px,4vh,44px);z-index:1;text-align:center;
  font-size:10.5px;letter-spacing:.24em;color:rgba(232,201,206,.45);
  font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;
}

/* Motion. Everything above is the visible resting state. */
@media (prefers-reduced-motion:no-preference){
  @keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(9vmax,7vmax)}}
  @keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-8vmax,-6vmax)}}
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}
  @keyframes draw{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
  @keyframes letterIn{from{opacity:0;transform:translateY(.25em);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
  @keyframes breathe{0%,100%{opacity:1}50%{opacity:.82}}

  .g1{animation:drift1 22s ease-in-out infinite}
  .g2{animation:drift2 26s ease-in-out infinite}
  .wordmark{animation:fadeIn 1.6s ease both,logoGlow 3.4s ease-in-out 1.6s infinite}
  .line{animation:draw 1.2s cubic-bezier(.6,0,.2,1) .6s both}
  .letters span{animation:letterIn 1.1s cubic-bezier(.2,.7,.2,1) both}
  .letters span:nth-child(1){animation-delay:1.00s}
  .letters span:nth-child(2){animation-delay:1.07s}
  .letters span:nth-child(3){animation-delay:1.14s}
  .letters span:nth-child(4){animation-delay:1.21s}
  .letters span:nth-child(5){animation-delay:1.28s}
  .letters span:nth-child(6){animation-delay:1.35s}
  .letters span:nth-child(8){animation-delay:1.49s}
  .letters span:nth-child(9){animation-delay:1.56s}
  .letters span:nth-child(10){animation-delay:1.63s}
  .letters span:nth-child(11){animation-delay:1.70s}
  .label{animation:fadeIn 1.4s ease 2.3s both,breathe 5s ease-in-out 3.7s infinite}
  .copy{animation:fadeIn 1.4s ease 2.6s both}
}

@media (max-width:560px){
  body::before{inset:9px}
  .wordmark{letter-spacing:.36em;margin-right:-.36em}
  .label{font-size:10px;letter-spacing:.34em;margin-right:-.34em}
}