/* Home page intro: the acorn-to-oak animation from the landing design,
   now the first section of the home page. Brand colours on #stage. */

.intro { position: relative; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; background: var(--cream); }
.intro-frame { position: absolute; inset: 0; }

#stage {
  --ground: #FBF7EF;   /* cream background */
  --main: #432C83;     /* aicorn purple: acorn, tree, menu names */
  --second: #1F1638;   /* dark ink for small text */
  --accent: #A58BE6;   /* soft lilac highlight */
  --display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --sans: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  position: absolute; left: 50%; top: 50%;
  width: 1920px; height: 1080px;
  transform-origin: 50% 50%;
  overflow: hidden;
  color: var(--second); font-family: var(--sans);
}
.scene { position: absolute; inset: 0; }
.ground { position:absolute; inset:0; background:radial-gradient(90% 80% at 50% 45%, color-mix(in srgb, var(--accent) 9%, var(--ground)), var(--ground)) }
.words { position:absolute; margin:0; display:flex; flex-direction:column; gap:20px } .words > * { margin:0 }
.line { font-family:var(--display); font-size:84px; line-height:1.05; font-weight:500; letter-spacing:.06em } .sub { font-size:34px }
.art { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none }
.facet { fill:var(--main) }
.tree-wood, .tree-twig, .tree-fine, .tree-menu { fill:var(--main); stroke:none }
.leaf-a, .leaf-b, .leaf-c { stroke:none }
.leaf-a { fill:var(--main) }
.leaf-b { fill:color-mix(in srgb, var(--main) 80%, var(--accent)) }
.leaf-c { fill:color-mix(in srgb, var(--main) 55%, var(--accent)) }
.wordmark { font-family:var(--display); font-weight:500; fill:var(--main) }
.tagline { font-family:var(--sans); font-weight:400; fill:color-mix(in srgb, var(--second) 72%, var(--ground)); letter-spacing:.12em }
.menu-item { position:absolute; margin:0; display:flex; flex-direction:column; gap:6px; width:360px }
.menu-item > * { margin:0 }
.menu-name { font-family:var(--display); font-size:42px; font-weight:700; color:var(--main); line-height:1.1 }
.menu-note { font-size:28px; color:color-mix(in srgb, var(--second) 72%, var(--ground)); line-height:1.25 }
.menu-rule { fill:var(--accent) }

/* The branch menu: real links once they have appeared */
a.menu-item { text-decoration: none; pointer-events: none; }
a.menu-item > span { display: block; }
.menu-live a.menu-item { pointer-events: auto; cursor: pointer; }
.menu-live a.menu-item .menu-name { transition: color .2s ease; }
/* Names are split into one span per word for the animation, so underline the words. */
.menu-live a.menu-item:hover .menu-name, .menu-live a.menu-item:hover .menu-name > span,
.menu-live a.menu-item:focus-visible .menu-name, .menu-live a.menu-item:focus-visible .menu-name > span {
  color: color-mix(in srgb, var(--main) 70%, var(--accent));
  text-decoration: underline; text-decoration-color: var(--accent);
  text-decoration-thickness: 4px; text-underline-offset: 8px;
}
.menu-live a.menu-item:focus-visible { outline: 3px solid var(--accent); outline-offset: 10px; border-radius: 6px; }

/* Skip button and scroll cue, bottom of the intro */
.intro-skip, .intro-next {
  position: absolute; bottom: 22px; z-index: 5;
  font: 600 14px/1 var(--display); letter-spacing: .04em;
  color: var(--purple); background: rgba(251,247,239,.9);
  border: 1px solid rgba(67,44,131,.35); border-radius: 999px; padding: 11px 18px; cursor: pointer; text-decoration: none;
}
.intro-skip { right: 22px; }
.intro-skip:hover, .intro-next:hover { border-color: var(--purple); color: var(--purple); }
.intro-skip[hidden] { display: none; }
.intro-next { left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility .6s; }
.intro-next svg { width: 14px; height: 14px; animation: nudge 1.8s ease-in-out infinite; }
.intro.is-done .intro-next { opacity: 1; visibility: visible; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

/* The open section's branch is underlined; the wordmark links home */
.menu-live a.menu-item.is-current .menu-name, .menu-live a.menu-item.is-current .menu-name > span { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 4px; text-underline-offset: 8px; }
a.tree-home { position: absolute; left: 50px; top: 70px; width: 360px; height: 100px; pointer-events: none; border-radius: 12px; }
.menu-live a.tree-home { pointer-events: auto; }
.menu-live a.tree-home:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; }

/* Stacked links shown under the animation on narrow screens */
.intro-links { display: none; }

@media (max-width: 860px), (max-aspect-ratio: 1/1) {
  .intro { height: auto; min-height: 0; }
  .intro-frame { position: relative; inset: auto; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
  .intro-frame #stage .menu-item, .intro-frame #stage .menu-logo-mark, .intro-frame #stage .menu-logo-word { display: none; }
  .intro-skip { bottom: auto; top: 12px; right: 12px; padding: 9px 14px; font-size: 13px; }
  .intro-next { display: none; }
  .intro-links { display: block; padding: 4px 16px 24px; }
  .intro-links ul { list-style: none; margin: 0; padding: 0; }
  .intro-links li { margin: 0; border-bottom: 1px solid var(--line); }
  .intro-links a.is-current .n { text-decoration: underline; text-decoration-color: var(--lilac); text-decoration-thickness: 3px; text-underline-offset: 5px; }
  .intro-links a { display: flex; flex-direction: column; gap: 2px; padding: 15px 4px; text-decoration: none; }
  .intro-links .n { font: 700 1.2rem/1.2 var(--display); color: var(--purple); }
  .intro-links .d { font-size: 1rem; color: var(--muted); }
}