/* ============================================================
   EmpOo — logo splash
   Aesthetic: letterpress ink on handmade cream paper
   ============================================================ */

:root{
  --plum:        #4a1a40;
  --plum-deep:   #34122c;
  --plum-600:    #5e2452;
  --plum-400:    #7c3a6e;
  --plum-200:    #a9719b;

  --cream:       #f3e8db;
  --cream-hi:    #fbf4ea;
  --cream-200:   #ece0d0;
  --line:        rgba(74,26,40,.16);

  --ease: cubic-bezier(.22,.61,.36,1);
  --back: cubic-bezier(.34,1.56,.64,1);

  --ff-display: "Fredoka", system-ui, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:var(--ff-display);
  color:var(--plum);
  background:
    radial-gradient(120% 80% at 82% -10%, var(--cream-hi), transparent 60%),
    radial-gradient(120% 90% at 0% 110%, var(--cream-200), transparent 55%),
    var(--cream);
  min-height:100svh; overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

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

/* decorative bg */
.bg{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.ring{ position:absolute; border-radius:50%; border:1.5px solid var(--line); animation:spin 80s linear infinite; }
.ring--1{ width:720px; height:720px; right:-200px; top:-160px; }
.ring--2{ width:460px; height:460px; left:-180px; bottom:-160px; border-style:dashed; opacity:.5; animation-duration:120s; animation-direction:reverse; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.stain{ position:absolute; border-radius:50%; filter:blur(8px);
  background:radial-gradient(circle at 50% 40%, rgba(124,58,110,.12), transparent 70%); }
.stain--1{ width:500px; height:500px; right:-140px; bottom:-140px; animation:breathe 9s ease-in-out infinite; }
.stain--2{ width:380px; height:380px; left:-140px; top:-90px; opacity:.7; animation:breathe 11s ease-in-out infinite reverse; }
@keyframes breathe{ 0%,100%{ transform:scale(1); opacity:.7;} 50%{ transform:scale(1.18); opacity:1;} }

/* stage */
.stage{ position:relative; z-index:3; min-height:100svh; display:grid; place-items:center;
  padding:40px clamp(20px,5vw,40px); }
.logo{ text-align:center; display:flex; flex-direction:column; align-items:center; }

/* mascot */
.char-wrap{ position:relative; width:min(300px,62vw); margin-bottom:14px;
  opacity:0; animation:dropIn 1s var(--back) .1s forwards; }
@keyframes dropIn{ from{ opacity:0; transform:translateY(-40px) scale(.9); } to{ opacity:1; transform:none; } }
.char{ width:100%; position:relative; z-index:3; filter:drop-shadow(0 24px 24px rgba(52,18,44,.28));
  animation:walk 4.5s ease-in-out infinite; }
@keyframes walk{ 0%,100%{ transform:translateY(0) rotate(-1.6deg);} 50%{ transform:translateY(-16px) rotate(1.6deg);} }
.char__shadow{ position:absolute; left:50%; bottom:-3%; width:60%; height:28px; transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(52,18,44,.3), transparent 70%); filter:blur(5px); z-index:1;
  animation:shadowPulse 4.5s ease-in-out infinite; }
@keyframes shadowPulse{ 0%,100%{ transform:translateX(-50%) scale(1); opacity:.8;} 50%{ transform:translateX(-50%) scale(.8); opacity:.5;} }

.cup{ position:absolute; z-index:2; border:2.4px solid var(--plum); border-radius:0 0 12px 12px; }
.cup::after{ content:""; position:absolute; right:-9px; top:3px; width:11px; height:13px;
  border:2.4px solid var(--plum); border-left:none; border-radius:0 7px 7px 0; }
.cup--a{ width:28px; height:22px; top:-10%; left:-10%; animation:floaty 5s ease-in-out infinite; }
.cup--b{ width:21px; height:17px; top:-2%; left:0%; opacity:.8; animation:floaty 6.5s ease-in-out infinite .4s; }
.cup--c{ width:24px; height:19px; top:-15%; left:5%; background:var(--plum); animation:floaty 5.8s ease-in-out infinite .8s; }
.cup--c::after{ border-color:var(--plum); }
@keyframes floaty{ 0%,100%{ transform:translateY(0) rotate(-5deg);} 50%{ transform:translateY(-12px) rotate(5deg);} }

.sparkle{ position:absolute; z-index:4; color:var(--plum-400); animation:tw 3s ease-in-out infinite; }
.sparkle--1{ top:6%; right:-8%; font-size:1.3rem; }
.sparkle--2{ bottom:14%; left:-12%; font-size:.9rem; animation-delay:1.1s; }
.sparkle--3{ top:40%; right:-14%; font-size:.72rem; animation-delay:.6s; }
@keyframes tw{ 0%,100%{ opacity:.2; transform:scale(.7) rotate(0);} 50%{ opacity:1; transform:scale(1.1) rotate(40deg);} }

/* wordmark */
.wordmark{
  font-weight:700; line-height:.9; letter-spacing:-.02em;
  font-size:clamp(4rem, 17vw, 9rem); color:var(--plum);
  display:flex; align-items:center; gap:.01em; animation:floatWord 5s ease-in-out 1.2s infinite;
}
.wordmark span{
  display:inline-block; opacity:0; transform:translateY(46px) rotate(-10deg) scale(.7);
  animation:letterPop .85s var(--back) forwards;
  animation-delay:calc(.45s + var(--i) * .09s);
  text-shadow:
    0 2px 0 rgba(255,251,244,.7),
    0 -1px 0 rgba(52,18,44,.25),
    0 14px 30px -14px rgba(52,18,44,.5);
}
@keyframes letterPop{ to{ opacity:1; transform:none; } }
@keyframes floatWord{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-7px);} }

/* Each glyph sits in an inner <b> so its perpetual motion never fights the
   letterPop entrance on the parent <span>. */
.wordmark b{ display:inline-block; font:inherit; line-height:1; transform-origin:center center; will-change:font-size,transform; }

/* The two O's continuously trade size — first big / second small, gliding
   smoothly to first small / second big and back, forever. PURE font-size
   easing — no case-swap, no steps, nothing discrete — so it is perfectly
   smooth start-to-end with zero blink. The second O lags ~0.4s, so as the
   first starts closing the second starts opening: an organic hand-off that
   never freezes at the extremes. */
/* `backwards` = hold the 0% keyframe (start size) during the start delay, so
   there's no size snap on first load when the loop begins. */
.o-pulse--a{ animation: sizeA 4.4s ease-in-out 1.55s infinite backwards; }
.o-pulse--b{ animation: sizeB 4.4s ease-in-out 1.95s infinite backwards; }
@keyframes sizeA{   /* first O: big -> small -> big */
  0%,100%{ font-size:1.5em; transform:rotate(2deg);  }
  50%    { font-size:.5em;  transform:rotate(-3deg); }
}
@keyframes sizeB{   /* second O: small -> big -> small */
  0%,100%{ font-size:.5em;  transform:rotate(-3deg); }
  50%    { font-size:1.5em; transform:rotate(2deg);  }
}

/* the left letters (E m p) keep a gentle, alive vibration — desynced per
   letter via --i so they shiver independently. */
.v{ animation:vibrate calc(.5s + var(--i) * .07s) ease-in-out 1.55s infinite; }
@keyframes vibrate{
  0%,100%{ transform:translate(0,0)       rotate(0deg); }
  20%    { transform:translate(-.8px,.6px) rotate(-1.2deg); }
  40%    { transform:translate(.7px,-.5px) rotate(1.2deg); }
  60%    { transform:translate(-.6px,.5px) rotate(-.8deg); }
  80%    { transform:translate(.7px,.4px)  rotate(.9deg); }
}

/* socials */
.socials{ display:flex; gap:16px; margin-top:34px;
  opacity:0; animation:fadeUp .8s var(--ease) 1.2s forwards; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
.soc{ width:52px; height:52px; border-radius:50%; display:grid; place-items:center; color:var(--plum);
  background:var(--cream-hi); box-shadow:0 0 0 1.4px var(--line) inset, 0 1px 0 rgba(255,251,244,.8) inset, 0 12px 26px -16px rgba(52,18,44,.5);
  transition:transform .35s var(--back), background .25s, color .25s, box-shadow .25s; }
.soc svg{ width:23px; height:23px; }
.soc:hover{ transform:translateY(-4px) scale(1.06); background:var(--plum); color:var(--cream-hi);
  box-shadow:0 16px 26px -14px rgba(52,18,44,.7); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001s !important; animation-delay:0s !important; animation-iteration-count:1 !important; }
  .wordmark span{ opacity:1; transform:none; }
  .char-wrap, .socials{ opacity:1; }
}

@media (max-width:560px){
  .char-wrap{ width:min(240px,64vw); }
  .soc{ width:48px; height:48px; }
}