/* 手帐页面上的「散落小罐」入口 —— 配合 can-entry.js 使用 */

/* 小罐（可点的只有它） */
.cc-can{position:absolute;z-index:2;margin:0;padding:16px;border:0;background:none;cursor:pointer;
  transform:translate(-50%,-50%) rotate(var(--rot,-16deg));-webkit-tap-highlight-color:transparent;outline:none}
.cc-can .cc-body{position:relative;display:block;height:var(--h,150px);width:calc(var(--h,150px) * var(--ratio,.3756));
  transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.cc-can img{position:relative;z-index:1;display:block;width:100%;height:100%;pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
/* 接触阴影 */
.cc-can .cc-shadow{position:absolute;z-index:0;left:50%;bottom:-5%;width:150%;height:15%;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(84,30,24,.34) 0%,rgba(84,30,24,.14) 45%,rgba(84,30,24,0) 72%);transition:opacity .35s,transform .35s}
/* 每 5 秒一道很淡的高光扫过，暗示它能点（遮罩是罐子本身的形状） */
.cc-can .cc-glint{position:absolute;z-index:2;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(104deg,rgba(255,255,255,0) 38%,rgba(255,244,236,.5) 49%,rgba(255,255,255,0) 60%) no-repeat;background-size:260% 100%;background-position:135% 0;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;animation:cc-glint 5s ease-in-out 1.6s infinite}
@keyframes cc-glint{0%,80%{background-position:135% 0}100%{background-position:-35% 0}}
.cc-can:hover .cc-body,.cc-can:focus-visible .cc-body{transform:translateY(-5px) scale(1.04)}
.cc-can:hover .cc-shadow{opacity:.55;transform:translateX(-50%) scale(.9)}
.cc-can:focus-visible{outline:2px solid rgba(138,17,26,.55);outline-offset:2px;border-radius:14px}
.cc-can.loading .cc-body{animation:cc-wait 1s ease-in-out infinite}
@keyframes cc-wait{50%{transform:translateY(-4px)}}

/* 小罐下面的提示小字 */
.cc-hint{position:absolute;z-index:1;transform:translateX(-50%);font:500 11.5px/1 "PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  letter-spacing:.24em;color:rgba(110,60,52,.62);white-space:nowrap;pointer-events:none;transition:opacity .3s}

/* 全屏层：可乐页的背景（和 coke-tab 完全一致） */
.cc-veil{position:fixed;inset:0;opacity:0;pointer-events:none}
.cc-veil::after{content:"";position:absolute;inset:0;opacity:.22;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.cc-frame{position:fixed;inset:0;width:100%;height:100%;border:0;margin:0;padding:0;opacity:0;pointer-events:none;background:transparent;color-scheme:normal}
.cc-frame.on{pointer-events:auto}
.cc-flyer{position:fixed;left:0;top:0;display:none;transform-origin:50% 50%;pointer-events:none;will-change:transform;user-select:none;-webkit-user-drag:none}

@media (prefers-reduced-motion: reduce){.cc-can .cc-glint{animation:none}}