/* registerForm.css */
/* ==================================== EFFECTS THE LOOK AND FEEL OF THE SPLASH SCREEN =====================================================*/
/* ---------- Base ---------- */
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
touch-action: manipulation;
overscroll-behavior: none;
font-family: 'Manrope', sans-serif;
}
body.overlay-open {
overflow: hidden;
}
/* ---------- Splash background ---------- */
#splash {
position: fixed;
top: 0; left: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
background-size: cover;
background-position: center;
z-index: 0;
/* not a flex container — we'll use a dedicated center overlay for centering the clock */
}
/* dedicated full-screen centering layer for the clock so it's always perfectly centered */
#centerArea {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
pointer-events: auto; /* keep this if you want #centerArea to be interactive */
}
/* ---------- Splash overlay (modal) ---------- */
/* HERE IS THE FIX*/
#splash_overlay {
position: fixed;
inset: 0;
top: -100vh;
left: 0;
color: #fff;
width: 100vw;
height: 100vh;
/*overflow-y: auto;*/
background-color: rgba(0, 0, 0, 0.2);
z-index: 9999;
/*display: none;*/
transition: top 1s ease, opacity 1s ease;
padding: 15px;
box-sizing: border-box;
}








#splash_overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;

    /* Slide-in animation */
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.8s ease, opacity 0.8s ease;

    /* Scrollable */
    overflow-y: auto;

    /* Glass aesthetic 
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);*/

    padding: 15px;
    box-sizing: border-box;
    z-index: 9999;

    /* Firefox scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.35) transparent;
}

/* Active state */
#splash_overlay.active {
    transform: translateY(0);
    opacity: 1;
}

/* Chrome / Edge / Safari scrollbar */
#splash_overlay::-webkit-scrollbar {
    width: 6px;
}

#splash_overlay::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.35);
    border-radius: 4px;
}

#splash_overlay::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.55);
}












#splash_overlay a {
color: #fff;	
}
/*#splash_overlay {
background: transparent;
border: 1px solid #fff;
color: white;
}*/
/* Applies only to inputs inside #splash_overlay */
#splash_overlay ::placeholder {
color: white !important;
opacity: 1;
}

/*
#splash_overlay.active { display: block; top: 0; }
#splash_overlay.exiting { top: -100vh; }
*/

/* small UI elements */
#badge { background: rgb(37 37 37 / 90%); border-radius: 50%; padding: 0.5rem; cursor: pointer; border: solid 1px #80808066; }
#likeTag { position: absolute; right: 48px; width: 140px; top: 7px; font-weight: 600;}
/* ---------- Fixed-position small elements ---------- */
#messageLeft, #cambox, #tickWrapper, #dayCount, #toggleBtn {
position: fixed;
opacity: 0;
animation-fill-mode: forwards;
}
/* positions */
#messageLeft {
top: 47px;
left: 30px;
animation-name: glideUpToTopLeft;
animation-duration: 1.2s;
animation-timing-function: ease-out;
color: #fff;
font-weight: 600;
}
#cambox {
top: 40px;
right: 30px;
animation-name: glideUpToTopRight;
animation-duration: 1.2s;
animation-timing-function: ease-out;
color: #fff;
position: absolute;
z-index: 1100; /* above centerArea */
}
#toggleBtn {
bottom: 40px;
left: 30px;
animation-name: glideDownFromTop;
animation-duration: 1.2s;
animation-timing-function: ease-out;
z-index: 1000;
}
#authorCard {
position: absolute;
top: 43px;
right: 74px;
background: rgba(255, 255, 255, 0.2);
display: none;
color: #fff;
border: solid 1px #5353534f;
z-index: 1101;
}
#authorCard a {
color: #fff;	
}
#dayCount {
bottom: 40px;
right: 30px;
animation-name: glideDownFromTop;
animation-duration: 1.2s;
animation-timing-function: ease-out;
z-index: 1000;
color: #fff;
font-weight: 600;
}
#tickWrapper {
bottom: 55px;
right: 30px;
animation-name: glideDownFromTop;
animation-duration: 1.2s;
animation-timing-function: ease-out;
z-index: 1000;
}
/* ---------- Animations for fixed items ---------- */
@keyframes glideUpToTopLeft {
0% { transform: translateY(calc(150vh + 80px)); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
@keyframes glideUpToTopRight {
0% { transform: translateY(calc(150vh + 80px)); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
@keyframes glideDownFromTop {
0% { transform: translateY(calc(-150vh - 100px)); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
/* ---------- Clock (center) ---------- */
#clockWrap {
color: #fff;
font-weight: 700;
font-size: 2rem;
text-align: center;
user-select: none;
z-index: 1000;
opacity: 0;
animation-name: glideClockUpFromBottom;
animation-duration: 1.2s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
/* optional delay to make it feel a beat after other elements: */
/* animation-delay: 0.05s; */
}
/* large upward glide from below the viewport to center */
@keyframes glideClockUpFromBottom {
0% { transform: translateY(150vh); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
/* ---------- Message: 40px from top and slides in from right ---------- */
#message {
position: absolute;
top: 80px;
left: 50%;
transform: translateX(-50%);
background-color: rgba(255, 255, 255, 0.3);
padding: 12px 20px;
border-radius: 8px;
opacity: 0;
text-align: center;
color: #fff;
z-index: 1100; /* above the clock */
font-weight: 600;
}
/* Message animation: start off-screen to the right, land at centered translateX(-50%) */
@keyframes glideMessageFromRight {
0% {
transform: translateX(50vw);
opacity: 0;
}
10% {
transform: translateX(-50%);
opacity: 1;
}
85% {
transform: translateX(-50%);
opacity: 1;
}
100% {
transform: translateX(-50%);
opacity: 0;
}
}
/* use the variables you had previously (keeps fade timings intact) */
:root {
--glide-duration: 1.2s;
--fade-delay: 10s;
--fade-duration: 3s;
}
#message.animate {
animation: glideMessageFromRight calc(var(--glide-duration) + var(--fade-delay) + var(--fade-duration)) ease-in-out forwards;
}
/* close button */
#closeSplashBtn {
position: absolute;
bottom: 75px;
left: 55px;
transform: translateX(-50%);
z-index: 1001;
padding: 0.6em 1.2em;
font-size: 1rem;
background-color: rgba(255, 255, 255, 0.1);
color: white;
border: 1px solid white;
border-radius: 50px;
cursor: pointer;
transition: background-color 0.3s ease;
}
#closeSplashBtn:hover { background-color: rgba(255, 255, 255, 0.25); }
/* tick toggles */
#tickToggleOverlay {
position: absolute;
bottom: 85px;
right: 30px;
z-index: 10000;
border: none;
border-radius: 20px;
padding: 6px 12px;
font-size: 1rem;
backdrop-filter: blur(4px);
background: rgba(255, 255, 255, 0.2);
display: inline-flex;
align-items: center;
width: 160px;
justify-content: center;
color: white;
}
#tickToggleBtn {
position: absolute;
bottom: 15px;
right: 0px;
z-index: 999;
background-color: rgba(255,255,255,0.2);
width: 160px;
color: white;
border: none;
border-radius: 20px;
padding: 6px 12px;
font-size: 1rem;
cursor: pointer;
backdrop-filter: blur(4px);
animation: tickFadeIn 1.5s ease 1s forwards;
pointer-events: auto;
}
#tickToggleBtn:hover { background: rgba(229,229,229,0.2); }
/* date styling */
#date { font-family: 'Manrope', sans-serif; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; font-weight: bold; font-size: 1.2rem; }
/* responsive small-screen tweaks */
@media (max-height: 450px) {
#formContainer {
height: 300px;
overflow-y: auto !important;
padding-top:10px !important;
padding-bottom:20px !important;
}
}
@media (max-width: 576px) {
#cambox {
top: 95px;
left: 30px;
right: auto;
flex-direction: column-reverse;
align-items: flex-start;
}
#message {
top: 200px;
width: 65%;
}
#authorCard { position: absolute; top: 96px; left: 74px; }
#likeTag { position: absolute; left: 48px; top: 9px; width: 160px; }
}
/*.input-group-text { color: #555; background-color: transparent !important; border: 1px solid #fff; }*/
.toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; touch-action: manipulation; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-switch .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #2196F3; transition: 0.3s; border-radius: 26px; }
.toggle-switch .slider::before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background-color: white; transition: 0.3s; border-radius: 50%; }
.toggle-switch input:checked + .slider { background-color: #a1c1db; }
.toggle-switch input:checked + .slider::before { transform: translateX(22px); }
.email, .password { font-family: Arial, sans-serif; font-size: 12px; }
/* device-specific rules left as-is in your original file if you need them */
#clock {
font-family: 'Manrope', sans-serif;
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
font-size: clamp(4.5rem, 8vw, 7.589rem);
font-weight: bold;
}
/*//////////////////////////////////////////////////*/
@media screen and (orientation: landscape) and (max-width: 850px) {
.square-box {
min-height: 375px;
padding-bottom: 40px;
}
#formContainer {
position: relative; /* needed for absolute positioning of the toggle */
}
#toggleBtn2 {
position: fixed;  /* stick to viewport, not container */
left: 20px;       /* 10px from left edge */
bottom: 30px;         /* vertically centered */
transform: translateY(-50%);
z-index: 1000;    /* ensure it sits above other elements */
}
#overlayFooter {
position: relative; /* so children can be absolutely positioned */
width: 100%;
height: 0; /* footer doesn’t take extra space */
margin-top:100px;
}
}
@media screen and (max-height: 740px) and (orientation: portrait) {
#closeSplashBtn {
bottom: 5px !important;
}
#tickToggleOverlay {
bottom: 5px !important;
}
#overlayFooter {
position: relative; /* so children can be absolutely positioned */
width: 100%;
height: 0; /* footer doesn’t take extra space */
margin-top:30px;
}
#likeTag {width: 160px; }
#secondaryForm {
height: 600px;
overflow: auto;
}
}
@media screen and (max-width: 767px) and (orientation: portrait) {
#closeSplashBtn {
bottom: 5px !important;
}
#tickToggleOverlay {
bottom: 5px !important;
}
#overlayFooter {
position: relative; /* so children can be absolutely positioned */
width: 100%;
height: 0; /* footer doesn’t take extra space */
margin-top:30px;
}
#likeTag {width: 160px; }
#secondaryForm {
height: 600px;
overflow: auto;
}
}
/*
@media (max-width: 850px){
#splash_overlay {
position: fixed;
inset: 0;
top: -100vh;
left: 0;
color: #fff;
width: 100vw;
height: 100vh;
overflow-y: auto;
background-color: rgba(0, 0, 0, 0.2);
z-index: 9999;
display: none;
transition: top 1s ease, opacity 1s ease;
padding: 15px;
box-sizing: border-box;
}
}*/

#secondaryForm {
background: #abb0b4 !important;
border-radius: 0px;
padding: 2rem;
width: 100%;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
box-sizing: border-box;
text-align: center;
padding-bottom: 50px;
max-height: 620px;
overflow-y: auto;
}













#secondaryForm {
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
}

#secondaryForm::-webkit-scrollbar {
    display: none; /* Chrome / Edge / Safari */
}





#formContainer {
width: 100%;
margin: 0 auto;
padding: 0 15px;
text-align: center;
}
div#splash.container-fluid {
background-color:#F4F4F4;
}
div.container-fluid.square-box{
background-color: #C4C7B4;
}
.square-box {
/* max-width: 600px; */
min-height: 100%;
}
.input-group-text {
color: #555;
background-color: transparent !important;
border: 1px solid #ccc;
}
h2 {
margin-bottom: 1rem;
}
.form-slider-wrapper {
position: relative;
height: 160px; /* fixed height to prevent jump */
overflow: hidden;
}
.form-slider {
position: relative;
width: 100%;
height: 100%;
}
.form-step {
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
transform: translateX(100%);
transition: transform 0.45s cubic-bezier(0.77, 0, 0.175, 1),
opacity 0.45s ease;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.form-step.active {
opacity: 1;
transform: translateX(0);
z-index: 2;
}
.form-step.animate-out-left {
transform: translateX(-40%);
opacity: 0;
z-index: 1;
}
.form-step.animate-out-right {
transform: translateX(40%);
opacity: 0;
z-index: 1;
}
input {
padding: 0.65rem;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 0.95rem;
}
button {
background: #0067b8;
color: white;
padding: 0.65rem;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: 600;
}
button:hover {
background: #005499;
}
/* Back link staged fade-in */
.back {
color: #0067b8;
cursor: pointer;
font-size: 0.9rem;
opacity: 0;
transform: translateY(5px);
transition: opacity 0.3s ease, transform 0.3s ease;
margin-bottom: 0.75rem;
align-self: flex-start;
}
.form-step.active .back {
opacity: 1;
transform: translateY(0);
transition-delay: 0.15s;
}
/* Buttons staged fade-in */
.form-btn {
opacity: 0;
transform: translateY(5px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.form-step.active .form-btn {
opacity: 1;
transform: translateY(0);
transition-delay: 0.25s;
}
/* Shake animation for errors */
@keyframes shake {
0%, 100% { transform: translateX(0); }
20%, 60% { transform: translateX(-8px); }
40%, 80% { transform: translateX(8px); }
}
.shake {
animation: shake 0.4s ease;
border-color: red !important;
}
/* Error message */
.error {
color: red;
font-size: 0.85rem;
margin-bottom: 0.5rem;
display: none;
}
/* Toggle button placement */
#toggleBtn2 {
margin-top: 15px;
text-align: center;
}
/* Link styling */
.link {
margin-top: 1rem;
font-size: 0.9rem;
}
.link a {
color: #0067b8;
text-decoration: none;
}
.link a:hover {
text-decoration: underline;
}
/*//////////////////////////////////////////////////*/
/* --------------------------------------
🍏 iPhones (Portrait & Landscape)
----------------------------------------- */
/* iPhone SE / 5 / 5S / 5C */
@media screen and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {
#clock {
font-size: 4rem;
}
}
/* iPhone 6/7/8/X/11/12/13/14 (375px) */
@media screen and (device-width: 375px) and (-webkit-min-device-pixel-ratio: 2) {
#clock {
font-size: 4.5rem;
}
}
/* iPhone Plus / Max models (414px) */
@media screen and (device-width: 414px) and (-webkit-min-device-pixel-ratio: 3) {
#clock {
font-size: 5rem;
}
}
/* iPhone 14/15 Pro Max (430px) */
@media screen and (device-width: 430px) and (-webkit-min-device-pixel-ratio: 3) {
#clock {
font-size: 5.2rem;
}
}
/* --------------------------------------
🍏 iPads (Mini, Air, Pro)
----------------------------------------- */
/* iPad Mini, Standard iPad, iPad Air (768–834px) */
@media screen and (min-device-width: 768px) and (max-device-width: 834px) and (-webkit-min-device-pixel-ratio: 2) {
#clock {
font-size: 6.5rem;
}
}
/* iPad Pro 12.9″ (1024px) */
@media screen and (device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
#clock {
font-size: 7rem;
}
}
/* iPad Pro 12.9″ Portrait */
@media screen and (device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
#clock {
font-size: 7.5rem;
}
}
/* iPad Pro 12.9″ Landscape */
@media screen and (device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
#clock {
font-size: 6.5rem;
}
}
/*//////////////////////////////////////////////////*/
/* Non-iOS touch devices (Android tablets/phones) 
@media screen and (hover: none) and (pointer: coarse) and not (-webkit-min-device-pixel-ratio: 2) {
#clock {
font-size: 6.5rem;
}
}
*/
/* Android specific font sizes */
body.android-device.portrait #clock {
font-size: 3rem;
}
body.android-device.landscape #clock {
font-size: 4rem;
}
.noscript-warning {
position: absolute;
top: 1rem;
left: 1rem;
background: rgba(255, 255, 255, 0.8);
padding: 0.5rem 1rem;
border-radius: 0.25rem;
font-weight: bold;
color: #333;
}