/*! Grand Theft Planet – Motion layer 2.0.0
 * html.gtw-fx = motion allowed (not set for "reduce motion"), html.gtw-go = the show may start.
 * Without them the shop is simply a static (but complete) sticker book.
 */

/* ============================================================ Loading screen (game style) */
.gtw .gtw-loader{display:none}
.gtw-intro .gtw .gtw-loader{
	display:grid;position:fixed;inset:0;z-index:3000;place-items:center;background:var(--ink);color:#fff;
	clip-path:circle(150% at 50% 44%);cursor:pointer;
}
.gtw-intro,.gtw-intro body{overflow:hidden}
.gtw .gtw-loader.is-leaving{clip-path:circle(0% at 50% 44%);transition:clip-path .95s cubic-bezier(.7,0,.2,1)}
.gtw .gtw-loader__in{display:grid;justify-items:center;gap:22px;width:min(86vw,440px)}
.gtw .gtw-loader__logo{width:min(48vw,190px);height:auto;filter:drop-shadow(6px 6px 0 var(--sea));animation:gtw-load-in 1.1s var(--spring) both,gtw-wobble 1.6s ease-in-out 1.1s infinite}
.gtw .gtw-loader.is-leaving .gtw-loader__logo{animation:gtw-pop-out .5s var(--ease) both}
.gtw .gtw-loader__txt{margin:0;font-family:var(--f-display);font-size:clamp(1.1rem,3vw,1.5rem);text-transform:uppercase;-webkit-text-stroke:0;text-shadow:3px 3px 0 var(--sea);color:#fff}
.gtw .gtw-loader__pct{display:inline-block;min-width:2ch;text-align:right;font-variant-numeric:tabular-nums}
.gtw .gtw-loader__bar{width:100%;height:24px;border:4px solid #fff;border-radius:999px;overflow:hidden;padding:2px}
.gtw .gtw-loader__bar span{display:block;height:100%;border-radius:999px;background:repeating-linear-gradient(135deg,var(--sun) 0 12px,var(--sun-hi) 12px 24px);transform:scaleX(0);transform-origin:left}
.gtw .gtw-loader__skip{position:absolute;right:var(--pad);bottom:calc(var(--pad) + env(safe-area-inset-bottom,0px));background:none;border:3px solid #fff;border-radius:999px;color:#fff;padding:8px 18px;font-family:var(--f-display);font-size:.78rem;text-transform:uppercase;cursor:pointer}
.gtw .gtw-loader__skip:hover{background:#fff;color:var(--ink)}
.gtw .gtw-loader :focus-visible{outline-color:var(--sun)}

/* ============================================================ Keyframes */
@keyframes gtw-load-in{from{opacity:0;transform:scale(.2) rotate(-200deg)}to{opacity:1;transform:none}}
@keyframes gtw-wobble{0%,100%{transform:rotate(-5deg) scale(1)}50%{transform:rotate(5deg) scale(1.05)}}
@keyframes gtw-pop-out{to{transform:scale(1.4) rotate(20deg);opacity:0}}
@keyframes gtw-word-in{
	0%{opacity:0;transform:translateY(55%) scale(.55) rotate(-7deg)}
	100%{opacity:1;transform:none}
}
@keyframes gtw-fadeup{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes gtw-pop{
	0%{opacity:0;scale:.7;translate:0 42px}
	55%{opacity:1;scale:1.05;translate:0 -4px}
	100%{opacity:1;scale:1;translate:0 0}
}
@keyframes gtw-globe-in{0%{opacity:0;transform:scale(.15) rotate(-120deg)}70%{opacity:1}100%{opacity:1;transform:none}}
@keyframes gtw-ring-in{from{opacity:0}to{opacity:1}}
@keyframes gtw-bob{0%,100%{translate:0 0}50%{translate:0 -4px}}
@keyframes gtw-float{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes gtw-poke{0%{transform:scale(1)}30%{transform:scale(.93)}65%{transform:scale(1.045)}100%{transform:scale(1)}}
@keyframes gtw-slap{0%{opacity:0;scale:3.2;rotate:-45deg}60%{opacity:1;scale:.9;rotate:16deg}80%{scale:1.06;rotate:10deg}100%{opacity:1;scale:1;rotate:12deg}}
@keyframes gtw-ping{0%{transform:scale(1);opacity:.8}100%{transform:scale(2.6);opacity:0}}
@keyframes gtw-chip-pop{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes gtw-bump{0%{transform:scale(1)}30%{transform:scale(1.5) rotate(-8deg)}60%{transform:scale(.9)}100%{transform:scale(1)}}
@keyframes gtw-wiggle{0%,100%{rotate:-2deg}50%{rotate:2deg}}

/* ============================================================ Hero choreography */
.gtw-fx .gtw .gtw-hero__title .pw{display:inline-block}
.gtw-go .gtw .gtw-hero__title .pw{animation:gtw-word-in .8s var(--spring) both;animation-delay:calc(.15s + var(--wi,0) * .11s)}
.gtw-go .gtw .gtw-kicker{animation:gtw-pop .7s var(--spring) .05s backwards}
.gtw-go .gtw .gtw-hero__sub{animation:gtw-fadeup .8s var(--ease) both .55s}
.gtw-go .gtw .gtw-hero__ctas{animation:gtw-fadeup .8s var(--ease) both .7s}
.gtw-go .gtw .gtw-find{animation:gtw-fadeup .8s var(--ease) both .85s}
.gtw-go .gtw .gtw-globe--hero .gtw-globe__stage{animation:gtw-globe-in 1.25s var(--spring) both .1s}
.gtw-go .gtw .gtw-globe--hero .gtw-globe__ring{animation:gtw-ring-in .8s ease both .9s,gtw-spin 60s linear infinite .9s}
.gtw-go .gtw .gtw-sticker--ship{animation:gtw-pop .7s var(--spring) 1.1s backwards}
.gtw-go .gtw .gtw-sticker--world{animation:gtw-pop .7s var(--spring) 1.3s backwards}
.gtw-go .gtw .gtw-hero .gtw-deco{animation:gtw-float 7s ease-in-out infinite}
.gtw-go .gtw .gtw-hero__d2{animation-delay:-2s}
.gtw-go .gtw .gtw-hero__d3{animation-delay:-4s}

/* Parallax decorations (JS sets --px/--py on the hero, --d per element) */
.gtw-fx .gtw .gtw-sticker{translate:calc(var(--px,0) * var(--d,1) * 1px) calc(var(--py,0) * var(--d,1) * 1px)}

/* Planet extras */
.gtw-fx .gtw .gtw-gpin.is-live .gtw-gpin__dot{animation:gtw-bob 1.7s ease-in-out infinite}
.gtw-fx .gtw .gtw-gpin.is-live .gtw-gpin__dot::before{content:"";position:absolute;inset:-3px;border-radius:50%;border:3px solid var(--ink);animation:gtw-ping 2.2s ease-out infinite}
.gtw .gtw-globe__stage.is-poke{animation:gtw-poke .55s var(--spring)}

/* ============================================================ Scroll reveals */
.gtw-fx .gtw [data-r="words"]:not(.is-in) .pw{opacity:0}
.gtw-fx .gtw [data-r="words"] .pw{display:inline-block}
.gtw-fx .gtw [data-r="words"].is-in .pw{animation:gtw-word-in .75s var(--spring) both;animation-delay:calc(var(--wi,0) * .09s)}
.gtw-fx .gtw [data-pop]:not(.is-in){opacity:0}
.gtw-fx .gtw [data-pop].is-in{animation:gtw-pop .75s var(--spring) backwards;animation-delay:calc(var(--ri,0) * 85ms)}

/* ============================================================ Playful hovers */
.gtw .gtw-footer__logo,.gtw .gtw-loader__logo{will-change:transform}
@media (hover:hover){
	.gtw .gtw-sticker--ship:hover,.gtw .gtw-sticker--world:hover{animation-play-state:paused}
	.gtw-fx .gtw .gtw-tile:hover .gtw-badge{animation:gtw-wiggle .5s ease-in-out infinite}
}
.gtw-fx .gtw .gtw-tape__row{will-change:transform}

/* ============================================================ Product page moments */
.gtw-go .gtw .gtw-gallery__badge{animation:gtw-slap .8s var(--spring) both .55s}
.gtw-fx .gtw .gtw-gallery{overflow:visible}
.gtw-fx .gtw .gtw-vchip.is-on{animation:gtw-chip-pop .35s var(--spring)}
.gtw .gtw-count.is-bump{animation:gtw-bump .6s var(--spring)}
.gtw .gtw-iconbtn--bag.is-bump .gtw-ico,.gtw .gtw-tabbar__bag.is-bump .gtw-ico{animation:gtw-bump .6s var(--spring)}

.gtw .gtw-fly{display:block;position:fixed;left:0;top:0;width:104px;height:104px;z-index:2400;background:#fff;border:var(--bw) solid var(--ink);border-radius:14px;padding:5px;box-shadow:5px 5px 0 var(--ink);pointer-events:none;will-change:transform}
.gtw .gtw-fly img{width:100%;height:100%;object-fit:contain;display:block}
.gtw .gtw-confetti{position:fixed;left:0;top:0;width:0;height:0;z-index:2600;pointer-events:none}
.gtw .gtw-confetti i{position:absolute;left:0;top:0;display:block;border:2px solid var(--ink);will-change:transform,opacity}

/* ============================================================ Page transition: iris wipe (View Transitions API, progressive) */
@keyframes gtw-vt-in{from{clip-path:circle(0% at 50% 40%)}to{clip-path:circle(150% at 50% 40%)}}
@keyframes gtw-vt-out{to{opacity:.6;transform:scale(.97)}}
@media (prefers-reduced-motion:no-preference){
	@view-transition{navigation:auto}
	.gtw .gtw-header{view-transition-name:gtw-header}
	.gtw .gtw-tabbar{view-transition-name:gtw-tabbar}
	::view-transition-old(root){animation:gtw-vt-out .5s ease both}
	::view-transition-new(root){animation:gtw-vt-in .75s cubic-bezier(.7,0,.2,1) both}
	::view-transition-group(gtw-header),::view-transition-group(gtw-tabbar){animation-duration:0s}
}


/* ============================================================ 2.0 scroll experiences */

/* Scroll progress with a rolling planet */
.gtw-fx .gtw .gtw-progress{display:block;position:absolute;left:0;right:0;bottom:-4px;height:4px;pointer-events:none;z-index:3}
.gtw-fx .gtw .gtw-progress__bar{display:block;height:100%;background:var(--sun);transform:scaleX(0);transform-origin:left}
.gtw-fx .gtw .gtw-progress__globe{position:absolute;left:0;top:-13px;width:30px;height:30px;margin-left:-15px;filter:drop-shadow(2px 2px 0 var(--ink));will-change:transform}

/* World tour: a pinned planet that flies from territory to territory */
.gtw-fx .gtw .gtw-tour{height:calc(var(--n) * 72vh + 100vh);height:calc(var(--n) * 72svh + 100svh);background:none;border-block:0}
.gtw-fx .gtw .gtw-tour__pin{position:sticky;top:0;height:100vh;height:100svh;padding:calc(var(--header-h) + var(--top) + 12px) 0 64px;overflow:hidden;border-block:4px solid var(--ink);display:flex;align-items:center}
.gtw-fx .gtw .gtw-tour__bg{display:block;position:absolute;inset:0;z-index:0;background-color:var(--tcol,var(--sea));transition:background-color .7s var(--ease)}
.gtw-fx .gtw .gtw-tour__bg::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.26) 2.2px,transparent 2.8px);background-size:26px 26px}
.gtw-fx .gtw .gtw-tour__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(16px,4vw,56px);align-items:center;width:100%}
.gtw-fx .gtw .gtw-tour__stage{display:block;order:2}
.gtw-fx .gtw .gtw-tour__cards{order:1;display:grid}
.gtw-fx .gtw .gtw-globe--tour{width:min(100%,72vh);width:min(100%,72svh);margin-inline:auto}
.gtw-fx .gtw .gtw-stop{grid-area:1/1;background:none;border:0;box-shadow:none;padding:0;opacity:0;visibility:hidden;translate:0 70px;scale:.94;transition:opacity .4s var(--ease),translate .8s var(--spring),scale .8s var(--spring),visibility 0s .4s}
.gtw-fx .gtw .gtw-stop.is-active{opacity:1;visibility:visible;translate:0 0;scale:1;transition-delay:0s}
.gtw-fx .gtw .gtw-stop .gtw-stop__name{display:block}
.gtw-fx .gtw .gtw-stop.is-active .gtw-stop__art{animation:gtw-pop .8s var(--spring) .2s backwards}
.gtw-fx .gtw .gtw-tour__progress{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:8px;position:absolute;left:var(--pad);right:var(--pad);bottom:22px;z-index:3;pointer-events:none}
.gtw-fx .gtw .gtw-tour__progress span{height:10px;border:2.5px solid var(--ink);border-radius:999px;background:rgba(255,255,255,.55);overflow:hidden}
.gtw-fx .gtw .gtw-tour__progress span::after{content:"";display:block;height:100%;background:var(--ink);transform:scaleX(var(--f,0));transform-origin:left}
.gtw-fx .gtw .gtw-tour__hint{display:block;position:absolute;right:var(--pad);bottom:46px;z-index:3;margin:0;padding:6px 14px;background:#fff;border:3px solid var(--ink);border-radius:999px;box-shadow:3px 3px 0 var(--ink);font-family:var(--f-display);font-size:.7rem;text-transform:uppercase;animation:gtw-bob 1.4s ease-in-out infinite;transition:opacity .4s}
.gtw-fx .gtw .gtw-tour.is-started .gtw-tour__hint{opacity:0}
@media (max-width:899px){
	.gtw-fx .gtw .gtw-tour__pin{padding:calc(var(--header-h) + var(--top) + 8px) 0 calc(var(--tabbar-h) + 34px)}
	.gtw-fx .gtw .gtw-tour__grid{grid-template-columns:1fr;gap:6px;align-content:center}
	.gtw-fx .gtw .gtw-tour__stage{order:1}
	.gtw-fx .gtw .gtw-tour__cards{order:2}
	.gtw-fx .gtw .gtw-globe--tour{width:min(84vw,36svh)}
	.gtw-fx .gtw .gtw-stop__name{font-size:clamp(2.2rem,11vw,3.6rem)}
	.gtw-fx .gtw .gtw-stop__meta{margin:8px 0 12px;font-size:.95rem}
	.gtw-fx .gtw .gtw-stop__row{gap:14px;flex-wrap:nowrap}
	.gtw-fx .gtw .gtw-stop__art{width:84px;flex:none}
	.gtw-fx .gtw .gtw-stop__row .gtw-btn{min-height:50px;padding:0 1.1em;font-size:.82rem;white-space:normal;text-align:center}
	.gtw-fx .gtw .gtw-tour__hint{display:none}
	.gtw-fx .gtw .gtw-tour__progress{bottom:calc(var(--tabbar-h) + 12px)}
}

/* Manifesto fills word by word as you scroll */
.gtw-fx .gtw .gtw-manifesto__big .f{opacity:.22;transition:opacity .3s}
.gtw-fx .gtw .gtw-manifesto__big .f.on{opacity:1}

/* How it works: the parcel travels along the route while you scroll */
@media (min-width:800px){
	.gtw-fx .gtw .gtw-how__path{display:block;position:absolute;left:0;top:-70px;width:100%;height:120px;overflow:visible;pointer-events:none}
	.gtw-fx .gtw .gtw-how__path path{stroke:var(--ink);stroke-width:5;stroke-dasharray:2 14;stroke-linecap:round;vector-effect:non-scaling-stroke;fill:none}
	.gtw-fx .gtw .gtw-how__parcel{display:block;position:absolute;left:0;top:0;width:48px;height:48px;margin:-24px 0 0 -24px;z-index:3;pointer-events:none;will-change:transform;filter:drop-shadow(3px 3px 0 var(--ink))}
	.gtw-fx .gtw .gtw-how__parcel svg{display:block;width:100%;height:100%}
}

/* Product images: magnifier */
.gtw-fx .gtw .gtw-gallery__item{cursor:zoom-in}
.gtw-fx .gtw .gtw-gallery__img{transition:transform .35s var(--ease)}
.gtw-fx .gtw .gtw-gallery__item.is-zoom .gtw-gallery__img{transition:transform .12s linear;transform:scale(2)}

/* Playful extras */
.gtw-fx .gtw .gtw-nl__tab{animation:gtw-wiggle 3s ease-in-out infinite}
.gtw-fx .gtw .gtw-albumcount.is-bump{animation:gtw-bump .6s var(--spring)}