/* 자동 생성: tools/lighten.py 로 css/polish.css 변환. 직접 수정 금지 */
/* polish.css — 2026-09-17 홈페이지 폴리시 (motion.js 리빌 · 그라디언트 보더 · 히어로 대기광) */

/* 1) 스크롤 리빌 — motion.js 가 <html class="motion-on"> 를 붙였을 때만 숨김 */
.motion-on [data-reveal]{opacity:0;transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.motion-on [data-reveal="up"]{transform:translate3d(0,22px,0)}
.motion-on [data-reveal="down"]{transform:translate3d(0,-22px,0)}
.motion-on [data-reveal="left"]{transform:translate3d(-24px,0,0)}
.motion-on [data-reveal="right"]{transform:translate3d(24px,0,0)}
.motion-on [data-reveal="zoom"]{transform:scale(.96)}
.motion-on [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.motion-on [data-reveal]{opacity:1;transform:none;transition:none}}

/* 2) 선물 카드 — 그라디언트 보더 (마스크 링, 배경색 무관 · 기존 1px 보더는 투명 처리로 이중선 방지) */
#gift-x .gift-card{border-color:transparent;box-shadow:inset 0 1px 0 rgba(11,18,32,0.042)}
#gift-x .gift-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(145deg,rgba(80,87,98,0.3) 0%,rgba(32,182,132,0.42) 45%,rgba(38,176,126,0.3) 72%,rgba(80,87,98,0.16) 100%);
  -webkit-mask:linear-gradient(#0a0f19 0 0) content-box,linear-gradient(#0a0f19 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:.85;transition:opacity .35s}
#gift-x .gift-card:hover{border-color:transparent}
#gift-x .gift-card:hover::before{opacity:1}

/* 3) 히어로 대기광 — 세로 광폭 3장(아래로 갈수록 진함) + 우하단 포컬 글로우, 느린 드리프트 */
#hero-x>.wrap{position:relative;z-index:1}
#hero-x::before{content:"";position:absolute;inset:-12% -18%;z-index:0;pointer-events:none;
  background:
    radial-gradient(55% 50% at 88% 100%,rgba(32,182,132,0.16),transparent 70%),
    linear-gradient(98deg,transparent 18%,rgba(59,130,246,0.11) 30%,transparent 40%,transparent 54%,rgba(81,40,174,0.09) 64%,transparent 73%,transparent 82%,rgba(32,182,132,0.08) 91%,transparent 98%);
  -webkit-mask:linear-gradient(to bottom,transparent 0%,#ffffff 40%,#ffffff 100%);mask:linear-gradient(to bottom,transparent 0%,#ffffff 40%,#ffffff 100%);
  filter:blur(26px);mix-blend-mode:screen;transform:translateX(-2.5%) skewX(-5deg);
  animation:heroFolds 42s ease-in-out infinite alternate}
@keyframes heroFolds{from{transform:translateX(-2.5%) skewX(-5deg)}to{transform:translateX(2.5%) skewX(-8deg)}}
@media (prefers-reduced-motion:reduce){#hero-x::before{animation:none}}
@media (max-width:700px){#hero-x::before{filter:blur(18px);animation:none;opacity:.8}}

/* 4) 틸트 카드 — 마우스 추적 transform 을 부드럽게 */
.pcard[data-tilt]{transition:transform .15s ease-out,border-color .25s,box-shadow .25s}
#gift-x .gift-card[data-tilt]{transition:transform .15s ease-out,border-color .25s,box-shadow .25s,opacity .7s}

/* 5) 사선 테이프 마퀴 (motion.js data-marquee) */
.tape-wrap{position:relative;overflow:hidden;padding:64px 0;background:#f8f8f9}
.tape{width:112%;margin:0 -6%;transform:rotate(-3.5deg);background:#2563eb;color:#0a0f19;white-space:nowrap;box-shadow:0 24px 60px rgba(37,99,235,0.35)}
.tape-track{display:inline-flex;align-items:center;gap:44px;padding:18px 22px;font:900 22px/1 Inter,"Noto Sans KR",sans-serif;letter-spacing:.02em}
.tape-track span{white-space:nowrap}
.tape-track .tape-mark{font-family:Inter,sans-serif;letter-spacing:.3em;font-size:14px;padding:6px 10px;border:2px solid #0a0f19;border-radius:999px}
@media (max-width:700px){.tape-wrap{padding:44px 0}.tape-track{gap:28px;padding:14px 16px;font-size:16px}.tape-track .tape-mark{font-size:11px;padding:5px 8px}}

/* 6) 히어로 상단 여백 축소 — 헤더가 sticky(인플로우)라 상단 패딩이 그대로 빈 공간이 됨 */
#hero-x{padding-top:44px}
@media (max-width:800px){#hero-x{padding-top:20px}#hero-x .secretary-stage{margin-top:0}}