/* =====================================================================
   오쭈다노트 꾸미기 효과 (세련된 2판)
   · 카드 사진(.photo)과 글쓰기 미리보기(.compose-photo)에 똑같이 적용돼요.
   · 사진을 가리지 않게 은은하게: 가는 빛, 부드러운 흐림, 천천히 움직이는 입자.
   · 효과는 사진과 글 사이(겹 1)에 놓여서 글씨는 늘 위에 또렷하게 보여요.
   · 휴대폰의 '움직임 줄이기'를 켠 사람에게는 움직임을 멈춰요.
   ===================================================================== */

/* 공통 틀 */
:is(.photo, .compose-photo)[class*="note-effect-"] { isolation: isolate; }
:is(.photo, .compose-photo)[class*="note-effect-"]::before,
:is(.photo, .compose-photo)[class*="note-effect-"]::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: inherit; background-repeat: repeat;
}
/* 예전 반짝임 글자(✦ · ✧ · ✦)와 두꺼운 흰 테두리를 지워요 */
:is(.photo, .compose-photo).note-effect-sparkle::after {
  content: ""; top: 0; right: 0; font-size: 0; color: transparent; text-shadow: none;
}
:is(.photo, .compose-photo).note-effect-frame {
  box-shadow: inset 0 0 0 1000px var(--note-wash, transparent), inset 0 0 70px rgba(10, 10, 25, .22);
}

/* ---------- 반짝임: 네 갈래로 빛나는 작은 별빛이 번갈아 반짝여요 ---------- */
:is(.photo, .compose-photo).note-effect-sparkle::before,
:is(.photo, .compose-photo).note-effect-sparkle::after {
  background-repeat: no-repeat;
  animation: oj-twinkle 3.6s ease-in-out infinite alternate;
}
:is(.photo, .compose-photo).note-effect-sparkle::before {
  background-image:
    radial-gradient(ellipse 1px 9px at 18% 22%, #fff, transparent 70%),
    radial-gradient(ellipse 9px 1px at 18% 22%, #fff, transparent 70%),
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, .9) 0 1.5px, transparent 5px),
    radial-gradient(ellipse 1px 6px at 82% 16%, #fff, transparent 70%),
    radial-gradient(ellipse 6px 1px at 82% 16%, #fff, transparent 70%),
    radial-gradient(ellipse 1px 7px at 74% 78%, #fff, transparent 70%),
    radial-gradient(ellipse 7px 1px at 74% 78%, #fff, transparent 70%);
  filter: drop-shadow(0 0 3px rgba(255, 245, 220, .8));
}
:is(.photo, .compose-photo).note-effect-sparkle::after {
  background-image:
    radial-gradient(ellipse 1px 7px at 30% 70%, #fff, transparent 70%),
    radial-gradient(ellipse 7px 1px at 30% 70%, #fff, transparent 70%),
    radial-gradient(ellipse 1px 10px at 88% 48%, #fff, transparent 70%),
    radial-gradient(ellipse 10px 1px at 88% 48%, #fff, transparent 70%),
    radial-gradient(circle at 88% 48%, rgba(255, 255, 255, .9) 0 1.5px, transparent 5px),
    radial-gradient(ellipse 1px 5px at 52% 12%, #fff, transparent 70%),
    radial-gradient(ellipse 5px 1px at 52% 12%, #fff, transparent 70%);
  filter: drop-shadow(0 0 3px rgba(220, 235, 255, .8));
  animation-delay: -1.8s;
}

/* ---------- 테두리: 사진 액자처럼 가는 두 줄 ---------- */
:is(.photo, .compose-photo).note-effect-frame::before {
  inset: 10px; border: 1px solid rgba(255, 255, 255, .78); border-radius: 12px;
  box-shadow: 0 0 12px rgba(255, 255, 255, .18);
}
:is(.photo, .compose-photo).note-effect-frame::after {
  inset: 15px; border: 1px solid rgba(255, 255, 255, .34); border-radius: 9px;
}

/* ---------- 비 내리기: 가늘고 비스듬한 빗줄기와 차분한 푸른 기운 ---------- */
:is(.photo, .compose-photo).note-effect-rain::before {
  inset: -40% -20%;
  background-image:
    radial-gradient(ellipse .7px 16px at 12% 18%, rgba(225, 238, 255, .7), transparent 70%),
    radial-gradient(ellipse .6px 12px at 38% 62%, rgba(225, 238, 255, .55), transparent 70%),
    radial-gradient(ellipse .7px 18px at 64% 30%, rgba(225, 238, 255, .65), transparent 70%),
    radial-gradient(ellipse .6px 11px at 86% 76%, rgba(225, 238, 255, .5), transparent 70%),
    radial-gradient(ellipse .7px 14px at 52% 90%, rgba(225, 238, 255, .6), transparent 70%);
  background-size: 140px 200px;
  animation: oj-rain .8s linear infinite;
}
:is(.photo, .compose-photo).note-effect-rain::after {
  background: linear-gradient(180deg, rgba(40, 62, 96, .26), rgba(20, 30, 52, .1) 60%, rgba(20, 30, 52, .2));
}

/* ---------- 빛 스치기: 부드러운 빛이 가끔 사선으로 지나가요 ---------- */
:is(.photo, .compose-photo).note-effect-shimmer::before {
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .06) 44%, rgba(255, 255, 255, .34) 50%, rgba(255, 255, 255, .06) 56%, transparent 62%) no-repeat;
  background-size: 260% 100%;
  mix-blend-mode: soft-light;
  animation: oj-sweep 6.5s ease-in-out infinite;
}
:is(.photo, .compose-photo).note-effect-shimmer::after {
  background: linear-gradient(115deg, transparent 45%, rgba(255, 255, 255, .22) 50%, transparent 55%) no-repeat;
  background-size: 260% 100%;
  animation: oj-sweep 6.5s ease-in-out infinite;
}

/* ---------- 무지개: 은은한 홀로그램 빛이 천천히 흘러요 ---------- */
:is(.photo, .compose-photo).note-effect-rainbow::before {
  background: linear-gradient(125deg, rgba(255, 128, 170, .26), rgba(255, 214, 128, .2) 24%, rgba(140, 232, 196, .2) 48%, rgba(122, 174, 255, .24) 72%, rgba(206, 144, 255, .26));
  background-size: 320% 320%;
  mix-blend-mode: screen;   /* 빛을 더하는 방식이라 어두운 사진에서도 은은하게 보여요 */
  animation: oj-drift 16s ease-in-out infinite alternate;
}
:is(.photo, .compose-photo).note-effect-rainbow::after {
  background: radial-gradient(120% 70% at 80% 0%, rgba(255, 255, 255, .16), transparent 55%);
}

/* ---------- 눈 내리기: 작은 눈송이와 흐릿한 큰 눈송이가 다른 빠르기로 ---------- */
:is(.photo, .compose-photo).note-effect-snow::before {
  inset: -180px 0 0;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255, 255, 255, .95) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 34% 64%, rgba(255, 255, 255, .85) 0 1px, transparent 2px),
    radial-gradient(circle at 58% 30%, rgba(255, 255, 255, .9) 0 1.4px, transparent 2.4px),
    radial-gradient(circle at 80% 78%, rgba(255, 255, 255, .8) 0 1px, transparent 2px),
    radial-gradient(circle at 92% 12%, rgba(255, 255, 255, .85) 0 1.2px, transparent 2.2px);
  background-size: 180px 180px;
  animation: oj-fall-180 13s linear infinite;
}
:is(.photo, .compose-photo).note-effect-snow::after {
  inset: -260px 0 0;
  background-image:
    radial-gradient(circle at 22% 40%, rgba(255, 255, 255, .55) 0 2.5px, transparent 6px),
    radial-gradient(circle at 70% 18%, rgba(255, 255, 255, .45) 0 3px, transparent 7px),
    radial-gradient(circle at 54% 84%, rgba(255, 255, 255, .4) 0 2px, transparent 5px);
  background-size: 260px 260px;
  filter: blur(.6px);
  animation: oj-fall-260 22s linear infinite;
}

/* ---------- 별빛: 깊은 밤 기운 위로 작은 별들이 반짝여요 ---------- */
:is(.photo, .compose-photo).note-effect-starlight::before {
  background: radial-gradient(130% 90% at 50% 0%, rgba(18, 22, 64, .18), rgba(8, 10, 36, .46));
}
:is(.photo, .compose-photo).note-effect-starlight::after {
  background-image:
    radial-gradient(circle at 8% 14%, #fff 0 .8px, transparent 1.6px),
    radial-gradient(circle at 26% 38%, rgba(255, 255, 255, .8) 0 .7px, transparent 1.4px),
    radial-gradient(circle at 44% 10%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 63% 46%, rgba(255, 255, 255, .7) 0 .7px, transparent 1.4px),
    radial-gradient(circle at 78% 22%, #fff 0 .9px, transparent 1.8px),
    radial-gradient(circle at 90% 60%, rgba(255, 255, 255, .8) 0 .8px, transparent 1.6px),
    radial-gradient(circle at 16% 72%, rgba(255, 255, 255, .6) 0 .7px, transparent 1.4px);
  background-size: 150px 150px;
  animation: oj-twinkle 4.2s ease-in-out infinite alternate;
}

/* ---------- 반딧불이: 따뜻한 빛 알갱이가 천천히 떠다녀요 ---------- */
:is(.photo, .compose-photo).note-effect-fireflies::before,
:is(.photo, .compose-photo).note-effect-fireflies::after {
  background-repeat: no-repeat;
}
:is(.photo, .compose-photo).note-effect-fireflies::before {
  background-image:
    radial-gradient(circle at 20% 70%, rgba(255, 238, 150, .95) 0 1.6px, rgba(255, 220, 110, .35) 4px, transparent 10px),
    radial-gradient(circle at 70% 55%, rgba(255, 238, 150, .9) 0 1.4px, rgba(255, 220, 110, .3) 4px, transparent 9px),
    radial-gradient(circle at 45% 85%, rgba(255, 238, 150, .85) 0 1.2px, rgba(255, 220, 110, .3) 3.5px, transparent 8px);
  animation: oj-float-a 9s ease-in-out infinite alternate, oj-glow 2.6s ease-in-out infinite alternate;
}
:is(.photo, .compose-photo).note-effect-fireflies::after {
  background-image:
    radial-gradient(circle at 82% 30%, rgba(236, 255, 160, .9) 0 1.4px, rgba(210, 240, 110, .3) 4px, transparent 9px),
    radial-gradient(circle at 30% 35%, rgba(236, 255, 160, .85) 0 1.2px, rgba(210, 240, 110, .28) 3.5px, transparent 8px),
    radial-gradient(circle at 60% 20%, rgba(255, 238, 150, .8) 0 1px, rgba(255, 220, 110, .25) 3px, transparent 7px);
  animation: oj-float-b 11s ease-in-out infinite alternate, oj-glow 3.4s ease-in-out infinite alternate-reverse;
}

/* ---------- 꽃잎: 연분홍 꽃잎이 바람에 비스듬히 날려요 ---------- */
:is(.photo, .compose-photo).note-effect-petals::before {
  inset: -240px -60px 0 0;
  background-image:
    radial-gradient(ellipse 7px 4px at 14% 20%, rgba(255, 206, 220, .98), rgba(255, 170, 196, .7) 60%, transparent 72%),
    radial-gradient(ellipse 6px 3.5px at 52% 46%, rgba(255, 220, 230, .95), rgba(255, 180, 204, .65) 60%, transparent 72%),
    radial-gradient(ellipse 7px 4px at 84% 72%, rgba(255, 206, 220, .95), rgba(255, 170, 196, .65) 60%, transparent 72%),
    radial-gradient(ellipse 5px 3px at 30% 88%, rgba(255, 226, 236, .9), transparent 72%),
    radial-gradient(ellipse 6px 3.5px at 70% 10%, rgba(255, 214, 226, .9), transparent 72%);
  background-size: 200px 200px;
  animation: oj-drift-fall 15s linear infinite;
}
:is(.photo, .compose-photo).note-effect-petals::after {
  inset: -320px -80px 0 0;
  background-image:
    radial-gradient(ellipse 8px 4.5px at 40% 30%, rgba(255, 214, 226, .55), transparent 72%),
    radial-gradient(ellipse 7px 4px at 78% 64%, rgba(255, 200, 216, .5), transparent 72%);
  background-size: 320px 320px;
  filter: blur(.8px);
  animation: oj-drift-fall-slow 26s linear infinite;
}

/* ---------- 비눗방울: 테두리만 빛나는 투명한 방울이 떠올라요 ---------- */
:is(.photo, .compose-photo).note-effect-bubbles::before {
  inset: 0 0 -220px;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .6) 0 1px, transparent 2px),
    radial-gradient(circle at 22% 32%, rgba(200, 235, 255, .08) 6px, rgba(255, 255, 255, .7) 8px, rgba(190, 230, 255, .3) 9px, transparent 10.5px),
    radial-gradient(circle at 70% 64%, rgba(255, 255, 255, .6) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 66%, rgba(255, 220, 245, .08) 10px, rgba(255, 255, 255, .65) 12px, rgba(255, 210, 240, .3) 13.5px, transparent 15.5px),
    radial-gradient(circle at 48% 90%, rgba(210, 240, 255, .08) 4px, rgba(255, 255, 255, .6) 6px, transparent 7.5px),
    radial-gradient(circle at 86% 18%, rgba(210, 240, 255, .06) 6px, rgba(255, 255, 255, .55) 8px, transparent 9.5px);
  background-size: 220px 220px;
  animation: oj-rise-220 16s linear infinite;
}

/* ---------- 오로라: 초록·보라 빛 띠가 하늘에서 너울거려요 ---------- */
:is(.photo, .compose-photo).note-effect-aurora::before {
  inset: -10% -20% 30%;
  background:
    radial-gradient(50% 60% at 28% 20%, rgba(110, 255, 196, .6), transparent 70%),
    radial-gradient(45% 55% at 70% 12%, rgba(170, 124, 255, .58), transparent 70%),
    radial-gradient(40% 45% at 50% 34%, rgba(90, 210, 255, .4), transparent 70%);
  background-repeat: no-repeat;
  filter: blur(12px);
  mix-blend-mode: screen;
  animation: oj-aurora 14s ease-in-out infinite alternate;
}
:is(.photo, .compose-photo).note-effect-aurora::after {
  background: linear-gradient(180deg, rgba(10, 14, 40, .3), transparent 55%);
}

/* ---------- 색종이: 작은 파스텔 조각이 천천히 흩날려요 ---------- */
:is(.photo, .compose-photo).note-effect-confetti::before {
  inset: -200px 0 0;
  background-image:
    radial-gradient(ellipse 2px 4px at 12% 18%, #ffb8c9 70%, transparent 72%),
    radial-gradient(ellipse 4px 2px at 34% 52%, #ffe08f 70%, transparent 72%),
    radial-gradient(ellipse 2px 4px at 58% 26%, #9fe3c8 70%, transparent 72%),
    radial-gradient(ellipse 3.5px 2px at 80% 70%, #a9c7ff 70%, transparent 72%),
    radial-gradient(ellipse 2px 3.5px at 90% 8%, #d8b8ff 70%, transparent 72%),
    radial-gradient(ellipse 3px 2px at 46% 88%, #ffc7a8 70%, transparent 72%);
  background-size: 200px 200px;
  opacity: .85;
  animation: oj-sway-fall 12s linear infinite;
}

/* ---------- 햇살: 모서리에서 따뜻한 빛줄기가 스며들어요 ---------- */
:is(.photo, .compose-photo).note-effect-sunbeams::before {
  inset: -30%;
  background: repeating-conic-gradient(from 195deg at 22% 12%, rgba(255, 238, 200, .2) 0deg 3deg, transparent 3deg 11deg);
  -webkit-mask-image: radial-gradient(90% 90% at 22% 12%, #000 10%, transparent 62%);
          mask-image: radial-gradient(90% 90% at 22% 12%, #000 10%, transparent 62%);
  mix-blend-mode: screen;
  transform-origin: 22% 12%;
  animation: oj-rays 12s ease-in-out infinite alternate;
}
:is(.photo, .compose-photo).note-effect-sunbeams::after {
  background: radial-gradient(60% 50% at 6% 0%, rgba(255, 210, 150, .5), rgba(255, 190, 130, .12) 45%, transparent 70%);
  mix-blend-mode: screen;
  animation: oj-breathe 6s ease-in-out infinite alternate;
}

/* ---------- 안개: 부드러운 안개가 아래쪽에서 천천히 흘러가요 ---------- */
:is(.photo, .compose-photo).note-effect-mist::before,
:is(.photo, .compose-photo).note-effect-mist::after {
  inset: 0 -30%;
  background-repeat: no-repeat;
  filter: blur(10px);
}
:is(.photo, .compose-photo).note-effect-mist::before {
  background:
    radial-gradient(40% 32% at 20% 86%, rgba(255, 255, 255, .66), transparent 70%),
    radial-gradient(45% 34% at 62% 94%, rgba(255, 255, 255, .6), transparent 70%);
  animation: oj-mist 22s ease-in-out infinite alternate;
}
:is(.photo, .compose-photo).note-effect-mist::after {
  background:
    radial-gradient(30% 22% at 80% 70%, rgba(255, 255, 255, .32), transparent 70%),
    radial-gradient(34% 24% at 36% 64%, rgba(255, 255, 255, .26), transparent 70%);
  animation: oj-mist 30s ease-in-out infinite alternate-reverse;
}

/* ---------- 물결: 아래쪽에 물빛이 일렁여요 ---------- */
:is(.photo, .compose-photo).note-effect-ocean::before {
  background: linear-gradient(0deg, rgba(34, 140, 190, .46), rgba(34, 140, 190, .12) 40%, transparent 58%);
}
:is(.photo, .compose-photo).note-effect-ocean::after {
  inset: 50% -20% 0;
  background-image:
    radial-gradient(ellipse 34px 6px at 20% 40%, rgba(255, 255, 255, .4), transparent 70%),
    radial-gradient(ellipse 26px 5px at 64% 70%, rgba(255, 255, 255, .34), transparent 70%),
    radial-gradient(ellipse 30px 5px at 88% 20%, rgba(210, 245, 255, .36), transparent 70%);
  background-size: 180px 60px;
  -webkit-mask-image: linear-gradient(0deg, #000 30%, transparent);
          mask-image: linear-gradient(0deg, #000 30%, transparent);
  animation: oj-waves 9s linear infinite;
}

/* ---------- 빛의 파동: 가운데에서 부드러운 빛 고리가 퍼져요 ---------- */
:is(.photo, .compose-photo).note-effect-heartbeat::before,
:is(.photo, .compose-photo).note-effect-heartbeat::after {
  background: radial-gradient(circle, transparent 36%, rgba(255, 236, 244, .42) 39%, rgba(255, 236, 244, .12) 42%, transparent 46%) no-repeat center / 100% 100%;
  mix-blend-mode: screen;
  animation: oj-pulse 3.2s ease-out infinite;
}
:is(.photo, .compose-photo).note-effect-heartbeat::after { animation-delay: 1.6s; }

/* ---------- 궤도: 가는 궤도 위로 작은 빛이 돌아요 ---------- */
:is(.photo, .compose-photo).note-effect-orbit::before,
:is(.photo, .compose-photo).note-effect-orbit::after {
  inset: 0; margin: auto; width: 86%; height: auto; aspect-ratio: 1; border-radius: 50%;
}
:is(.photo, .compose-photo).note-effect-orbit::before {
  border: 1.5px solid rgba(255, 255, 255, .55);
  box-shadow: 0 0 12px rgba(255, 255, 255, .25), inset 0 0 12px rgba(255, 255, 255, .15);
  transform: rotate(-12deg) scaleY(.36);
}
:is(.photo, .compose-photo).note-effect-orbit::after {
  background: radial-gradient(circle at 50% 0%, #fff 0 3px, rgba(255, 244, 214, .6) 6px, transparent 12px) no-repeat;
  animation: oj-orbit 9s linear infinite;
}

/* ---------- 반짝이: 금빛 알갱이가 잘게 반짝여요 ---------- */
:is(.photo, .compose-photo).note-effect-glitter::before,
:is(.photo, .compose-photo).note-effect-glitter::after {
  mix-blend-mode: screen;
}
:is(.photo, .compose-photo).note-effect-glitter::before {
  background-image:
    radial-gradient(circle at 12% 24%, rgba(255, 226, 150, .95) 0 .8px, transparent 1.6px),
    radial-gradient(circle at 46% 70%, rgba(255, 240, 190, .9) 0 .7px, transparent 1.4px),
    radial-gradient(circle at 72% 18%, rgba(255, 214, 130, .95) 0 .9px, transparent 1.8px),
    radial-gradient(circle at 88% 82%, rgba(255, 236, 170, .85) 0 .7px, transparent 1.4px);
  background-size: 64px 64px;
  animation: oj-twinkle 1.8s ease-in-out infinite alternate;
}
:is(.photo, .compose-photo).note-effect-glitter::after {
  background-image:
    radial-gradient(circle at 30% 50%, rgba(255, 246, 210, .9) 0 .8px, transparent 1.6px),
    radial-gradient(circle at 64% 40%, rgba(255, 222, 140, .9) 0 .7px, transparent 1.4px),
    radial-gradient(circle at 82% 60%, rgba(255, 232, 160, .85) 0 .9px, transparent 1.8px);
  background-size: 52px 52px;
  animation: oj-twinkle 2.3s ease-in-out infinite alternate-reverse;
}

/* ---------- 별똥별: 가끔 가는 빛줄기가 하늘을 가로질러요 ---------- */
:is(.photo, .compose-photo).note-effect-meteor::before,
:is(.photo, .compose-photo).note-effect-meteor::after {
  inset: auto; top: 14%; left: -30%; width: 34%; height: 1.5px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .9));
  box-shadow: 0 0 6px rgba(255, 255, 255, .6);
  opacity: 0;
  animation: oj-meteor 5s ease-in infinite;
}
:is(.photo, .compose-photo).note-effect-meteor::after {
  top: 30%; width: 24%; animation-delay: 2.4s; animation-duration: 6s;
}

/* ---------- 나뭇잎: 따뜻한 빛깔의 잎이 천천히 떨어져요 ---------- */
:is(.photo, .compose-photo).note-effect-leaves::before {
  inset: -260px -60px 0 0;
  background-image:
    radial-gradient(ellipse 9px 4.5px at 16% 22%, rgba(232, 150, 84, .95), rgba(200, 110, 60, .6) 60%, transparent 72%),
    radial-gradient(ellipse 8px 4px at 56% 50%, rgba(214, 112, 70, .92), transparent 72%),
    radial-gradient(ellipse 9px 4.5px at 86% 76%, rgba(240, 190, 110, .92), transparent 72%),
    radial-gradient(ellipse 7px 3.5px at 36% 90%, rgba(226, 136, 72, .9), transparent 72%);
  background-size: 260px 260px;
  animation: oj-drift-fall-260 19s linear infinite;
}
:is(.photo, .compose-photo).note-effect-leaves::after {
  background: linear-gradient(180deg, transparent 50%, rgba(160, 90, 40, .14));
}

/* ---------- 네온: 가장자리를 따라 분홍·하늘빛 네온이 은은하게 ---------- */
:is(.photo, .compose-photo).note-effect-neon::before {
  inset: 10px; border-radius: 12px;
  border: 1.5px solid rgba(255, 206, 236, .95);
  box-shadow: 0 0 8px rgba(255, 110, 196, .85), 0 0 18px rgba(255, 110, 196, .45), inset 0 0 8px rgba(255, 110, 196, .5);
  animation: oj-flicker 6s steps(1) infinite;
}
:is(.photo, .compose-photo).note-effect-neon::after {
  inset: 16px; border-radius: 8px;
  border: 1px solid rgba(190, 240, 255, .75);
  box-shadow: 0 0 6px rgba(90, 210, 255, .7), inset 0 0 6px rgba(90, 210, 255, .35);
}

/* ---------- 새벽빛: 복숭아빛과 라벤더빛이 부드럽게 번져요 ---------- */
:is(.photo, .compose-photo).note-effect-dawn::before {
  background:
    radial-gradient(90% 70% at 0% 100%, rgba(255, 170, 140, .62), transparent 62%),
    radial-gradient(80% 60% at 100% 0%, rgba(190, 162, 255, .5), transparent 64%);
  mix-blend-mode: screen;
  animation: oj-breathe 8s ease-in-out infinite alternate;
}
:is(.photo, .compose-photo).note-effect-dawn::after {
  background: linear-gradient(180deg, rgba(255, 214, 196, .12), transparent 40%, rgba(255, 190, 170, .16));
}

/* ---------- 움직임 ---------- */
@keyframes oj-twinkle { 0% { opacity: .35; } 100% { opacity: 1; } }
@keyframes oj-glow { 0% { opacity: .55; } 100% { opacity: 1; } }
@keyframes oj-breathe { 0% { opacity: .7; } 100% { opacity: 1; } }
@keyframes oj-rain { from { transform: rotate(10deg) translateY(-200px); } to { transform: rotate(10deg) translateY(0); } }
@keyframes oj-sweep { 0% { background-position: 150% 0; } 55%, 100% { background-position: -60% 0; } }
@keyframes oj-drift { 0% { background-position: 0% 30%; } 100% { background-position: 100% 70%; } }
@keyframes oj-fall-180 { from { transform: translateY(0); } to { transform: translateY(180px); } }
@keyframes oj-fall-260 { 0% { transform: translate(0, 0); } 50% { transform: translate(8px, 130px); } 100% { transform: translate(0, 260px); } }
@keyframes oj-float-a { 0% { transform: translate(0, 0); } 50% { transform: translate(10px, -14px); } 100% { transform: translate(-8px, -4px); } }
@keyframes oj-float-b { 0% { transform: translate(0, 0); } 50% { transform: translate(-12px, 10px); } 100% { transform: translate(6px, -12px); } }
@keyframes oj-drift-fall { from { transform: translate(0, 0); } to { transform: translate(60px, 240px); } }
@keyframes oj-drift-fall-slow { from { transform: translate(0, 0); } to { transform: translate(80px, 320px); } }
@keyframes oj-drift-fall-260 { 0% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(34px, 130px) rotate(2deg); } 100% { transform: translate(60px, 260px) rotate(0deg); } }
@keyframes oj-rise-220 { from { transform: translateY(0); } to { transform: translateY(-220px); } }
@keyframes oj-sway-fall { 0% { transform: translate(0, 0); } 25% { transform: translate(6px, 50px); } 50% { transform: translate(0, 100px); } 75% { transform: translate(-6px, 150px); } 100% { transform: translate(0, 200px); } }
@keyframes oj-aurora { 0% { transform: translateX(-4%) scaleY(1); opacity: .8; } 100% { transform: translateX(5%) scaleY(1.12); opacity: 1; } }
@keyframes oj-rays { 0% { transform: rotate(-3deg); opacity: .8; } 100% { transform: rotate(3deg); opacity: 1; } }
@keyframes oj-mist { 0% { transform: translateX(-6%); } 100% { transform: translateX(6%); } }
@keyframes oj-waves { from { background-position: 0 0; } to { background-position: 180px 0; } }
@keyframes oj-pulse { 0% { transform: scale(.55); opacity: 0; } 20% { opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes oj-orbit { from { transform: rotate(-12deg) scaleY(.36) rotate(0deg); } to { transform: rotate(-12deg) scaleY(.36) rotate(360deg); } }
@keyframes oj-meteor {
  0%, 45% { opacity: 0; transform: translate(0, 0) rotate(18deg); }
  50% { opacity: 1; }
  72% { opacity: 0; transform: translate(420%, 150%) rotate(18deg); }
  100% { opacity: 0; transform: translate(420%, 150%) rotate(18deg); }
}
@keyframes oj-flicker { 0%, 100% { opacity: 1; } 42% { opacity: .82; } 44% { opacity: 1; } 71% { opacity: .9; } 72% { opacity: 1; } }

/* 움직임 줄이기를 켠 사람에게는 멈춘 모습으로 보여 줘요 */
@media (prefers-reduced-motion: reduce) {
  :is(.photo, .compose-photo)[class*="note-effect-"]::before,
  :is(.photo, .compose-photo)[class*="note-effect-"]::after { animation: none !important; }
  :is(.photo, .compose-photo).note-effect-meteor::before { opacity: .8; }
}