/* ============================================================
   MOMENTA - the island from space (Maxime, 20 October 2026)

   The home opens on the Canary Islands seen from a satellite.
   Scrolling flies the camera down to Tenerife; once there, real
   photos of the excursions appear on the map, each where it
   happens. The scene is a
   sticky stage inside a tall track: plain scroll, no library.
   isla.js moves the camera and places everything.
   ============================================================ */

.isla { position: relative; background: #08112A; color: #FFFFFF; font-family: Montserrat, system-ui, sans-serif; }
.isla__pista { position: relative; height: 560vh; }
.isla__escena { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #08112A; }

/* the world is the Canaries image at its own size (2800 x 2000);
   the camera is one transform on it */
.isla__mundo { position: absolute; left: 0; top: 0; width: 2800px; height: 2000px; transform-origin: 0 0; will-change: transform; }
.isla__mundo img { position: absolute; display: block; max-width: none; user-select: none; -webkit-user-drag: none; }
.isla__canarias { left: 0; top: 0; width: 2800px; height: 2000px;
  /* a phone sees sea above and below the photo: its edges melt into the page colour */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(180deg, transparent, #000 5%, #000 95%, transparent); }
.isla__tenerife { opacity: 0;
  /* its sea is a shade lighter than the Canaries one: the edges fade out */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 97%, transparent), linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 5%, #000 97%, transparent), linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent);
  mask-composite: intersect; }

/* the edges melt into the ocean colour, so a narrow phone, which
   sees more sea than the photo has, never shows a hard border */
.isla__vineta { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(8,17,42,0) 55%, rgba(8,17,42,.55) 100%); }

/* labels and photos live on a flat layer above the world, so they
   keep their size while the camera zooms */
.isla__capa { position: absolute; inset: 0; pointer-events: none; }
.isla__nombre { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); white-space: nowrap;
  font-size: 11px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.82);
  text-shadow: 0 1px 8px rgba(0,0,0,.6); transition: opacity .4s; }
.isla__nombre--tf { color: #FBC600; }

/* a photo on the map: a dot where it happens, a thin line and a card */
.isla__pin { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; transition: opacity .35s; }
.isla__pin.on { opacity: 1; pointer-events: auto; }

.isla__punto { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%;
  background: #FBC600; box-shadow: 0 0 0 4px rgba(251,198,0,.28), 0 0 18px rgba(251,198,0,.7); }
.isla__punto::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(251,198,0,.55);
  animation: islaPulso 2.2s ease-out infinite; }
@keyframes islaPulso { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.isla__linea { position: absolute; left: 0; top: 0; height: 1.5px; background: rgba(255,255,255,.8); transform-origin: 0 50%; }
/* the card: a photo and a name, side by side */
.isla__tarjeta { position: absolute; left: 0; top: 0; width: 236px; height: 66px; display: flex; align-items: center; gap: 10px;
  padding: 5px 12px 5px 5px; box-sizing: border-box; text-decoration: none; color: #0F2747; background: #FFFFFF; border-radius: 14px; overflow: hidden;
  box-shadow: 0 14px 34px rgba(0,0,0,.42); transform: scale(.9); opacity: .0; transition: transform .45s cubic-bezier(.2,.8,.25,1.15), opacity .35s; }
.isla__pin.on .isla__tarjeta { transform: none; opacity: 1; }
.isla__tarjeta:hover { transform: scale(1.04) !important; }
.isla__tarjeta:focus-visible { outline: 3px solid #FBC600; outline-offset: 3px; }
.isla__tarjeta img { flex: 0 0 auto; display: block; width: 72px; height: 56px; border-radius: 10px; object-fit: cover; background: #24466E; }
.isla__tarjeta span { min-width: 0; font-size: 13px; font-weight: 800; line-height: 1.2; }
/* a long name keeps to two lines */
.isla__tarjeta b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-weight: 800; }
.isla__tarjeta small { display: block; margin-top: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; color: #0072CE; }

/* the words of each moment */
.isla__texto { position: absolute; left: 0; right: 0; padding: 0 clamp(20px, 4.5vw, 56px); text-align: center; pointer-events: none; }
.isla__texto--1 { top: 50%; transform: translateY(-50%); }
.isla__texto--2 { top: clamp(84px, 13vh, 128px); }
.isla__ceja { margin: 0 0 12px; font-size: 12px; font-weight: 800; letter-spacing: .28em; text-transform: uppercase; color: #A9E0FF; }
.isla__titulo { margin: 0; font-weight: 900; text-transform: uppercase; line-height: 1.02; letter-spacing: .005em;
  font-size: clamp(2.1rem, 6.4vw, 5.2rem); text-shadow: 0 4px 30px rgba(0,0,0,.45); }
.isla__titulo em { font-style: normal; color: #FBC600; }
.isla__sub { margin: 14px auto 0; max-width: 34ch; font-size: clamp(1rem, 1.6vw, 1.2rem); font-weight: 600; line-height: 1.45;
  color: rgba(255,255,255,.9); text-shadow: 0 2px 14px rgba(0,0,0,.55); }
.isla__texto--2 .isla__titulo { font-size: clamp(1.8rem, 4.6vw, 3.6rem); }

.isla__pista-aviso { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.85); transition: opacity .4s; pointer-events: none; }
.isla__pista-aviso i { display: block; width: 2px; height: 30px; background: linear-gradient(#FFFFFF, rgba(255,255,255,0)); animation: islaBaja 1.6s ease-in-out infinite; }
@keyframes islaBaja { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

.isla__credito { position: absolute; right: 12px; bottom: 8px; left: 12px; margin: 0; text-align: right; font-size: 9.5px; line-height: 1.4; font-weight: 600; color: rgba(255,255,255,.55); }
.isla__credito a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.isla__credito a:hover { color: #FFFFFF; }

/* phones (and mobile.html): two rows above the island and two below */
@media (max-width: 839px) {
  .isla__tarjeta { width: calc(50vw - 22px); height: 50px; gap: 7px; padding: 4px 8px 4px 4px; border-radius: 11px; }
  .isla__tarjeta img { width: 52px; height: 42px; border-radius: 8px; }
  .isla__tarjeta span { font-size: 11px; }
  .isla__tarjeta small { display: none; }
  .isla__nombre { font-size: 9px; letter-spacing: .16em; }
  .isla__texto--2 { top: 78px; }
  .isla__texto--2 .isla__sub { display: none; }
  .isla__texto--2 .isla__titulo { font-size: 1.55rem; }
  .isla__credito { text-align: left; font-size: 8px; left: 68px; right: 78px; bottom: 6px; }
}

/* no motion asked: the island is shown already arrived, photos in place */
@media (prefers-reduced-motion: reduce) {
  .isla__pista { height: auto; }
  .isla__escena { position: relative; }
  .isla__punto::after, .isla__pista-aviso i { animation: none; }
  .isla__tarjeta, .isla__pin { transition: none; }
}