/* ============================================================================
AUS MYCO — character layer. Everything here is ADDITIVE and sits on top of
site.css: the road that runs the length of the page, the weather in the
scenery, the zone tint, and the road furniture. Remove this file and the
original design is still intact underneath.
========================================================================= */
:root{
--zone:#0a6b46; --zone-ink:#053424; --zone-soft:rgba(10,107,70,.12);
--road:46px;
}
html{scroll-behavior:smooth}
/* ------------------------------------------------------------- paper grain */
.sec::after,.matcher::after,.legal::after{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;
background-image:url("data:image/svg+xml;utf8,");
mix-blend-mode:multiply;
}
.matcher,.legal{position:relative}
/* ================================================================ the road */
/* The page is the 4 000 km. The rail fills as you drive it. */
.ch-road{position:fixed;left:0;top:0;bottom:0;width:var(--road);z-index:55;pointer-events:none;
display:none}
.ch-road::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--road);
background:linear-gradient(90deg,rgba(23,21,18,.055),transparent)}
.ch-road-line,.ch-road-fill{position:absolute;left:19px;width:5px;top:0;border-radius:3px}
.ch-road-line{bottom:0;background:repeating-linear-gradient(180deg,
rgba(23,21,18,.26) 0 16px,transparent 16px 30px)}
.ch-road-fill{height:0;background:repeating-linear-gradient(180deg,
var(--gold) 0 16px,transparent 16px 30px);
filter:drop-shadow(0 0 6px rgba(255,194,51,.5));transition:height .12s linear}
.ch-mark{position:absolute;left:0;width:var(--road);transform:translateY(-50%);pointer-events:auto;
cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px}
.ch-mark i{width:11px;height:11px;border-radius:50%;background:var(--paper);
box-shadow:inset 0 0 0 2.5px rgba(23,21,18,.32);transition:.25s}
.ch-mark b{font-family:var(--mono);font-size:.56rem;letter-spacing:.02em;color:var(--muted);
font-weight:600;transition:.25s}
.ch-mark s{position:absolute;left:calc(var(--road) - 2px);top:-3px;white-space:nowrap;
text-decoration:none;background:var(--ink);color:var(--bone);font-family:var(--mono);
font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;padding:.24rem .5rem;
opacity:0;transform:translateX(-6px);transition:.22s;pointer-events:none;
box-shadow:2px 2px 0 rgba(255,194,51,.55)}
.ch-mark.here s,.ch-mark:hover s{opacity:1;transform:none}
.ch-mark:hover i,.ch-mark.past i{box-shadow:inset 0 0 0 3px var(--gold-d)}
.ch-mark.here i{background:var(--gold);box-shadow:inset 0 0 0 2.5px var(--ink),0 0 0 5px rgba(255,194,51,.28)}
.ch-mark.here b,.ch-mark:hover b{color:var(--ochre)}
.ch-odo{position:fixed;left:8px;bottom:16px;z-index:56;background:var(--bone);color:var(--ink);
border:2.5px solid var(--ink);padding:.3rem .1rem .34rem;width:calc(var(--road) - 12px);
text-align:center;font-family:var(--mono);font-weight:600;font-size:.6rem;letter-spacing:.02em;
line-height:1.15;display:none;box-shadow:3px 3px 0 rgba(23,21,18,.18)}
.ch-odo span{display:block;font-size:.9rem;letter-spacing:-.03em;color:var(--ochre)}
@media (min-width:1180px){
.ch-road,.ch-odo{display:block}
body{padding-left:var(--road)}
.hdr .wrap,.strip .wrap{padding-left:calc(var(--gut) - 10px)}
}
/* ============================================================ live scenery */
.scene .sc-cloud{animation:chDrift var(--d,90s) linear infinite alternate;will-change:transform}
@keyframes chDrift{from{transform:translateX(-4%)}to{transform:translateX(4%)}}
.scene .sc-glint{animation:chGlint var(--d,5s) ease-in-out var(--dl,0s) infinite alternate}
@keyframes chGlint{from{opacity:.06}to{opacity:.5}}
.scene .sc-mist,.scene .sc-mist2{animation:chBreathe 26s ease-in-out infinite alternate;
transform-box:fill-box;transform-origin:center}
@keyframes chBreathe{from{transform:translateX(-1.5%) scaleY(.9)}to{transform:translateX(1.5%) scaleY(1.12)}}
.scene .sc-birds{animation:chBirds 90s linear infinite alternate}
@keyframes chBirds{from{transform:translate(-2%,1.5%)}to{transform:translate(9%,-2%)}}
.scene .sc-sun{animation:chSun 9s ease-in-out infinite alternate;transform-box:fill-box;
transform-origin:center}
@keyframes chSun{from{opacity:.86}to{opacity:1}}
.scene .sc-beam{animation:chBeam 7s ease-in-out infinite;transform-box:view-box}
@keyframes chBeam{0%,100%{opacity:.25;transform:rotate(-7deg)}50%{opacity:.85;transform:rotate(7deg)}}
/* parallax offsets are written by character.js */
.hero .scene .sc-far{transform:translateY(calc(var(--pk,0) * 0.10px))}
.hero .scene .sc-mid,.hero .scene .sc-mid2{transform:translateY(calc(var(--pk,0) * 0.20px))}
.hero .scene .sc-near{transform:translateY(calc(var(--pk,0) * 0.34px))}
.hero .scene .sc-fg{transform:translateY(calc(var(--pk,0) * 0.5px))}
.hero .scene .sc-sky,.hero .scene .sc-sun{transform:translateY(calc(var(--pk,0) * -0.06px))}
/* ================================================================ zone tint */
.pin .dot{fill:var(--zone)}
.pin.on .dot,.pin:hover .dot{fill:var(--zone)}
.pin.on .halo{stroke:var(--zone)}
.pin.on .lbl{fill:var(--zone-ink)}
.au-net{stroke:var(--zone-soft)}
.rail button[aria-pressed="true"]{background:var(--zone);border-color:var(--zone)}
.zoneidx button[aria-pressed="true"]{color:var(--zone-ink);box-shadow:inset 3px 0 0 var(--zone)}
.spot-note{background:var(--zone-soft);border-left-color:var(--zone)}
.spot-picks .chip.green{background:var(--zone-soft);color:var(--zone-ink)}
.hero-loc .pin{background:var(--gold)}
.matcher{border-bottom-color:var(--zone-soft)}
.map-card{box-shadow:inset 0 -3px 0 var(--zone-soft)}
:root,.pin .dot,.pin .halo,.rail button,.zoneidx button,.spot-note{
transition:background-color .5s ease,color .5s ease,fill .5s ease,stroke .5s ease,box-shadow .5s ease}
/* ========================================================= road furniture */
.ch-sign{display:inline-block;width:var(--w,86px);flex:none;filter:drop-shadow(2px 3px 0 rgba(23,21,18,.16))}
.ch-sign svg{display:block;width:100%;height:auto}
.ch-sign.tilt{transform:rotate(-4deg)}
.ch-plate{display:inline-flex;align-items:center;gap:.5rem;background:var(--bone);color:var(--ink);
border:2.5px solid var(--ink);box-shadow:3px 3px 0 rgba(23,21,18,.2);padding:.3rem .8rem .34rem;
font-family:var(--mono);font-weight:600;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase}
.ch-plate.on-dark{background:var(--ink);color:var(--bone);border-color:var(--bone);
box-shadow:3px 3px 0 rgba(255,194,51,.5)}
.ch-plate .km{color:var(--ochre)}
.ch-plate.on-dark .km{color:var(--gold)}
/* the eyebrow gains its distance marker */
.sec-head .t .eyebrow{align-items:center}
.ch-head{display:flex;align-items:flex-start;gap:1.1rem}
.ch-head .ch-sign{margin-top:.2rem}
/* ============================================================ type character */
.h-xl,.h-lg{font-variation-settings:'wght' 830;letter-spacing:-.034em}
.h-lg .swipe,.h-xl .swipe,.h-md .swipe{
background:linear-gradient(var(--gold),var(--gold)) no-repeat;
background-size:100% .3em;background-position:0 84%;padding:0 .06em;
box-decoration-break:clone;-webkit-box-decoration-break:clone}
.band .swipe,.hero .swipe{background-image:linear-gradient(rgba(255,194,51,.34),rgba(255,194,51,.34))}
.sec{position:relative}
.ch-ghost{position:absolute;top:-.2em;right:var(--gut);z-index:0;pointer-events:none;
font-family:var(--mono);font-weight:600;font-size:clamp(4.5rem,11vw,10.5rem);line-height:.8;
color:var(--ochre);opacity:.07;letter-spacing:-.06em;user-select:none}
.band .ch-ghost{color:var(--gold);opacity:.1}
.sec > .wrap{position:relative;z-index:1}
.ch-edge{position:absolute;left:calc(var(--gut) * .28);top:clamp(60px,9vw,120px);
writing-mode:vertical-rl;font-family:var(--mono);font-size:.68rem;letter-spacing:.34em;
text-transform:uppercase;color:rgba(242,236,224,.42);font-weight:600;display:none}
@media (min-width:1400px){.ch-edge{display:block}}
/* ------------------------------------------------------------- band surface */
.band{background-image:radial-gradient(rgba(242,236,224,.075) 1.1px,transparent 1.1px);
background-size:15px 15px}
.band-ink{background-image:radial-gradient(rgba(255,194,51,.08) 1.1px,transparent 1.1px);
background-size:15px 15px}
.band-bone{background-image:radial-gradient(120% 80% at 50% -10%,rgba(255,194,51,.2),transparent 60%)}
.sec.band-bone{background-color:var(--bone)}
/* --------------------------------------------------------------- the stamp */
.card .flag,.flag{transform:rotate(-5deg);background:transparent;color:var(--ochre);
border:2px solid var(--ochre);box-shadow:none;font-weight:600;letter-spacing:.14em;
padding:.24rem .5rem;opacity:.92;backdrop-filter:blur(1px)}
.card .flag.gold{color:#8a5504;border-color:#c98a12}
.card .flag.ochre{color:#fff;background:var(--ochre);border-color:var(--ochre)}
/* ------------------------------------------------------- card interactions */
.card{transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s ease,border-color .2s}
.card:hover{transform:translateY(-6px) rotate(-.45deg);box-shadow:0 26px 40px -26px rgba(23,21,18,.55)}
.card .top .microwrap{clip-path:circle(0% at 50% 50%);opacity:1;
transition:clip-path .5s cubic-bezier(.3,.7,.3,1)}
.card:hover .top .microwrap{clip-path:circle(78% at 50% 50%)}
.card .top::before{content:"400x";position:absolute;z-index:4;right:9px;bottom:8px;
font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;color:var(--bone);
background:rgba(23,21,18,.62);padding:.16rem .4rem;opacity:0;transition:opacity .3s .16s}
.card:hover .top::before{opacity:1}
.card h3{transition:color .2s}
.card:hover h3{color:var(--zone-ink)}
/* buttons print rather than float */
.btn{box-shadow:3px 3px 0 rgba(23,21,18,.18)}
.btn:hover{transform:translate(-1px,-2px);box-shadow:5px 5px 0 rgba(23,21,18,.22)}
.btn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 rgba(23,21,18,.2)}
.btn-gold{box-shadow:3px 3px 0 rgba(23,21,18,.3)}
.btn-ghost.on-dark{box-shadow:inset 0 0 0 1.5px rgba(242,236,224,.35),3px 3px 0 rgba(4,26,19,.35)}
/* --------------------------------------------------------------- reveals */
@media (prefers-reduced-motion:no-preference){
[data-rise]{opacity:0;transform:translateY(26px)}
[data-rise].in{opacity:1;transform:none;
transition:opacity .75s cubic-bezier(.2,.7,.3,1) calc(var(--i,0) * 90ms),
transform .75s cubic-bezier(.2,.7,.3,1) calc(var(--i,0) * 90ms)}
}
/* ------------------------------------------------------------- gate extras */
.gate-inner{position:relative}
#gateSign{animation:chSway 6s ease-in-out infinite alternate;transform-origin:50% 0}
@keyframes chSway{from{transform:rotate(-1.6deg)}to{transform:rotate(1.6deg)}}
.gate-h{animation:chBuzz 5s ease-in-out infinite}
@keyframes chBuzz{0%,92%,100%{opacity:1}94%{opacity:.62}96%{opacity:1}97%{opacity:.7}}
.gate .plate{box-shadow:4px 4px 0 rgba(255,194,51,.35)}
@media (max-width:1179px){body{padding-left:0}}
/* the hero eyebrow rides on a plate so it never has to fight the sky */
.hero .eyebrow.on-dark{display:inline-flex;background:rgba(9,26,19,.82);color:var(--gold);
border:2px solid rgba(255,194,51,.55);padding:.42rem .8rem .46rem;letter-spacing:.16em;
font-size:.7rem;text-shadow:none;box-shadow:3px 3px 0 rgba(4,20,14,.4);backdrop-filter:blur(3px)}
.hero .eyebrow.on-dark::before{display:none}
.hero h1{max-width:16ch}
.h-xl{font-size:clamp(2.8rem,6vw,5.05rem)}
.h-xl,.h-lg,.h-md{text-wrap:balance}
/* a zone change should feel like arriving somewhere, not a crossfade */
@media (prefers-reduced-motion:no-preference){
.sc-enter{animation:chArrive .72s cubic-bezier(.2,.7,.25,1) both}
@keyframes chArrive{
from{opacity:0;transform:translateX(5%) scale(1.06);filter:blur(6px) saturate(1.3)}
to{opacity:1;transform:none;filter:none}
}
}
/* on the dark band a translucent swipe goes muddy: underline instead */
.band .swipe,.hero .swipe{background-image:linear-gradient(var(--gold),var(--gold));
background-size:100% .14em;background-position:0 97%}
/* the map breathes: the route marches, the active pin pulses */
.au-net{animation:chMarch 4s linear infinite}
@keyframes chMarch{to{stroke-dashoffset:-24}}
.pin.on .halo{transform-box:fill-box;transform-origin:center;animation:chPulse 2.8s ease-out infinite}
@keyframes chPulse{0%{transform:scale(.55);opacity:.9}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
.pin .dot{transform-box:fill-box;transform-origin:center;transition:transform .3s}
.pin:hover .dot{transform:scale(1.35)}
/* ---------------------------------------------------------- the hero photo */
/* Art directed: the landscape frame on desktop, the portrait one on phones.
means a phone never downloads the desktop file. */
.hero-photo{position:absolute;inset:0;overflow:hidden;background:#1a1030;z-index:1}
.hero-photo picture{display:block;position:absolute;inset:0}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
object-position:50% 44%;transform:scale(1.07) translateY(calc(var(--pk,0) * 0.13px));
background-image:url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pLSwzOko+MzZGNywtQFdBRkxOUlNSMj5aYVpQYEpRUk//2wBDAQ4ODhMREyYVFSZPNS01T09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0//wAARCAASACADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDEt5I9Vt3SPCynG4NwD71mXWlyQzEMhHNUrZ3ikGHKE/hXVWl9vhH2i6iY46FATXdC2z2NGnUv3f5mBDpjyNhUOex9K3ZIYNLs0e6JIAGF6kmnXV/PHGRamFjgjIwCK52/mvblt90JGI6Z7UTT6DS5FbczY2YuMsfzq8pPr1ooqUREkcnYvJ6U3zJBgB26etFFaDj8TP/Z");background-size:cover;background-position:center}
.hero #heroScene{display:none}
.hero{background:#1a1030}
.hero .scrim{z-index:2;background:
radial-gradient(120% 90% at 50% 22%,rgba(255,255,255,.05),transparent 60%),
linear-gradient(180deg,rgba(10,7,24,.42) 0%,rgba(10,7,24,.06) 18%,rgba(9,10,26,.32) 42%,
rgba(6,16,17,.8) 64%,rgba(4,22,16,.94) 84%,rgba(4,22,16,.97) 100%)}
body.arriving .hero-photo{animation:arrive 1.5s cubic-bezier(.16,.7,.3,1) both}
@media (max-width:760px){
/* the portrait frame keeps its horizon, and the type needs more ground */
.hero-photo img{object-position:50% 32%;background-image:var(--hero-m-blur)}
.hero .scrim{background:
radial-gradient(120% 70% at 50% 16%,rgba(255,255,255,.05),transparent 55%),
linear-gradient(180deg,rgba(10,7,24,.46) 0%,rgba(10,7,24,.16) 18%,rgba(8,12,24,.6) 38%,
rgba(5,16,18,.86) 56%,rgba(4,20,15,.95) 76%,rgba(4,22,16,.98) 100%)}
}
/* --------------------------------------------- restored: hero edge + plate */
/* the cut from neon to paper is deliberate, so mark it */
.hero{border-bottom:3px solid var(--gold)}
.hero-foot{justify-content:flex-start}
/* the zone readout sits with the zone rail, not over a fixed photo */
.matcher-plate{flex:none;font-size:.7rem;padding:.34rem .7rem .38rem}
.matcher-plate .pin{width:7px;height:7px;border-radius:50%;background:var(--zone);
box-shadow:0 0 0 3px var(--zone-soft);flex:none}
@media (max-width:760px){.matcher-plate{margin-top:.2rem}}
/* ============================================================== the drive */
/* Between stops the country goes past. Distant land drifts, the roadside
whips by, the centre line streams: three speeds, one scroll. */
.ch-transit{position:relative;height:clamp(150px,19vw,235px);overflow:hidden;background:#0d1f19;
border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
.ch-t-scene{position:absolute;top:0;bottom:27%;left:-16%;width:132%;overflow:hidden;
transform:translateX(calc(var(--t,0) * -80px));will-change:transform}
.ch-t-scene .scene{width:100%;height:100%}
.ch-t-poles{position:absolute;top:0;bottom:27%;left:-50%;width:200%;
transform:translateX(calc(var(--t,0) * -620px));will-change:transform}
.ch-pole{position:absolute;bottom:0;width:5px;height:62%;background:#0b1c14;opacity:.92}
.ch-pole i,.ch-pole u{position:absolute;left:-190%;width:480%;height:4px;background:#0b1c14;display:block}
.ch-pole i{top:7%}
.ch-pole u{top:15%}
.ch-wire{position:absolute;left:0;right:0;height:2px;background:rgba(11,28,20,.5)}
.ch-wire-a{top:calc(38% + 62% * .07 * .73)}
.ch-wire-b{top:calc(38% + 62% * .15 * .73)}
.ch-t-road{position:absolute;left:0;right:0;bottom:0;height:27%;overflow:hidden;
background:linear-gradient(180deg,#24241e 0%,#1a1a14 42%,#121210 100%);
box-shadow:inset 0 3px 0 rgba(242,236,224,.22),inset 0 -5px 0 rgba(242,236,224,.14)}
.ch-t-dash{position:absolute;top:44%;left:-50%;width:200%;height:11%;min-height:3px;
background:repeating-linear-gradient(90deg,var(--gold) 0 58px,transparent 58px 146px);
transform:translateX(calc(var(--t,0) * -1100px));opacity:.8;will-change:transform}
.ch-t-label{position:absolute;left:50%;top:14%;transform:translateX(-50%);z-index:3}
.ch-t-label .ch-plate{gap:.7rem}
@media (prefers-reduced-motion:reduce){
.ch-t-scene,.ch-t-poles,.ch-t-dash{transform:none}
}
@media (max-width:620px){
.ch-transit{height:132px}
.ch-t-label{top:10%}
.ch-t-label .ch-plate{font-size:.62rem;padding:.26rem .55rem}
}
/* ------------------------------------------------- a zone with a photograph */
.zonephoto{display:block;position:absolute;inset:0}
.zonephoto img{width:100%;height:100%;object-fit:cover;display:block}
/* the caption needs more ground under it on a photograph than on a drawing */
.spot-scene:has(.zonephoto) .spot-cap{
background:linear-gradient(0deg,rgba(4,20,15,.95) 0%,rgba(4,22,16,.7) 45%,rgba(4,26,19,0) 100%);
padding-top:38px}
/* ------------------------------------------- the road, phones and tablets */
/* Same journey, but hung on the right edge where a scrollbar would be, and
narrow enough to live in the gutter without pushing the page around. */
@media (max-width:1179px){
.ch-road{display:block;left:auto;right:0;width:22px;z-index:54}
.ch-road::before{width:22px;background:linear-gradient(270deg,rgba(23,21,18,.045),transparent)}
.ch-road-line,.ch-road-fill{left:auto;right:7px;width:4px}
.ch-road-line{background:repeating-linear-gradient(180deg,
rgba(23,21,18,.2) 0 12px,transparent 12px 24px)}
.ch-road-fill{background:repeating-linear-gradient(180deg,
var(--gold) 0 12px,transparent 12px 24px)}
.ch-mark{left:auto;right:0;width:22px;align-items:flex-end;gap:1px}
.ch-mark i{width:9px;height:9px;margin-right:5.5px}
/* the distance rides vertically so a four digit number still fits */
.ch-mark b{writing-mode:vertical-rl;font-size:.46rem;letter-spacing:.04em;margin-right:3px;
background:rgba(248,243,233,.82);border-radius:2px;padding:2px 1px}
/* the leg name opens inward, never off the edge */
.ch-mark s{left:auto;right:calc(100% - 3px);transform:translateX(-6px);
box-shadow:-2px 2px 0 rgba(255,194,51,.55)}
.ch-mark.here s,.ch-mark:hover s{transform:none}
.ch-odo{display:block;left:auto;right:5px;bottom:12px;width:auto;padding:.26rem .5rem .3rem;
font-size:.54rem;box-shadow:-3px 3px 0 rgba(23,21,18,.18)}
.ch-odo span{display:inline}
.ch-odo span::after{content:" "}
}
@media (max-width:400px){
.ch-mark b{display:none}
}
.ch-odo b{display:none}
@media (max-width:1179px){
/* the floating leg tag would sit on top of the page, so the odometer
carries the name instead */
.ch-mark s{display:none}
.ch-odo{max-width:44vw}
.ch-odo b{display:block;font-family:var(--mono);font-size:.48rem;letter-spacing:.1em;
text-transform:uppercase;color:var(--muted);font-weight:600;margin-top:1px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}