/* ==========================================================================
RHIC 2026 — 3D experience layer (RHIC-2026-R5)
Loaded AFTER rhic.css. Everything here is progressive enhancement: delete
this one by rhic-ui.js --- */
.hero-canvas {
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 4%;
width: min(240px, 28vw);
height: 100%;
pointer-events: none;
opacity: 1;
z-index: 1; /* above the ambient glass shards */
}
/* On narrow screens the hero is text-first — hide the model (the gradient + shards carry the depth). */
@media (max-width: 820px) { .hero-canvas { display: none; } }
/* --- ECG pulse line sweeping the header --- */
.pulse-line {
position: absolute;
left: 0;
right: 0;
top: 58%;
height: 60px;
opacity: .30;
transform: translateZ(-60px);
}
.pulse-line svg { width: 200%; height: 100%; animation: pulseSweep 9s linear infinite; }
@keyframes pulseSweep { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* --- floating glass shards, parallaxed by JS --- */
.shard {
position: absolute;
border-radius: 16px;
background: linear-gradient(140deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .03));
border: 1px solid rgba(255, 255, 255, .18);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
animation: shardFloat 12s ease-in-out infinite;
}
.shard.s1 { width: 92px; height: 92px; left: 18%; top: 18%; animation-delay: -1s; }
.shard.s2 { width: 58px; height: 58px; right: 22%; top: 24%; animation-delay: -5s; border-radius: 50%; }
.shard.s3 { width: 120px; height: 68px; right: 12%; bottom: 12%; animation-delay: -3s; }
.shard.s4 { width: 46px; height: 46px; left: 26%; bottom: 16%; animation-delay: -7s; border-radius: 12px; }
@media (max-width: 780px) { .shard.s1, .shard.s3 { display: none; } }
@keyframes shardFloat {
0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
50% { transform: translate3d(0, -18px, 40px) rotate(8deg); }
}
/* the title itself sits forward in 3D */
.rhic-header h1 {
transform: translateZ(40px);
text-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
.rhic-header .eyebrow {
transform: translateZ(60px);
text-shadow: 0 0 22px rgba(200, 160, 74, .55);
}
/* ---------------------------------------------------------------- the card */
.rhic-card {
position: relative;
transform-style: preserve-3d;
transition: transform .5s var(--d-ease), box-shadow .5s var(--d-ease);
box-shadow:
0 2px 0 rgba(255, 255, 255, .9) inset,
0 24px 60px -22px rgba(7, 28, 47, .40),
0 60px 90px -60px rgba(7, 28, 47, .55);
will-change: transform;
}
/* gold rim light along the top edge */
.rhic-card::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 3px;
border-radius: var(--rhic-radius) var(--rhic-radius) 0 0;
background: linear-gradient(90deg, transparent, var(--d-gold), var(--d-teal), transparent);
opacity: .85;
}
/* ---------------------------------------------------------------- step rail
The numbered-dot stepper (rhic.css) shows state with filled dots + a progress line, so the old
flat-tab 3D pop is gone: `scale()` on the active item widened it and, with the container perspective,
pushed content past the viewport edge (a horizontal scrollbar at narrow widths). We keep only a tiny
depth lift on the ACTIVE DOT — translateZ never changes layout width, so it can't cause overflow. */
.rhic-steps li { transition: color .25s; }
.rhic-steps .dot { transition: border-color .2s, background .2s, color .2s, transform .3s var(--d-ease); }
.rhic-steps li.is-active .dot { transform: translateZ(10px); }
/* step panels arrive with real depth, not a fade */
.rhic-step.is-active {
animation: stepIn .42s var(--d-ease) both;
transform-origin: 50% 0%;
}
@keyframes stepIn {
from { opacity: 0; transform: perspective(900px) rotateX(-7deg) translateY(14px) translateZ(-40px); }
to { opacity: 1; transform: none; }
}
/* ---------------------------------------------------------------- fields */
.rhic-field input[type="text"],
.rhic-field input[type="email"],
.rhic-field input[type="tel"],
.rhic-field input[type="number"],
.rhic-field select {
transition: transform .25s var(--d-ease), border-color .2s, box-shadow .25s;
box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 1px 2px rgba(7, 28, 47, .06);
}
.rhic-field input:focus,
.rhic-field select:focus {
transform: translateZ(10px) translateY(-1px);
box-shadow:
0 0 0 3px rgba(45, 212, 191, .18),
0 12px 26px -12px rgba(11, 79, 108, .55);
}
.rhic-field label { transition: color .2s, transform .2s var(--d-ease); }
.rhic-field:focus-within label { color: var(--rhic-primary); transform: translateZ(6px); }
/* ---------------------------------------------------------------- category cards */
.rhic-categories { perspective: 1000px; }
.rhic-category label {
transform-style: preserve-3d;
transition: transform .35s var(--d-ease), box-shadow .35s var(--d-ease), border-color .2s, background .2s;
will-change: transform;
}
.rhic-category label:hover { transform: translateZ(16px) translateY(-3px); box-shadow: 0 22px 40px -22px rgba(7, 28, 47, .55); }
.rhic-category input:checked + label {
/* organiser (2026-07-30): make the selection unmistakable — lift, primary ring + tinted fill */
transform: translateZ(26px) translateY(-4px);
border-color: var(--rhic-primary);
background: linear-gradient(180deg, rgba(11, 79, 108, .10), rgba(11, 79, 108, .05));
box-shadow: 0 26px 48px -22px rgba(11, 79, 108, .60), 0 0 0 3px rgba(11, 79, 108, .22);
}
/* the selected card grows a 3D badge that flips in */
.rhic-category input:checked + label::after {
content: '✓';
position: absolute;
top: -9px;
right: -9px;
width: 26px;
height: 26px;
line-height: 26px;
text-align: center;
font-size: .8rem;
font-weight: 700;
color: #fff;
border-radius: 50%;
background: linear-gradient(140deg, var(--d-teal), var(--rhic-primary));
box-shadow: 0 6px 16px rgba(11, 79, 108, .45);
animation: badgeFlip .45s var(--d-ease) both;
}
@keyframes badgeFlip {
from { transform: rotateY(-180deg) scale(.3); opacity: 0; }
to { transform: rotateY(0) scale(1); opacity: 1; }
}
.rhic-category input:disabled + label { filter: grayscale(.4); }
/* a category whose fee has not been announced: visibly present, clearly not choosable yet */
.rhic-category.is-closed label {
background: repeating-linear-gradient(135deg, #f7f9fb, #f7f9fb 9px, #f1f5f8 9px, #f1f5f8 18px);
border-style: dashed;
color: var(--rhic-muted);
cursor: not-allowed;
}
.rhic-category.is-closed label:hover { transform: none; box-shadow: none; border-color: var(--rhic-line); }
.rhic-category.is-closed .name { font-weight: 500; }
.category-note {
grid-column: 1 / -1;
margin: .2rem 0 0;
font-size: .8rem;
color: var(--rhic-muted);
}
/* ---------------------------------------------------------------- declaration checkbox (3D cube tick) */
.rhic-check { align-items: flex-start; }
.rhic-check input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
position: relative;
width: 22px;
height: 22px;
border-radius: 7px;
border: 1.5px solid var(--rhic-line);
background: #fff;
cursor: pointer;
transform-style: preserve-3d;
transition: transform .3s var(--d-ease), background .25s, border-color .25s, box-shadow .25s;
box-shadow: 0 2px 6px rgba(7, 28, 47, .10);
}
.rhic-check input[type="checkbox"]:hover { transform: translateZ(8px) rotateX(-10deg); }
.rhic-check input[type="checkbox"]:checked {
background: linear-gradient(140deg, var(--rhic-primary), var(--d-teal));
border-color: transparent;
transform: translateZ(10px) rotateX(0);
box-shadow: 0 10px 22px -8px rgba(11, 79, 108, .70);
animation: cubeFlip .5s var(--d-ease);
}
.rhic-check input[type="checkbox"]::after {
content: '';
position: absolute;
left: 7px;
top: 3px;
width: 6px;
height: 11px;
border: solid #fff;
border-width: 0 2.5px 2.5px 0;
transform: rotate(45deg) scale(0);
transition: transform .25s var(--d-ease) .08s;
}
.rhic-check input[type="checkbox"]:checked::after { transform: rotate(45deg) scale(1); }
@keyframes cubeFlip {
0% { transform: translateZ(10px) rotateX(0); }
45% { transform: translateZ(10px) rotateX(-180deg); }
100% { transform: translateZ(10px) rotateX(-360deg); }
}
/* ---------------------------------------------------------------- buttons (real extrusion) */
.btn {
position: relative;
transform-style: preserve-3d;
overflow: hidden;
transition: transform .18s var(--d-ease), box-shadow .18s var(--d-ease), background .2s;
}
.btn-primary {
background: linear-gradient(135deg, var(--rhic-primary) 0%, #0d6285 60%, #0e7490 100%);
box-shadow:
0 6px 0 -1px #073b52,
0 16px 30px -14px rgba(7, 59, 82, .85);
}
.btn-primary:hover { transform: translateY(-2px) translateZ(12px); box-shadow: 0 9px 0 -1px #073b52, 0 24px 40px -16px rgba(7, 59, 82, .9); }
.btn-primary:active { transform: translateY(3px); box-shadow: 0 2px 0 -1px #073b52, 0 8px 16px -10px rgba(7, 59, 82, .8); }
.btn-ghost { box-shadow: 0 4px 0 -1px #cbd5e1; }
.btn-ghost:hover { transform: translateY(-2px) translateZ(8px); box-shadow: 0 7px 0 -1px #cbd5e1; }
.btn-ghost:active { transform: translateY(2px); box-shadow: 0 2px 0 -1px #cbd5e1; }
/* light sweeps across the button on hover */
.btn::after {
content: '';
position: absolute;
top: 0;
left: -120%;
width: 60%;
height: 100%;
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
transform: skewX(-18deg);
transition: left .6s var(--d-ease);
}
.btn:hover::after { left: 130%; }
/* ---------------------------------------------------------------- summary reveal */
.rhic-summary { transform-style: preserve-3d; }
.rhic-summary .row { animation: rowIn .4s var(--d-ease) both; }
.rhic-summary .row:nth-child(2) { animation-delay: .05s; }
.rhic-summary .row:nth-child(3) { animation-delay: .10s; }
.rhic-summary .row:nth-child(4) { animation-delay: .15s; }
.rhic-summary .row:nth-child(5) { animation-delay: .20s; }
.rhic-summary .row.total { animation-delay: .26s; }
@keyframes rowIn {
from { opacity: 0; transform: translateZ(-30px) translateX(-8px); }
to { opacity: 1; transform: none; }
}
.rhic-summary .row.total {
background: linear-gradient(120deg, #f7fafc, #eef7f6);
box-shadow: inset 0 1px 0 #fff, 0 -1px 0 var(--rhic-line);
}
/* ---------------------------------------------------------------- note panels */
.rhic-note {
transform-style: preserve-3d;
transition: transform .35s var(--d-ease), box-shadow .35s var(--d-ease);
box-shadow: 0 10px 26px -18px rgba(7, 28, 47, .5);
}
.rhic-note:hover { transform: translateZ(10px); }
/* ---------------------------------------------------------------- flag combobox */
.rhic-combo { position: relative; }
.rhic-combo .combo-trigger {
display: flex;
align-items: center;
gap: .55rem;
width: 100%;
padding: .62rem .8rem;
border: 1px solid var(--rhic-line);
border-radius: var(--rhic-radius-sm);
background: #fff;
font: inherit;
font-size: .95rem;
color: var(--rhic-ink);
cursor: pointer;
text-align: left;
transition: transform .25s var(--d-ease), border-color .2s, box-shadow .25s;
box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 1px 2px rgba(7, 28, 47, .06);
}
.rhic-combo .combo-trigger:hover { border-color: #b7c6d4; }
.rhic-combo.is-open .combo-trigger,
.rhic-combo .combo-trigger:focus {
outline: none;
border-color: var(--rhic-primary);
transform: translateZ(10px);
box-shadow: 0 0 0 3px rgba(45, 212, 191, .18), 0 12px 26px -12px rgba(11, 79, 108, .55);
}
.rhic-combo .flag { font-size: 1.15rem; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); }
.rhic-combo .combo-value { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rhic-combo .combo-dial { color: var(--rhic-muted); font-variant-numeric: tabular-nums; }
.rhic-combo .combo-caret { color: var(--rhic-muted); font-size: .7rem; transition: transform .25s var(--d-ease); }
.rhic-combo.is-open .combo-caret { transform: rotate(180deg); }
.rhic-combo .combo-panel {
position: absolute;
z-index: 40;
top: calc(100% + 6px);
left: 0;
right: 0;
min-width: 280px;
background: #fff;
border: 1px solid var(--rhic-line);
border-radius: var(--rhic-radius-sm);
box-shadow: 0 28px 60px -20px rgba(7, 28, 47, .45);
overflow: hidden;
transform-origin: top center;
transform: perspective(800px) rotateX(-12deg) translateY(-6px);
opacity: 0;
visibility: hidden;
transition: transform .28s var(--d-ease), opacity .22s, visibility .22s;
}
.rhic-combo.is-open .combo-panel { transform: none; opacity: 1; visibility: visible; }
.rhic-combo .combo-search {
width: 100%;
border: 0;
border-bottom: 1px solid var(--rhic-line);
padding: .7rem .85rem;
font: inherit;
font-size: .9rem;
outline: none;
}
.rhic-combo .combo-list {
list-style: none;
margin: 0;
padding: .3rem;
max-height: 260px;
overflow-y: auto;
overscroll-behavior: contain;
}
.rhic-combo .combo-list li {
display: flex;
align-items: center;
gap: .6rem;
padding: .5rem .6rem;
border-radius: 8px;
cursor: pointer;
font-size: .9rem;
transition: background .12s, transform .12s var(--d-ease);
}
.rhic-combo .combo-list li:hover,
.rhic-combo .combo-list li.is-cursor { background: rgba(11, 79, 108, .08); transform: translateX(3px); }
.rhic-combo .combo-list li[aria-selected="true"] { background: rgba(11, 79, 108, .14); font-weight: 600; }
.rhic-combo .combo-list li .name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rhic-combo .combo-list li .dial { color: var(--rhic-muted); font-variant-numeric: tabular-nums; font-size: .85rem; }
.rhic-combo .combo-empty { padding: 1rem; text-align: center; color: var(--rhic-muted); font-size: .85rem; }
/* wider calling-code field so "🇴🇲 +968" is never clipped */
.phone-row { grid-template-columns: minmax(190px, 230px) 1fr; }
@media (max-width: 560px) { .phone-row { grid-template-columns: 1fr; } }
.phone-row .rhic-combo .combo-panel { min-width: 320px; }
/* the combobox has to show the same error state as a native field */
.rhic-field.has-error .combo-trigger { border-color: var(--rhic-danger); }
.rhic-field.has-error .combo-trigger .combo-value { color: var(--rhic-danger); }
/* geo-detected hint */
.geo-hint {
display: none;
align-items: center;
gap: .35rem;
margin-top: .35rem;
font-size: .76rem;
color: var(--rhic-success);
}
.geo-hint.is-visible { display: inline-flex; animation: rowIn .4s var(--d-ease) both; }
/* ---------------------------------------------------------------- custom cursor (desktop, fine pointer only) */
@media (hover: hover) and (pointer: fine) {
body.rhic-cursor-on,
body.rhic-cursor-on * { cursor: none !important; }
/* keep a real caret where text is actually typed */
body.rhic-cursor-on input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.rhic-cursor-on textarea { cursor: text !important; }
.cursor-dot, .cursor-ring {
position: fixed;
top: 0;
left: 0;
pointer-events: none;
z-index: 9999;
border-radius: 50%;
will-change: transform;
}
.cursor-dot {
width: 7px;
height: 7px;
margin: -3.5px 0 0 -3.5px;
background: var(--d-teal);
box-shadow: 0 0 12px rgba(45, 212, 191, .9);
transition: opacity .2s;
}
.cursor-ring {
width: 34px;
height: 34px;
margin: -17px 0 0 -17px;
border: 1.5px solid rgba(11, 79, 108, .55);
transition: width .22s var(--d-ease), height .22s var(--d-ease),
margin .22s var(--d-ease), border-color .22s, background .22s, opacity .2s;
}
.cursor-ring.is-hot {
width: 54px;
height: 54px;
margin: -27px 0 0 -27px;
border-color: var(--d-gold);
background: rgba(200, 160, 74, .10);
}
.cursor-ring.is-press { width: 26px; height: 26px; margin: -13px 0 0 -13px; background: rgba(45, 212, 191, .22); }
.cursor-ring.is-text {
width: 3px;
height: 26px;
margin: -13px 0 0 -1.5px;
border-radius: 2px;
border-color: transparent;
background: var(--rhic-primary);
}
}
/* ---------------------------------------------------------------- success page flourish */
.rhic-result .badge-icon {
transform-style: preserve-3d;
animation: seal 1s var(--d-ease) both;
box-shadow: 0 18px 34px -14px rgba(15, 118, 110, .75);
}
@keyframes seal {
0% { transform: rotateY(-180deg) scale(.2); opacity: 0; }
60% { transform: rotateY(0) scale(1.14); opacity: 1; }
100% { transform: rotateY(0) scale(1); }
}
.rhic-result .qr-box {
transform-style: preserve-3d;
animation: cardIn .7s var(--d-ease) .18s both;
box-shadow: 0 26px 50px -26px rgba(7, 28, 47, .55);
}
@keyframes cardIn {
from { opacity: 0; transform: perspective(900px) rotateX(24deg) translateY(26px); }
to { opacity: 1; transform: none; }
}
/* ---------------------------------------------------------------- accessibility */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
body::before, .helix, .pulse-line, .shard { display: none !important; }
body.rhic-cursor-on, body.rhic-cursor-on * { cursor: auto !important; }
.cursor-dot, .cursor-ring { display: none !important; }
}