/* ==========================================================================
   Luminart Mantovani — "sito in arrivo" page

   Colours and type come from the designer's brand sheet (see ../../BRIEF.md).
   The page is light, unlike the other sites in this folder: the logo is drawn
   in dark blue, so on a dark background it disappears.
   ========================================================================== */

/* Fallback for devices without Avenir (Android, Windows). Apple devices have
   Avenir built in and never download this file, because the browser only
   fetches a web font when it actually needs it. That is also why there is no
   <link rel="preload"> for it in the HTML: preloading would force the download
   on every device.
   The file is served from this site, not from Google, so the page makes no
   request to any third party and there is nothing to declare about privacy. */
@font-face {
  font-family: "Nunito Sans";
  src: url("/fonts/nunito-sans-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --blue: #232C39;
  --beige: #F0E5D5;
  --cream: #FCF5ED;
  --ochre: #CC954E;

  /* Ochre is for lines, dots and the glow only, never for text: on cream it
     reaches a contrast of 2.4:1, below the 4.5:1 needed to read comfortably. */
  --glow: rgba(204, 149, 78, 0.24);
  --muted: rgba(35, 44, 57, 0.72);

  --font: Avenir, "Avenir Next", "Nunito Sans", system-ui, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh; /* dvh follows the phone's address bar; vh above is the fallback */
  display: flex;
  flex-direction: column;
  background: var(--cream) linear-gradient(180deg, var(--cream) 55%, var(--beige) 100%) no-repeat;
  color: var(--blue);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* The tree is positioned against the page (see .tree below). */
  position: relative;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   The tree

   The same photo as the right-hand band of the 2026/2027 flyer, which Daniele
   asked for. Its edge facing the text fades out through a mask, not through a
   colour laid on top: a mask makes the photo itself transparent, so it blends
   into whatever is behind it, and the page background changes from cream to
   beige from top to bottom.

   Phone: the tree sits in the top-right corner, next to the logo, and fades
   out to the left and downwards before the text starts. A full-height band
   would squeeze the buttons on a screen this narrow.
   From 768px: a full-height band on the right, like the flyer, with the text
   centred in the space to its left.
   -------------------------------------------------------------------------- */

.tree {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  /* Short enough to have faded out by the tagline, so "stile" never sits on
     top of the photo on a small phone. */
  width: min(34vw, 170px);
  height: min(40vh, 300px);
  background: url("/img/albero.webp") 50% 30% / cover no-repeat;
  /* Fully visible in the top-right corner, gone at the left and bottom edges.
     The -webkit- line is for older iPhones; keep both. */
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 100% 0%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 100% 100% at 100% 0%, #000 40%, transparent 100%);
  pointer-events: none;
}

@media (min-width: 768px) {
  :root {
    /* Width of the tree band. The text column leaves this much room on the
       right, minus the faded part, which the text may overlap. */
    --tree-width: clamp(260px, 32vw, 520px);
  }

  .tree {
    /* Fixed: the band stays in place if the page is taller than the screen. */
    position: fixed;
    bottom: 0;
    width: var(--tree-width);
    height: auto;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 45%);
    mask-image: linear-gradient(to right, transparent, #000 45%);
  }

  .holding,
  .footer {
    margin-right: calc(var(--tree-width) * 0.7);
  }
}

/* --------------------------------------------------------------------------
   Main block
   -------------------------------------------------------------------------- */

.holding {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Spacing here and below shrinks on short screens (vh), so that on a phone
     both buttons are visible without scrolling. */
  padding: clamp(1.75rem, 5vh, 5rem) 1.5rem clamp(1.5rem, 4vh, 3.5rem);
  text-align: center;
  /* Above the tree. Also lets the glow sit behind the logo without sliding
     under the page background. */
  position: relative;
  z-index: 1;
  isolation: isolate;
  /* The glow is wider than a phone screen. Without this the part that sticks
     out on the right lets the whole page scroll sideways. */
  overflow: hidden;
}

.holding__brand {
  position: relative;
  margin: 0;
}

/* The light behind the logo: a soft ochre halo that "switches on" at load. */
.holding__brand::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: min(150vw, 620px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, var(--glow), rgba(204, 149, 78, 0));
  pointer-events: none;
  animation: switch-on 2.2s ease-out both;
}

.holding__logo {
  width: clamp(150px, 40vw, 250px);
  animation: rise 0.9s ease-out both;
}

.holding__tagline {
  width: clamp(230px, 64vw, 340px);
  margin-top: clamp(1.25rem, 3.5vh, 2rem);
  animation: rise 0.9s ease-out 0.15s both;
}

/* "SITO IN ARRIVO" with a short ochre line on each side. */
.holding__label {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: clamp(1.5rem, 4.5vh, 3.25rem) 0 0;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  animation: rise 0.9s ease-out 0.3s both;
}

.holding__label::before,
.holding__label::after {
  content: "";
  width: clamp(1.75rem, 8vw, 3rem);
  height: 1px;
  background: var(--ochre);
}

/* The wide letter-spacing also adds a gap after the last letter, which pushes
   the text off-centre between the two lines. This pulls it back. */
.holding__label::after {
  margin-left: -0.34em;
}

/* On a phone the five services are stacked, one per line. Side by side they
   wrap wherever the screen happens to end, leaving a separator dot hanging at
   the end of a line and one word alone on the last. */
.holding__services {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  line-height: 1.6;
  animation: rise 0.9s ease-out 0.45s both;
}

/* From 1100px up all five fit on one line, separated by ochre dots. Below
   that, the tree band leaves the text column too narrow for one line. */
@media (min-width: 1100px) {
  .holding__services li {
    display: inline;
    white-space: nowrap;
  }

  .holding__services li:not(:last-child)::after {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    margin: 0 0.25em 0 0.7em;
    border-radius: 50%;
    background: var(--ochre);
    vertical-align: middle;
  }
}

.holding__text {
  max-width: 24rem;
  margin: clamp(1.25rem, 3.5vh, 2.5rem) 0 0;
  /* Splits the sentence into two even lines on a phone, so "chiamaci." is
     not left alone on the second one. */
  text-wrap: balance;
  color: var(--muted);
  font-size: 0.9375rem;
  animation: rise 0.9s ease-out 0.6s both;
}

/* The two buttons: stacked and equally wide on phones and tablets, side by
   side from 1100px up. */
.holding__actions {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  width: min(100%, 21rem);
  margin-top: 1rem;
  animation: rise 0.9s ease-out 0.75s both;
}

@media (min-width: 1100px) {
  .holding__actions {
    flex-direction: row;
    justify-content: center;
    width: auto;
  }
}

.holding__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.9375rem 1.75rem;
  /* The border is the same colour as the fill, so the filled button and the
     outlined one end up exactly the same size. */
  border: 1px solid var(--blue);
  background: var(--blue);
  color: var(--cream);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

/* On a very narrow phone the call label breaks onto two lines, after
   "Chiama", rather than pushing the button off the screen. */
.holding__btn-label {
  white-space: normal;
}

.holding__btn-number {
  white-space: nowrap;
}

.holding__btn-icon {
  flex: none;
  color: var(--ochre);
  transition: color 0.25s ease;
}

.holding__btn:hover {
  border-color: var(--ochre);
  background: var(--ochre);
  color: var(--blue);
  transform: translateY(-2px);
}

.holding__btn:hover .holding__btn-icon {
  color: var(--blue);
}

.holding__btn:focus-visible {
  outline: 2px solid var(--ochre);
  outline-offset: 4px;
}

/* Second button: outline only, so the call button stays the main one. */
.holding__btn--outline {
  background: transparent;
  color: var(--blue);
}

.holding__btn--outline:hover {
  border-color: var(--blue);
  background: var(--blue);
  color: var(--cream);
}

.holding__btn--outline:hover .holding__btn-icon {
  color: var(--ochre);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  position: relative;
  z-index: 1;
  padding: 1.25rem 1.5rem 1.5rem;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.6;
  text-align: center;
}

.footer p {
  margin: 0;
}

/* Each footer line is in two parts. On a phone each part takes its own line,
   so the break never falls between "P.IVA" and its number. On wide screens
   the two parts sit on one line with a dot between them. */
.footer p span {
  display: block;
}

@media (min-width: 1100px) {
  .footer p span {
    display: inline;
  }

  .footer p span + span::before {
    content: "· ";
  }
}

.footer__credit {
  margin-top: 0.25rem;
}

.footer a {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-color: var(--ochre);
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes switch-on {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* People who have asked their device for less motion get the finished page
   straight away, with nothing moving. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}