/* Supreme Pro – home screen motion layer.
   Loaded only on index.html, after every other stylesheet.
   Uses the independent `translate` / `rotate` properties for ambient motion so it never
   fights the existing `transform`-based entrance and hover effects. */

:root{--hm-ease:cubic-bezier(.22,.8,.3,1)}

/* ---------- 1. Hero ambient background ---------- */
.tw-hero{isolation:isolate}
.tw-hero::before,.tw-hero::after{
  content:"";position:absolute;z-index:0;pointer-events:none;border-radius:50%;
  filter:blur(60px);opacity:.55;will-change:translate,scale
}
.tw-hero::before{
  width:460px;height:460px;left:-120px;top:-150px;
  background:radial-gradient(circle at 35% 35%,#cfe1ff,rgba(207,225,255,0) 70%);
  animation:hm-drift-a 16s ease-in-out infinite alternate
}
.tw-hero::after{
  width:520px;height:520px;right:-160px;top:-110px;
  background:radial-gradient(circle at 60% 40%,#ffd9e6,rgba(255,217,230,0) 70%);
  animation:hm-drift-b 19s ease-in-out infinite alternate
}
@keyframes hm-drift-a{from{translate:0 0;scale:1}to{translate:70px 40px;scale:1.15}}
@keyframes hm-drift-b{from{translate:0 0;scale:1}to{translate:-60px 50px;scale:1.12}}

.tw-hero>h1,.tw-hero>p,.tw-hero>.tw-search{position:relative;z-index:2}

/* ---------- 2. Floating hero shapes ---------- */
.sh-d{z-index:1;animation:hm-bob 6s ease-in-out infinite}
.sh-d.a{animation-name:hm-bob-spin;animation-duration:9s}
.sh-d.b{animation-name:hm-bob-spin;animation-duration:11s;animation-delay:-3s}
.sh-d.c{animation-duration:5s;animation-delay:-1s}
.sh-d.d{animation-duration:7s;animation-delay:-2s}
.sh-d.e{animation-duration:6.5s;animation-delay:-4s}
.sh-d.f{animation-name:hm-bob-spin;animation-duration:10s;animation-delay:-5s}
.sh-d.g{animation-duration:8s;animation-delay:-2.5s}
@keyframes hm-bob{0%,100%{translate:0 0}50%{translate:0 -16px}}
@keyframes hm-bob-spin{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -18px;rotate:14deg}}

/* ---------- 3. Headline highlight: wipe-in + periodic shine ---------- */
.tw-hero h1 .hlr{
  position:relative;overflow:hidden;
  animation:hm-wipe .85s .5s var(--hm-ease) backwards
}
.tw-hero h1 .hlr::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:45%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);
  translate:-140% 0;skew:-18deg;
  animation:hm-shine 6s 2.2s ease-in-out infinite
}
@keyframes hm-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes hm-shine{0%{translate:-140% 0}22%,100%{translate:380% 0}}

/* rotating word */
.tw-hero h1 .hlr .hm-w{display:inline-block;transition:transform .34s var(--hm-ease),opacity .34s ease}
.tw-hero h1 .hlr .hm-w.out{transform:translateY(-60%);opacity:0}
.tw-hero h1 .hlr .hm-w.pre{transform:translateY(60%);opacity:0;transition:none}

/* ---------- 4. Search box ---------- */
.tw-search{transition:box-shadow .3s var(--hm-ease),scale .3s var(--hm-ease)}
.tw-search:hover{scale:1.012}
.tw-search:focus-within{scale:1.018;box-shadow:0 14px 42px -10px rgba(30,100,220,.38),0 0 0 3px rgba(27,134,234,.18)}
.tw-search svg{transition:rotate .45s var(--hm-ease)}
.tw-search:focus-within svg{rotate:-14deg}
.tw-search button{position:relative;overflow:hidden}
.tw-search button::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  translate:-120% 0;animation:hm-btn-shine 5.5s 3s ease-in-out infinite
}
@keyframes hm-btn-shine{0%{translate:-120% 0}18%,100%{translate:120% 0}}

/* ---------- 5. Category cards ---------- */
.tw-cats .tc{animation:hm-card-in .7s var(--hm-ease) backwards}
.tw-cats .tc:nth-child(1){animation-delay:.55s}
.tw-cats .tc:nth-child(2){animation-delay:.62s}
.tw-cats .tc:nth-child(3){animation-delay:.69s}
.tw-cats .tc:nth-child(4){animation-delay:.76s}
.tw-cats .tc:nth-child(5){animation-delay:.83s}
.tw-cats .tc:nth-child(6){animation-delay:.90s}
.tw-cats .tc:nth-child(7){animation-delay:.97s}
.tw-cats .tc:nth-child(8){animation-delay:1.04s}
@keyframes hm-card-in{from{opacity:0;transform:translateY(34px) scale(.96)}to{opacity:1;transform:none}}

/* cursor spotlight (position is set from js/home-motion.js) */
.tw-cats .tc-top::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.28),transparent 65%)
}
.tw-cats .tc:hover .tc-top::before{opacity:1}

/* icon bob (staggered) + arrow nudge */
.tw-cats .tc-ic{animation:hm-icon 4.8s ease-in-out infinite}
.tw-cats .tc:nth-child(2n) .tc-ic{animation-delay:-1.2s}
.tw-cats .tc:nth-child(3n) .tc-ic{animation-delay:-2.4s}
.tw-cats .tc:nth-child(4n) .tc-ic{animation-delay:-3.6s}
.tw-cats .tc:hover .tc-ic{animation-play-state:paused}
@keyframes hm-icon{0%,100%{translate:0 0}50%{translate:0 -5px}}
.tw-cats .tc-top .ar{transition:translate .3s var(--hm-ease)}
.tw-cats .tc:hover .tc-top .ar{translate:6px 0}

/* ---------- 6. Smaller touches further down the page ---------- */
.pic-gallery .pg-card{overflow:hidden}
.pic-gallery .pg-card img{transition:transform .6s var(--hm-ease)}
.pic-gallery .pg-card:hover img{transform:scale(1.045)}
.feat .fc{transition:transform .3s var(--hm-ease),box-shadow .3s var(--hm-ease)}

/* ---------- Mobile / accessibility ---------- */
@media(max-width:850px){
  .tw-hero::before,.tw-hero::after{width:300px;height:300px;filter:blur(48px);opacity:.45}
  .tw-search:hover,.tw-search:focus-within{scale:1}
}
@media(prefers-reduced-motion:reduce){
  .tw-hero::before,.tw-hero::after,.sh-d,.tw-hero h1 .hlr,.tw-hero h1 .hlr::after,
  .tw-search button::after,.tw-cats .tc,.tw-cats .tc-ic{animation:none!important}
  .tw-hero h1 .hlr .hm-w{transition:none!important}
  .tw-search,.tw-search svg,.pic-gallery .pg-card img{transition:none!important}
}

/* ---------- rotating headline word: clean colour themes ---------- */
@property --hc{syntax:"<color>";inherits:true;initial-value:#e0245e}
@property --hc2{syntax:"<color>";inherits:true;initial-value:#b8123f}
@property --hs{syntax:"<color>";inherits:true;initial-value:rgba(224,36,94,.55)}
html body .tw-hero h1 .hlr{
  --hc:#e0245e;--hc2:#b8123f;--hs:rgba(224,36,94,.55);--ht:#fff;
  background:linear-gradient(135deg,var(--hc),var(--hc2));color:var(--ht);
  border-radius:10px;box-shadow:0 14px 30px -14px var(--hs);text-align:center;white-space:nowrap;
  transition:--hc .6s ease,--hc2 .6s ease,--hs .6s ease,color .4s ease,width .5s var(--hm-ease,ease)
}
html body .tw-hero h1 .hlr[data-t="green"]{--hc:#22c55e;--hc2:#15803d;--hs:rgba(22,163,74,.55)}
html body .tw-hero h1 .hlr[data-t="yellow"]{--hc:#fde047;--hc2:#f5b400;--hs:rgba(245,180,0,.6);--ht:#2b2000}
html body .tw-hero h1 .hlr[data-t="purple"]{--hc:#8b5cf6;--hc2:#6d28d9;--hs:rgba(109,40,217,.55)}
html body .tw-hero h1 .hlr[data-t="orange"]{--hc:#fb923c;--hc2:#ea580c;--hs:rgba(234,88,12,.55)}
html body .tw-hero h1 .hlr[data-t="blue"]{--hc:#38a1ff;--hc2:#1b6fe0;--hs:rgba(27,111,224,.55)}
@media (prefers-reduced-motion:reduce){html body .tw-hero h1 .hlr{transition:none}}
@media (min-width:900px){html body .tw-hero h1{max-width:1100px;font-size:clamp(2.2rem,4.6vw,3.7rem)}}