/* Toppen på startsidan: intro med loggan, betyget, rubriken och tre bilder i guldram.
   Utan JS (eller med "minska rörelse") ligger toppen och raden med klippningar bara efter varandra.
   Med JS (.show-on) står toppen still en stund när man scrollar, och bilderna ordnar sig till raden. */

.show { position: relative; }
.show-anchor { position: absolute; left: 0; top: 0; }
.show-pin { position: relative; }
.show-bg { display: none; }

.show-hero {
  position: relative; z-index: 2;
  min-height: calc(100svh - var(--header-h));
  display: grid; align-content: center; gap: clamp(20px, 3.5svh, 34px);
  padding: clamp(24px, 4svh, 42px) var(--gutter) 56px;
  text-align: center;
  background: radial-gradient(ellipse 80% 55% at 50% 42%, #2a231d 0%, #0d0b09 70%, #000 100%);
}
.gal-title { font-weight: 500; font-size: clamp(42px, min(11vw, 8svh), 96px); line-height: .95; letter-spacing: -.045em; color: var(--cream); }
.gal-title .gold { color: #f0dcae; }

.rate-top { display: grid; justify-items: center; gap: 6px; font-size: 15px; color: #d9cdb9; }
.rate-top .stars { color: #f0dcae; font-size: 18px; letter-spacing: .2em; }
.rate-top strong { color: var(--cream); font-weight: 600; }

.gal-meta { position: relative; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; }
.gal-meta .textlink { color: var(--cream); font-size: 16px; }

.show-reel { position: relative; background: var(--espresso); color: var(--cream); padding-block: clamp(56px, 9vw, 110px); }

/* Scenen med de tre bilderna */
.stage { position: relative; height: min(clamp(300px, 78vw, 520px), calc(100svh - 480px)); min-height: 280px; max-width: 760px; width: 100%; margin: 0 auto; }
.frame {
  position: absolute; top: 50%; left: 50%; margin: 0; padding: 4px; border-radius: 22px;
  background: linear-gradient(145deg, #f8e8c2 0%, #b8955a 30%, #f0dcae 55%, #8c6a37 80%, #e9d19c 100%);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 1), 0 0 30px -12px rgba(240, 220, 174, .45);
  opacity: 0; transition: transform 1.2s cubic-bezier(.2, .8, .2, 1), opacity 1s;
  backface-visibility: hidden;
}
.frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; border-radius: 18px; border: 3px solid #17130f; }
.f1 { height: 100%; aspect-ratio: 3 / 4; z-index: 3; transform: translate(-50%, -40%) scale(.9); }
.f2, .f3 { height: 68%; aspect-ratio: 3 / 4; z-index: 2; transform: translate(-50%, -50%); }
.ready .f1 { opacity: 1; transform: translate(-50%, -50%); }
.ready .f2 { opacity: 1; transform: translate(-118%, -44%) rotate(-7deg); transition-delay: .25s; }
.ready .f3 { opacity: 1; transform: translate(18%, -44%) rotate(7deg); transition-delay: .35s; }
html:not(.js) .frame { opacity: 1; }

/* ---- Med JS: toppen står still medan bilderna ordnar sig ---- */
.show-on .show { height: calc(100svh - var(--header-h) + var(--travel, 90svh) + var(--hold, 25svh)); }
.show-on .show-anchor { top: var(--travel, 90svh); }
.show-on .show-pin {
  position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h));
  overflow: hidden; background: radial-gradient(ellipse 80% 55% at 50% 42%, #2a231d 0%, #0d0b09 70%, #000 100%);
}
.show-on .show-bg { display: block; position: absolute; inset: 0; background: var(--espresso); opacity: 0; }
.show-on .show-hero { position: absolute; inset: 0; min-height: 0; background: none; z-index: 2; }
.show-on .show-reel {
  position: absolute; inset: 0; z-index: 1; background: none; padding-block: 0;
  display: grid; align-content: center;
}
.show-on .show-hero > :not(.stage), .show-on .show-reel .section-head, .show-on .show-reel .reel, .show-on .show-reel .reel-note { will-change: opacity, transform; }
/* Raden och rubriken styrs av scrollen, inte av de vanliga in-animationerna */
.show-on .show-reel .reveal { transition: none; }
.show-on .show-reel .section-head > *, .show-on .show-reel .reel { opacity: 1; transform: none; }
.show-on .show-reel .section-head, .show-on .show-reel .reel-note, .show-on .show-reel .reel:not([style]) { opacity: 0; }
.show-on .frame { will-change: transform; }
.flight .frame { transition: none; }
.landed .frame { visibility: hidden; }
.landed .show-hero { pointer-events: none; }
.cards-flying .reel figure.is-target { visibility: hidden; }
.cards-flying .show-reel { pointer-events: none; }
/* Avsnittet efter fick tidigare luft från raden ovanför */
.show + .section { padding-top: 8px !important; }

/* Intro: loggan glänser fram och ridån dras upp. Visas varje gång sidan laddas. */
#intro { position: fixed; inset: 0; z-index: 90; background: #000; display: grid; place-items: center; transition: transform 1s cubic-bezier(.76, 0, .24, 1); }
#intro.done { transform: translateY(-100%); }
#intro .mark { display: grid; justify-items: center; gap: 18px; }
#intro img { width: min(62vw, 300px); height: auto; opacity: 0; filter: drop-shadow(0 0 18px rgba(240, 220, 174, .35)); animation: logo-in 1.4s cubic-bezier(.2, .8, .2, 1) .2s forwards; }
#intro .line { width: min(70vw, 340px); height: 1px; background: linear-gradient(90deg, transparent, #f0dcae, transparent); transform: scaleX(0); animation: intro-line 1.2s cubic-bezier(.2, .8, .2, 1) .7s forwards; }
@keyframes logo-in { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes intro-line { to { transform: scaleX(1); } }
html:not(.js) #intro { display: none; }
/* Medan övergången spelas står sidan still (stoppar också fart som blir kvar efter ett svep i mobilen) */
.show-lock { overflow: hidden; overscroll-behavior: none; }
/* "clip" i stället för "hidden" så att låset ovan inte gör body till en egen scrollruta (då slutar menyn att sitta fast) */
.show-on body { overflow-x: clip; }