/* naturally.net.au: occasion palettes, the gift voucher's opening scene, seasonal effects and the
   premium layer (glass buttons, floating reviews, raised text). Loaded after site.css. */

/* ---------------------------------------------------------------- occasion palettes (vouchers, campaigns) */
.pal-purple { --vc-a: #3d206d; --vc-b: #623ca2; --vc-ink: #fff; --vc-gold: #d9b96a; }
.pal-birthday { --vc-a: #5b2a86; --vc-b: #d1478f; --vc-ink: #fff; --vc-gold: #f4d27a; }
.pal-christmas { --vc-a: #123d2a; --vc-b: #7a1622; --vc-ink: #fff7e8; --vc-gold: #e6c36a; }
.pal-blush { --vc-a: #fbe3ec; --vc-b: #f3b7cd; --vc-ink: #5a2340; --vc-gold: #b5765a; }
.pal-navy { --vc-a: #14233f; --vc-b: #2e4a7d; --vc-ink: #f4f1ea; --vc-gold: #d9b96a; }
.pal-pastel { --vc-a: #e9f5ef; --vc-b: #f9e7f1; --vc-ink: #3d4a5c; --vc-gold: #b98bd6; }
.pal-rose { --vc-a: #5a1030; --vc-b: #b3264e; --vc-ink: #fff0f4; --vc-gold: #f4b3c6; }
.pal-sage { --vc-a: #dfe9df; --vc-b: #a9c2ae; --vc-ink: #24392b; --vc-gold: #8a6d2f; }
.pal-floral { --vc-a: #fffafc; --vc-b: #efe2f7; --vc-ink: #3d206d; --vc-gold: #c48aa8; }
.pal-gold { --vc-a: #2b2117; --vc-b: #6b5426; --vc-ink: #fff6e0; --vc-gold: #f0d48a; }
.design-card[class*="pal-"] .design-plain, .voucher-card[class*="pal-"].no-art, .gift-intro[class*="pal-"] {
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--vc-gold) 28%, transparent), transparent 60%), linear-gradient(150deg, var(--vc-a), var(--vc-b)); color: var(--vc-ink);
}
.design-plain { gap: 6px; text-align: center; }
.design-plain i { font-family: var(--font-head); font-size: 1.3rem; }
.design-plain small { color: var(--vc-gold); font-family: var(--font-body); }
.design-name { display: grid; gap: 2px; margin-top: 8px; }
.design-prev { font-size: .78rem; font-weight: 500; }
.voucher-card .vc-label { color: var(--vc-gold, var(--accent)); }
.voucher-card.no-art .vc-value, .voucher-card.no-art .vc-to, .voucher-card.no-art .vc-from, .voucher-card.no-art .vc-msg { color: var(--vc-ink); }

/* ---------------------------------------------------------------- the voucher's opening scene */
.voucher-page.has-intro .voucher-sheet { display: none; }
.voucher-page.opened .voucher-sheet { display: grid; animation: sheetIn .9s cubic-bezier(.2, .8, .2, 1) both; }
.voucher-page.opened .gift-intro { display: none; }
@keyframes sheetIn { from { opacity: 0; transform: translateY(40px) scale(.96); } to { opacity: 1; transform: none; } }
.gift-intro { position: relative; max-width: 820px; margin: 0 auto; min-height: 540px; border-radius: 28px; display: grid; justify-items: center; align-content: center; gap: 18px; padding: 48px 20px; overflow: hidden; text-align: center; box-shadow: 0 40px 80px -30px rgb(30 10 60 / 55%); isolation: isolate; }
.gift-intro .eyebrow { color: var(--vc-gold); }
.gift-intro h1 { color: var(--vc-ink); margin: 0; text-shadow: 0 2px 0 rgb(0 0 0 / 8%), 0 18px 40px rgb(0 0 0 / 25%); }
.gift-intro p { margin: 0; opacity: .85; }
.gi-stage { position: relative; width: 300px; height: 230px; perspective: 900px; }
.gi-open { position: relative; z-index: 2; }
.gi-skip { font-size: .8rem; color: inherit; opacity: .7; }
.fx-local { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; }
/* envelope */
.op-envelope { position: absolute; inset: 30px 10px 10px; transform-style: preserve-3d; animation: floaty 4s ease-in-out infinite; }
.env-back, .env-front, .env-flap { position: absolute; left: 0; right: 0; }
.env-back { top: 0; bottom: 0; background: color-mix(in srgb, var(--vc-gold) 55%, #fff); border-radius: 10px; }
.env-card { position: absolute; left: 18px; right: 18px; top: 18px; height: 150px; background: #fff; border-radius: 8px; display: grid; place-items: center; color: #3d206d; font-family: var(--font-head); font-size: 1.3rem; box-shadow: 0 8px 20px rgb(0 0 0 / 15%); transition: transform 1s cubic-bezier(.3, 1.4, .4, 1) .45s; }
.env-front { bottom: 0; height: 120px; background: linear-gradient(160deg, color-mix(in srgb, var(--vc-gold) 70%, #fff), color-mix(in srgb, var(--vc-gold) 45%, #fff)); clip-path: polygon(0 0, 50% 55%, 100% 0, 100% 100%, 0 100%); border-radius: 0 0 10px 10px; z-index: 2; }
.env-flap { top: 0; height: 110px; background: color-mix(in srgb, var(--vc-gold) 80%, #fff); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top; transition: transform .6s ease; z-index: 3; }
.env-seal { position: absolute; left: 50%; top: 86px; width: 38px; height: 38px; margin-left: -19px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #8a5fd1, #3d206d); color: #fff; display: grid; place-items: center; font: 600 1rem var(--font-head); z-index: 4; box-shadow: 0 4px 10px rgb(0 0 0 / 30%); transition: opacity .3s; }
.gift-intro.opening .env-flap { transform: rotateX(180deg); z-index: 0; }
.gift-intro.opening .env-seal { opacity: 0; }
.gift-intro.opening .env-card { transform: translateY(-110px) scale(1.06); z-index: 5; }
/* gift box */
.op-giftbox { position: absolute; left: 50%; bottom: 10px; width: 190px; margin-left: -95px; height: 200px; animation: floaty 3.6s ease-in-out infinite; }
.gb-box { position: absolute; bottom: 0; left: 10px; right: 10px; height: 130px; background: linear-gradient(160deg, var(--vc-b), var(--vc-a)); border-radius: 6px; box-shadow: inset 0 -10px 30px rgb(0 0 0 / 25%), 0 20px 30px -10px rgb(0 0 0 / 40%); }
.gb-ribbon, .gb-lid::before { position: absolute; background: linear-gradient(90deg, color-mix(in srgb, var(--vc-gold) 70%, #fff), var(--vc-gold)); }
.gb-ribbon { left: 50%; width: 26px; margin-left: -13px; top: 0; bottom: 0; }
.gb-lid { position: absolute; left: 0; right: 0; bottom: 124px; height: 40px; background: linear-gradient(160deg, var(--vc-b), color-mix(in srgb, var(--vc-a) 70%, #000)); border-radius: 6px; transition: transform .9s cubic-bezier(.3, 1.5, .5, 1); box-shadow: 0 6px 12px rgb(0 0 0 / 25%); z-index: 2; }
.gb-lid::before { content: ''; left: 50%; width: 26px; margin-left: -13px; top: 0; bottom: 0; }
.gb-bow { position: absolute; left: 50%; top: -28px; width: 70px; height: 34px; margin-left: -35px; }
.gb-bow::before, .gb-bow::after { content: ''; position: absolute; top: 0; width: 34px; height: 30px; border: 7px solid var(--vc-gold); border-radius: 50% 50% 10% 50%; }
.gb-bow::before { left: 0; transform: rotate(-20deg); }
.gb-bow::after { right: 0; transform: scaleX(-1) rotate(-20deg); }
.gb-glow { position: absolute; left: 50%; bottom: 120px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 60px 40px color-mix(in srgb, var(--vc-gold) 80%, #fff); opacity: 0; transition: opacity .6s .3s; }
.gift-intro.opening .gb-lid { transform: translate(60px, -110px) rotate(28deg); }
.gift-intro.opening .gb-glow { opacity: 1; }
/* pop-up card */
.op-popup { position: absolute; inset: 10px 0; perspective: 900px; animation: floaty 4.2s ease-in-out infinite; }
.pp-left, .pp-right { position: absolute; top: 30px; left: 150px; width: 140px; height: 180px; border-radius: 10px; box-shadow: 0 12px 24px rgb(0 0 0 / 20%); }
.pp-right { background: #fff; display: grid; place-items: center; color: #3d206d; font-family: var(--font-head); font-size: 1.15rem; padding: 12px; }
.pp-left { background: linear-gradient(160deg, var(--vc-a), var(--vc-b)); border: 2px solid color-mix(in srgb, var(--vc-gold) 60%, transparent); transform-origin: left center; transition: transform 1s cubic-bezier(.3, 1.2, .4, 1); z-index: 2; }
.gift-intro.opening .pp-left { transform: rotateY(-178deg); }
.pp-pop { position: absolute; left: 0; right: 0; bottom: 30px; height: 120px; pointer-events: none; z-index: 3; }
.pp-flower { position: absolute; bottom: 0; width: 42px; height: 42px; transform: scale(0) translateY(20px); transition: transform .7s cubic-bezier(.3, 1.6, .5, 1) .45s; }
.pp-flower svg { width: 100%; height: 100%; }
.pp-flower.f0 { left: 150px; } .pp-flower.f1 { left: 175px; } .pp-flower.f2 { left: 205px; } .pp-flower.f3 { left: 232px; } .pp-flower.f4 { left: 255px; }
.gift-intro.opening .pp-flower { transform: scale(1) translateY(-150px); }
.gift-intro.opening .pp-flower.f1 { transition-delay: .55s; transform: scale(1.2) translateY(-175px); }
.gift-intro.opening .pp-flower.f2 { transition-delay: .65s; transform: scale(1.4) translateY(-195px); }
.gift-intro.opening .pp-flower.f3 { transition-delay: .75s; transform: scale(1.1) translateY(-170px); }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media print { .gift-intro { display: none !important; } .voucher-page.has-intro .voucher-sheet { display: grid !important; } }

/* ---------------------------------------------------------------- seasonal effects */
.fx-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 60; }
.fx-santa { position: fixed; left: 0; top: var(--y, 12vh); width: min(420px, 60vw); color: rgb(30 22 50 / 50%); pointer-events: none; z-index: 61; transform: translateX(-110%); }
.fx-santa.go { animation: santaFly 14s linear forwards; }
.fx-santa svg { width: 100%; height: auto; display: block; }
@keyframes santaFly { 0% { transform: translateX(-110%) translateY(0) rotate(-3deg); } 50% { transform: translateX(45vw) translateY(-18px) rotate(-6deg); } 100% { transform: translateX(110vw) translateY(-40px) rotate(-8deg); } }
.fx-holly { position: absolute; top: 0; width: 160px; pointer-events: none; z-index: 3; filter: drop-shadow(0 6px 10px rgb(0 0 0 / 25%)); }
.fx-holly.l { left: 0; transform: rotate(-12deg) translate(-10px, -6px); }
.fx-holly.r { right: 0; transform: scaleX(-1) rotate(-12deg) translate(-10px, -6px); }
.fx-giftwrap .card, .fx-giftwrap .vb-img { position: relative; }
.fx-giftwrap .card::after, .fx-giftwrap .vb-img::after { content: ''; position: absolute; top: 0; right: 24px; width: 18px; height: 58px; background: linear-gradient(90deg, #b3262e, #d84a52 50%, #b3262e); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); box-shadow: 0 2px 6px rgb(0 0 0 / 25%); z-index: 2; }
.fx-switch { position: fixed; left: 16px; bottom: 16px; z-index: 62; border: 1px solid rgb(255 255 255 / 50%); background: rgb(255 255 255 / 60%); backdrop-filter: blur(10px) saturate(1.4); border-radius: 999px; padding: 8px 14px; font: 500 .78rem var(--font-body); color: var(--ink); cursor: pointer; box-shadow: 0 6px 20px rgb(30 10 60 / 15%); }

/* a campaign's own look: its colours over the theme (set by the router as body classes) */
.campaign-hero .hero-shade { background: linear-gradient(90deg, color-mix(in srgb, var(--vc-a) 88%, transparent), color-mix(in srgb, var(--vc-b) 45%, transparent) 60%, transparent); }
.campaign-hero .pill { background: color-mix(in srgb, var(--vc-a) 80%, transparent); }
.campaign-hero .pill i { color: var(--vc-gold); }
.offer-bar.campaign { background: linear-gradient(90deg, var(--vc-a), var(--vc-b)); color: var(--vc-ink); }
.offer-bar.campaign a { color: var(--vc-gold); }

/* ---------------------------------------------------------------- the premium layer */
/* glass buttons: a soft gloss, an inner highlight, and a light sweep on hover */
.btn { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, color-mix(in srgb, var(--primary-light) 92%, #fff) 0%, var(--primary) 55%, var(--primary-dark) 100%); border: 1px solid rgb(255 255 255 / 22%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 35%), inset 0 -8px 16px rgb(0 0 0 / 12%), 0 8px 22px -8px color-mix(in srgb, var(--primary) 70%, transparent); line-height: 1; min-height: 44px; }
.btn::before { content: ''; position: absolute; inset: 0 0 50% 0; background: linear-gradient(180deg, rgb(255 255 255 / 28%), rgb(255 255 255 / 0)); border-radius: inherit; z-index: -1; pointer-events: none; }
.btn::after { content: ''; position: absolute; top: -50%; left: -60%; width: 40%; height: 200%; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 35%), transparent); transform: skewX(-20deg); transition: left .7s ease; z-index: -1; pointer-events: none; }
.btn:hover::after { left: 130%; }
.btn:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 40%), inset 0 -8px 16px rgb(0 0 0 / 12%), 0 14px 30px -10px color-mix(in srgb, var(--primary) 80%, transparent); }
.btn.outline { background: rgb(255 255 255 / 55%); backdrop-filter: blur(10px) saturate(1.5); color: var(--primary); border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent); box-shadow: inset 0 1px 0 rgb(255 255 255 / 80%), 0 6px 18px -10px rgb(30 10 60 / 30%); }
.btn.outline:hover { background: rgb(255 255 255 / 80%); color: var(--primary-dark); }
.btn.outline.light, .hero .btn.outline { background: rgb(255 255 255 / 14%); color: #fff; border-color: rgb(255 255 255 / 50%); backdrop-filter: blur(12px) saturate(1.6); box-shadow: inset 0 1px 0 rgb(255 255 255 / 40%), 0 10px 30px -10px rgb(0 0 0 / 40%); }
.btn.outline.light:hover, .hero .btn.outline:hover { background: rgb(255 255 255 / 26%); color: #fff; }
.btn.light { background: linear-gradient(180deg, #fff, #f3eefb); color: var(--primary); border-color: rgb(255 255 255 / 80%); }
.nav-cta .btn { min-height: 40px; padding: 0 18px; }
.nav-cta .btn.outline { color: var(--primary); }
/* menu: every item on one line, centred, with a soft pill behind the current page */
.nav > ul { align-items: center; }
.nav > ul > li > a { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 999px; transition: background .2s, color .2s; }
.nav > ul > li > a:hover { background: color-mix(in srgb, var(--primary) 7%, transparent); }
.nav > ul > li > a[aria-current="page"] { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.has-sub > a { padding-right: 6px !important; }
.sub-toggle { display: inline-flex; align-items: center; height: 40px; margin-left: -2px; }
.nav .sub { backdrop-filter: blur(16px) saturate(1.5); background: rgb(255 255 255 / 88%); border-radius: 16px; }
/* raised words over pictures */
.hero h1 { text-shadow: 0 1px 0 rgb(255 255 255 / 15%), 0 2px 2px rgb(0 0 0 / 25%), 0 12px 28px rgb(0 0 0 / 35%), 0 30px 60px rgb(20 8 40 / 45%); transform: translateZ(0); }
.hero p { text-shadow: 0 2px 12px rgb(0 0 0 / 40%); }
.hero-inner { transform: translateY(calc(var(--scroll, 0) * -0.15px)); }
.hero-bg { transform: scale(1.08) translateY(calc(var(--scroll, 0) * 0.25px)); will-change: transform; }
.pill { backdrop-filter: blur(12px) saturate(1.4); background: rgb(75 40 134 / 55%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 25%), 0 10px 30px -10px rgb(0 0 0 / 40%); }
.tag { backdrop-filter: blur(10px); background: rgb(255 255 255 / 78%); box-shadow: 0 4px 14px rgb(0 0 0 / 12%); }
.gallery figcaption { text-shadow: 0 2px 10px rgb(0 0 0 / 50%); font-weight: 600; }
/* cards lift towards you */
.card, .pillar, .side-box { transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s; }
.card:hover, .pillar:hover { transform: translateY(-8px) rotateX(2deg); box-shadow: 0 2px 6px rgb(33 31 32 / 6%), 0 30px 60px -20px rgb(75 40 134 / 30%); }
.grid { perspective: 1400px; }
.pillar-icon { box-shadow: 0 10px 24px -6px color-mix(in srgb, var(--primary) 60%, transparent), inset 0 1px 0 rgb(255 255 255 / 30%); }
/* floating reviews: two rows drifting past in 3D, pausing when you point at them */
.reviews-float { position: relative; display: grid; gap: 28px; overflow: hidden; padding: 30px 0 40px; perspective: 1200px; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.reviews-float .lane { display: flex; gap: 26px; width: max-content; animation: drift 70s linear infinite; transform-style: preserve-3d; }
.reviews-float .lane.b { animation-duration: 85s; animation-direction: reverse; }
.reviews-float:hover .lane, .reviews-float:focus-within .lane { animation-play-state: paused; }
.reviews-float .review { width: 340px; flex: none; background: rgb(255 255 255 / 72%); backdrop-filter: blur(14px) saturate(1.4); border: 1px solid rgb(255 255 255 / 80%); box-shadow: inset 0 1px 0 #fff, 0 30px 60px -28px rgb(61 32 109 / 45%), 0 6px 16px -8px rgb(61 32 109 / 20%); border-radius: 24px; animation: bob 7s ease-in-out infinite; transition: transform .4s; }
.reviews-float .review:nth-child(3n + 1) { animation-delay: -2s; transform: translateZ(30px); }
.reviews-float .review:nth-child(3n + 2) { animation-delay: -4.5s; }
.reviews-float .review:hover { transform: translateY(-10px) scale(1.03) translateZ(60px); }
.reviews-float::before { content: ''; position: absolute; inset: 10% 20%; background: radial-gradient(closest-side, color-mix(in srgb, var(--primary-light) 18%, transparent), transparent); filter: blur(30px); z-index: -1; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
/* sections rise in as you scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
.reveal.in { opacity: 1; transform: none; }
.stats .wrap > div b { text-shadow: 0 6px 18px rgb(0 0 0 / 25%); }
.voucher-card { transform: perspective(1200px) rotateX(2deg); transition: transform .6s; }
.voucher-card:hover { transform: perspective(1200px) rotateX(0) translateY(-4px); }

@media (prefers-reduced-motion: reduce) {
  .fx-canvas, .fx-santa { display: none; }
  .op-envelope, .op-giftbox, .op-popup, .reviews-float .lane, .reviews-float .review { animation: none; }
  .reviews-float .lane { flex-wrap: wrap; width: auto; }
  .reveal { opacity: 1; transform: none; }
  .hero-inner, .hero-bg { transform: none; }
}
@media print { .reveal { opacity: 1; transform: none; } .fx-switch { display: none; } }
@media (max-width: 640px) { .reviews-float .review { width: 280px; } .gi-stage { transform: scale(.9); } .fx-holly { width: 100px; } }
.reviews-float .lane-dup { display: contents; }
.voucher-sheet { scroll-margin-top: 110px; }