/* Maydi House: liquid-glass navigation (v2 prototype).
   Two pieces only, so the glass keeps its weight:
   1. Phone: a floating dock at the thumb, the four houses with their line marks, and a round menu button.
      The active house sits under an amber glass arch, and its resin tear fills with colour.
   2. Wider screens: once the page moves, the top bar lifts off into a frosted pill.
   Glass falls back to solid beige without backdrop-filter, and under reduced transparency or more contrast. */

:root {
  --glass-tint: rgba(250, 240, 231, .48);
  --glass-tint-2: rgba(245, 230, 218, .36);
  --glass-edge: rgba(255, 255, 255, .7);
  --glass-blur: blur(10px) saturate(1.5) brightness(1.12);
  --glass-shadow: 0 12px 32px rgba(43, 20, 24, .14), 0 2px 8px rgba(43, 20, 24, .07);
  --glass-shine: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(112, 32, 48, .07), inset 0 0 0 .5px rgba(255, 255, 255, .45);
  --dock-h: 64px;
  --dock-gap: calc(14px + env(safe-area-inset-bottom, 0px));
  --liquid: cubic-bezier(.32, 1.35, .5, 1);
}

/* The hero's second paragraph has no links and starts invisible; it must not swallow taps meant for the button under it. */
.hero-copy, .hero-copy * { pointer-events: none !important; }

/* ---------------------------------------------------- the top bar lifts -- */
.site-bar nav { align-items: center; }
/* Wide screens: the links spread evenly across the centred column, between the mark and the language switch (as on apple.com). */
@media (min-width: 1101px) { .site-bar nav { flex: 1; justify-content: space-evenly; margin-inline-start: 0; } }
.site-bar { isolation: isolate; transition: background-color .35s ease, border-color .35s ease; }
.site-bar::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: 0;
  border-radius: 0; background: linear-gradient(180deg, var(--glass-tint), var(--glass-tint-2));
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-shine), var(--glass-shadow);
  transition: inset .5s var(--liquid), border-radius .5s var(--liquid), opacity .3s ease; }
.site-bar.is-glass { background-color: transparent !important; border-bottom-color: transparent !important;
  -webkit-backdrop-filter: none; backdrop-filter: none; }
/* On a wide screen the bar's contents stay in a centred 1240px column (the inner pages' width), and the pill hugs them. */
.site-bar.is-glass::before { opacity: 1; inset: 8px max(clamp(8px, 2vw, 24px), calc((100% - 1240px) / 2 - 24px)); border-radius: 999px; }

/* --------------------------------------------------------- phone dock --- */
.dock { display: none; }
@media (max-width: 860px) {
  .has-dock .menu-btn { display: none !important; }
  .dock { position: fixed; z-index: 70; left: 0; right: 0; bottom: var(--dock-gap);
    display: flex; justify-content: center; align-items: center; gap: 10px; padding-inline: 12px;
    pointer-events: none; font-family: inherit;
    transition: transform .45s var(--liquid); }
  .dock > * { pointer-events: auto; }
  .dock__pill, .dock__more { position: relative; isolation: isolate;
    background: linear-gradient(180deg, var(--glass-tint), var(--glass-tint-2));
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-edge); box-shadow: var(--glass-shine), var(--glass-shadow); }
  /* A soft light from the upper left, as in the reference. */
  .dock__pill::after, .dock__more::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    background: radial-gradient(120% 140% at 12% 0%, rgba(255, 255, 255, .32), rgba(255, 255, 255, 0) 55%); }
  .dock__pill { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch;
    height: var(--dock-h); padding: 5px; border-radius: 999px; width: min(300px, calc(100vw - 24px - 10px - var(--dock-h))); }
  .dock__item { position: relative; z-index: 1; display: grid; justify-items: center; align-content: center; gap: 3px;
    min-width: 0; border-radius: 999px 999px 18px 18px; color: #2B1418; text-decoration: none;
    -webkit-tap-highlight-color: transparent; }
  .dock__item { text-shadow: 0 0 8px rgba(250, 240, 231, .95), 0 0 2px rgba(250, 240, 231, .9); }
  .dock__item svg { filter: drop-shadow(0 0 3px rgba(250, 240, 231, .9)); }
  .dock__item svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
    transition: transform .45s var(--liquid); }
  .dock__item .tear { fill: transparent; transition: fill .4s ease; }
  .dock__item span { font-size: 10.5px; line-height: 1.1; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis;
    transition: opacity .3s ease, max-height .45s var(--liquid); max-height: 14px; }
  .dock__item[aria-current="page"], .dock__item.is-here { color: #702030; }
  .dock__item[aria-current="page"] .tear, .dock__item.is-here .tear { fill: #D9A441; stroke: #B07A1E; }
  .dock__item:active svg { transform: scale(.88); }
  .dock__item:focus-visible, .dock__more:focus-visible { outline: 2px solid #702030; outline-offset: 2px; }

  /* The active mark: an amber glass arch that slides between houses like a drop of resin. */
  /* Placed by pure CSS from the item's order (--idx), never measured, so a late font cannot shift it. */
  .dock__lens { position: absolute; z-index: 0; top: 5px; bottom: 5px; pointer-events: none; opacity: 0;
    inset-inline-start: calc(5px + var(--idx, 0) * (100% - 10px) / 4); width: calc((100% - 10px) / 4);
    border-radius: 999px 999px 18px 18px;
    background: radial-gradient(110% 90% at 50% 0%, rgba(255, 249, 236, .96) 0%, rgba(246, 214, 150, .75) 55%, rgba(217, 164, 65, .45) 100%);
    border: 1px solid rgba(255, 255, 255, .85);
    box-shadow: inset 0 1px 0 #fff, inset 0 -6px 12px rgba(217, 164, 65, .25), 0 4px 12px rgba(176, 122, 30, .18);
    transition: inset-inline-start .55s var(--liquid), opacity .3s ease; }
  .dock__lens.is-on { opacity: 1; }

  .dock__more { flex: none; width: var(--dock-h); height: var(--dock-h); border-radius: 50%; cursor: pointer; padding: 0;
    display: grid; place-items: center; color: #702030; transition: width .45s var(--liquid), height .45s var(--liquid); }
  .dock__more svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
  .dock__more:active { transform: scale(.94); }

  /* Scrolling down tucks the labels away; scrolling up brings them back. */
  .dock.is-min { --dock-h: 52px; }
  .dock.is-min .dock__item span { opacity: 0; max-height: 0; }
  .dock.is-min .dock__pill { transition: height .45s var(--liquid); }
  .dock__pill { transition: height .45s var(--liquid), width .45s var(--liquid); }
  .menu-open .dock { transform: translateY(calc(100% + var(--dock-gap) + 8px)); }

  /* Room under the content for the dock. */
  .has-dock .hero-title { bottom: calc(var(--dock-h) + var(--dock-gap) + 14px); }
  .has-dock .foot, .has-dock footer { padding-bottom: calc(var(--dock-h) + var(--dock-gap) + 12px); }
  /* The closing scene is one pinned screen: a smaller resin leaves the footer clear of the dock. */
  .has-dock .resin { width: min(22vh, 46vw); }
  .has-dock .finale__in { gap: .8rem; }
  .has-dock .finale .foot { padding-top: .8rem; gap: .3rem 1.4rem; }
}

@media (max-width: 860px) and (max-height: 700px) {
  .has-dock .resin { width: min(14vh, 40vw); }
  .has-dock .finale__in { gap: .6rem; }
}

/* --------------------------------------------------------- fallbacks ---- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass-tint: rgba(245, 230, 218, .97); --glass-tint-2: rgba(245, 230, 218, .97); }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root { --glass-tint: #F5E6DA; --glass-tint-2: #F5E6DA; --glass-edge: #702030; --glass-blur: none; }
}
@media (prefers-reduced-motion: reduce) {
  .site-bar::before, .dock, .dock__lens, .dock__pill, .dock__more, .dock__item svg, .dock__item span { transition: none !important; }
}