---------------------------------------------------------------------------- */
:root{
--glass-fill: rgba(27,33,43,.42); /* translucent dark surface */
--glass-fill-strong: rgba(231,236,243,.16); /* brighter glass (primary) */
--glass-fill-ghost: rgba(255,255,255,.05); /* faintest glass (ghost) */
--glass-fill-ember: rgba(255,130,16,.12); /* ember-tinted glass */
--glass-fill-light: rgba(255,255,255,.5); /* glass on cream */
--glass-blur: 9px;
--shim-dur: 7s; /* slow — a shimmer, not a strobe */
--shine: rgba(99,137,196,.9); /* frost highlight (default) */
--shine2: rgba(255,255,255,.7); /* white glint */
}
/* animatable angle for the traveling highlight */
@property --shimAngle{ syntax:"
"; inherits:false; initial-value:0deg; }
/* frosted-glass surface */
.hiiq-glass{
background:var(--glass-fill);
-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
border:1px solid rgba(255,255,255,.10);
}
/* slow shimmer traveling the outline — a 1.3px gradient ring over the border.
Set --shine / --shine2 per context (frost+white on dark, ember+frost on cream). */
.hiiq-shim{position:relative}
.hiiq-shim::after{
content:"";position:absolute;inset:0;border-radius:inherit;padding:1.3px;pointer-events:none;z-index:3;
background:conic-gradient(from var(--shimAngle),
transparent 0deg, var(--shine) 52deg, var(--shine2) 80deg, transparent 130deg, transparent 360deg);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;
animation:hiiqShim var(--shim-dur) linear infinite;
}
@keyframes hiiqShim{ to{ --shimAngle:360deg } }
/* cursor-following 3D tilt + hover lift. JS sets --rx/--ry from the pointer;
:hover sets --ty for the lift. Give it a bordered surface to lift. */
.hiiq-tilt{
transform:perspective(860px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,var(--ty,0),0);
transform-style:preserve-3d;will-change:transform;
transition:transform .18s var(--ease),box-shadow .3s,border-color .3s;
}
.hiiq-tilt:hover{ --ty:-6px;border-color:var(--frost);box-shadow:var(--shadow-lift) }
/* Respect the user. Motion rewards attention; it never demands it. */
@media (prefers-reduced-motion: reduce){
.hiiq-lift{transition:none}
.hiiq-shim::after{animation:none;display:none}
.hiiq-tilt{transform:none;transition:none}
*{scroll-behavior:auto !important}
}
/* ----------------------------------------------------------------------------
12 · SIGNATURE DEVICES (the fingerprint — Hawaiʻi × IQ, as reusable marks)
Two devices nobody else can wear: the home archipelago as a rule, and the
coordinate plane from the IQ mark as a ground with one Ember point on it.
---------------------------------------------------------------------------- */
/* The archipelago divider — the eight islands, NW → SE, geographically true,
trailing off the way they do in the mark. Use as
or on any block. Color rides `color` (Ember by default) — on cream, set
color:var(--ember-deep); as a quiet structural rule, color:var(--line).
Mask = the current `imagery.hawaiianIslands` manifest role, supplied at
runtime through `--hiiq-islands-mask-image`. */
.hiiq-islands{
display:block;border:0;width:150px;aspect-ratio:238/154;height:auto;margin:var(--space-6) 0;
color:var(--ember);background:currentColor;
-webkit-mask-image:var(--hiiq-islands-mask-image);
-webkit-mask-repeat:no-repeat;
-webkit-mask-position:center;
-webkit-mask-size:contain;
mask-image:var(--hiiq-islands-mask-image);
mask-repeat:no-repeat;
mask-position:center;
mask-size:contain;
}
.hiiq-islands--center{margin-left:auto;margin-right:auto}
/* The coordinate-plane ground — a faint Frost grid with hairline axes crossing
at one Ember point: the point that matters (set --gx/--gy to move it).
For dark canvases; keep it behind content, one per view. */
.hiiq-graph{
position:relative;
background-image:
linear-gradient(to right, rgba(70,107,168,.09) 1px, transparent 1px),
linear-gradient(to bottom, rgba(70,107,168,.09) 1px, transparent 1px);
background-size:28px 28px;
}
.hiiq-graph::before{
content:"";position:absolute;inset:0;pointer-events:none;
background-image:
linear-gradient(to right, transparent calc(var(--gx,66%) - .5px),
rgba(70,107,168,.25) calc(var(--gx,66%) - .5px),
rgba(70,107,168,.25) calc(var(--gx,66%) + .5px),
transparent calc(var(--gx,66%) + .5px)),
linear-gradient(to bottom, transparent calc(var(--gy,38%) - .5px),
rgba(70,107,168,.25) calc(var(--gy,38%) - .5px),
rgba(70,107,168,.25) calc(var(--gy,38%) + .5px),
transparent calc(var(--gy,38%) + .5px));
}
.hiiq-graph::after{
content:"";position:absolute;left:var(--gx,66%);top:var(--gy,38%);
width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
background:var(--ember);box-shadow:0 0 0 5px rgba(255,130,16,.15);pointer-events:none;
}