/* GLASS — THE OPENING DIVE (hero3d.js drives --open, --title, --dark, --cue from the scroll). The title is glass3d.com.au's own:
   Jost 200, the ice-blue gradient in the letters, a blurred echo behind, the blue-white glow line under it */
.dive { position: relative; height: 420svh; background: #020204; --open: 0; --title: 0; --dark: 0; --cue: 1; }
.diveStage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.diveCanvas { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease;
  --in: calc((1 - var(--open)) * clamp(14px, 6.5vmin, 64px));
  clip-path: inset(calc(var(--in) + (1 - var(--open)) * 9svh) var(--in) calc(var(--in) + (1 - var(--open)) * 4svh) var(--in)); }
.dive.ready .diveCanvas { opacity: 1; }
.diveCanvas canvas { display: block; width: 100%; height: 100%; }
.diveCorners { position: absolute; inset: 0; pointer-events: none; opacity: calc(1 - var(--open)); }
.diveCorners i { position: absolute; width: 22px; height: 22px; border: 0 solid rgba(189, 221, 237, .55);
  --in: clamp(14px, 6.5vmin, 64px); }
.diveCorners i:nth-child(1) { left: var(--in); top: calc(var(--in) + 9svh); border-left-width: 1px; border-top-width: 1px; }
.diveCorners i:nth-child(2) { right: var(--in); top: calc(var(--in) + 9svh); border-right-width: 1px; border-top-width: 1px; }
.diveCorners i:nth-child(3) { left: var(--in); bottom: calc(var(--in) + 4svh); border-left-width: 1px; border-bottom-width: 1px; }
.diveCorners i:nth-child(4) { right: var(--in); bottom: calc(var(--in) + 4svh); border-right-width: 1px; border-bottom-width: 1px; }

.diveTitle { position: absolute; left: 0; right: 0; top: 13svh; display: grid; justify-items: center; pointer-events: none;
  transform: scale(calc(1 + 1.8 * var(--title))); transform-origin: 50% 40%; opacity: calc(1 - var(--title)); filter: blur(calc(var(--title) * 6px)); }
.diveWord { position: relative; }
.diveWord h1 { margin: 0; font: 200 clamp(64px, 17vw, 210px)/0.9 'Jost', Helvetica, Arial, sans-serif; letter-spacing: .09em; padding-left: .09em;
  background: radial-gradient(62% 90% at 46% 42%, #dbe8f8 0%, #cddef2 32%, #bcd2ec 58%, #a7c1e3 82%, #95b3da 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.diveWord h1.echo { position: absolute; inset: 0; filter: blur(9px); opacity: .55; }
.diveGlow { position: relative; width: min(560px, 74vw); height: 1px; margin-top: clamp(10px, 2vw, 22px); }
.diveGlow::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,2,4,0) 0%, rgba(79,200,255,.85) 22%, rgba(255,255,255,.95) 50%, rgba(79,200,255,.85) 78%, rgba(2,2,4,0) 100%); }
.diveGlow::after { content: ''; position: absolute; left: 0; right: 0; top: -3px; height: 7px; filter: blur(4px); background: linear-gradient(90deg, rgba(2,2,4,0) 0%, rgba(79,200,255,.3) 30%, rgba(79,200,255,.3) 70%, rgba(2,2,4,0) 100%); }
.diveKick { margin: clamp(12px, 2.2vw, 22px) 0 0; font: 400 clamp(10px, 1.1vw, 13px)/1.4 'Jost', Helvetica, Arial, sans-serif; letter-spacing: .42em; padding-left: .42em; text-transform: uppercase; color: #93A4AF; }

.diveDark { position: absolute; inset: 0; background: #020204; opacity: var(--dark); pointer-events: none; }
.diveCue { position: absolute; left: 50%; bottom: clamp(14px, 3.5svh, 34px); transform: translateX(-50%); display: grid; justify-items: center; gap: 10px;
  font: 400 10px/1 'Jost', Helvetica, Arial, sans-serif; letter-spacing: .5em; padding-left: .5em; color: #7B8C97; opacity: var(--cue); pointer-events: none; }
.diveCue::after { content: ''; width: 1px; height: 34px; background: linear-gradient(#BDDDED, rgba(189,221,237,0)); animation: diveCue 2.4s ease-in-out infinite; transform-origin: top; }
@keyframes diveCue { 0% { transform: scaleY(0); opacity: 0; } 30% { opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.diveLoad { position: absolute; left: 50%; bottom: calc(clamp(14px, 6.5vmin, 64px) + 4svh + 18px); width: min(220px, 40vw); height: 1px; transform: translateX(-50%); background: rgba(62,80,92,.55); --got: 0; transition: opacity .8s; }
.diveLoad::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--got) * 100%); background: #BDDDED; }
.dive.ready .diveLoad { opacity: 0; }
.dive.noGl { height: 100svh; }
.dive.noGl .diveCanvas, .dive.noGl .diveLoad, .dive.noGl .diveCorners { display: none; }
.diveWord h1 { text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) { .diveCue::after { animation: none; } }