/* =====================================================================
   Opening of the Trullo, dark luxury and alive: the evening photos slowly move and dissolve into each other,
   the name writes itself in gold, three strong points below (like the Casa La Playa page on pilella.it),
   then the dates. The walk through the house lives on its own page (tour.html), offered by a pop-up.
   ===================================================================== */
.h2 { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: #020e24; isolation: isolate; }
.h2-slides { position: absolute; inset: 0; }
.h2-slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.14); transition: opacity 1.9s cubic-bezier(.4, 0, .2, 1); will-change: transform, opacity; }
.h2-slides img.on { opacity: 1; animation: h2Drift var(--dur, 8s) linear forwards; }
@keyframes h2Drift { from { transform: scale(1.14) translate3d(var(--x1, 0), var(--y1, 0), 0); } to { transform: scale(1.04) translate3d(var(--x2, 0), var(--y2, 0), 0); } }
/* darkness where the words sit, warm light where the photo breathes */
.h2-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 70% at 50% 46%, rgba(3, 12, 30, .18), rgba(3, 12, 30, .62) 70%, rgba(3, 12, 30, .9)),
              linear-gradient(180deg, rgba(3, 12, 30, .7) 0%, rgba(3, 12, 30, 0) 26%, rgba(3, 12, 30, 0) 58%, rgba(3, 12, 30, .92) 100%); }
/* a slow golden sheen crossing the picture */
.h2-sheen { position: absolute; inset: -20%; z-index: 1; pointer-events: none; mix-blend-mode: soft-light; opacity: .55;
  background: linear-gradient(115deg, transparent 38%, rgba(127, 231, 214, .55) 50%, transparent 62%); transform: translateX(-60%); animation: h2Sheen 11s cubic-bezier(.4, 0, .2, 1) 1.6s infinite; }
@keyframes h2Sheen { 0% { transform: translateX(-60%); } 55%, 100% { transform: translateX(60%); } }
/* golden dust in the warm air */
.h2-dust { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.h2-dust i { position: absolute; bottom: -10px; width: var(--s, 3px); height: var(--s, 3px); border-radius: 50%; background: radial-gradient(circle, rgba(127, 231, 214, .95), rgba(127, 231, 214, 0) 70%);
  left: var(--l); opacity: 0; animation: h2Dust var(--t, 14s) linear var(--d, 0s) infinite; }
@keyframes h2Dust { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 12% { opacity: .9; } 80% { opacity: .5; } 100% { transform: translate3d(var(--dx, 30px), -78vh, 0); opacity: 0; } }

.h2-in { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; align-content: center; gap: 0; padding: 120px var(--gut) 150px; text-align: center; will-change: transform, opacity; }
.h2-over { margin: 0 0 14px; font: 500 12px/1 var(--sans); letter-spacing: .42em; text-transform: uppercase; color: var(--gold); opacity: 0; transform: translateY(10px); transition: opacity 1s var(--ease) .2s, transform 1s var(--ease) .2s; }
.h2-title { margin: 0; font: 700 clamp(64px, 11vw, 150px)/.95 var(--serif); letter-spacing: 0; color: #bff3ea;
  text-shadow: 0 10px 40px rgba(1, 8, 22, .6), 0 0 0 rgba(127, 231, 214, 0); animation: h2Gold 6s ease-in-out 2.8s infinite; }
@keyframes h2Gold { 0%, 100% { text-shadow: 0 10px 40px rgba(1, 8, 22, .6), 0 0 0 rgba(127, 231, 214, 0); } 50% { text-shadow: 0 10px 40px rgba(1, 8, 22, .6), 0 0 28px rgba(127, 231, 214, .38); } }
.h2-title .sr { font-size: 16px; }
.h2-title .ch { display: inline-block; opacity: 0; transform: translateY(.35em) scale(.96); filter: blur(12px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease); transition-delay: calc(.45s + var(--i) * .055s); }
.h2-rule { width: 0; height: 1px; margin: 22px auto 18px; background: linear-gradient(90deg, transparent, var(--gold), transparent); transition: width 1.4s var(--ease) 1.3s; }
.h2-sub { margin: 0; max-width: 34ch; font: 300 clamp(16px, 1.6vw, 19px)/1.55 var(--sans); color: rgba(232, 246, 255, .86); text-shadow: 0 2px 20px rgba(1, 8, 22, .8); opacity: 0; transform: translateY(12px); transition: opacity 1s var(--ease) 1.5s, transform 1s var(--ease) 1.5s; }
.h2-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; opacity: 0; transform: translateY(12px); transition: opacity 1s var(--ease) 1.75s, transform 1s var(--ease) 1.75s; }
.h2.ready .h2-over, .h2.ready .h2-sub, .h2.ready .h2-cta { opacity: 1; transform: none; }
.h2.ready .h2-title .ch { opacity: 1; transform: none; filter: none; }
.h2.ready .h2-rule { width: min(220px, 40vw); }

/* the name of the place on screen, with its own progress line */
.h2-where { position: absolute; z-index: 2; left: var(--gut); bottom: 30px; display: grid; gap: 8px; min-width: 170px; opacity: 0; transition: opacity 1s var(--ease) 2.2s; }
.h2.ready .h2-where { opacity: 1; }
.h2-where p { margin: 0; white-space: nowrap; font: 400 11px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: rgba(232, 246, 255, .8); transition: opacity .6s; }
.h2-where p.out { opacity: 0; }
.h2-where i { display: block; height: 1px; background: rgba(127, 231, 214, .2); overflow: hidden; }
.h2-where i b { display: block; height: 100%; width: 100%; background: var(--gold); transform-origin: left; transform: scaleX(0); }
.h2-down { position: absolute; z-index: 2; left: 50%; bottom: 22px; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; color: rgba(232, 246, 255, .7); font: 400 10px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; text-decoration: none; opacity: 0; transition: opacity 1s var(--ease) 2.4s; }
.h2.ready .h2-down { opacity: 1; }
.h2-down i { display: block; width: 1px; height: 44px; background: linear-gradient(var(--gold), transparent); animation: drip 2.2s var(--ease) infinite; transform-origin: top; }

/* the three strong points, as on the Casa La Playa page, in dark glass */
.h2-band { position: relative; z-index: 3; margin-top: -1px; padding: 26px var(--gut); background: linear-gradient(180deg, #051733, #071d42); border-top: 1px solid rgba(127, 231, 214, .14); border-bottom: 1px solid rgba(127, 231, 214, .08); }
.h2-band-in { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: clamp(16px, 4vw, 54px); flex-wrap: wrap; }
.h2-band ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px clamp(20px, 4vw, 52px); margin: 0; padding: 0; list-style: none; }
.h2-band li { display: flex; align-items: center; gap: 12px; font: 400 16px/1.3 var(--sans); color: var(--ink); opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i) * .12s); }
.h2-band li svg { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: 50%; color: var(--gold-hi); background: radial-gradient(circle at 50% 35%, rgba(127, 231, 214, .16), rgba(127, 231, 214, .03)); box-shadow: inset 0 0 0 1px rgba(127, 231, 214, .3); }
.h2-band.in li { opacity: 1; transform: none; }

/* the dates, right under the opening */
.h2-dates { padding: clamp(60px, 9vw, 110px) var(--gut) clamp(40px, 6vw, 70px); display: grid; justify-items: center; text-align: center; gap: 10px; }
.h2-dates h2 { font-size: clamp(36px, 4.4vw, 56px); }
.h2-dates > p { margin: 0 0 18px; max-width: 46ch; color: rgba(232, 246, 255, .72); }
.h2-dates .cal { box-shadow: 18px 18px 50px rgba(1, 8, 22, .55), inset 0 1px 0 rgba(232, 246, 255, .07), inset 0 0 0 1px rgba(127, 231, 214, .08); background: linear-gradient(145deg, rgba(11, 38, 82, .92), rgba(5, 21, 48, .86)); }

/* the invitation to the tour: right after the opening it fades in, a photo with a play button and a few words */
.tour-pop { position: fixed; z-index: 80; right: 24px; bottom: 24px; width: min(340px, calc(100vw - 2 * var(--gut))); border-radius: 24px; overflow: hidden;
  background: linear-gradient(150deg, #0b2856, #051733);
  box-shadow: 0 30px 80px rgba(1, 8, 22, .65), inset 0 0 0 1px rgba(127, 231, 214, .16);
  opacity: 0; visibility: hidden; transform: translateY(24px) scale(.98); filter: blur(6px); transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease), visibility 0s .8s; }
.tour-pop.on { opacity: 1; visibility: visible; transform: none; filter: none; transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease); }
.tour-pop-pic { position: relative; display: block; height: 132px; overflow: hidden; }
.tour-pop-pic img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); animation: h2Drift 9s ease-in-out infinite alternate; --x1: -2%; --x2: 2%; }
.tour-pop-pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 21, 48, 0) 40%, rgba(8, 30, 66, .95)); }
.tour-pop-play { position: absolute; z-index: 1; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; display: grid; place-items: center; color: #03204a;
  background: linear-gradient(160deg, var(--gold-hi), var(--gold)); box-shadow: 0 10px 30px rgba(1, 8, 22, .5); }
.tour-pop-play::before, .tour-pop-play::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(127, 231, 214, .7); animation: popRing 2.6s cubic-bezier(.2, .6, .3, 1) infinite; }
.tour-pop-play::after { animation-delay: 1.3s; }
@keyframes popRing { from { transform: scale(1); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
.tour-pop-play svg { width: 18px; height: 18px; margin-left: 3px; }
.tour-pop-body { padding: 2px 22px 20px; }
.tour-pop-body .over { margin: 0 0 7px; }
.tour-pop-body h3 { margin: 0 0 7px; font-size: 27px; }
.tour-pop-body p:not(.over) { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: rgba(232, 246, 255, .78); }
.tour-pop-act { display: flex; gap: 10px; align-items: center; }
.tour-pop-x { position: absolute; z-index: 2; top: 10px; right: 10px; width: 32px; height: 32px; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(5, 21, 48, .6); color: var(--ink); cursor: pointer; }
.tour-pop-later { border: 0; background: none; color: rgba(232, 246, 255, .7); font: 400 14px/1 var(--sans); padding: 10px 6px; cursor: pointer; }
/* once closed, a small golden pill stays at hand */
.tour-pill { position: fixed; z-index: 79; right: 24px; bottom: 24px; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px 0 8px; border-radius: 999px; text-decoration: none;
  background: rgba(6, 26, 58, .88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 14px 40px rgba(1, 8, 22, .5), inset 0 0 0 1px rgba(127, 231, 214, .3);
  color: var(--gold-hi); font: 500 13.5px/1 var(--sans); letter-spacing: .03em; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease), visibility 0s .6s; }
.tour-pill.on { opacity: 1; visibility: visible; transform: none; transition: opacity .6s var(--ease) .3s, transform .6s var(--ease) .3s; }
.tour-pill span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #03204a; background: linear-gradient(160deg, var(--gold-hi), var(--gold)); }
.tour-pill svg { width: 12px; height: 12px; margin-left: 2px; }

@media (max-width: 759px) {
  .h2-in { padding: 110px var(--gut) 160px; }
  .h2-where { bottom: 84px; left: 50%; transform: translateX(-50%); justify-items: center; text-align: center; }
  .h2-band { padding: 22px var(--gut); }
  .h2-band ul { flex-direction: column; align-items: flex-start; gap: 14px; }
  .tour-pop { right: auto; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); width: min(320px, calc(100vw - 2 * var(--gut))); transform: translate(-50%, 24px) scale(.98); }
  .tour-pop.on { transform: translateX(-50%); }
  .tour-pop-pic { height: 104px; }
  .tour-pop-body { padding: 0 18px 16px; }
  .tour-pop-body h3 { font-size: 24px; }
  .tour-pop-body p:not(.over) { font-size: 13px; margin-bottom: 13px; }
  .tour-pill { right: auto; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translate(-50%, 16px); }
  .tour-pill.on { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .h2-slides img.on, .h2-sheen, .h2-dust i, .h2-title, .tour-pop-pic img, .tour-pop-play::before, .tour-pop-play::after { animation: none; }
}

/* tour page: only the walk, then a way back */
.tour-page main > section:not(#tour):not(.tour-end), .tour-page .footer { display: none !important; }
.tour-end { padding: 70px var(--gut) 90px; display: grid; justify-items: center; gap: 14px; text-align: center; }
.tour-end h2 { font-size: clamp(34px, 4vw, 50px); }
.tour-end p { margin: 0 0 10px; color: rgba(232, 246, 255, .72); }
.tour-end div { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* Casa La Playa: the photos are much brighter than the Trullo's, so the veil is a little deeper and the small label lighter */
.h2-shade { background: radial-gradient(120% 70% at 50% 46%, rgba(3, 12, 30, .4), rgba(3, 12, 30, .7) 70%, rgba(3, 12, 30, .92)),
  linear-gradient(180deg, rgba(3, 12, 30, .72) 0%, rgba(3, 12, 30, .12) 26%, rgba(3, 12, 30, .12) 58%, rgba(3, 12, 30, .94) 100%); }
.h2-over { color: #7fe7d6; text-shadow: 0 2px 14px rgba(1, 8, 22, .85); }