/* penmark.hu: the front page (/), one full-screen cover. Loaded after site.css (tokens, the
   wordmark) and map.css (the golden-hour light, the Hungary map, the page transition). The
   photograph sits behind everything; home.js adds the pointer parallax and, where the browser
   has no view transitions, a short exit towards /approach. Motion stops for
   prefers-reduced-motion. */

body.cover-page { background: var(--night); color: var(--cover-ink); }

.cover {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 100vh;
  height: 100svh;
  min-height: 600px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
}
.cover :focus-visible { outline-color: var(--focus-on-dark); }

/* ── the picture: photograph and shading ───────────────────────────────── */

.cover-bg,
.cover-shade { position: absolute; inset: 0; pointer-events: none; }

.cover-bg {
  z-index: -3;
  inset: -3%;                             /* room for the parallax to move without showing an edge */
  background:
    radial-gradient(55% 40% at 50% 56%, rgba(242, 194, 123, 0.18), transparent 72%),
    radial-gradient(70% 45% at 50% 100%, rgba(120, 86, 40, 0.35), transparent 70%),
    linear-gradient(180deg, #081222 0%, #13233A 34%, #2A2B2E 58%, #16171A 76%, #06080C 100%);
  transform: translate3d(calc(var(--px, 0) * -16px), calc(var(--py, 0) * -10px), 0) scale(1.02);
  transition: transform 1.4s cubic-bezier(.2, .7, .2, 1);
}
.cover-bg picture { display: block; width: 100%; height: 100%; }
.cover-bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; transition: opacity .9s ease; }
/* home.js holds a photograph that is still on its way, so it fades in instead of popping in.
   Hiding is instant; only the reveal is a transition. */
.photo-pending .cover-bg img { opacity: 0; transition: none; }

.cover-shade {
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(4, 9, 18, 0.82) 0%, rgba(4, 9, 18, 0.3) 28%, rgba(4, 9, 18, 0.06) 48%,
                    rgba(4, 9, 18, 0.38) 70%, rgba(4, 9, 18, 0.7) 86%, rgba(4, 9, 18, 0.92) 100%),
    radial-gradient(130% 95% at 50% 45%, transparent 55%, rgba(3, 7, 14, 0.6) 100%);
}

/* ── header: the wordmark and one small way to talk ────────────────────── */

/* The same box as /approach's header (.wrap, 70px high), so the wordmark sits in exactly the
   same place on both pages and stays still during the slide between them. */
.cover-header {
  width: 100%;
  max-width: 1276px;
  height: 70px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
/* The wordmark as the site sets it on dark ground (the footer): white, with the light-blue dot. */
.cover .wordmark,
.cover .wordmark:hover { color: #fff; }
.cover .wordmark span { color: var(--highlight); }
.cover .wordmark { view-transition-name: pm-wordmark; }

.cover-contact {
  font-size: 14px;
  font-weight: 500;
  color: var(--cover-ink);
  text-decoration: none;
  padding: 10px 16px;
  border: 1px solid rgba(246, 243, 238, 0.42);
  border-radius: 2px;
  transition: background .2s ease, border-color .2s ease;
}
.cover-contact:hover { color: #fff; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.85); }

/* ── the composition: headline, map, sectors, the one button ───────────── */

.cover-body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(220px, 1fr) auto auto;
  justify-items: center;
  align-items: center;
  gap: clamp(8px, 1.6vh, 22px);
  padding: clamp(6px, 2vh, 28px) var(--gutter) clamp(10px, 2vh, 24px);
  text-align: center;
}

.cover-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 400;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}
.t-country {
  font-size: clamp(52px, 6.4vw, 112px);
  line-height: 0.96;
  font-weight: 700;
  letter-spacing: -0.045em;
}
.t-dot { color: var(--glow); }
/* What Penmark is, under the country: it has to say so to a visitor who arrives without an
   introduction (a forwarded link), so it is a sentence, set smaller than a slogan would be. */
.t-invite {
  max-width: 26em;
  margin-top: clamp(8px, 1.2vh, 14px);
  font-size: clamp(20px, 2.3vw, 38px);
  line-height: 1.2;
  font-weight: 300;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* The map's box is its row; the drawing scales inside it and stays centred. */
.cover-map { position: relative; width: 100%; height: 100%; min-height: 0; }
.cover .hu-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: translate3d(calc(var(--px, 0) * 8px), calc(var(--py, 0) * 5px), 0);
  transition: transform 1.4s cubic-bezier(.2, .7, .2, 1);
}

.cover-sectors {
  width: min(1320px, 100%);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
}
.sector {
  position: relative;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 12px;
  color: var(--cover-ink);
  text-decoration: none;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.55);
}
.sector:hover { color: #fff; }
.sector-name { font-size: clamp(15px, 1.3vw, 20px); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; }
.sector-sub { font-size: clamp(13px, 1.05vw, 16px); color: var(--cover-dim); letter-spacing: 0.02em; }
.sector::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 1.5px;
  background: var(--glow);
  transition: width .4s ease, left .4s ease;
}
.sector:hover::after,
.sector:focus-visible::after { left: 22%; width: 56%; }

.cover-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 17px 34px;
  background: var(--cover-ink);
  color: var(--navy-700);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: 2px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.cta-arrow { display: inline-block; transition: transform .25s ease; }
.cover-cta:hover { background: #fff; color: var(--navy); transform: translateY(-1px); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45); }
.cover-cta:hover .cta-arrow { transform: translateX(5px); }

/* ── the foot: the legal notice and privacy notice stay one click away ── */

.cover-foot { display: flex; justify-content: center; padding: 0 var(--gutter) 18px; }
.cover-legal { font-size: 12px; color: var(--cover-faint); }
.cover-legal a { color: inherit; }
.cover-legal a:hover { color: var(--cover-ink); }

/* ── motion ────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .cover-title > * { animation: cover-rise 1.2s cubic-bezier(.2, .7, .2, 1) both; }
  .t-invite { animation-delay: .12s; }
  .cover-sectors,
  .cover-cta,
  .cover-foot { animation: cover-rise 1.2s cubic-bezier(.2, .7, .2, 1) .5s both; }

  /* Arriving back on the cover from /approach: the detail slides down and away, the cover
     comes down from above it, as if scrolling back up one long page. */
  ::view-transition-old(root) { animation: pm-slide-out-down .85s cubic-bezier(.76, 0, .24, 1) both; }
  ::view-transition-new(root) { animation: pm-slide-in-down .85s cubic-bezier(.76, 0, .24, 1) both; }

  /* Leaving for /approach in browsers without view transitions (home.js adds the class). */
  .cover.is-leaving { animation: pm-slide-out-up .55s cubic-bezier(.76, 0, .24, 1) both; }
}
@media (prefers-reduced-motion: reduce) {
  .cover-bg,
  .cover .hu-map { transform: none; }
}
@keyframes cover-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ── the map's opening sequence, on arrival from outside the site: on a fully dark screen the
   glowing border draws itself clockwise from the north-west corner. During its last stretch
   (not after it closes, which left a pause) the photograph fades in and the country fills in,
   Budapest lights up, then the connections arrive and the lights start travelling. intro.js
   marks arrivals from another page of the site (html.no-intro), which get the finished scene;
   so does reduced motion. The text around it rises in at once, as before. */
.cover .hu-bp { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-intro) .cover .cover-bg { animation: intro-in 1.1s ease 1.9s both; }
  html:not(.no-intro) .cover .hu-border { animation: hu-draw 2.6s cubic-bezier(.42, 0, .38, 1) .2s both; }
  html:not(.no-intro) .cover .hu-glow {
    animation: hu-draw 2.6s cubic-bezier(.42, 0, .38, 1) .2s both, hu-breathe 14s ease-in-out 2.8s infinite;
  }
  html:not(.no-intro) .cover :is(.hu-halo, .hu-fill) { animation: intro-in .8s ease 1.9s both; }
  html:not(.no-intro) .cover .hu-county { animation: intro-in .8s ease 2s both; }
  html:not(.no-intro) .cover :is(.hu-river, .hu-lake) { animation: intro-in .8s ease 2.15s both; }
  html:not(.no-intro) .cover .hu-route { animation: intro-in .8s ease 2.3s both; }
  html:not(.no-intro) .cover .hu-cities { animation: intro-in .6s ease 2.45s both; }
  html:not(.no-intro) .cover .hu-bp { animation: intro-pop .6s cubic-bezier(.3, 1.6, .5, 1) 2.45s both; }
  html:not(.no-intro) .cover .hu-bp-halo { opacity: 0; animation: hu-pulse 3.8s ease-out 2.8s infinite; }
  html:not(.no-intro) .cover .hu-bp-label { animation: intro-label .7s ease 2.7s both; }
  html:not(.no-intro) .cover .hu-arc { animation: hu-draw 1.3s cubic-bezier(.4, 0, .2, 1) 2.75s both; }
  html:not(.no-intro) .cover .hu-arc-flow { animation: intro-in .8s ease 3.8s both, hu-flow 10s linear 3.8s infinite; }
  /* coming from another page of the site: the border is simply there, and only breathes */
  html.no-intro .cover .hu-border { animation: none; }
  html.no-intro .cover .hu-glow { animation: hu-breathe 14s ease-in-out infinite; }
}
@keyframes intro-in { from { opacity: 0; } }
@keyframes intro-pop { from { transform: scale(0); } 60% { transform: scale(1.35); } to { transform: scale(1); } }
@keyframes intro-label { from { opacity: 0; transform: translateX(-6px); } }

/* Short laptop screens: the headline follows the height too, so the map keeps its room. */
@media (max-height: 820px) and (min-width: 701px) {
  .t-country { font-size: clamp(48px, min(6.4vw, 9.6vh), 112px); }
  .t-invite { font-size: clamp(20px, min(2.3vw, 3.6vh), 38px); }
  .cover-body { gap: clamp(6px, 1.2vh, 14px); }
  .sector { padding: 6px 14px 10px; }
}

/* ── phones: the map stays the centrepiece, the sectors stack ──────────── */

@media (max-width: 700px) {
  .cover-contact { padding: 8px 12px; font-size: 13px; }
  .cover-body { grid-template-rows: auto minmax(240px, 1fr) auto auto; gap: 14px; }
  .cover .hu-map { left: -30vw; width: calc(100% + 60vw); }
  .cover-sectors { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sector { flex-direction: row; gap: 10px; padding: 7px 0 9px; }
  .sector-name { font-size: 13px; }
  .sector-sub { font-size: 13px; }
  .sector:hover::after,
  .sector:focus-visible::after { left: 30%; width: 40%; }
  .cover-cta { width: 100%; justify-content: center; }
}
/* Short phones (an iPhone SE is 667px high): the map gives up some height, so the button and
   the foot keep their room under the three-line headline. */
@media (max-width: 700px) and (max-height: 760px) {
  .cover-body { grid-template-rows: auto minmax(180px, 1fr) auto auto; gap: 10px; }
}