/* ==========================================================================
   Japan Gay Guide – UX motion. Everything is scoped to html.jgg-motion, which
   jgg-motion.js only adds when the visitor has NOT asked for reduced motion.
   ========================================================================== */

:root {
	--jgg-ease: cubic-bezier(.22, .61, .36, 1);
	--jgg-pop: cubic-bezier(.34, 1.56, .64, 1);
}

/* 1. (Removed Oct 2026) No fade-in/out of sections while scrolling. */

/* 2. Booking card */
@keyframes jgg-pop { 0% { transform: scale(.82); } 100% { transform: scale(1); } }
html.jgg-motion .jgg-trip .jgg-cal__day.is-selected { animation: jgg-pop .22s var(--jgg-pop); }
html.jgg-motion .jgg-trip .jgg-cal__day.is-available { transition: background-color .15s, border-color .15s, transform .15s; }
html.jgg-motion .jgg-trip .jgg-cal__day.is-available:active { transform: scale(.94); }

@keyframes jgg-bump { 0% { transform: translateY(0); } 35% { transform: translateY(-3px); } 100% { transform: translateY(0); } }
html.jgg-motion .jgg-bump { display: inline-block; animation: jgg-bump .25s var(--jgg-ease); }

/* Book button: arrow slides in on hover; spinner while reserving */
html.jgg-motion .jgg-trip [data-jgg-book]:not(:disabled)::after {
	content: "→";
	display: inline-block;
	width: 0;
	opacity: 0;
	overflow: hidden;
	transform: translateX(-6px);
	transition: width .2s var(--jgg-ease), opacity .2s, transform .2s var(--jgg-ease), margin .2s;
}
html.jgg-motion .jgg-trip [data-jgg-book]:not(:disabled):hover::after { width: 1em; margin-left: 8px; opacity: 1; transform: none; }
@keyframes jgg-spin { to { transform: rotate(360deg); } }
.jgg-trip [data-jgg-book].is-loading::before {
	content: "";
	width: 16px;
	height: 16px;
	margin-right: 10px;
	border: 2px solid rgba(247, 236, 70, .35);
	border-top-color: #f7ec46;
	border-radius: 50% !important;
	animation: jgg-spin .7s linear infinite;
}

/* 3. Itinerary: line draws down, markers pop, opened stop slides in */
html.jgg-motion .jgg-trip .jgg-itinerary::before {
	transform-origin: top;
	transform: scaleY(var(--jgg-line, 1));
	transition: transform .12s linear;
}

/* Open/close: height grows/collapses while the content fades + slides (jgg-trip.js setOpen drives the classes) */
html.jgg-motion .jgg-trip .jgg-stop__body.is-anim,
html.jgg-motion .jgg-trip .jgg-acc__body.is-anim { overflow: hidden; transition: height .25s var(--jgg-ease), padding .25s var(--jgg-ease), opacity .2s ease, transform .25s var(--jgg-ease); }
html.jgg-motion .jgg-trip .jgg-stop__body.is-collapsed,
html.jgg-motion .jgg-trip .jgg-acc__body.is-collapsed { height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; overflow: hidden; opacity: 0; transform: translateY(-6px); }
html.jgg-motion .jgg-trip .jgg-stop__chev { transition: transform .25s var(--jgg-ease); }
/* Itinerary photos: big + slim trade widths when the visitor swipes sideways (jgg-trip.js); same outer shape.
   Quick ease-out: moves the moment you swipe, settles softly (was a slow .9s ease-in-out). */
html.jgg-motion .jgg-trip .jgg-tl__media { transition: grid-template-columns .45s var(--jgg-ease); }
html.jgg-motion .jgg-trip .jgg-tl__head { transition: padding .25s var(--jgg-ease), border-color .25s ease; } /* title row spacing changes with open/close */

/* 4. Gallery and photos */
/* Gentle zoom on hover (mouse only), slow and smooth */
@media (hover: hover) and (pointer: fine) {
	html.jgg-motion .jgg-trip .jgg-gal__item img,
	html.jgg-motion .jgg-trip .jgg-mgal__item img,
	html.jgg-motion .jgg-trip .jgg-hcard__img img,
	html.jgg-motion .jgg-trip .jgg-stay__ph img,
	html.jgg-motion .jgg-trip .jgg-tphotos img,
	html.jgg-motion .jgg-tcard__img img, /* tour cards: tours page + "You might also like" */
	html.jgg-motion .jgg-trip .jgg-tl__photo img,
	html.jgg-motion .jgg-trip .jgg-gcard__img img { transition: transform .7s var(--jgg-ease); will-change: transform; }
	html.jgg-motion .jgg-trip .jgg-gal__item:hover img,
	html.jgg-motion .jgg-trip .jgg-mgal__item:hover img,
	html.jgg-motion .jgg-trip .jgg-hcard:hover .jgg-hcard__img img,
	html.jgg-motion .jgg-trip .jgg-stay:hover .jgg-stay__img img,
	html.jgg-motion .jgg-trip .jgg-tphotos a:hover img,
	html.jgg-motion .jgg-trip .jgg-tphotos button:hover img,
	html.jgg-motion .jgg-tcard:hover .jgg-tcard__img img,
	html.jgg-motion .jgg-trip .jgg-tl__photo:hover img,
	html.jgg-motion .jgg-trip .jgg-gcard:hover .jgg-gcard__img img { transform: scale(1.04); }

	/* Highlight cards lift slightly with a soft shadow */
	html.jgg-motion .jgg-trip .jgg-lcard,
	html.jgg-motion .jgg-trip .jgg-tcard,
	html.jgg-motion .jgg-trip .jgg-gcard__img { transition: transform .3s var(--jgg-ease), box-shadow .3s var(--jgg-ease); }
	html.jgg-motion .jgg-trip .jgg-lcard:hover,
	html.jgg-motion .jgg-trip .jgg-tcard:hover,
	html.jgg-motion .jgg-trip .jgg-gcard:hover .jgg-gcard__img { transform: translateY(-4px); box-shadow: 0 14px 28px -16px rgba(0,0,0,.35); }
}

/* Photo viewer: fades + scales in, each new photo eases in, fades out on close */
@keyframes jgg-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes jgg-zoom-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes jgg-swap { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
html.jgg-motion .jgg-lightbox:not([hidden]) { animation: jgg-fade .25s ease-out; transition: opacity .2s ease-in; }
html.jgg-motion .jgg-lightbox:not([hidden]) img { animation: jgg-zoom-in .32s var(--jgg-ease); }
html.jgg-motion .jgg-lightbox img.is-swap { animation: jgg-swap .28s var(--jgg-ease); }
html.jgg-motion .jgg-lightbox.is-closing { opacity: 0; }
html.jgg-motion .jgg-lightbox.is-closing img { transform: scale(.97); transition: transform .2s ease-in; }

/* 5. Sticky tabs: a single sliding underline */
/* Sticky tabs: column-wide → full-width bar, driven by the scroll position in jgg-trip.js */
html.jgg-motion .jgg-trip .jgg-tabs.is-col,
html.jgg-motion .jgg-trip .jgg-tabs.is-full { transition: left .12s linear, width .12s linear, padding .12s linear; } /* bar grows with the scroll (jgg-trip.js); smooths wheel steps */
.jgg-tabs__links.has-ink { position: relative; }
html.jgg-motion .jgg-tabs__links.has-ink a::after { display: none; }
.jgg-tabs__ink {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 3px;
	width: 0;
	background: #111;
	pointer-events: none;
	transition: transform .25s var(--jgg-ease), width .25s var(--jgg-ease), opacity .2s;
}


/* 7. Small delights */
/* (Removed Oct 2026) Star boxes no longer fill in with an animation; rainbow shimmer went with the scroll reveal. */
/* Currency switch: prices fade in */
/* Currency switch: old prices fade out quickly, new ones fade in */
html.jgg-cur-out [data-jgg-price],
html.jgg-cur-out .actual-price,
html.jgg-cur-out .wpte-price { opacity: 0; transition: opacity .12s ease-in; }
html.jgg-cur-fade [data-jgg-price],
html.jgg-cur-fade .actual-price,
html.jgg-cur-fade .wpte-price { animation: jgg-fade .25s ease-out; }

/* Safety net: no motion at all for reduced-motion visitors */
@media (prefers-reduced-motion: reduce) {
	html.jgg-motion *, html.jgg-motion *::before, html.jgg-motion *::after {
		animation: none !important;
		transition: none !important;
	}
}