/* Sarawaku staging animations - George-approved Fuyuh set (Oct 21): featured gold glow + border beam + badge, shimmer CTAs, skeleton loaders, hot-tags marquee, animated tab pill */
@property --bbangle{syntax:"<angle>";initial-value:0deg;inherits:false}
.swk-feat{box-shadow:0 0 0 2px #f0b429,0 4px 14px rgba(0,0,0,.08)!important}
.swk-feat::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;box-shadow:inset 0 0 0 3px rgba(240,180,41,.9),inset 0 0 24px rgba(240,180,41,.4);opacity:0;animation:swkfeatglow 2.4s ease-in-out infinite}
@keyframes swkfeatglow{0%,100%{opacity:0}50%{opacity:1}}
.swk-feat::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;padding:3px;background:conic-gradient(from var(--bbangle),transparent 0deg,transparent 296deg,#f0b429 318deg,#ffe08a 338deg,#fff6d9 350deg,transparent 360deg);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;animation:swkbbrotate 3.4s linear infinite}
@keyframes swkbbrotate{to{--bbangle:360deg}}
.swk-feat-badge{position:absolute;left:10px;top:10px;z-index:4;background:linear-gradient(110deg,#f0b429 25%,#ffe08a 50%,#f0b429 75%);background-size:200% 100%;color:#fff;font-size:10px;font-weight:800;padding:4px 10px;border-radius:999px;letter-spacing:.06em;box-shadow:0 4px 14px rgba(217,119,6,.4);animation:swkfeatshine 2.8s linear infinite}
@keyframes swkfeatshine{to{background-position:-200% 0}}
.swk-shimmer{position:relative!important;overflow:hidden!important}
.swk-shimmer::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);animation:swkbtnshine 2.8s ease-in-out infinite;pointer-events:none;z-index:2;border-radius:inherit}
@keyframes swkbtnshine{0%{left:-60%}55%,100%{left:130%}}
.swk-skel{border-radius:24px;overflow:hidden;background:#fff;border:1px solid #f1f5f9;display:flex;flex-direction:column}
.swk-skel-img{height:160px}
.swk-skel-body{padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.swk-skel-line{height:12px;border-radius:6px}
.swk-skel-img,.swk-skel-line{background:linear-gradient(90deg,#f3e8ff 25%,#fdfaff 50%,#f3e8ff 75%);background-size:200% 100%;animation:swkskelshine 1.4s linear infinite}
@keyframes swkskelshine{to{background-position:-200% 0}}
.swk-marquee{overflow:hidden;margin:8px 0 2px;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.swk-marquee-track{display:flex;gap:8px;width:max-content;animation:swktagscroll 28s linear infinite}
.swk-marquee:hover .swk-marquee-track,.swk-marquee:active .swk-marquee-track{animation-play-state:paused}
.swk-marquee span{flex:none;background:#fff;border:1px solid #e9d5ff;color:#6d14ce;padding:6px 13px;border-radius:999px;font-size:12px;font-weight:700;box-shadow:0 1px 3px rgba(109,20,206,.08)}
.fy-tabs{position:relative}
.fy-tab{position:relative;z-index:1}
.fy-tab.is-active{background:transparent!important;box-shadow:none!important}
.swk-tab-pill{position:absolute;border-radius:13px;background:#fff;box-shadow:0 2px 8px #29003921;transition:left .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1);z-index:0;pointer-events:none}
@media (prefers-reduced-motion: reduce){
  .swk-feat::before,.swk-feat::after,.swk-feat-badge,.swk-shimmer::after,.swk-skel-img,.swk-skel-line,.swk-marquee-track{animation:none}
  .swk-tab-pill{transition:none}
}

/* === George's 4 mobile tweaks (Oct 22, staging) === */
/* 1. hide header bookmark on mobile (Saved already in bottom bar) */
@media (max-width:639px){
  header button[aria-label="Saved Bookmarks"]{display:none!important}
}
/* 2. bigger logo on mobile */
@media (max-width:639px){
  header img[src*="sarawaku-logo"]{height:34px!important}
}
/* 3. announcement news ticker */
.swk-ticker-track{display:flex;flex-wrap:nowrap;flex:1 1 auto;min-width:0;overflow:hidden}
.swk-ticker-track>span{flex:0 0 auto;display:inline-block;white-space:nowrap;overflow:visible!important;text-overflow:clip!important;max-width:none!important;padding-right:4rem;animation:swk-tick 24s linear infinite}
.swk-ticker-track:active>span{animation-play-state:paused}
@keyframes swk-tick{to{transform:translateX(-100%)}}
/* 4. standout time tabs */
.fy-tab:not(.is-active){background:#f3e8ff;box-shadow:inset 0 0 0 1px #e9d5ff;color:#7e22ce;border-radius:10px}

/* === George follow-up (Oct 22 #2): logo fills header === */
@media (max-width:639px){
  header>div.fy-wide{padding-top:3px!important;padding-bottom:3px!important}
  header img[src*="sarawaku-logo"]{height:50px!important}
}

@media (max-width:639px){
  header button:has(img[src*="sarawaku-logo"]){display:flex;align-items:center}
}

@keyframes swktagscroll{to{transform:translateX(-50%)}}