/* Villa Nepal – site-wide: nav "current page" + branch home effects (layout lives in the Elementor classes) */

/* ---------- Branch nav: the page you are on ---------- */
.vn-topbar .vn-navlink.is-current { color: var(--villa-plum, #6A0762); }
.vn-topbar .vn-navlink.is-current > a {
	color: var(--villa-plum, #6A0762);
	text-decoration: underline;
	text-decoration-color: var(--villa-crimson, #D7263D);
	text-decoration-thickness: 2px;
	text-underline-offset: 9px;
}

/* ---------- Branch home: hero ---------- */
.vn-bh-hero .vn-bh-bg {
	transform-origin: 60% 40%;
	animation: vn-kenburns 26s ease-in-out infinite alternate;
	will-change: transform;
}
@keyframes vn-kenburns {
	from { transform: scale(1.02); }
	to { transform: scale(1.14) translate3d(-1.5%, -1%, 0); }
}

/* Live open / closed badge (text set by script.js from the opening hours) */
.vn-bh-status {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.vn-bh-status::before {
	content: "";
	width: 8px;
	height: 8px;
	flex: none;
	border-radius: 50%;
	background: #E4C6DF;
}
.vn-bh-status.is-open::before { background: #4ADE80; animation: vn-live 2s ease-out infinite; }
.vn-bh-status.is-closed::before { background: #F87171; }
@keyframes vn-live {
	0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .55); }
	100% { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); }
}

/* ---------- Branch home: opening hours, today's row ---------- */
.vn-bh-hrow { transition: background-color .3s ease; }
.vn-bh-hrow.is-today { background: var(--villa-lilac, #FAF6F8); color: var(--villa-plum, #6A0762); font-weight: 700; }
.vn-bh-hrow.is-today > :first-child::after { content: "  · tänään"; font-weight: 500; color: var(--villa-crimson, #D7263D); }

/* ---------- Branch home: endless photo strip ---------- */
.vn-bh-marquee {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.vn-bh-track.is-running {
	padding-inline-end: 20px; /* = the gap, so the loop is seamless */
	animation: vn-marquee var(--vn-mq-dur, 50s) linear infinite;
}
.vn-bh-marquee:hover .vn-bh-track { animation-play-state: paused; }
@keyframes vn-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
.vn-bh-item .vn-bh-item-img { transition: transform .6s cubic-bezier(.2, .8, .2, 1), box-shadow .6s ease; }
.vn-bh-item:hover .vn-bh-item-img { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(23, 28, 54, .18); }

/* ---------- Branch home: service cards ---------- */
.vn-bh-svc { transition: box-shadow .45s ease; }
.vn-bh-svc:hover { box-shadow: 0 28px 60px rgba(23, 28, 54, .15); }
.vn-bh-svc .vn-bh-svc-img { transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.vn-bh-svc:hover .vn-bh-svc-img { transform: scale(1.06); }
.vn-bh-svc { cursor: pointer; }

/* ---------- Services gallery (classes vn-sv-*; sizes/colours/fonts live in the Elementor classes) ----------
   One card is open (class is-active, set by script.js): photo lights up and zooms, text + button slide in.
   Big screens: the open card is wider. Phones/tablets: the card in the middle of the screen opens while scrolling. */
.vn-sv-row { counter-reset: vn-sv; transition: grid-template-columns .75s cubic-bezier(.2, .8, .2, 1); }
.vn-sv-card { counter-increment: vn-sv; cursor: pointer; isolation: isolate; }
.vn-sv-card .vn-sv-img {
	transform: scale(1.02);
	filter: brightness(.86) saturate(.85);
	transition: transform 1.2s cubic-bezier(.2, .8, .2, 1), filter .7s ease;
}
.vn-sv-card.is-active .vn-sv-img { transform: scale(1.1); filter: brightness(1) saturate(1.05); }
/* dark fade behind the text + running number (body … beats Elementor's own container pseudo-element rules) */
body .vn-sv-row .vn-sv-card::after {
	content: "";
	display: block;
	position: absolute;
	inset: 0;
	width: auto;
	height: auto;
	z-index: 0;
	pointer-events: none;
	opacity: 1;
	mix-blend-mode: normal;
	border-radius: inherit;
	background: linear-gradient(180deg, rgba(30, 6, 25, 0) 38%, rgba(30, 6, 25, .55) 68%, rgba(30, 6, 25, .9) 100%);
}
body .vn-sv-row .vn-sv-card::before {
	content: counter(vn-sv, decimal-leading-zero);
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 22px;
	left: 22px;
	right: auto;
	bottom: auto;
	width: 46px;
	height: 46px;
	z-index: 2;
	opacity: 1;
	mix-blend-mode: normal;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .45);
	background: rgba(30, 6, 25, .25);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: #FFFFFF;
	font: 400 15px/1 'Alfa Slab One', serif;
	transition: background-color .5s ease, border-color .5s ease, transform .5s cubic-bezier(.2, .8, .2, 1);
}
body .vn-sv-row .vn-sv-card.is-active::before { background: var(--villa-crimson, #D7263D); border-color: var(--villa-crimson, #D7263D); transform: rotate(-8deg) scale(1.08); }
.vn-sv-card .vn-sv-body { z-index: 1; }
/* text + button of a closed card are folded away (only once the script runs) */
.vn-sv-row.is-ready .vn-sv-text,
.vn-sv-row.is-ready .vn-sv-link {
	max-height: 0;
	margin-block-start: 0;
	opacity: 0;
	overflow: hidden;
	transform: translateY(14px);
	transition: max-height .6s cubic-bezier(.2, .8, .2, 1), margin .6s cubic-bezier(.2, .8, .2, 1), opacity .45s ease, transform .6s cubic-bezier(.2, .8, .2, 1);
}
.vn-sv-row.is-ready .vn-sv-card.is-active .vn-sv-text { max-height: 7em; margin-block-start: 10px; opacity: 1; transform: none; transition-delay: .15s; }
.vn-sv-row.is-ready .vn-sv-card.is-active .vn-sv-link { max-height: 5em; margin-block-start: 18px; opacity: 1; transform: none; transition-delay: .25s; }
body .vn-sv-card .vn-sv-text { margin-block-start: 10px; }
body .vn-sv-card .vn-sv-link { margin-block-start: 18px; }
/* the link is a white pill (text colour/font from the vn-sv-link class) */
body .vn-sv-card .vn-sv-link a {
	display: inline-block;
	padding: 11px 20px;
	border-radius: 999px;
	background: #FFFFFF;
	color: inherit;
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease;
}
body .vn-sv-card .vn-sv-link a:hover { background: var(--villa-crimson, #D7263D); color: #FFFFFF; }
/* title underline grows on the open card */
.vn-sv-title { background: linear-gradient(var(--villa-crimson, #D7263D), var(--villa-crimson, #D7263D)) 0 100% / 0 3px no-repeat; padding-bottom: 6px; transition: background-size .7s cubic-bezier(.2, .8, .2, 1); }
.vn-sv-card.is-active .vn-sv-title { background-size: 56px 3px; }
/* big screens: the open card takes more room */
@media (min-width: 1025px) {
	.vn-sv-row:has(> .vn-sv-card:nth-child(1).is-active) { grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
	.vn-sv-row:has(> .vn-sv-card:nth-child(2).is-active) { grid-template-columns: minmax(0, 1fr) minmax(0, 2.3fr) minmax(0, 1fr) minmax(0, 1fr); }
	.vn-sv-row:has(> .vn-sv-card:nth-child(3).is-active) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2.3fr) minmax(0, 1fr); }
	.vn-sv-row:has(> .vn-sv-card:nth-child(4).is-active) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2.3fr); }
}

/* ---------- Buffet Express (classes vn-bx-*; layout/colours/fonts live in the Elementor classes) ---------- */
.vn-bx-fact { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* day menu: stays in view while scrolling the day's cards; selected day = purple, today = crimson dot */
body .vn-bx-tabs > .vn-bx-menu { position: sticky; top: var(--vn-bx-top, 12px); z-index: 5; scrollbar-width: none; }
.vn-bx-menu::-webkit-scrollbar { display: none; }
.vn-bx-menu .vn-bx-tab { transition: background-color .25s ease, color .25s ease; }
.vn-bx-menu .vn-bx-tab.e--selected,
.vn-bx-menu .vn-bx-tab.e--selected:hover { background-color: var(--villa-plum, #6A0762); color: #FFFFFF; }
body .vn-bx-menu .vn-bx-tab.is-today::after {
	content: "";
	display: block;
	position: absolute;
	top: 7px;
	right: 7px;
	left: auto;
	bottom: auto;
	width: 7px;
	height: 7px;
	opacity: 1;
	border-radius: 50%;
	background: var(--villa-crimson, #D7263D);
}
body .vn-bx-menu .vn-bx-tab.is-today.e--selected::after { background: #FFFFFF; }
/* running number on each dish photo */
.vn-bx-grid { counter-reset: vn-bx; }
.vn-bx-card { counter-increment: vn-bx; }
body .vn-bx-grid .vn-bx-card::before {
	content: counter(vn-bx, decimal-leading-zero);
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 12px;
	left: 12px;
	right: auto;
	bottom: auto;
	width: 34px;
	height: 34px;
	z-index: 2;
	opacity: 1;
	mix-blend-mode: normal;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--villa-plum, #6A0762);
	font: 400 12px/1 'Alfa Slab One', serif;
	box-shadow: 0 4px 12px rgba(23, 28, 54, .12);
}
@media (max-width: 767px) { body .vn-bx-grid .vn-bx-card::before { top: 8px; left: 8px; width: 28px; height: 28px; font-size: 11px; } }
/* cards rise in one after another (again on every day change) */
.vn-bx-tabs.is-armed:not(.is-in) .vn-bx-card { opacity: 0; }
.vn-bx-tabs.is-in .vn-bx-grid > .vn-bx-card { animation: vn-bx-in .7s cubic-bezier(.2, .8, .2, 1) backwards; }
.vn-bx-tabs.is-in .vn-bx-grid > .vn-bx-card:nth-child(2) { animation-delay: .06s; }
.vn-bx-tabs.is-in .vn-bx-grid > .vn-bx-card:nth-child(3) { animation-delay: .12s; }
.vn-bx-tabs.is-in .vn-bx-grid > .vn-bx-card:nth-child(4) { animation-delay: .18s; }
.vn-bx-tabs.is-in .vn-bx-grid > .vn-bx-card:nth-child(5) { animation-delay: .24s; }
.vn-bx-tabs.is-in .vn-bx-grid > .vn-bx-card:nth-child(6) { animation-delay: .30s; }
.vn-bx-tabs.is-in .vn-bx-grid > .vn-bx-card:nth-child(7) { animation-delay: .36s; }
.vn-bx-tabs.is-in .vn-bx-grid > .vn-bx-card:nth-child(n+8) { animation-delay: .42s; }
@keyframes vn-bx-in {
	from { opacity: 0; transform: translateY(26px) scale(.96); filter: blur(6px); }
	to { opacity: 1; transform: none; filter: none; }
}
/* hover (mouse) and press (touch) */
.vn-bx-card { transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease; }
.vn-bx-card .vn-bx-img { transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.vn-bx-card .vn-bx-body { position: relative; z-index: 1; background-color: #FFFFFF; }
@media (hover: hover) {
	.vn-bx-card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px rgba(23, 28, 54, .14); }
	.vn-bx-card:hover .vn-bx-img { transform: scale(1.07); }
}
@media (hover: none) { .vn-bx-card:active { transform: scale(.97); } }

/* ---------- Catering packages (classes vn-cx-*) ---------- */
.vn-cx-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.vn-cx-list li { position: relative; padding-left: 30px; }
.vn-cx-list li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 1px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--villa-lilac-deep, #F4E7F1);
	color: var(--villa-plum, #6A0762);
	font: 700 12px/20px Akshar, sans-serif;
	text-align: center;
}
.vn-cx-card {
	transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease, opacity .9s ease, filter .9s ease;
	transition-delay: var(--vn-d, 0ms);
}
@media (hover: hover) { .vn-cx-card:hover { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(23, 28, 54, .12); } }

/* ---------- Photo gallery (classes vn-gx-*) + lightbox (built by script.js) ---------- */
.vn-gx-grid img {
	cursor: zoom-in;
	transition: transform .6s cubic-bezier(.2, .8, .2, 1), box-shadow .6s ease, opacity .9s ease, filter .9s ease;
}
@media (hover: hover) {
	.vn-gx-grid img:hover { transform: translateY(-4px) scale(1.015); box-shadow: 0 24px 50px rgba(30, 6, 25, .22); filter: saturate(1.08); }
}
@media (hover: none) { .vn-gx-grid img:active { transform: scale(.97); } }
.vn-gx-grid img:focus-visible { outline: 3px solid var(--villa-crimson, #D7263D); outline-offset: 3px; }
.vn-lb {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 84px;
	background: rgba(20, 4, 17, .93);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .35s ease, visibility .35s;
}
.vn-lb.is-open { opacity: 1; visibility: visible; }
.vn-lb-fig {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	max-width: 100%;
	opacity: 0;
	transform: scale(.96);
	transition: opacity .35s ease, transform .5s cubic-bezier(.2, .8, .2, 1);
}
.vn-lb.is-shown .vn-lb-fig { opacity: 1; transform: none; }
.vn-lb-fig img { display: block; max-width: min(1200px, 100%); max-height: calc(100vh - 170px); object-fit: contain; border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.vn-lb-fig figcaption { color: #FFFFFF; font: 600 18px/1.3 Akshar, sans-serif; text-align: center; }
body .vn-lb button {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .35);
	background: rgba(255, 255, 255, .08);
	color: #FFFFFF;
	font: 400 30px/1 Arial, sans-serif;
	cursor: pointer;
	transition: background-color .25s ease, border-color .25s ease;
}
body .vn-lb button:hover, body .vn-lb button:focus-visible { background: var(--villa-crimson, #D7263D); border-color: var(--villa-crimson, #D7263D); }
body .vn-lb .vn-lb-x { top: 18px; right: 18px; }
body .vn-lb .vn-lb-prev { left: 18px; top: 50%; transform: translateY(-50%); }
body .vn-lb .vn-lb-next { right: 18px; top: 50%; transform: translateY(-50%); }
.vn-lb-count { position: absolute; top: 32px; left: 24px; color: rgba(255, 255, 255, .7); font: 600 14px Akshar, sans-serif; letter-spacing: .08em; }
html.vn-lb-lock { overflow: hidden; }
@media (max-width: 767px) {
	.vn-lb { padding: 72px 12px 90px; }
	body .vn-lb .vn-lb-prev, body .vn-lb .vn-lb-next { top: auto; bottom: 22px; transform: none; width: 48px; height: 48px; }
	body .vn-lb .vn-lb-prev { left: calc(50% - 62px); }
	body .vn-lb .vn-lb-next { right: calc(50% - 62px); }
	.vn-lb-fig img { max-height: calc(100vh - 230px); }
}

@media (prefers-reduced-motion: reduce) {
	.vn-bh-hero .vn-bh-bg, .vn-bh-track.is-running, .vn-bh-status.is-open::before { animation: none; }
	.vn-bx-tabs.is-in .vn-bx-grid > .vn-bx-card { animation: none; }
	.vn-lb, .vn-lb-fig, .vn-gx-grid img { transition: none; }
	.vn-sv-row, .vn-sv-card .vn-sv-img, .vn-sv-row.is-ready .vn-sv-text, .vn-sv-row.is-ready .vn-sv-link { transition: none; }
}

/* =====================================================================
   Motion system (classes vn-sx-*). Scroll-driven, so it also runs while scrolling on phones.
   Content is only hidden once the script is running (html.vn-sx-on), never without it.
   ===================================================================== */
.vn-sx-reveal, .vn-sx-stagger > * {
	transition: opacity .9s cubic-bezier(.2, .8, .2, 1), transform .9s cubic-bezier(.2, .8, .2, 1), filter .9s ease;
	transition-delay: var(--vn-d, 0ms);
}
.vn-sx-on .vn-sx-reveal:not(.is-in),
.vn-sx-on .vn-sx-stagger:not(.is-in) > * { opacity: 0; transform: translateY(30px); filter: blur(8px); }

/* Headings rise word by word out of a soft blur */
.vn-sx-words .vn-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.vn-sx-words .vn-w > span {
	display: inline-block;
	transition: transform 1s cubic-bezier(.2, .8, .2, 1), opacity 1s ease, filter 1s ease;
	transition-delay: calc(var(--i, 0) * 55ms);
}
.vn-sx-on .vn-sx-words:not(.is-in) .vn-w > span { transform: translateY(105%); opacity: 0; filter: blur(6px); }

/* Story: the photo frame opens to full width while scrolling (--p = 0 → 1, set by script.js) */
.vn-sx-zoom { clip-path: inset(calc((1 - var(--p, 1)) * 6%) calc((1 - var(--p, 1)) * 8%) round calc((1 - var(--p, 1)) * 44px)); }
.vn-sx-zoom .vn-sx-zoom-img { transform: scale(calc(1.22 - var(--p, 1) * .22)); }

/* Giant dish names moving with the scroll */
.vn-sx-row { display: block; will-change: transform; }
body .vn-sx-words-sec .vn-sx-row-outline { color: transparent; -webkit-text-stroke: 2px var(--villa-plum, #6A0762); }
@media (max-width: 767px) { body .vn-sx-words-sec .vn-sx-row-outline { -webkit-text-stroke-width: 1.4px; } }

/* Stacking cards: the covered card shrinks and dims a little (transform set by script.js) */
.vn-sx-card { transform-origin: 50% 0; will-change: transform; }

/* Cursor spotlight */
.vn-sx-glow::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	transition: opacity .4s ease;
	background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(228, 198, 223, .18), transparent 45%);
}
.vn-sx-glow:hover::before { opacity: 1; }
.vn-sx-glow > * { position: relative; z-index: 1; }
.vn-sx-tilt {
	transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .9s ease, filter .9s ease;
	transition-delay: var(--vn-d, 0ms);
	will-change: transform;
}

/* Magnetic buttons */
.vn-sx-magnet {
	transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .9s ease, filter .9s ease;
	transition-delay: var(--vn-d, 0ms);
}

/* Touch screens: press feedback + the review in the middle of the swipe row is lifted */
@media (hover: none) {
	.vn-sx-magnet:active, .vn-bh-svc:active, .vn-sx-rev-card:active { transform: scale(.97); }
	.vn-sx-rev-grid .vn-sx-rev-card { transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .5s ease, background-color .5s ease; }
	.vn-sx-rev-grid.is-snapping .vn-sx-rev-card:not(.is-center) { transform: scale(.94); opacity: .7; }
	.vn-sx-rev-grid .vn-sx-rev-card.is-center { background-color: rgba(255, 255, 255, .1); }
}

/* Scroll progress line under the top bar */
.vn-sx-progress {
	position: fixed;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 9999;
	transform-origin: 0 50%;
	transform: scaleX(0);
	background: linear-gradient(90deg, var(--villa-crimson, #D7263D), var(--villa-plum, #6A0762));
	pointer-events: none;
}

/* FAQ: smooth open icon */
.vn-sx-faq-item summary { list-style: none; }
.vn-sx-faq-item[open] { border-color: var(--villa-plum, #6A0762); box-shadow: 0 14px 34px rgba(106, 7, 98, .10); }
.vn-sx-faq-item { transition: border-color .3s ease, box-shadow .3s ease; }
/* "+" that turns into "−" when the question is open */
/* (body … prefix: beats Elementor's own container overlay ::before rule) */
body .vn-sx-faq-q .vn-sx-faq-icon::before,
body .vn-sx-faq-q .vn-sx-faq-icon::after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	right: auto;
	bottom: auto;
	width: 12px;
	height: 2px;
	margin: -1px 0 0 -6px;
	opacity: 1;
	mix-blend-mode: normal;
	border-radius: 2px;
	background: var(--villa-plum, #6A0762);
	transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .35s ease;
}
body .vn-sx-faq-q .vn-sx-faq-icon::after { transform: rotate(90deg); }
.vn-sx-faq-item[open] .vn-sx-faq-icon { background-color: var(--villa-plum, #6A0762); }
body .vn-sx-faq-item[open] .vn-sx-faq-q .vn-sx-faq-icon::before,
body .vn-sx-faq-item[open] .vn-sx-faq-q .vn-sx-faq-icon::after { background: #FFFFFF; }
body .vn-sx-faq-item[open] .vn-sx-faq-q .vn-sx-faq-icon::after { transform: rotate(0deg); opacity: 0; }
.vn-sx-faq-icon { transition: background-color .3s ease; }

@media (prefers-reduced-motion: reduce) {
	.vn-sx-reveal, .vn-sx-stagger > *, .vn-sx-words .vn-w > span { transition: none; }
}