/* Through My Lens — landing page (Persona 5-style art board with interactive hotspots) */

:root {
  --red: #c10000;
  --design-w: 1920;
  --design-h: 1242;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  background: #0a0a0a;
  display: grid;
  place-items: start center; /* anchor the art to the top: the page scrolls down to the rest */
  overflow-x: hidden;
  font-family: "Arial Black", Impact, "Segoe UI", Arial, sans-serif;
}

/* The stage fills the full screen width at the natural 1920x1242 design ratio;
   whatever doesn't fit the viewport height is reached by scrolling */
.stage {
  position: relative;
  width: 100vw;
  aspect-ratio: 1920 / 1242;
  overflow: hidden;
  animation: stage-in 0.6s ease-out both;
}

.art, .art svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Red flash on load, Persona 5 style */
.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--red);
  z-index: 10;
  pointer-events: none;
  animation: flash-out 0.55s ease-out both;
}

@keyframes stage-in {
  from { transform: scale(1.05); opacity: 0.4; }
  to   { transform: scale(1);    opacity: 1; }
}

@keyframes flash-out {
  from { opacity: 0.9; }
  to   { opacity: 0; visibility: hidden; }
}

/* ---- Entrance: collage pieces and photos punch in as the flash clears ---- */

/* Masked collage chunks drop in with a slight stagger */
.art svg > g > g[mask] {
  transform-box: fill-box;
  transform-origin: center;
  animation: piece-in 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) 0.12s both;
}
.art svg > g > g[mask]:nth-of-type(3n)   { animation-delay: 0.24s; }
.art svg > g > g[mask]:nth-of-type(3n+1) { animation-delay: 0.36s; }

@keyframes piece-in {
  from { opacity: 0; transform: translateY(16px); }
}

/* Main photo pops in Persona-style */
.art image[href*="mainPIC"] {
  transform-box: fill-box;
  transform-origin: center;
  animation: photo-pop 0.55s cubic-bezier(0.2, 1.6, 0.4, 1) 0.55s both;
}

@keyframes photo-pop {
  from { opacity: 0; transform: scale(0.72) rotate(-4deg); }
}

/* Sneak-peek cards slide in from the right, one after another.
   .third-sneak: script.js swaps the third card's href to a random gallery
   photo, which breaks the href*= match — the class keeps it animated. */
.art image[href*="firstSNEAK"],
.art image[href*="secondSNEAK"],
.art image[href*="thirdSNEAK"],
.art image.third-sneak {
  transform-box: fill-box;
  transform-origin: center;
  animation: card-in 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.art image[href*="firstSNEAK"]  { animation-delay: 0.70s; }
.art image[href*="secondSNEAK"] { animation-delay: 0.82s; }
.art image[href*="thirdSNEAK"],
.art image.third-sneak          { animation-delay: 0.94s; }

@keyframes card-in {
  from { opacity: 0; transform: translateX(80px); }
}

/* ---- Pointing hand ----
   Lives top-left until the first interaction, then stays on the latest target.
   --hx/--hy target the index fingertip in design px;
   transform-origin sits on the fingertip so rotation pivots around it. */
.hand {
  position: absolute;
  width: calc(140.6 * 100% / 1920);
  aspect-ratio: 650 / 881;
  --hx: 330;
  --hy: 46;
  --hr: -18deg;
  --hs: 0.85;
  /* fingertip sits at 48.6% / 2.2% of the artwork box */
  left: calc((var(--hx) - 68.3) * 100% / 1920);
  top:  calc((var(--hy) - 4.2) * 100% / 1242);
  transform: rotate(var(--hr)) scale(var(--hs));
  transform-origin: 48.6% 2.2%;
  will-change: left, top, transform;
  transition: left 0.72s cubic-bezier(0.22, 0.72, 0.18, 1),
              top 0.72s cubic-bezier(0.22, 0.72, 0.18, 1),
              transform 0.58s cubic-bezier(0.22, 0.72, 0.18, 1);
  filter: drop-shadow(4px 6px 0 rgba(0, 0, 0, 0.55));
  pointer-events: none;
  z-index: 1;
}

/* ---- Interactive hotspots ---- */

/* Position/size come from --x/--y/--sw/--sh in 1920x1242 design pixels. */
.spot {
  position: absolute;
  left:   calc(var(--x)  * 100% / var(--design-w));
  top:    calc(var(--y)  * 100% / var(--design-h));
  width:  calc(var(--sw) * 100% / var(--design-w));
  height: calc(var(--sh) * 100% / var(--design-h));
  display: block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.spot:focus,
.spot:focus-visible { outline: none; }

/* ---- "Coming soon" toast, jagged speech-bubble style ---- */

/* Fixed to the viewport so it shows at the bottom of the screen, not the page */
.toast {
  position: fixed;
  left: 50%;
  bottom: 4vh;
  transform: translateX(-50%) rotate(-2deg);
  background: #000;
  color: #fff;
  border: 4px solid #fff;
  box-shadow: 8px 8px 0 var(--red);
  padding: 0.9em 1.6em;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  clip-path: polygon(2% 12%, 98% 0%, 100% 85%, 94% 100%, 4% 96%, 0% 78%);
  z-index: 20;
  pointer-events: none;
  animation: toast-in 0.25s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}

.toast[hidden] { display: none; }

.toast-label {
  display: block;
  font-size: clamp(0.9rem, 1.6vw, 1.4rem);
  color: var(--red);
  -webkit-text-stroke: 0.5px #fff;
}

.toast-sub {
  display: block;
  font-size: clamp(0.7rem, 1.1vw, 1rem);
}

@keyframes toast-in {
  from { transform: translateX(-50%) rotate(-2deg) scale(0.6); opacity: 0; }
  to   { transform: translateX(-50%) rotate(-2deg) scale(1);   opacity: 1; }
}

/* ---- Scroll hint: the socials live below the fold ---- */

.scroll-hint {
  position: fixed;
  right: 22px;
  bottom: 18px;
  z-index: 15;
  background: #000;
  color: #fff;
  border: 3px solid #fff;
  box-shadow: 5px 6px 0 var(--red);
  font-family: inherit;
  font-size: clamp(0.65rem, 1vw, 0.85rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.55em 0.9em;
  cursor: pointer;
  transform: rotate(-2deg);
  animation: hint-in 0.4s cubic-bezier(0.2, 1.6, 0.4, 1) 1.3s both;
  transition: opacity 0.3s ease-out;
}

.scroll-hint[hidden] { display: none; }

.scroll-hint.is-gone {
  opacity: 0;
  pointer-events: none;
}

.scroll-hint-arrow {
  display: inline-block;
  margin-left: 0.6em;
  color: var(--red);
  -webkit-text-stroke: 0.5px #fff;
  animation: arrow-bob 1.2s ease-in-out 1.7s infinite;
}

@keyframes hint-in {
  from { opacity: 0; transform: rotate(-2deg) translateY(30px); }
  to   { opacity: 1; transform: rotate(-2deg) translateY(0); }
}

@keyframes arrow-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

/* ---- Click sparkle (spawned by script.js) ---- */

.spark {
  position: fixed;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  background: var(--red);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  pointer-events: none;
  z-index: 30;
  animation: spark 0.45s ease-out both;
}

@keyframes spark {
  from { transform: scale(0.2) rotate(0deg);   opacity: 1; }
  to   { transform: scale(1.4) rotate(70deg);  opacity: 0; }
}

/* ---- Accessibility ---- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .stage, .stage::before, .toast, .spark,
  .scroll-hint, .scroll-hint-arrow,
  .art svg > g > g[mask], .art image { animation: none; }
  .stage::before { opacity: 0; visibility: hidden; }
  .scroll-hint, .hand { transition: none; }
}

/* ---- Mentions légales / RGPD mini-badge (next to the social icons) ---- */

@font-face {
  font-family: "Bebas Neue";
  src: url("../assets/fonts/BebasNeue.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.spot-ml { transform: rotate(-3deg); }
.spot-ml svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ---- Mobile: the art becomes a poster hero, punk buttons take over ---- */

.mobile-nav { display: none; }

@media (max-width: 700px) {
  /* The desktop grid mis-sizes the stage's row to 0 (aspect-ratio + 100vw
     don't contribute to track sizing), which slides the nav under the art.
     Plain flow does the right thing here. */
  body { display: block; }
  .hand { display: none; }

  .mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: min(100%, 430px);
    margin: 0 auto;
    padding: 26px 22px 46px;
  }

  .mobile-nav a { display: block; }
  .mobile-nav a:focus { outline: none; }
  .mobile-nav a svg { display: block; width: 100%; height: auto; overflow: visible; }
  .mobile-nav a:nth-child(odd)  { transform: rotate(-1.1deg); }
  .mobile-nav a:nth-child(even) { transform: rotate(0.9deg); }
}