/* peak: TUNNEL. A scroll-driven fly-through of Peak's own products that lands in the menu (js/tunnel.js).
   Adapted from the 21st.dev "perspective-tunnel-hero": same golden-angle spiral and depth maths, but native scroll
   (a GSAP pin, no wheel hijack), Peak colours and bilingual copy. Transform / opacity only while it moves.
   Without JS, without GSAP or with reduced motion the section is a neat static grid (no .is-live class). */

.tunnel {
  --tn-cw: clamp(130px, 38vw, 180px);   /* card width: phones */
  position: relative;
  overflow-x: clip;
  background: #BDBFBC;                   /* = the stage's bottom colour, so the pin spacer never shows a seam */
  scroll-margin-top: 0;
}
@media (min-width: 768px) { .tunnel { --tn-cw: clamp(180px, 18vw, 270px); } }

/* ---------- stage ---------- */
.tunnel__stage {
  position: relative; isolation: isolate;
  padding: 112px var(--gutter) 96px;
  /* top = the mist the crumble band hands over; bottom = a deeper heather, where the wavy mist edge of the menu rises */
  background:
    radial-gradient(ellipse 58% 46% at 50% 50%, rgb(255 255 255 / .55), transparent 100%),
    linear-gradient(to bottom, var(--mist) 0%, var(--mist-2) 38%, #BDBFBC 100%);
}

/* backdrop: pink-tinted dot grid + two dashed heather ring guides */
.tunnel__bg { position: absolute; inset: 0; z-index: 0; overflow: clip; pointer-events: none; }
.tunnel__dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgb(229 131 170 / .7) 1.6px, transparent 2.1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 72% 62% at 50% 50%, #000 0%, transparent 78%);
          mask-image: radial-gradient(ellipse 72% 62% at 50% 50%, #000 0%, transparent 78%);
}
.tunnel__ring {
  position: absolute; left: 50%; top: 50%; aspect-ratio: 1; border-radius: 50%;
  border: 1.5px dashed rgb(100 103 101 / .62);
  transform: translate(-50%, -50%);
}
.tunnel__ring--a { width: min(58vw, 58vh); }
.tunnel__ring--b { width: min(92vw, 92vh); border-color: rgb(100 103 101 / .42); }

/* ---------- centre copy ---------- */
.tunnel__copy {
  position: relative; z-index: 3; display: grid; justify-items: center; gap: 14px; text-align: center;
  max-width: 760px; margin-inline: auto;
}
.tunnel__kicker {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--fs-label, .75rem); font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.tunnel__kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pink); flex: none; }
:lang(ar) .tunnel__kicker { font-size: .8125rem; letter-spacing: 0; }
.tunnel__title {
  font-size: clamp(2.5rem, 1.25rem + 5.2vw, 5.75rem); font-weight: 600; line-height: .96; letter-spacing: -.035em;
  max-width: 11ch; text-wrap: balance;
}
:lang(ar) .tunnel__title { line-height: 1.22; letter-spacing: 0; max-width: 13ch; }
.tunnel__sub { max-width: 30ch; font-size: clamp(.9375rem, .86rem + .35vw, 1.125rem); line-height: 1.5; color: rgb(43 43 46 / .86); }
:lang(ar) .tunnel__sub { line-height: 1.7; }
/* the copy flies over the photos: a soft mist halo keeps it readable on any card */
.tunnel__kicker, .tunnel__title, .tunnel__sub {
  text-shadow: 0 0 14px rgb(233 234 232 / .95), 0 0 34px rgb(233 234 232 / .85), 0 0 60px rgb(233 234 232 / .6);
}

/* ---------- cards ---------- */
.tunnel__cards { margin: 0; padding: 0; list-style: none; }
.tcard { list-style: none; }
.tcard__btn {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; padding: 0; border: 0;
  border-radius: clamp(14px, 1.7vw, 22px); overflow: hidden; background: var(--slate); color: #fff;
  font: inherit; text-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 0 0 2px rgb(255 255 255 / .85), 0 26px 44px -18px rgb(43 43 46 / .5);
  transition: box-shadow .35s var(--ease);
}
.tcard__btn:hover, .tcard__btn:focus-visible { box-shadow: 0 0 0 3px var(--pink), 0 26px 44px -16px rgb(229 131 170 / .55); }
.tcard__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.tcard__btn img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease);
}
.tcard__btn:hover img, .tcard__btn:focus-visible img { transform: scale(1.07); }
.tcard__cap {
  position: absolute; inset-inline: 0; bottom: 0; display: grid; justify-items: start; gap: 6px;
  padding: 34px clamp(9px, 1.3vw, 14px) clamp(9px, 1.3vw, 14px);
  background: linear-gradient(to top, rgb(43 43 46 / .88) 0%, rgb(43 43 46 / .5) 55%, transparent 100%);
}
.tcard__name { font-size: clamp(.75rem, .68rem + .3vw, .9375rem); font-weight: 600; line-height: 1.2; text-wrap: balance; }
:lang(ar) .tcard__name { line-height: 1.4; }
.tcard__price {
  padding: 2px 9px; border-radius: 999px; background: var(--pink); color: var(--ink);
  font-size: clamp(.6875rem, .64rem + .2vw, .8125rem); font-weight: 600; line-height: 1.5; white-space: nowrap;
}

/* ---------- static mode (default): a tidy grid under the title ---------- */
.tunnel__copy { margin-bottom: 40px; }
.tunnel__cards {
  position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
  width: 100%; max-width: 1120px; margin-inline: auto;
}
.tunnel:not(.is-live) .tunnel__stage { display: flex; flex-direction: column; }
.tunnel:not(.is-live) .tunnel__copy { order: -1; }
.tunnel:not(.is-live) .tcard:nth-child(n+13) { display: none; }  /* 12 fills the 2, 3 and 4 column grids evenly */
.tunnel:not(.is-live) .tcard:nth-child(odd) .tcard__btn { rotate: -1.4deg; }
.tunnel:not(.is-live) .tcard:nth-child(even) .tcard__btn { rotate: 1.4deg; }
.tunnel:not(.is-live) .tcard:nth-child(even) { margin-top: 12px; }
.tunnel:not(.is-live) .tunnel__hint { display: none; }
@media (min-width: 768px) { .tunnel__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1100px) { .tunnel__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }

/* ---------- live mode (JS adds .is-live): pinned 100svh stage, cards fly through 3D space ---------- */
.tunnel.is-live .tunnel__stage {
  height: 100vh; height: 100svh; min-height: 560px; padding: 0; overflow: clip;
  perspective: 900px; perspective-origin: 50% 50%;   /* on the stage (not the list), so the title can sit at its own depth between the cards */
}
.tunnel.is-live .tunnel__bg { will-change: auto; }
/* display: contents makes each card a direct child of the stage, which is what the stage's perspective projects (role=list in the HTML keeps the list semantics) */
.tunnel.is-live .tunnel__cards { display: contents; }
.tunnel.is-live .tcard {
  position: absolute; left: 50%; top: 50%; width: var(--tn-cw);
  margin: calc(var(--tn-cw) * -.625) 0 0 calc(var(--tn-cw) * -.5);
  opacity: 0; visibility: hidden; pointer-events: none;
  backface-visibility: hidden;
}
.tunnel.is-live.is-near .tcard { will-change: transform, opacity; }
@media (min-width: 768px) { .tunnel.is-live .tunnel__stage { perspective: 1200px; } }
.tunnel.is-live .tunnel__copy {
  position: absolute; inset: 0; z-index: 60; margin: 0; max-width: none; align-content: center;   /* cards nearer than ~60% of their flight pass in front of it */
  padding: 96px var(--gutter) 72px; pointer-events: none;
}
.tunnel.is-live.is-near .tunnel__copy { will-change: transform, opacity; }

/* "scroll" cue: a small mouse that fades out as the journey starts */
.tunnel__hint {
  position: absolute; z-index: 3; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  width: 22px; height: 36px; margin-left: -11px; border: 2px solid rgb(43 43 46 / .55); border-radius: 12px;
  pointer-events: none;
}
.tunnel__hint::after {
  content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--pink-deep);
  animation: tn-wheel 1.7s var(--ease) infinite;
}
@keyframes tn-wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(11px); opacity: 0; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .tunnel__hint::after { animation: none; }
  .tcard__btn, .tcard__btn img { transition: none; }
}