/* ============================================================
   UWA SMIF - shared site styles
   ============================================================ */
:root { color-scheme: light; }
body { font-family: 'Inter', system-ui, sans-serif; }
h1,h2,h3,h4,.font-display { font-family: '"Inter Tight"','Inter Tight',system-ui,sans-serif; }
.u-label { text-transform: uppercase; letter-spacing: 0.2em; }

/* ---- Serene deep-forest hero / header background ---- */
.hero-bg {
  background-color: #00210a;
  background-image:
    radial-gradient(120% 90% at 75% 8%, rgba(42,112,56,0.42) 0%, transparent 55%),
    radial-gradient(120% 120% at 10% 100%, rgba(0,61,1,0.85) 0%, transparent 60%),
    linear-gradient(165deg, #062b10 0%, #00210a 45%, #010d04 100%);
}
.hero-waves {
  position: absolute; inset: 0; opacity: 0.5; mix-blend-mode: screen; pointer-events: none;
  background:
    repeating-linear-gradient(100deg, transparent 0 38px, rgba(120,170,130,0.05) 38px 39px),
    repeating-linear-gradient(82deg, transparent 0 64px, rgba(120,170,130,0.04) 64px 65px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 40%, black 80%, transparent);
          mask-image: linear-gradient(to bottom, transparent, black 40%, black 80%, transparent);
}
.grain::after {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ---- Nav: transparent over hero -> solid white on scroll ---- */
#nav { transition: background-color .35s cubic-bezier(.22,1,.36,1), box-shadow .35s, backdrop-filter .35s; }
#nav.scrolled { background:#fff; box-shadow: 0 1px 0 0 rgba(0,0,0,.05), 0 10px 30px -18px rgba(0,61,1,.25); }
/* Logo: white knock-out over the hero, full colour once scrolled */
#nav .logo-img { filter: brightness(0) invert(1); transition: filter .35s cubic-bezier(.22,1,.36,1); }
#nav.scrolled .logo-img { filter: none; }
/* Hover: the arrow on the M draws (snakes) itself upward from base to tip */
#nav .draw-path { stroke-dasharray: 1; stroke-dashoffset: 0; }
#nav .logo:hover .draw-path, #nav .logo:focus-visible .draw-path { animation: smif-snake .95s cubic-bezier(.45,0,.2,1) both; }
@keyframes smif-snake { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  #nav .logo:hover .draw-path, #nav .logo:focus-visible .draw-path { animation: none; }
}
#nav .nlink { color: rgba(255,255,255,.82); }
#nav .nlink:hover, #nav .nlink:focus-visible { color:#fff; }
#nav.scrolled .nlink { color:#3c4641; }
#nav.scrolled .nlink:hover, #nav.scrolled .nlink:focus-visible, #nav.scrolled .nlink.is-active { color:#003d01; }
#nav .pill { border-color: rgba(255,255,255,.4); color:#fff; }
#nav .pill:hover { background: rgba(255,255,255,.12); }
#nav.scrolled .pill { border-color: rgba(0,61,1,.25); color:#1a1a1a; }
#nav.scrolled .pill:hover { background: rgba(0,61,1,.06); color:#003d01; }
#nav .ico { color: rgba(255,255,255,.8); }
#nav.scrolled .ico { color:#3c4641; }

.nlink { position: relative; }
.nlink::after { content:""; position:absolute; left:0; bottom:-7px; height:1.5px; width:100%; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .3s cubic-bezier(.22,1,.36,1); }
.nlink:hover::after, .nlink:focus-visible::after, .nlink.is-active::after { transform:scaleX(1); }

/* ---- Reveal-on-scroll ---- */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); will-change:transform,opacity; }
.reveal.in { opacity:1; transform:none; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---- Logo marquee (auto-scrolling sponsor line) ---- */
.marquee {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 42s linear infinite;
}
.marquee__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ---- Event photo collage banner (two rows, opposite auto-scroll) ---- */
.collage { display:flex; flex-direction:column; align-items:flex-start; gap:0.6rem; }
.collage__row {
  display:flex; flex:1 1 0; min-height:0; width:max-content;
  animation: marquee-scroll 64s linear infinite;
  will-change: transform;
}
.collage__row--rev { animation-duration:82s; animation-direction:reverse; }
.collage__img {
  height:100%; width:auto; flex:0 0 auto; margin-right:0.6rem;
  object-fit:cover; border-radius:0.7rem;
}
@media (prefers-reduced-motion: reduce) { .collage__row { animation:none; } }

/* ---- Brand "rising arrows" animated background (SMIF growth motif) ---- */
.smif-arrows { pointer-events: none; overflow: hidden; }
.smif-arrows i {
  position: absolute;
  bottom: -56px;
  width: var(--s, 26px);
  height: calc(var(--s, 26px) * 1.5);
  background: linear-gradient(180deg, #a6e6b4, #4f9e66);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5 21 12h-5.5v10.5h-7V12H3z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5 21 12h-5.5v10.5h-7V12H3z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  animation: smif-rise var(--d, 13s) linear var(--delay, 0s) infinite;
  will-change: transform, opacity;
}
/* Wall-Street / markets glyph variants (generic symbols, not brand logos) */
.smif-arrows i.g-dollar  { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='1.5' x2='12' y2='22.5'/%3E%3Cpath d='M17.5 5.5H9.75a3.25 3.25 0 0 0 0 6.5h4.5a3.25 3.25 0 0 1 0 6.5H6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='1.5' x2='12' y2='22.5'/%3E%3Cpath d='M17.5 5.5H9.75a3.25 3.25 0 0 0 0 6.5h4.5a3.25 3.25 0 0 1 0 6.5H6'/%3E%3C/svg%3E"); }
.smif-arrows i.g-percent { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cline x1='19' y1='5' x2='5' y2='19'/%3E%3Ccircle cx='6.5' cy='6.5' r='2.5'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cline x1='19' y1='5' x2='5' y2='19'/%3E%3Ccircle cx='6.5' cy='6.5' r='2.5'/%3E%3Ccircle cx='17.5' cy='17.5' r='2.5'/%3E%3C/svg%3E"); }
.smif-arrows i.g-trend   { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 6 13.5 15.5 8.5 10.5 1 18'/%3E%3Cpolyline points='17 6 23 6 23 12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 6 13.5 15.5 8.5 10.5 1 18'/%3E%3Cpolyline points='17 6 23 6 23 12'/%3E%3C/svg%3E"); }
.smif-arrows i.g-bars    { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h4v9H3zM10 7h4v14h-4zM17 3h4v18h-4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h4v9H3zM10 7h4v14h-4zM17 3h4v18h-4z'/%3E%3C/svg%3E"); }
.smif-arrows i.g-candles { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.2 3h1.6v18H5.2zM4 7h4v8H4zM17.2 4h1.6v17h-1.6zM16 9h4v7h-4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.2 3h1.6v18H5.2zM4 7h4v8H4zM17.2 4h1.6v17h-1.6zM16 9h4v7h-4z'/%3E%3C/svg%3E"); }
.smif-arrows i.g-coin    { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v10' stroke-width='1.6'/%3E%3Cpath d='M14.6 9.1a2.6 2.4 0 0 0-2.6-1.3c-1.4 0-2.5.8-2.5 1.8s1.1 1.6 2.5 1.6 2.6.7 2.6 1.7-1.2 1.8-2.6 1.8a2.6 2.4 0 0 1-2.6-1.3' stroke-width='1.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v10' stroke-width='1.6'/%3E%3Cpath d='M14.6 9.1a2.6 2.4 0 0 0-2.6-1.3c-1.4 0-2.5.8-2.5 1.8s1.1 1.6 2.5 1.6 2.6.7 2.6 1.7-1.2 1.8-2.6 1.8a2.6 2.4 0 0 1-2.6-1.3' stroke-width='1.5'/%3E%3C/svg%3E"); }

@keyframes smif-rise {
  0%   { transform: translateY(0) scale(.9); opacity: 0; }
  14%  { opacity: var(--a, .13); }
  86%  { opacity: var(--a, .13); }
  100% { transform: translateY(-560px) scale(1.03); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .smif-arrows { display: none; } }

/* ---- Animated story timeline ---- */
.tl-line { background: linear-gradient(180deg, #003d01 0%, #1f5c2e 55%, rgba(65,104,61,0.25) 100%); }
.tl-node { position: absolute; left: -2.55rem; top: 0.35rem; width: 15px; height: 15px; border-radius: 9999px; background: #003d01; box-shadow: 0 0 0 4px #f4f6f3, 0 0 0 5px rgba(0,61,1,0.18); }
.tl-node::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid rgba(0,61,1,0.5); opacity: 0; transform: scale(1); animation: tl-pulse 3s ease-out infinite; }
@keyframes tl-pulse { 0% { transform: scale(1); opacity: .55; } 70% { transform: scale(2.7); opacity: 0; } 100% { opacity: 0; } }
@media (min-width: 640px) { .tl-node { left: -3.05rem; } }
@media (prefers-reduced-motion: reduce) { .tl-node::after { animation: none; } }

/* ---- Contact form fields ---- */
.field {
  width:100%; border:1px solid #e2e6df; border-radius:0.9rem; background:#fff;
  padding:0.85rem 1rem; font-size:0.95rem; color:#1a1a1a;
  transition: border-color .2s, box-shadow .2s;
}
.field::placeholder { color:#9aa39c; }
.field:focus { outline:none; border-color:#1f5c2e; box-shadow:0 0 0 3px rgba(0,61,1,0.10); }

@media (prefers-reduced-motion: reduce) {
  .reveal { transition:none; opacity:1; transform:none; }
  html { scroll-behavior:auto; }
}