/* ==========================================================================
   RASTELLPIA — design tokens
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');

:root{
  /* palette */
  --crimson:      #c41e3a;
  --rose:         #e63960;
  --hotpink:      #ff5c8a;
  --softpink:     #ffb6c9;
  --bg-deep:      #12030d;
  --bg-deep-2:    #26071a;
  --bg-deep-3:    #3a0a24;
  --ink:          #fff3f6;
  --ink-dim:      #f0c9d4;
  --gold:         #ffe3b0;
  --glass:        rgba(255,255,255,0.06);
  --glass-brd:    rgba(255,182,201,0.25);

  --grad-main:    linear-gradient(135deg, var(--crimson) 0%, var(--rose) 45%, var(--hotpink) 75%, var(--softpink) 100%);
  --grad-text:    linear-gradient(90deg, var(--hotpink), var(--softpink) 55%, var(--gold));
  --grad-moon:    radial-gradient(circle at 35% 32%, #fff7f9 0%, #ffd7e2 30%, var(--hotpink) 62%, var(--crimson) 100%);

  --font-display: 'Noto Serif KR', serif;
  --font-accent:  'Cormorant Garamond', serif;
  --font-body:    'Pretendard', -apple-system, sans-serif;

  --container: 960px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background: var(--bg-deep);
  color: var(--ink);
  font-family: var(--font-body);
  overflow-x:hidden;
  min-height:100vh;
}

::selection{ background: var(--rose); color:#fff; }

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; }

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--softpink);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}

/* ==========================================================================
   Starfield / sky background
   ========================================================================== */
#sky{
  position:fixed;
  inset:0;
  z-index:0;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, var(--bg-deep-3) 0%, transparent 60%),
    radial-gradient(ellipse 120% 80% at 50% 110%, var(--bg-deep-2) 0%, transparent 55%),
    var(--bg-deep);
}
#sky canvas{ position:absolute; inset:0; width:100%; height:100%; }

.content{ position:relative; z-index:2; }

/* ==========================================================================
   Header / hero
   ========================================================================== */
.hero{
  min-height: 78vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 8vh 5vw 4vh;
  position:relative;
}

.moon-wrap{
  position:relative;
  width: min(220px, 42vw);
  height: min(220px, 42vw);
  margin-bottom: 1.6rem;
}
.moon-glow{
  position:absolute; inset:-28%;
  background: radial-gradient(circle, rgba(255,92,138,0.45) 0%, rgba(196,30,58,0.12) 45%, transparent 72%);
  filter: blur(2px);
  animation: pulse-glow 6s ease-in-out infinite;
}
@keyframes pulse-glow{
  0%,100%{ transform:scale(1); opacity:0.85; }
  50%{ transform:scale(1.08); opacity:1; }
}
.moon{
  position:absolute; inset:0;
  border-radius:50%;
  background: var(--grad-moon);
  box-shadow: 0 0 60px rgba(230,57,96,0.55), inset -18px -14px 40px rgba(120,10,40,0.5);
}
.logo-mark{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding: 8%;
}
.logo-mark img{
  width:100%; height:100%; object-fit:contain;
  filter: drop-shadow(0 4px 18px rgba(196,30,58,0.6));
  animation: float-logo 5s ease-in-out infinite;
}
@keyframes float-logo{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}

.site-title{
  font-family: var(--font-display);
  font-weight:700;
  font-size: clamp(2.4rem, 7vw, 4.4rem);
  letter-spacing: 0.06em;
  margin: 0.2rem 0 0.5rem;
  background: var(--grad-text);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow: 0 0 34px rgba(255,92,138,0.35);
}
.site-tagline{
  font-family: var(--font-accent);
  font-style:italic;
  font-size: clamp(1rem, 2.4vw, 1.3rem);
  color: var(--ink-dim);
  letter-spacing:0.04em;
  margin:0 0 2.4rem;
}

/* nav */
.nav-orbit{
  display:inline-flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: 0.4rem;
  padding: 0.5rem;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.nav-orbit a{
  position:relative;
  display:inline-block;
  padding: 0.6rem 1.15rem;
  font-size: 0.95rem;
  letter-spacing:0.03em;
  border-radius: 999px;
  color: var(--ink);
  transition: color .25s ease, background .25s ease;
  white-space:nowrap;
}
.nav-orbit a::after{
  content:"";
  position:absolute; left:50%; bottom:0.2rem;
  width:0; height:2px;
  background: linear-gradient(90deg, var(--hotpink), var(--gold));
  transition: width .3s ease, left .3s ease;
  border-radius:2px;
}
.nav-orbit a:hover, .nav-orbit a:focus-visible{
  background: rgba(255,92,138,0.15);
}
.nav-orbit a:hover::after, .nav-orbit a:focus-visible::after{
  width:70%; left:15%;
}

/* ==========================================================================
   Sections
   ========================================================================== */
section{
  max-width: var(--container);
  margin: 0 auto;
  padding: 5rem 6vw 2rem;
  position:relative;
}
.section-eyebrow{
  font-family: var(--font-accent);
  font-style:italic;
  color: var(--softpink);
  font-size:0.95rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  margin:0 0 0.4rem;
}
.section-title{
  font-family: var(--font-display);
  font-weight:700;
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  margin: 0 0 2rem;
  color: var(--ink);
  border-left: 3px solid transparent;
  border-image: var(--grad-main) 1;
  padding-left: 1rem;
}

/* profile cards (예지화 / 안즈) */
.profile-card{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap: 2rem;
  align-items:center;
  background: var(--glass);
  border:1px solid var(--glass-brd);
  border-radius: 22px;
  padding: 2rem;
  backdrop-filter: blur(8px);
}
.profile-card .pf-img{
  width:100%; aspect-ratio:1/1;
  border-radius: 18px;
  overflow:hidden;
  background: var(--grad-main);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 30px rgba(196,30,58,0.35);
}
.profile-card .pf-img img{ width:100%; height:100%; object-fit:cover; }
.profile-card .pf-name{
  font-family: var(--font-display);
  font-size:1.5rem; font-weight:700;
  background: var(--grad-text);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin:0 0 0.6rem;
}
.profile-card .pf-desc{ color: var(--ink-dim); line-height:1.7; margin:0 0 1rem; white-space:pre-wrap; }
.pf-links{ display:flex; flex-wrap:wrap; gap:0.6rem; }
.pf-links a{
  padding:0.4rem 0.9rem;
  border-radius:999px;
  border:1px solid var(--glass-brd);
  font-size:0.85rem;
  transition: background .2s ease, transform .2s ease;
}
.pf-links a:hover{ background: rgba(255,92,138,0.2); transform: translateY(-1px); }

@media (max-width: 620px){
  .profile-card{ grid-template-columns: 1fr; text-align:center; }
  .profile-card .pf-img{ max-width:200px; margin:0 auto; }
  .pf-links{ justify-content:center; }
}

/* about section */
.about-inner{ display:flex; gap:2rem; align-items:center; }
.about-inner .about-text{ flex:1; min-width:0; }
.about-inner.has-image .about-img{
  flex:0 0 220px; width:220px; aspect-ratio:1/1;
  border-radius:20px; overflow:hidden;
  border:1px solid var(--glass-brd);
  box-shadow: 0 10px 30px rgba(196,30,58,0.25);
}
.about-inner.has-image .about-img img{ width:100%; height:100%; object-fit:cover; }
.about-more-links{ display:flex; flex-wrap:wrap; gap:0.7rem; margin-top:1.2rem; }
.about-more-link{
  display:inline-flex; align-items:center; gap:0.4rem;
  padding:0.5rem 1rem;
  border-radius:999px;
  border:1px solid var(--glass-brd);
  background: rgba(255,92,138,0.1);
  color: var(--softpink); font-size:0.88rem; font-weight:600;
  transition: gap .2s ease, background .2s ease, color .2s ease;
}
.about-more-link:hover{ gap:0.6rem; background: rgba(255,92,138,0.22); color: var(--ink); }
.about-section .about-body{
  color: var(--ink-dim);
  line-height:1.85;
  font-size:1.02rem;
  white-space:pre-wrap;
  max-width:70ch;
}
@media (max-width: 640px){
  .about-inner{ flex-direction:column; align-items:flex-start; }
  .about-inner.has-image .about-img{ width:100%; flex-basis:auto; max-width:280px; margin:0 auto; }
}

/* broadcast / on-air section */
.broadcast-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:1.2rem;
}
.broadcast-card{
  display:flex;
  align-items:center;
  gap:1rem;
  background: var(--glass);
  border:1px solid var(--glass-brd);
  border-radius:18px;
  padding:1rem;
  cursor:default;
}
.broadcast-card .bc-img{
  width:64px; height:64px; border-radius:50%;
  overflow:hidden; flex-shrink:0;
  background: var(--grad-main);
  display:flex; align-items:center; justify-content:center;
}
.broadcast-card .bc-img img{ width:100%; height:100%; object-fit:cover; }
.broadcast-card .bc-info{ display:flex; flex-direction:column; gap:0.4rem; }
.broadcast-card .bc-name{ font-weight:600; font-family: var(--font-display); }
.bc-badge{
  display:inline-flex; align-items:center; gap:0.35rem;
  width:fit-content;
  font-size:0.72rem; font-weight:700; letter-spacing:0.08em;
  padding: 0.2rem 0.6rem;
  border-radius:999px;
}
.bc-badge.offline{ background: rgba(255,255,255,0.08); color: var(--ink-dim); }
.bc-badge.live{ background: linear-gradient(90deg, #ff3d5f, #ff8a3d); color:#fff; }
.bc-badge.live::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:#fff; display:inline-block;
  animation: live-blink 1.2s ease-in-out infinite;
}
@keyframes live-blink{ 0%,100%{ opacity:1; } 50%{ opacity:0.3; } }

/* standalone profile page (horizontal card) */
.profile-page{
  max-width: 900px;
  margin: 0 auto;
  padding: 6rem 6vw 5rem;
  position:relative; z-index:2;
}
.back-link{
  display:inline-flex; align-items:center; gap:0.4rem;
  color: var(--softpink); font-size:0.9rem; margin-bottom:2rem;
}
.back-link:hover{ text-decoration:underline; }

.profile-topbar{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:1rem 1.5rem;
  margin-bottom:2.4rem;
  padding-bottom:1.2rem;
  border-bottom:1px solid var(--glass-brd);
}
.topbar-brand{
  display:inline-flex; align-items:center; gap:0.6rem;
  font-family: var(--font-display); font-weight:700; font-size:1.15rem;
  color: var(--ink); transition: opacity .2s ease;
}
.topbar-brand:hover{ opacity:0.85; }
.topbar-brand img{ width:36px; height:36px; object-fit:contain; }
.topbar-nav{ display:flex; flex-wrap:wrap; gap:0.3rem; }
.topbar-nav a{
  padding:0.45rem 0.9rem; border-radius:999px;
  font-size:0.85rem; color: var(--ink-dim);
  transition: background .2s ease, color .2s ease;
}
.topbar-nav a:hover, .topbar-nav a.active{
  background: rgba(255,92,138,0.15); color: var(--ink);
}
@media (max-width:520px){
  .profile-topbar{ flex-direction:column; align-items:flex-start; }
}

.pv-details{
  display:flex; flex-direction:column; gap:0.55rem;
  margin: 0 0 1.2rem;
  padding: 1rem 1.1rem;
  border-radius:14px;
  background: rgba(0,0,0,0.18);
  border:1px solid var(--glass-brd);
}
.pv-details:empty{ display:none; }
.pv-detail-row{ display:flex; gap:0.6rem; font-size:0.9rem; line-height:1.6; }
.pv-detail-label{ flex:0 0 auto; color: var(--softpink); font-weight:600; }
.pv-detail-value{ color: var(--ink-dim); white-space:pre-wrap; }

.pv-hashtags{ display:flex; flex-wrap:wrap; gap:0.5rem; margin:0 0 1.2rem; }
.pv-hashtags:empty{ display:none; }
.pv-hashtag{
  padding:0.3rem 0.8rem; border-radius:999px;
  font-size:0.8rem; color: var(--softpink);
  background: rgba(255,92,138,0.12);
  border:1px solid var(--glass-brd);
}
.profile-vcard{
  display:flex;
  align-items:stretch;
  gap:1.6rem;
}
.profile-vcard .pv-img{
  flex:0 0 min(320px, 40%);
  width:min(320px, 40%);
  background: var(--glass);
  border:1px solid var(--glass-brd);
  border-radius:26px;
  overflow:hidden;
  backdrop-filter: blur(10px);
  display:flex; align-items:center; justify-content:center;
}
.profile-vcard .pv-img img{ width:100%; height:100%; object-fit:cover; }
.profile-vcard .pv-body{
  flex:1; min-width:0;
  background: var(--glass);
  border:1px solid var(--glass-brd);
  border-radius:26px;
  overflow:hidden;
  backdrop-filter: blur(10px);
  padding: 1.8rem 2rem 2.2rem;
}
.profile-vcard .pv-name{
  font-family: var(--font-display); font-weight:700;
  font-size: 1.8rem;
  background: var(--grad-text);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin: 0 0 0.5rem;
  display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap;
}
.profile-vcard .pv-desc{ color: var(--ink-dim); line-height:1.85; white-space:pre-wrap; margin:0 0 1.2rem; }

@media (max-width: 680px){
  .profile-vcard{ flex-direction:column; gap:1.2rem; }
  .profile-vcard .pv-img{ flex:0 0 auto; width:100%; aspect-ratio:3/4; }
}

/* notices */
.notice-list{ display:flex; flex-direction:column; gap:0.9rem; }
.notice-item{
  background: var(--glass);
  border:1px solid var(--glass-brd);
  border-radius:14px;
  padding:1.1rem 1.4rem;
}
.notice-item .n-top{ display:flex; justify-content:space-between; gap:1rem; align-items:baseline; flex-wrap:wrap; }
.notice-item .n-title{ font-weight:600; font-size:1.05rem; }
.notice-item .n-date{ font-size:0.8rem; color: var(--ink-dim); font-family: var(--font-accent); }
.notice-item .n-body{ margin-top:0.5rem; color: var(--ink-dim); line-height:1.65; white-space:pre-wrap; }
.empty-state{ color: var(--ink-dim); font-style:italic; opacity:0.8; padding:1rem 0; }

.msg-board{
  background: var(--glass);
  border:1px solid var(--glass-brd);
  border-radius:16px;
  padding:1.4rem;
  color: var(--ink-dim);
  line-height:1.85;
  white-space:pre-wrap;
}

/* guestbook */
.gb-form, .msg-form{
  display:grid; gap:0.7rem;
  background: var(--glass);
  border:1px solid var(--glass-brd);
  border-radius:16px;
  padding:1.4rem;
  margin-bottom:1.6rem;
}
.gb-form input, .msg-form input, .gb-form textarea, .msg-form textarea{
  width:100%;
  background: rgba(0,0,0,0.25);
  border:1px solid var(--glass-brd);
  border-radius:10px;
  padding:0.7rem 0.9rem;
  color: var(--ink);
  font-family: inherit;
  font-size:0.95rem;
  resize: vertical;
}
.gb-form textarea, .msg-form textarea{ min-height:90px; }
.btn{
  justify-self:start;
  padding: 0.65rem 1.4rem;
  border:none;
  border-radius:999px;
  background: var(--grad-main);
  color:#fff;
  font-weight:600;
  letter-spacing:0.02em;
  cursor:pointer;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 6px 20px rgba(196,30,58,0.4);
}
.btn:hover{ transform: translateY(-2px); box-shadow: 0 10px 26px rgba(230,57,96,0.5); }
.btn.secondary{ background: transparent; border:1px solid var(--glass-brd); box-shadow:none; }
.btn.danger{ background: linear-gradient(135deg,#7a1023,#c41e3a); }
.btn:disabled{ opacity:0.5; cursor:not-allowed; transform:none; }

.gb-list{ display:flex; flex-direction:column; gap:0.7rem; }
.gb-item{
  background: rgba(255,255,255,0.04);
  border:1px solid var(--glass-brd);
  border-radius:12px;
  padding:0.9rem 1.1rem;
}
.gb-item .g-top{ display:flex; justify-content:space-between; font-size:0.85rem; color: var(--softpink); margin-bottom:0.3rem; }
.gb-item .g-msg{ color:var(--ink); line-height:1.6; white-space:pre-wrap; }

.form-note{ font-size:0.8rem; color: var(--ink-dim); margin:0; }
.form-status{ font-size:0.85rem; min-height:1.2em; }
.form-status.ok{ color:#8fe6a8; }
.form-status.err{ color:#ff9aa8; }

/* footer */
footer{
  position:relative; z-index:2;
  text-align:center;
  padding: 3rem 5vw 4rem;
  color: var(--ink-dim);
  font-size:0.85rem;
}
.sns-row{ display:flex; justify-content:center; gap:0.9rem; margin-bottom:1rem; flex-wrap:wrap; }
.sns-row a{
  width:42px; height:42px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--glass);
  border:1px solid var(--glass-brd);
  font-size:0.8rem;
  transition: transform .2s ease, background .2s ease;
}
.sns-row a:hover{ transform: translateY(-3px) scale(1.05); background: rgba(255,92,138,0.25); }
.sns-row a img{ width:20px; height:20px; object-fit:contain; }
footer .admin-link{ opacity:0.35; font-size:0.75rem; }
footer .admin-link:hover{ opacity:0.8; }

/* ==========================================================================
   Admin page
   ========================================================================== */
.admin-body{ max-width: 760px; margin:0 auto; padding: 4rem 5vw 6rem; position:relative; z-index:2; }
.admin-header{ display:flex; align-items:center; gap:0.8rem; margin-bottom:2rem; }
.admin-header img{ width:40px; height:40px; }
.admin-header h1{ font-family: var(--font-display); font-size:1.5rem; margin:0; }

.login-box{
  max-width:380px; margin: 12vh auto;
  background: var(--glass); border:1px solid var(--glass-brd);
  border-radius:18px; padding:2.2rem;
  text-align:center;
}
.login-box img{ width:64px; height:64px; margin:0 auto 1rem; }
.login-box input{
  width:100%; margin:1rem 0; padding:0.7rem 0.9rem;
  border-radius:10px; border:1px solid var(--glass-brd);
  background: rgba(0,0,0,0.25); color:var(--ink); font-size:1rem;
}

.admin-panel{ display:none; }
.admin-tabs{
  display:flex; flex-wrap:wrap; gap:0.5rem;
  position:sticky; top:0; z-index:6;
  padding:0.9rem 0; margin-bottom:1.6rem;
  background: rgba(10,4,12,0.72); backdrop-filter: blur(10px);
}
.admin-tab-btn{
  padding:0.55rem 1.1rem; border-radius:999px;
  border:1px solid var(--glass-brd); background: rgba(0,0,0,0.25);
  color: var(--ink-dim); font-size:0.85rem; font-family:inherit;
  cursor:pointer; transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.admin-tab-btn:hover{ color: var(--ink); }
.admin-tab-btn.active{
  background: var(--grad-main); color:#fff; border-color:transparent;
}
.admin-tab-btn .tag{ margin-left:0.3rem; }
.admin-tab-panel{ display:none; }
.admin-tab-panel.active{ display:block; }
.admin-savebar{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  position:sticky; bottom:0; z-index:6;
  margin: 0 0 1.6rem;
  padding:1rem 1.2rem;
  background: rgba(10,4,12,0.85); backdrop-filter: blur(10px);
  border:1px solid var(--glass-brd); border-radius:16px;
}
.admin-section{
  background: var(--glass); border:1px solid var(--glass-brd);
  border-radius:16px; padding:1.6rem; margin-bottom:1.6rem;
}
.admin-section h2{ font-family: var(--font-display); font-size:1.2rem; margin:0 0 1rem; color:var(--softpink); }
.field{ margin-bottom:1rem; }
.field label{ display:block; font-size:0.85rem; color: var(--ink-dim); margin-bottom:0.35rem; }
.field input, .field textarea{
  width:100%; padding:0.6rem 0.8rem; border-radius:10px;
  border:1px solid var(--glass-brd); background: rgba(0,0,0,0.25);
  color: var(--ink); font-family:inherit; font-size:0.92rem;
}
.field textarea{ min-height:70px; resize:vertical; }
.upload-row{
  display:flex; align-items:center; gap:0.7rem; flex-wrap:wrap;
  margin-top:0.5rem;
}
.upload-row input[type="file"]{
  flex:1; min-width:180px; font-size:0.82rem; color: var(--ink-dim);
  border:1px dashed var(--glass-brd); border-radius:10px;
  padding:0.45rem 0.6rem; background: rgba(0,0,0,0.15);
}
.upload-row .form-status{ margin:0; }
.row-flex{ display:flex; gap:0.6rem; flex-wrap:wrap; align-items:flex-end; }
.row-flex > *{ flex:1; min-width:140px; }

.repeat-item{
  border:1px dashed var(--glass-brd); border-radius:12px;
  padding:1rem; margin-bottom:0.8rem; position:relative;
}
.repeat-item .remove-btn{
  position:absolute; top:0.6rem; right:0.6rem;
  background:none; border:none; color:#ff9aa8; cursor:pointer; font-size:0.85rem;
}
.tag{
  display:inline-block; font-size:0.7rem; padding:0.15rem 0.55rem;
  border-radius:999px; background: rgba(255,92,138,0.2); color:var(--softpink);
  margin-left:0.4rem;
}

@media (max-width: 560px){
  .profile-card{ padding:1.2rem; }
  section{ padding: 3.5rem 6vw 1.5rem; }
}

/* ==========================================================================
   Heart cursor trail + click burst
   ========================================================================== */
#heart-fx-layer{
  position:fixed; inset:0; pointer-events:none; z-index:9999; overflow:hidden;
}
.heart-fx-particle{
  position:absolute; line-height:1; will-change:transform, opacity;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 6px rgba(230,57,96,0.6));
}
@keyframes heart-trail{
  0%{   transform: translate(-50%, -50%) scale(0.5) rotate(0deg); opacity:0.95; }
  100%{ transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.15) rotate(12deg); opacity:0; }
}
@keyframes heart-pop{
  0%{   transform: translate(-50%, -50%) scale(0); opacity:0; }
  18%{  transform: translate(-50%, -50%) scale(1.35); opacity:1; }
  35%{  transform: translate(-50%, -50%) scale(1); opacity:1; }
  100%{ transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.3); opacity:0; }
}