/* Option 3: an original app-style presentation of the same Creative Hub data. */
body.motion-layout header{position:sticky;top:0;display:flex;flex-wrap:wrap;justify-content:space-between;padding:18px 4%;gap:14px;z-index:40}
body.motion-layout header>.search{display:none}
body.motion-layout .brand{margin-inline-end:auto}
#hubSocialLinks{display:flex;flex-wrap:wrap;gap:10px;align-items:center;order:4;width:100%;justify-content:flex-end}
#hubSocialLinks a{display:flex;align-items:center;gap:6px;color:#273b53;font-size:12px;text-decoration:none}
#hubSocialLinks a span{display:grid;place-items:center;background:#f1f3f5;border:1px solid #e4e9ef;border-radius:50%;width:40px;height:40px;font-size:23px}
body.motion-layout main{max-width:1300px;padding:0 0 110px}
body.motion-layout main>section:not(.hero),body.motion-layout main>.categories,body.motion-layout main>.heading,body.motion-layout main>.tutorials,body.motion-layout main>.hub-grid{margin-inline:4%}
body.motion-layout .hero{margin:0;min-height:300px;border-radius:0;display:flex;justify-content:center;text-align:center;padding:45px 6%}
body.motion-layout .hero-copy{width:100%;max-width:880px}
body.motion-layout .hero h1{font-size:clamp(28px,4vw,44px);margin:0 0 12px}
body.motion-layout .hero .eyebrow,body.motion-layout .devices,body.motion-layout .quick{display:none}
body.motion-layout .hero p{font-size:clamp(14px,2vw,20px);line-height:1.8}
body.motion-layout .hero .search{display:flex;flex-wrap:wrap;background:transparent;border-radius:0;overflow:visible;gap:16px;justify-content:center;box-shadow:none}
body.motion-layout .hero .search input{flex:1 0 100%;width:100%;box-sizing:border-box;background:#fafafa;border-radius:50px;padding:21px 26px;text-align:right;min-height:65px}
body.motion-layout .hero .search button{display:block;min-width:112px;min-height:44px;border-radius:7px;background:#fff;color:#174b71}
body.motion-layout .categories{gap:28px 12px;padding:12px 0 30px;grid-template-columns:repeat(3,minmax(0,1fr))}
body.motion-layout .category{gap:12px;padding:14px 8px;touch-action:pan-y}
body.motion-layout .category .orb{width:clamp(76px,12vw,146px);height:clamp(76px,12vw,146px);font-size:clamp(28px,4vw,50px);border:1px solid #e1e3e8;background:radial-gradient(circle,#ffe4a1 0 40%,#f5f5f6 41%)!important;box-shadow:none;transform:rotate(var(--turn,0deg));transition:transform .09s linear;will-change:transform}
body.motion-layout .category b{font-size:clamp(13px,2vw,22px);font-weight:500}
body.motion-layout .category small{font-size:clamp(11px,1.5vw,16px);line-height:1.7;max-width:290px}
body.motion-layout .heading{margin-top:40px;margin-bottom:20px}
body.motion-layout .heading h2{font-size:clamp(25px,3vw,36px)}
body.motion-layout #bottom{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
#hubIntro{position:fixed;inset:0;z-index:100;background:#fcfdff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;color:#18334f;animation:hub-intro .25s ease-out}
#hubIntro .intro-mark{width:84px;height:84px;display:grid;place-items:center;border-radius:24px;background:linear-gradient(145deg,#26b6ff,#3354e8);box-shadow:0 12px 40px #317bec55;color:white;font-size:46px}
#hubIntro img{width:100%;height:100%;object-fit:contain;border-radius:inherit}
#hubIntro h1{font-size:25px;margin:24px 0 8px}#hubIntro p{color:#6d8195}#hubIntro button{background:#edf5ff;color:#1763a5;border:1px solid #c9e1fb;min-height:44px;border-radius:25px;padding:8px 22px;margin-top:18px}
@keyframes hub-intro{from{opacity:0}to{opacity:1}}
@media(max-width:600px){body.motion-layout header{padding:12px 4%;gap:8px}#hubSocialLinks{gap:8px;justify-content:center}#hubSocialLinks small{display:none}body.motion-layout .hero{min-height:290px;padding:32px 5%}body.motion-layout .category{padding:6px 0}body.motion-layout .hero .search input{min-height:55px;padding:15px}.motion-layout .account-link{font-size:11px!important}}
@media(prefers-reduced-motion:reduce){#hubIntro{animation:none}body.motion-layout .motion-icon{transform:none!important;transition:none!important}}
body.motion-layout.motion-off .motion-icon{transform:none!important;transition:none!important}

/* Public video-reference details; available only on the third website layout. */
body.motion-layout #hubSocialLinks{justify-content:flex-start;align-items:center;gap:9px}
body.motion-layout #hubSocialLinks a{flex-direction:column;gap:2px;min-width:37px;font-size:11px}
body.motion-layout #hubSocialLinks a span{background:#f7f9fd;border:0;width:36px;height:36px;font-size:20px}
body.motion-layout #hubAccountMenu{background:#edf6ff;color:#145c8e;border:1px solid #d0e8fb;border-radius:20px;padding:10px 15px;min-height:42px;cursor:pointer;font-weight:600}
body.motion-layout #hubAccountMenu:hover,body.motion-layout #hubAccountMenu:focus-visible{outline:2px solid #288ee3;outline-offset:2px}
body.motion-layout .motion-results{background:white;box-shadow:0 10px 28px #033a6230;color:#21405c;border:1px solid #d9ebf8;border-radius:16px;text-align:right;padding:8px;margin:10px auto 0;max-width:750px}
body.motion-layout .motion-results[hidden]{display:none}
body.motion-layout .motion-results>small{display:block;margin:6px 8px;color:#597b98;font-size:12px}
body.motion-layout .motion-results button{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;min-height:44px;padding:9px 12px;border:0;border-top:1px solid #edf3fa;background:white;color:#173d61;text-align:right;cursor:pointer}
body.motion-layout .motion-results button small{color:#207ad1;direction:ltr}
body.motion-layout .motion-results button:hover,body.motion-layout .motion-results button:focus-visible{background:#eef7ff}
.hub-account-list{display:grid;gap:10px;margin-top:12px}
.hub-account-list a{padding:12px;background:#eef6ff;color:#15588c;border:1px solid #cee5fa;border-radius:12px;display:flex;gap:12px;align-items:center;text-decoration:none}
.hub-account-list a span{display:grid;place-items:center;border-radius:50%;background:#d5efff;width:34px;height:34px}
#hubIntro.leaving{opacity:0;pointer-events:none;transition:opacity .2s ease-out}
#hubIntro .intro-mark{animation:hub-mark 1.2s ease-in-out infinite alternate}
@keyframes hub-mark{to{transform:scale(1.08);box-shadow:0 16px 50px #317bec77}}
@media(max-width:600px){body.motion-layout #hubSocialLinks{justify-content:center}body.motion-layout #hubAccountMenu span{display:inline}body.motion-layout #hubSocialLinks a span{width:34px;height:34px}body.motion-layout .motion-results{max-width:100%}}
@media(prefers-reduced-motion:reduce){#hubIntro .intro-mark{animation:none}#hubIntro.leaving{transition:none}}


/* Shared touch targets (icon + title); rotation rules below define the motion.
   Overrules the light theme's transform:none!important on .category. */
body.reference-layout.motion-layout .categories .category{
 transform:translate3d(var(--touch-x,0px),var(--touch-y,0px),0) rotate(var(--touch-turn,0deg)) scale(var(--touch-scale,1))!important;
 transition:transform .35s cubic-bezier(.2,1.3,.3,1);
 position:relative;z-index:1;will-change:transform;
 -webkit-user-select:none;user-select:none;
}
body.reference-layout.motion-layout .categories .category.touch-dragging{
 transition:none!important;z-index:3;cursor:grabbing;
 filter:drop-shadow(0 12px 16px #2076af35);
}
body.reference-layout.motion-layout .categories .category .orb{
 transform:none;transition:none;
}
body.reference-layout.motion-layout .categories .category .orb,
body.reference-layout.motion-layout .categories .category b{
 touch-action:pan-y pinch-zoom;-webkit-user-select:none;user-select:none;
 -webkit-touch-callout:none;cursor:grab;
}
@media(prefers-reduced-motion:reduce){
 body.reference-layout.motion-layout .categories .category{transition:none}
}



body.motion-layout.motion-off .categories .category{transform:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){body.reference-layout.motion-layout .categories .category{transform:none!important;transition:none!important}}

body.motion-layout .categories{gap:var(--hub-section-gap,28px) 12px}
body.motion-layout .category .orb{width:clamp(72px,12vw,var(--hub-icon-size,146px));height:clamp(72px,12vw,var(--hub-icon-size,146px))}
body.motion-layout .category b{font-size:clamp(12px,2vw,var(--hub-title-size,22px))}
body.motion-layout .category .orb img{width:65%;height:65%;object-fit:contain;pointer-events:none;border-radius:20%;-webkit-user-drag:none}

body.motion-layout .hub-brand-row{touch-action:pan-y;overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start;scroll-snap-type:x proximity;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
body.motion-layout .hub-brand-row .hub-brand{scroll-snap-align:center;user-select:none;-webkit-user-select:none}
body.motion-layout .hub-brand-row .hub-brand img{filter:none}
body.motion-layout .hub-brand-row .hub-brand-symbol{font-size:25px;line-height:1}
body.motion-layout .hub-brand-row .hub-brand:active{transform:scale(1.12)}
@media(max-width:600px){body.motion-layout .hub-brand-row{justify-content:flex-start}}

/* Small centered circular social photos on iPad and mobile. */
body.motion-layout #hubSocialLinks{order:4;width:100%;max-width:100%;min-width:0;display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:8px;overflow:hidden;padding:8px 10px 12px}
body.motion-layout #hubSocialLinks .hub-brand-row{display:flex;flex:0 1 auto;min-width:0;width:auto;max-width:100%;align-items:center;justify-content:center;gap:9px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scrollbar-width:none}
body.motion-layout #hubSocialLinks .hub-brand-row::-webkit-scrollbar{display:none}
body.motion-layout #hubSocialLinks .hub-brand{box-sizing:border-box;flex:0 0 42px!important;display:grid!important;place-items:center!important;width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;max-width:42px!important;max-height:42px!important;aspect-ratio:1;border-radius:50%!important;overflow:hidden;background:#f1f3f5!important;border:1px solid #e6eaf0!important;padding:3px!important;box-shadow:none!important}
body.motion-layout #hubSocialLinks .hub-brand img{display:block!important;width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;max-width:100%!important;max-height:100%!important;aspect-ratio:1!important;object-fit:cover!important;border-radius:50%!important;filter:none!important;position:static!important}
body.motion-layout #hubSocialLinks #hubAccountMenu{flex:0 0 auto;max-width:140px;white-space:nowrap;font-size:12px}
@media(max-width:600px){body.motion-layout header{overflow-x:clip}body.motion-layout #hubSocialLinks{gap:6px;padding-inline:5px}body.motion-layout #hubSocialLinks .hub-brand-row{gap:7px}body.motion-layout #hubSocialLinks .hub-brand{flex-basis:38px!important;width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;max-width:38px!important;max-height:38px!important;padding:3px!important}}

/* Creative Hub public header: real social image links left, no label button. */
body.motion-layout #hubSocialLinks{justify-content:flex-start!important;direction:ltr!important;order:4;width:100%;padding-inline:4%!important;box-sizing:border-box}
body.motion-layout #hubSocialLinks .hub-brand-row{justify-content:flex-start!important;margin:0!important;flex:0 1 auto}
body.motion-layout #hubSocialLinks #hubAccountMenu{display:none!important}
body.motion-layout #profileShortcut{border:1px solid #d5e5f2;background:#edf8ff;color:#1367a4;border-radius:14px;padding:12px;text-decoration:none}
@media(max-width:600px){body.motion-layout #hubSocialLinks{padding-inline:4%!important;justify-content:flex-start!important}}

/* Interaction-driven circular rotation: no idle animation and no displaced hit target. */
body.reference-layout.motion-layout .categories .category{transform:scale(var(--touch-scale,1))!important;transition:transform .3s ease!important}
body.reference-layout.motion-layout .categories .category .orb{transform:none;transition:none}
body.reference-layout.motion-layout .categories .category.touch-dragging .orb{transition:none}
@media(prefers-reduced-motion:reduce){body.reference-layout.motion-layout .categories .category,body.reference-layout.motion-layout .categories .category .orb{transform:none!important;transition:none!important}}
body.reference-layout.motion-layout.motion-off .categories .category .orb{transform:none!important;transition:none!important}
body.reference-layout .lens-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
body.reference-layout .lens-card{background:#fff;border:1px solid #e1e5e9;border-radius:26px;padding:24px;text-align:center;box-shadow:0 3px 6px #0001;display:flex;flex-direction:column;align-items:stretch}
body.reference-layout .lens-card>img{width:min(240px,100%);height:auto;aspect-ratio:1;object-fit:contain;align-self:center;border-radius:0;background:transparent}
body.reference-layout .lens-card .lens-description{border-top:1px solid #eee;padding-top:24px;line-height:1.8;color:#555;white-space:pre-wrap}
body.reference-layout .lens-card .snap-open{display:block;background:#04a3ee;color:#fff;padding:16px;border-radius:14px}
@media(max-width:480px){body.reference-layout .lens-card{padding:12px}body.reference-layout .lens-grid{gap:10px}body.reference-layout .lens-card .snap-open{font-size:12px}}

/* Keep the interactive mobile layout inside the iPad/iPhone viewport. */
@media(max-width:600px){html,body.reference-layout.motion-layout{max-width:100%;overflow-x:clip}body.reference-layout.motion-layout main,body.reference-layout.motion-layout .categories,body.reference-layout.motion-layout .category{min-width:0;max-width:100%;box-sizing:border-box}body.reference-layout.motion-layout .hub-brand-row{max-width:100%;min-width:0}}