/* Goody: a big gift box bursts open, the lid jumps off, and what was inside flies out in an arc. */
.ns-sig--giftbox { --sig-bg: #ffca28; --sig-fg: #263238; min-height: clamp(34rem, 84svh, 48rem); }
.ns-sig--giftbox .ns-sig__inner { justify-items: start; gap: 1.15rem; }
.ns-sig--giftbox .ns-sig__title { font-size: clamp(5rem, 11vw, 11rem); line-height: .95; text-shadow: .03em .035em 0 #fffdf5; }
.ns-sig--giftbox .ns-sig__ch { animation: gb-pop .7s cubic-bezier(.3, 1.7, .5, 1) both; animation-delay: calc(.55s + var(--i) * 80ms); }
.ns-sig--giftbox .ns-sig__tagline { max-width: 22ch; font-size: clamp(1.3rem, 2.3vw, 2rem); font-weight: 700; line-height: 1.25; }
.ns-sig--giftbox .ns-sig__topics { gap: .7rem; max-width: 28rem; }
.ns-sig--giftbox .ns-sig__topics a { padding: .5rem 1rem .5rem 1.9rem; color: #263238; background: radial-gradient(circle at .95rem 50%, #ffca28 .24rem, #263238 .25rem .34rem, #fffdf5 .35rem); border: 0; border-radius: 0; clip-path: polygon(.6rem 0, 100% 0, 100% 100%, .6rem 100%, 0 50%); transform: rotate(calc((var(--i) - 1.5) * 1.4deg)); transition: transform .2s; }
.ns-sig--giftbox .ns-sig__topics a:hover { color: #263238; background: radial-gradient(circle at .95rem 50%, #ffca28 .24rem, #263238 .25rem .34rem, #b2dfdb .35rem); transform: rotate(-3deg) scale(1.06); }
@keyframes gb-pop { from { transform: scale(.55) translateY(.25em) rotate(-8deg); } }

/* the drawing: one ink line, a handful of flat colours */
.gb { position: absolute; inset-block: 0; inset-inline-end: -3.5rem; height: 100%; width: auto; aspect-ratio: 900 / 720; overflow: visible; fill: none; stroke: #263238; stroke-width: 6; stroke-linejoin: round; stroke-linecap: round; }
.gb .t { fill: #00897b; } .gb .d { fill: #00695c; } .gb .l { fill: #26a69a; } .gb .c { fill: #ef5350; } .gb .k { fill: #c62828; } .gb .w { fill: #fffdf5; } .gb .sl { fill: #263238; }
.gb .s4 { stroke-width: 4; } .gb .s7 { stroke-width: 7; } .gb .q1 { stroke-width: 52; } .gb .q2 { stroke: #fffdf5; stroke-width: 36; } .gb .fl { stroke: #ef5350; stroke-width: 5; } .gb .hi { stroke: #fff; stroke-width: 7; }
.gb .gi { fill: url(#gbg); } .gb .pd { fill: url(#gbd); stroke: none; } .gb .pe { fill: url(#gbe); stroke: none; }
.gb .gd { stroke: #b2dfdb; stroke-width: 14; } .gb .ge { stroke: #26a69a; stroke-width: 12; }
.gb-rays { stroke: #ffda6a; stroke-width: 2200; stroke-linecap: butt; stroke-dasharray: 1; transform-origin: 375px 400px; animation: gb-spin 80s linear infinite; }
@keyframes gb-spin { to { transform: rotate(360deg); } }
.gb-cone { fill: url(#gbl); stroke: none; animation: gb-glow 1.1s .25s ease-out both; }
@keyframes gb-glow { from { opacity: 0; } }
.gb-lid { animation: gb-lid 1.5s cubic-bezier(.3, .7, .3, 1) both; }
@keyframes gb-lid { 0%, 14% { transform: translate(66px, 279px) rotate(15deg); } 20% { transform: translate(66px, 262px) rotate(11deg); } 62% { transform: translate(-14px, -34px) rotate(-5deg); } 82% { transform: translate(4px, 10px) rotate(1.5deg); } }
.gb-all { transform: translateX(calc((var(--mx) - .5) * -36px)); transition: transform .35s ease-out; }
.gb .n1 { --x: -20px; --y: 150px; --r: -70deg; --t: .75s; --s: -9px; }
.gb .n2 { --x: -180px; --y: 150px; --r: 80deg; --t: .95s; --s: 11px; }
.gb .n3 { --x: -300px; --y: 290px; --r: -160deg; --t: 1.15s; --s: -12px; }
.gb .n4 { --x: -330px; --y: 90px; --r: 120deg; --t: 1.35s; --s: 10px; }
.gb-lid .gb-b { --s: -8px; }
.gb-i { animation: gb-fly 1.15s cubic-bezier(.2, .75, .3, 1) both; animation-delay: var(--t); }
@keyframes gb-fly { from { transform: translate(var(--x), var(--y)) scale(.15) rotate(var(--r)); } 62% { transform: translate(calc(var(--x) * .12), -26px) scale(1.08) rotate(calc(var(--r) * -.06)); } }
.gb-b { animation: gb-bob 4.6s ease-in-out infinite alternate; }
@keyframes gb-bob { to { transform: translateY(var(--s)) rotate(calc(var(--s) * .3deg / 1px)); } }
.gb-c { stroke: #ef5350; stroke-width: 8; stroke-dasharray: 90; animation: gb-dash 1.1s 1.5s ease-out both; }
@keyframes gb-dash { from { stroke-dashoffset: 90; } }

@media (max-width: 1199px) {
	.ns-sig--giftbox { min-height: 41rem; align-items: start; padding-block-start: 1.75rem; }
	.ns-sig--giftbox .ns-sig__title { font-size: clamp(4.5rem, 24vw, 8rem); }
	.ns-sig--giftbox .ns-sig__inner { gap: .7rem; }
	.ns-sig--giftbox .ns-sig__topics { gap: .45rem; }
	.ns-sig--giftbox .ns-sig__topics a { padding-block: .3rem; font-size: .95rem; }
	.gb { inset-block: auto -3%; inset-inline: auto; left: 50%; height: 58%; transform: translateX(-50%); }
}

/* touches: a bow on section titles, cards that lift like a lid */
body.ns-sig-giftbox .ns-cat-block__head .ns-section-title::before { content: ""; display: inline-block; width: 1.15em; height: .75em; margin-inline-end: .4em; background: radial-gradient(circle, #ef5350 28%, transparent 30%), conic-gradient(from 225deg, #ef5350 0 90deg, transparent 0 180deg, #ef5350 0 270deg, transparent 0); }
body.ns-sig-giftbox .ns-fc { transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
body.ns-sig-giftbox .ns-fc:hover { transform: translateY(-6px) rotate(.8deg); }
body.ns-sig-giftbox .ns-footer { border-block-start: .5rem solid; border-image: repeating-linear-gradient(90deg, #00897b 0 2rem, #ef5350 0 2.6rem) 1; }