/* 首頁背影電影牆 r2：開場字浮現 → 布簾拉開 → 輪流主角＋網版刮印團名 */
.home-content{padding-top:0!important}
.home-content .mitt-campaign{display:block!important;width:var(--cw,100vw);margin:0 calc((100% - var(--cw,100vw))/2) 44px!important;padding:0!important;background:#fff!important;border-radius:0!important;overflow:visible!important}
.mitt-campaign-heading{padding:26px 24px 22px!important;text-align:center;margin:0!important}
.mitt-campaign-kicker{justify-content:center;font-size:12px!important;margin-bottom:10px!important;opacity:0;animation:c-fade .8s .1s forwards}
.mitt-campaign-kicker::before,.mitt-campaign-kicker::after{display:none!important}
.home-content .mitt-campaign h1{font-size:clamp(24px,2.1vw,32px)!important;line-height:1.28!important;white-space:nowrap}
.mitt-campaign h1 span{white-space:nowrap;display:inline}
.mitt-campaign h1 .c-ch{display:inline-block;opacity:0;transform:translateY(.45em);filter:blur(6px);animation:c-rise .7s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.25s + var(--k)*45ms)}
@keyframes c-rise{to{opacity:1;transform:none;filter:none}}
@keyframes c-fade{to{opacity:1}}

.c-strip{display:flex;gap:6px;height:clamp(380px,36vw,640px);padding:0 6px}
.c-tile{position:relative;flex:1 1 0;min-width:0;overflow:hidden;border-radius:6px;background:#e9e7e2;color:inherit;text-decoration:none;transition:flex-grow .8s cubic-bezier(.6,0,.2,1);clip-path:inset(100% 0 0 0 round 6px);animation:c-curtain 1.1s cubic-bezier(.7,0,.2,1) forwards;animation-delay:calc(1.05s + var(--i)*130ms + var(--j,0ms))}
@keyframes c-curtain{to{clip-path:inset(0 0 0 0 round 6px)}}
.c-tile.is-on{flex-grow:2.3}
.c-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%;transform:scale(1.12);transition:transform 1.6s cubic-bezier(.2,.7,.2,1),filter 1.2s ease}
.c-tile.is-in .c-media{transform:scale(1)}
.c-strip.is-live .c-tile:not(.is-on) .c-media{filter:saturate(.55) brightness(.82)}
.c-tile::after{content:"";position:absolute;inset:auto 0 0 0;height:42%;background:linear-gradient(to top,rgba(0,0,0,.42),transparent);opacity:0;transition:opacity 1s ease;pointer-events:none}
.c-tile.is-on::after{opacity:1}

/* r3 點到才轉身：背面在下、正面在上，甩鏡切換 */
.c-tile{cursor:pointer;-webkit-tap-highlight-color:transparent}
.c-tile:focus-visible{outline:3px solid #2f4937;outline-offset:3px}
.c-front{opacity:0;object-position:50% 22%}
.c-tile.is-turned .c-front{opacity:1}
.c-tile.is-turned .c-back{opacity:0}
.c-tile.is-turned:not(.is-whip) .c-front{animation:c-land .45s cubic-bezier(.2,.8,.2,1)}
.c-tile.is-whip .c-media{filter:blur(14px) brightness(1.25)!important;transform:translateX(-6%) scale(1.06)!important;transition:filter .16s ease-in,transform .16s ease-in!important}
@keyframes c-land{from{transform:translateX(6%) scale(1.06);filter:blur(10px) brightness(1.2)}to{transform:none;filter:none}}
@media(hover:hover){.c-tile:not(.is-on):hover .c-media{filter:brightness(1.06)!important;transform:scale(1.03)}}
.c-hint{position:absolute;top:12px;right:12px;z-index:2;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.88);color:#171917;font-size:12px;font-weight:700;line-height:1;opacity:.0;transform:translateY(-4px);transition:opacity .3s ease,transform .3s ease;pointer-events:none}
.c-tile.is-in .c-hint{opacity:.85;transform:none;transition-delay:2.6s}
.c-tile.is-turned .c-hint,.c-tile.is-on .c-hint{opacity:0;transition-delay:0s}

/* r7 店名改雜誌圖說（阿邦：「下面那店名不要這樣放吧!!好醜阿」）：細線畫出＋編號小字＋白色細體店名由下滑上，不加底色 */
.c-stamp{position:absolute;left:clamp(16px,1.8vw,28px);bottom:clamp(18px,2vw,30px);z-index:2;pointer-events:none}
.c-cap{display:flex;align-items:center;gap:10px;margin-bottom:8px;opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s ease}
.c-rule{display:block;width:0;height:1px;background:rgba(255,255,255,.85);transition:width .6s cubic-bezier(.6,0,.2,1)}
.c-ind{font-size:11px;font-weight:500;letter-spacing:.32em;color:rgba(255,255,255,.88);white-space:nowrap}
.c-name{display:block;overflow:hidden;padding-bottom:2px}
.c-name b{display:block;font-size:clamp(20px,1.9vw,30px);font-weight:500;letter-spacing:.22em;line-height:1.2;color:#fff;white-space:nowrap;text-shadow:0 2px 14px rgba(0,0,0,.35);transform:translateY(105%);transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.c-tile.is-on .c-cap{opacity:1;transform:none;transition-delay:.45s}
.c-tile.is-on .c-rule{width:28px;transition-delay:.45s}
.c-tile.is-on .c-name b{transform:none;transition-delay:.62s}

.c-line{display:flex;justify-content:center;margin:18px 24px 0;font-size:15px;font-weight:700;letter-spacing:.06em;color:#171917;opacity:0;animation:c-fade 1s 2.4s forwards;gap:14px;align-items:baseline}
.c-line span{font-weight:400;font-size:13px;color:#6b716b;letter-spacing:.02em}

.mitt-campaign-details{max-width:1250px;margin:auto;display:grid;grid-template-columns:1fr auto;gap:6px 30px;padding:24px 40px 32px!important;align-items:center}
.mitt-campaign-promise{grid-column:1;grid-row:1;margin:0!important}
.mitt-campaign-details p{grid-column:1;grid-row:2;max-width:44em!important;margin:0!important;padding:0!important}
.mitt-campaign-cta{grid-column:2;grid-row:1/3}

@media(max-width:820px){
  .c-line{flex-direction:column;align-items:center;gap:4px;text-align:center;margin:14px 16px 0}
  .mitt-campaign-heading{padding:20px 16px 16px!important}
  .home-content .mitt-campaign h1{font-size:clamp(17px,5.15vw,22px)!important}
  .c-strip{height:auto;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 16px;gap:8px;scrollbar-width:none}
  .c-strip::-webkit-scrollbar{display:none}
  .c-tile{flex:0 0 72vw;aspect-ratio:3/4;scroll-snap-align:center;transition:none}
  .c-tile.is-on{flex-grow:0}
  .c-strip.is-live .c-tile:not(.is-on) .c-media{filter:none}
  .mitt-campaign-details{display:block;padding:20px 16px 0!important}
  .mitt-campaign-promise{font-size:18px!important;margin-bottom:8px!important}
  .mitt-campaign-details p{margin-bottom:22px!important}
}
@media(prefers-reduced-motion:reduce){
  .c-tile,.mitt-campaign h1 .c-ch,.mitt-campaign-kicker,.c-line{animation:none!important;clip-path:none!important;opacity:1!important;transform:none!important;filter:none!important}
  .c-media,.c-name b,.c-cap,.c-rule{transition:none!important}
}

/* r4 互動感（阿邦：「互動感再強一點」）：立體跟手＋反光、景深視差、聚焦變暗、閃光、做同款；r5 拿掉圓球游標（阿邦：「太俗氣了吧」） */
.c-tile.is-open{animation:none;clip-path:none}
.c-tile{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:flex-grow .8s cubic-bezier(.6,0,.2,1),transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease,scale .15s ease}
.c-tile::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.28),transparent 42%);mix-blend-mode:soft-light;opacity:0;transition:opacity .35s ease}
.c-strip.is-fine .c-tile:hover{box-shadow:0 22px 44px -12px rgba(0,0,0,.35);z-index:1}
.c-strip.is-fine .c-tile:hover::before{opacity:1}
.c-strip.is-fine .c-media{scale:1.05;translate:var(--px,0px) var(--py,0px);transition:transform 1.6s cubic-bezier(.2,.7,.2,1),filter .5s ease,translate .5s cubic-bezier(.2,.7,.2,1)}
.c-strip.is-fine .c-stamp{translate:calc(var(--px,0px) * -1.1) calc(var(--py,0px) * -1.1);transition:translate .5s cubic-bezier(.2,.7,.2,1)}
.c-strip.is-fine:hover .c-tile:not(:hover) .c-media{filter:brightness(.72) saturate(.65)}
.c-strip.is-fine .c-tile:hover .c-hint{opacity:0;transition-delay:0s}
.c-tile:active{scale:.985}

.c-flash{position:absolute;inset:0;z-index:1;background:#fff;opacity:0;pointer-events:none}
.c-tile.is-flash .c-flash{animation:c-flash .34s ease-out}
@keyframes c-flash{0%{opacity:0}28%{opacity:.6}100%{opacity:0}}

.c-hint{animation:c-pulse 1.4s ease-in-out 3.2s 2}
@keyframes c-pulse{0%,100%{scale:1}50%{scale:1.12}}

/* r6：拿掉做同款；漣漪＋轉身掠光 */
.c-tile.is-open.is-nudge{animation:c-nudge .7s cubic-bezier(.3,.7,.3,1) calc(var(--d,1) * 70ms) both}
@keyframes c-nudge{0%{translate:0 0}35%{translate:0 9px}70%{translate:0 -2px}100%{translate:0 0}}
.c-sweep{position:absolute;top:-10%;bottom:-10%;left:0;width:45%;z-index:1;pointer-events:none;background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.0) 20%,rgba(255,255,255,.38) 50%,rgba(255,255,255,0) 80%,transparent 100%);mix-blend-mode:soft-light;opacity:0;transform:translateX(-130%) skewX(-16deg)}
.c-tile.is-turned .c-sweep{animation:c-sweep 1.2s cubic-bezier(.4,0,.2,1) .45s}
@keyframes c-sweep{0%{opacity:1;transform:translateX(-130%) skewX(-16deg)}100%{opacity:1;transform:translateX(330%) skewX(-16deg)}}

@media(max-width:820px){
  .c-tile{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .c-tile{transform:none!important}
  .c-hint,.c-tile.is-flash .c-flash,.c-tile.is-nudge,.c-tile.is-turned .c-sweep{animation:none!important}
}

/* 4913 integration: static front remains until the requested video can play. */
.c-tile.is-turned .c-video{opacity:0;animation:none}
.c-tile.is-turned .c-video.is-ready{opacity:1}
@media(max-width:820px){.c-strip{padding-inline:max(16px,calc((100% - 72vw)/2));touch-action:pan-x pan-y}}
@media(prefers-reduced-motion:reduce){.c-tile,.c-media{animation:none!important;transition:none!important}.c-tile.is-whip .c-media{filter:none!important;transform:none!important}}