@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/instrument-serif/InstrumentSerif-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/instrument-serif/InstrumentSerif-Italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

/* Keep the opening canvas clear; navigation returns as it leaves the viewport. */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  width: 100%;
  transform: translateY(-105%);
  visibility: hidden;
  pointer-events: none;
  transition: transform 350ms var(--ease-out), visibility 350ms;
}

.site-header.is-revealed,
.site-header:focus-within {
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}

main { padding-top: 0; }

.landing-scroll {
  --landing-blue: var(--palette-deep);
  --landing-paper: var(--palette-paper);
  --landing-faint: #d5d4e5;
  --landing-frame: clamp(10px, 1vw, 20px);
  --landing-inset: clamp(24px, 2.1vw, 44px);
  position: relative;
  height: 220svh;
  padding: var(--landing-frame);
  background: var(--landing-blue);
}

.landing-scroll .hero {
  position: sticky;
  top: var(--landing-frame);
  display: block;
  width: 100%;
  height: calc(100svh - var(--landing-frame) * 2);
  min-height: 0;
  margin: 0;
  padding: 0;
  border-radius: clamp(20px, 1.6vw, 34px);
  background: var(--landing-paper);
  color: var(--landing-blue);
  overflow: clip;
  isolation: isolate;
}

.landing-brand {
  position: absolute;
  z-index: 4;
  top: var(--landing-inset);
  right: var(--landing-inset);
  display: flex;
  align-items: center;
  gap: .65rem;
  color: var(--palette-deep);
}

.landing-brand img {
  width: clamp(36px, 3vw, 54px);
  height: auto;
}

.landing-brand span {
  font-size: clamp(.7rem, .95vw, 1.1rem);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.landing-brand .landing-brand-text {
  display: grid;
  gap: .3rem;
}

.landing-brand .landing-brand-name {
  font-size: clamp(.7rem, .85vw, .95rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .02em;
  text-transform: none;
}

.landing-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 64%;
  height: 100%;
  padding: var(--landing-inset) 0 var(--landing-inset) var(--landing-inset);
  pointer-events: none;
}

.landing-scroll .display {
  margin: 0;
  padding: 0;
  max-width: none;
  color: var(--landing-blue);
  font-family: "Instrument Serif", Georgia, serif;
  font-size: min(15vw, 19.5svh);
  font-weight: 400;
  line-height: .85;
  letter-spacing: 0;
  overflow: visible;
  overflow-wrap: normal;
  text-wrap: initial;
  pointer-events: auto;
}

.landing-phrase,
.landing-word {
  display: block;
}

.landing-word {
  width: max-content;
  white-space: nowrap;
}

.landing-phrase { font-style: normal; }
em.landing-phrase { font-style: italic; }

.landing-letter {
  --letter-fill: 100%;
  color: var(--landing-blue);
}

/* Inline glyphs retain the font's natural kerning and Polish diacritics. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .landing-letter {
    /* Italic flourishes extend past the glyph's advance width. Expand the
       gradient's paint area without changing the spacing between letters. */
    padding: .15em .18em;
    margin: 0 -.18em;
    background-image: linear-gradient(90deg,
      var(--landing-blue) 0%,
      var(--landing-blue) var(--letter-fill),
      var(--landing-faint) var(--letter-fill),
      var(--landing-faint) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

.landing-intro {
  width: min(100%, 37rem);
  margin-top: 1.5rem;
  pointer-events: auto;
}

.landing-scroll .hero-description {
  width: min(100%, 37rem);
  max-width: none;
  margin: 0;
  color: var(--palette-deep);
  font-size: clamp(.9rem, 1.06vw, 1.2rem);
  line-height: 1.5;
  animation: none;
  pointer-events: auto;
}

.landing-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem 1.7rem;
  margin-top: 1.2rem;
}

.landing-booking {
  gap: .85rem;
  min-height: 46px;
  padding: .8rem 1.3rem;
  background: var(--landing-blue);
  color: var(--landing-paper);
  font-size: .86rem;
  font-weight: 500;
  white-space: nowrap;
}

.landing-booking > span { font-size: 1.15rem; line-height: 1; }

.landing-scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-height: 44px;
  color: var(--palette-deep);
  font-size: .78rem;
  white-space: nowrap;
}

.scroll-cue-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--palette-rule);
  border-radius: 50%;
  font-size: 1.15rem;
  animation: scroll-cue-drift 2.4s ease-in-out infinite;
}

.landing-scroll-cue:hover .scroll-cue-icon {
  background: var(--palette-deep);
  color: var(--landing-paper);
}

@keyframes scroll-cue-drift {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(3px); }
}

/* A stable hit area surrounds a moving illustration, avoiding pointer jitter. */
.landing-scroll .hero-art {
  position: absolute;
  z-index: 3;
  inset: auto 1.2% 2.5% auto;
  display: block;
  width: min(44vw, 73svh);
  height: min(44vw, 73svh);
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 35%;
  background: transparent;
  appearance: none;
  transform: none;
  cursor: grab;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.landing-scroll .hero-art:active { cursor: grabbing; }
.landing-scroll .hero-art:focus-visible { outline-color: var(--landing-blue); }

.landing-scroll .hero-art-field {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  transform: perspective(1100px) translate3d(var(--art-x, 0px), var(--art-y, 0px), 0)
    rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) rotate(var(--art-rotate, 0deg));
  transition: transform 650ms cubic-bezier(.2, .8, .25, 1.15);
  pointer-events: none;
}

.landing-scroll .hero-art img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  object-fit: contain;
  animation: none;
  user-select: none;
  -webkit-user-drag: none;
}

.landing-scroll .hero-art.is-touched img { animation: landing-nudge 600ms ease-out; }
@keyframes landing-nudge {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  30% { transform: rotate(-5deg) translateY(-12px); }
  65% { transform: rotate(3deg) translateY(-4px); }
}

/* Original flower and heart layers sit around a vector brain. Its overlapping
   halves conceal the stem until the lobes part and the flower rises. */
.landing-scroll .hero-art[data-bloom-art] {
  --bloom-open: 0;
  --bloom-grow: 0;
  width: min(36vw, 65svh);
  height: min(36vw, 65svh);
  cursor: pointer;
  border-radius: 18%;
}

.landing-scroll .bloom-illustration {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  overflow: visible;
}

.bloom-lid {
  transform-box: view-box;
  transition: transform 700ms cubic-bezier(.22, 1, .36, 1);
}

.bloom-lids {
  opacity: clamp(0, calc(2 - var(--bloom-grow) * 2), 1);
  transition: opacity 1000ms ease;
}

.bloom-lid-left {
  transform-origin: 70px 848px;
  transform: rotate(calc(var(--bloom-open) * -38deg));
}

.bloom-lid-right {
  transform-origin: 890px 848px;
  transform: rotate(calc(var(--bloom-open) * 38deg));
}

.bloom-flower {
  transform-box: view-box;
  transform-origin: 480px 838px;
  transform: translateY(calc((1 - var(--bloom-grow)) * 620px)) scale(calc(.82 + var(--bloom-grow) * .18));
  transition: transform 1100ms cubic-bezier(.2, .75, .25, 1);
}

.bloom-flower-sway {
  transform-origin: 480px 838px;
  transform: rotate(calc(var(--art-rotate, 0deg) * .7));
  transition: transform 900ms ease-out;
}

.motion-paused .bloom-lid, .reduced-motion .bloom-lid,
.motion-paused .bloom-flower, .reduced-motion .bloom-flower,
.motion-paused .bloom-flower-sway, .reduced-motion .bloom-flower-sway { transition: none; }

@media (min-width: 601px) and (max-width: 1100px) {
  .landing-scroll .hero-art[data-bloom-art] {
    width: min(30vw, 65svh);
    height: min(30vw, 65svh);
  }
}

@media (max-width: 600px) {
  .landing-scroll .hero-art[data-bloom-art] {
    width: min(68vw, 38svh);
    height: 100%;
    max-height: min(68vw, 38svh);
  }
}

/* The English headline uses two words per row to keep the same four-line rhythm. */
html[lang="en"] .landing-scroll .display { font-size: min(12.5vw, 19.5svh); }

@media (max-width: 900px) {
  .landing-scroll { --landing-inset: 24px; }
  .landing-content { width: 68%; }
  .landing-intro { width: min(95%, 29rem); }
  .landing-scroll .hero-description { width: 100%; font-size: .85rem; }
  .landing-scroll .hero-art { width: 43vw; height: 43vw; right: 1%; bottom: 15%; }
  .landing-scroll .display { font-size: min(15.6vw, 19.5svh); }
  .landing-brand span { font-size: .65rem; letter-spacing: .06em; }
}

@media (min-width: 601px) and (max-width: 1100px) {
  .landing-scroll .display { font-size: min(14vw, 18.5svh); }
  .landing-scroll .hero-art {
    width: min(36vw, 68svh);
    height: min(36vw, 68svh);
    bottom: 3%;
  }
}

@media (max-width: 600px) {
  .landing-scroll { --landing-frame: 8px; --landing-inset: 18px; height: 195svh; }
  .landing-scroll .hero {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 12px;
    padding: 70px var(--landing-inset) var(--landing-inset);
    border-radius: 20px;
  }
  .landing-brand { top: 15px; right: 16px; gap: .4rem; }
  .landing-brand img { width: 30px; }
  .landing-brand span { font-size: .62rem; letter-spacing: .08em; }
  .landing-brand .landing-brand-text { gap: .2rem; }
  .landing-brand .landing-brand-name { font-size: .62rem; letter-spacing: .01em; }
  .landing-content { display: contents; }
  .landing-scroll .display { position: relative; z-index: 1; font-size: min(20.5vw, 13svh); line-height: .88; }
  .landing-intro { position: relative; grid-row: 3; z-index: 3; width: 100%; margin: 0; }
  .landing-scroll .hero-description { width: 100%; margin: 0; font-size: .82rem; line-height: 1.5; }
  .landing-actions { flex-wrap: nowrap; justify-content: space-between; gap: .65rem; margin-top: 1rem; }
  .landing-booking { gap: .45rem; padding: .7rem .9rem; min-height: 44px; font-size: .76rem; }
  .landing-scroll-cue { gap: .4rem; font-size: .69rem; }
  .scroll-cue-icon { width: 1.7rem; height: 1.7rem; }
  .landing-scroll .hero-art {
    position: relative;
    grid-row: 2;
    justify-self: end;
    align-self: center;
    inset: auto;
    width: min(60vw, 33svh);
    height: 100%;
    max-height: min(60vw, 33svh);
  }
  html[lang="en"] .landing-scroll .display { font-size: min(17.3vw, 12.5svh); }
  .motion-toggle { bottom: 10px; right: 12px; padding: 0; width: 30px; min-height: 30px; justify-content: center; border: 0; box-shadow: none; background: transparent; }
  .motion-toggle [data-motion-label] { display: none; }
  .motion-toggle[aria-pressed="true"] { color: var(--cobalt); background: #f3f4efcc; }
}

@media (max-width: 359px) {
  .landing-scroll .hero { padding-top: 60px; }
  .landing-scroll .display { font-size: min(17vw, 13svh); }
  .landing-scroll .hero-description { font-size: .78rem; line-height: 1.45; }
  .landing-booking { padding-inline: .7rem; font-size: .73rem; }
  .landing-scroll-cue { font-size: .65rem; }
}

/* Short screens retain a readable composition and use a shorter scroll sequence. */
@media (max-height: 650px) and (min-width: 601px) {
  .landing-scroll .display { font-size: min(13vw, 18svh); }
  .landing-scroll .hero-description { font-size: .78rem; line-height: 1.4; }
  .landing-scroll .hero-art { width: 65svh; height: 65svh; bottom: 3%; }
}

@media (max-height: 480px) and (min-width: 601px) {
  .landing-scroll { --landing-inset: 16px; }
  .landing-scroll .display,
  html[lang="en"] .landing-scroll .display { font-size: min(13vw, 12.5svh); }
  .landing-intro { margin-top: .75rem; }
}

@media (max-height: 550px) and (max-width: 600px) {
  .landing-scroll { height: auto; }
  .landing-scroll .hero { position: relative; top: auto; height: auto; min-height: 650px; }
  .landing-scroll .display { font-size: 20vw; }
}

/* Fill is complete and there is no pinned scroll runway when motion is disabled. */
.motion-paused .landing-scroll, .reduced-motion .landing-scroll { height: auto; }
.motion-paused .landing-scroll .hero, .reduced-motion .landing-scroll .hero { position: relative; top: auto; }
.motion-paused .landing-scroll .hero-art-field, .reduced-motion .landing-scroll .hero-art-field { transform: none; }
.motion-paused .landing-letter, .reduced-motion .landing-letter { background: none; color: var(--landing-blue); -webkit-text-fill-color: var(--landing-blue); }
@media (prefers-reduced-motion: reduce) {
  .landing-scroll { height: auto; }
  .landing-scroll .hero { position: relative; top: auto; }
  .landing-scroll .hero-art-field { transform: none; }
  .landing-letter { background: none; color: var(--landing-blue); -webkit-text-fill-color: var(--landing-blue); }
}
@media (forced-colors: active) {
  .landing-letter { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; }
}