/* =========================================================
   VARIABLES & ROOT
   ========================================================= */
:root{
  --radius: 12px;
  --bg: #f5f7fa;
  --text-dark: #0f1720;
  --muted: #6b7280;

  /* theme colors */
  --ins-red: #ef4444;
  --ins-blue: #2563eb;
  --pc-orange: #fb923c;
  --pc-red: #b91c1c;
  --pc-bg: #fff7ed;
}

/* =========================================================
   GLOBAL
   ========================================================= */
html,body{ height:100%; margin:0; padding:0; }
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  background-color: var(--bg);
  color: var(--text-dark);
  -webkit-font-smoothing:antialiased;

  /* Added to set the wallpaper */
  background-image: url('../images/wallpaper.jpg');
  background-position: 55% 55%;
  background-size: 108% 115%; /* width height */
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* =========================================================
   Toggle Hint
   ========================================================= */
.brand-toggle-hint {
  position: absolute;
  top: -10px;              /* adjust if it touches logo */
  right: -40px;            /* small nudge so it sits near the Apps word */
  display: inline-flex;
  align-items: center;     /* ensures emoji and text align vertically */
  gap: 0.28rem;
  pointer-events: auto;
  z-index: 999;
  user-select: none;

  /* bigger base size + comfortable padding */
  font-size: 15px;
  padding: 0.22rem 0.56rem;
  border-radius: 10px;

  background: #ffffff;
  border: 1px solid rgba(2,6,23,0.06);
  box-shadow: 0 8px 22px rgba(2,6,23,0.08);

  color: #0f1720 !important;
  -webkit-text-fill-color: #0f1720 !important;
  -webkit-background-clip: initial !important;
  background-clip: padding-box !important;
  transform: rotate(15deg);    /* adjust angle (try -15 to -45deg) */
}

/* ensure children use same vertical centering */
.brand-toggle-hint,
.brand-toggle-hint * {
  color: #0f1720 !important;
  vertical-align: middle;
  align-self: center;
}

/* hand: larger and vertically centered (no manual translate) */
.brand-toggle-hint .hint-hand {
  font-size: 20px;                       /* bigger, clearer */
  line-height: 1;
  display: inline-block;
  margin: 0;
  transform: none;                       /* remove earlier translateY */
  font-family: "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", "Twemoji", sans-serif;
  animation: hintWave 1.0s ease-in-out infinite;
  transform-origin: 60% 60%;
}

/* bubble text: bigger, bolder, more readable */
.brand-toggle-hint .hint-bubble {
  font-size: 14px;                       /* increased for readability */
  font-weight: 700;                      /* stronger weight */
  letter-spacing: 0.3px;                 /* improve letter clarity */
  line-height: 0.5;
  white-space: nowrap;
  padding: 0;
  margin-left: 0.24rem;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6); /* tiny lift for contrast on some displays */
}

/* arrow under bubble: slightly smaller and positioned to match new size */
.brand-toggle-hint .hint-bubble::after{
  content: "";
  display:block;
  width:0;height:0;
  border-left:7px solid transparent;
  border-right:7px solid transparent;
  border-top:7px solid #ffffff;
  margin: 0 auto;
  transform: translateY(4px);
}

/* wave keyframes */
@keyframes hintWave {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(-25deg); }   /* more rotation */
  50%  { transform: rotate(20deg); }
  75%  { transform: rotate(-15deg); }
  100% { transform: rotate(0deg); }
}

/* =========================================================
   HUB WRAPPER
   ========================================================= */
.hub-wrap{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:3rem 1rem;
  gap:1rem;
  text-align:center;
}

/* =========================================================
   HEADER
   ========================================================= */
.brand-title {
  margin: 0;
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -1px;
  display: inline-flex;
  align-items: center;       /* keep image + Apps vertically centered */
  gap: 0.6rem;
}

.brand-logo {
  display: inline-block;
  height: 60px;
  width: auto;
  max-width: 300px;
  object-fit: contain;
  -webkit-user-drag: none;
  user-select: none;
  border-radius: 6px;
  margin-bottom: -10px;           /* tiny nudge that won't conflict with animations */
}

.hub-header-container .brand-logo {
  opacity: 0;
  transform: none;              /* ensure no conflicting transform */
  animation: fadeUp 600ms cubic-bezier(.2,.9,.3,1) both;
  animation-delay: 0s;
}

.brand-apps {
  background: linear-gradient(135deg, var(--ins-red), var(--ins-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
  margin-left: 0.4rem;
  display: inline-block;
}

/* =========================================================
   WHITE CONTAINERS (header + footer shrink-to-fit)
   ========================================================= */
.hub-header-container{
  display:inline-block;            /* shrink to content width */
  padding:1rem 2rem;
  margin:1rem auto;
  background:#fff;
  border-radius:var(--radius);
  box-shadow:0 8px 20px rgba(16,24,40,0.08);
  text-align:center; 
  margin-top: -10px; 
}

.hub-footer-container{
  display:inline-block;
  padding:0.8rem 1.6rem;
  margin:0.25rem auto;
  border-radius:var(--radius);
  text-align:center;
  font-size:0.92rem;
  color:var(--muted);
}
.hub-footer-container a{ color:var(--ins-blue); text-decoration:underline; }

/* =========================================================
   PANEL & GRID
   ========================================================= */
.hub-panel{
  width:100%;
  max-width:1200px;
  background:#ffffff;
  border-radius:var(--radius);
  box-shadow:0 12px 30px rgba(16,24,40,0.08);
  padding:1.5rem;

  /* NEW: limit height & scroll just this box */
  max-height: min(60vh, 420px);
  overflow-y: auto;
}

/* Optional: nice slim scrollbar just for the panel */
.hub-panel::-webkit-scrollbar {
  width: 6px;
}
.hub-panel::-webkit-scrollbar-track {
  background: transparent;
}
.hub-panel::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,0.7);
  border-radius: 999px;
}
.hub-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(107,114,128,0.9);
}

/* Firefox */
.hub-panel{
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,0.7) transparent;
}

.grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1.5rem;
  justify-items:center;
}

/* =========================================================
   CARD - GENERIC
   ========================================================= */
.card-app{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  gap:1rem;
  border-radius:var(--radius);
  text-decoration:none;
  width:100%;
  max-width:500px;
  height:170px;
  padding:1.5rem 2rem;
  border:1px solid rgba(0,0,0,0.05);
  transition: box-shadow 0.28s cubic-bezier(.2,.9,.3,1);
  z-index:0;
  background:transparent;
  will-change: transform, box-shadow;
  transform-origin: center;
}

/* hover scale now only on outer card */
.card-app:hover{
  transform: scale(1.2);
  box-shadow:0 15px 30px rgba(0,0,0,0.12);
  outline: none;
  transition: transform 260ms cubic-bezier(.2,.9,.3,1), box-shadow 260ms;
}

/* background pseudo-element stays on the card (positioning unaffected) */
.card-app::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--bg-image, none);
  background-position: var(--bg-position, center center);
  background-size: var(--bg-size, cover);
  background-repeat: no-repeat;
  opacity: var(--bg-opacity, 0);
  transform: scale(var(--bg-scale, 1));
  transition: opacity .28s ease, transform .45s ease;
  z-index:-1;
  filter: brightness(1.2);
  pointer-events:none;
}

/* show background + subtle bg scale for parallax */
.card-app:hover::before { --bg-opacity: 1; --bg-scale: 1.15; }

/* =========================================================
   CARD PARTS
   ========================================================= */
.card-main{
  /* since left badge removed, ensure content has breathing room */
  flex: 1 1 auto;
  text-align: center;
  padding-left: 0;   /* padding is on card itself */
}
.card-main h3{ margin:0; font-size:1.5rem; }
.card-main p{ margin:0; font-size:1rem; color:var(--muted); }

.card-right{ margin-left:auto; color: rgba(0,0,0,0.28); font-size:26px; }

.card-app:hover .card-main h3{
  display: table;     
  margin: 0.10rem auto; 
  padding: 0.2rem 0.5rem;
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(16,24,40,0.06);
  font-size: 2rem;
  font-weight: 600;

  /* fallback visible background for browsers without backdrop-filter */
  background-color: rgba(255, 255, 255, 0.95);

  transition: background-color 180ms ease, box-shadow 180ms ease, border-color 180ms ease, backdrop-filter 180ms ease;
}

.card-app:hover .card-main p {
  display: table;              
  margin: -0.1rem auto;      
  padding: 0.18rem 0.5rem;
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(16,24,40,0.06);
  font-size: 1rem;
  color: #000000;

  /* fallback visible background for browsers without backdrop-filter */
  background-color: rgba(255, 255, 255, 0.95);
  
  transition: background-color 180ms ease, box-shadow 180ms ease, border-color 180ms ease, backdrop-filter 180ms ease;
}

.card-app:hover .card-right {
  font-size: 3rem;
  font-weight: 400;
  color: #000000;
}
/* =========================================================
   THEMES (card base tints)
   ========================================================= */
.card-vl{ background: rgba(37,99,235,0.12); color:var(--text-dark); }
.card-vl .card-main{ color: rgb(33, 79, 218) }

.card-ct{ background: rgba(235, 53, 37, 0.12); color:var(--text-dark); }
.card-ct .card-main{ color: rgb(229, 50, 50) }

.card-dr{ background: rgba(250,204,21,0.10); color:var(--text-dark); }
.card-dr .card-main{ color:  rgba(205, 199, 44, 0.859); }

.card-rm{background: linear-gradient(135deg, rgba(45,212,191,0.16), rgba(129,140,248,0.16));color: var(--text-dark);}
.card-rm .card-main{color: #0f766e;}

.card-bc{ background: var(--pc-bg); color: var(--pc-red); }
.card-bc .card-main{ color: var(--pc-red); }

/* =========================================================
   FOOTER (page-level)
   ========================================================= */
.hub-footer{ font-size:0.9rem; color:var(--muted); margin-top:2rem; }


/* =========================================================
   Entrance animation 
   ========================================================= */
:root{
  --enter-dur-header: 700ms; /* header slightly faster */
  --enter-dur: 500ms;        /* general duration for other elements */
  --enter-ease: cubic-bezier(.2,.9,.3,1);
}

/* stronger rise + small pop for header so it's obvious */
@keyframes fadeUpHeader {
  0%   { opacity: 0; transform: translateY(100px) scale(.7); }
  60%  { opacity: 1; transform: translateY(-20px) scale(1.1); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* normal but quicker fade/slide for the rest */
@keyframes fadeUp {
  0%   { opacity: 0; transform: translateY(18px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ensure the logo element itself isn't double-animated or hidden */
.hub-header-container .brand-logo {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* TITLE (logo + Apps) — most prominent, faster now */
.brand-title {
  opacity: 0;
  transform: translateY(36px) scale(.98);
  animation-name: fadeUpHeader;
  animation-duration: var(--enter-dur-header);
  animation-timing-function: var(--enter-ease);
  animation-fill-mode: both;
  animation-delay: 0.3s; /* header still appears first */
}

/* lead paragraph appears right after title */
.brand .lead {
  opacity: 0;
  transform: translateY(36px) scale(.98);
  animation-name: fadeUpHeader;
  animation-duration: var(--enter-dur-header);
  animation-timing-function: var(--enter-ease);
  animation-fill-mode: both;
  animation-delay: 0.3s; /* header still appears first */
}

/* panel container (white panel) fades/raises next */
.hub-panel {
  opacity: 0;
  transform: translateY(14px);
  animation: fadeUp var(--enter-dur) var(--enter-ease) both;
  animation-delay: 0.25s; /* reduced from 0.36s */
}

/* Card children animate in so hover scale remains intact */
.grid .card-app .card-main,
.grid .card-app .card-right {
  opacity: 0;
  transform: translateY(18px);
  animation-name: fadeUp;
  animation-duration: var(--enter-dur);
  animation-timing-function: var(--enter-ease);
  animation-fill-mode: both;
}

/* Stagger cards with more breathing room (top → bottom, left → right) */
/* reduced delays (~70% of previous values) */
.grid .card-app:nth-child(1) .card-main { animation-delay: 0.36s; } /* ~0.52 * 0.7 */
.grid .card-app:nth-child(1) .card-right{ animation-delay: 0.40s; }

.grid .card-app:nth-child(2) .card-main { animation-delay: 0.49s; } /* ~0.70 * 0.7 */
.grid .card-app:nth-child(2) .card-right{ animation-delay: 0.53s; }

.grid .card-app:nth-child(3) .card-main { animation-delay: 0.62s; } /* ~0.88 * 0.7 */
.grid .card-app:nth-child(3) .card-right{ animation-delay: 0.66s; }

.grid .card-app:nth-child(4) .card-main { animation-delay: 0.74s; } /* ~1.06 * 0.7 */
.grid .card-app:nth-child(4) .card-right{ animation-delay: 0.78s; }

.grid .card-app:nth-child(5) .card-main { animation-delay: 0.86s; }
.grid .card-app:nth-child(5) .card-right{ animation-delay: 0.90s; }

/* Footer arrives last, shortened delay */
.hub-footer-container {
  opacity: 0;
  transform: translateY(14px);
  animation: fadeUp var(--enter-dur) var(--enter-ease) both;
  animation-delay: 0.90s; /* reduced from 1.28s */
}

/* =========================================================
   Card Tag 
   ========================================================= */
.status-badge{
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.28rem 0.5rem;
  border-radius: 999px;
  color: white;
  letter-spacing: 0.4px;
  text-transform: none;
  z-index: 3;
  box-shadow: 0 6px 18px rgba(16,24,40,0.08);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  pointer-events: auto; /* allow hover/tooltip */
}

/* small decorative dot */
.status-badge::before{
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 rgba(0,0,0,0.06);
}

/* WIP — amber pulse */
.status-wip {
  background: linear-gradient(90deg, #f59e0b, #fb923c);
  color: #1f2937;
}
.status-wip::before{
  background: #1f2937;
  /* pulse animation */
  animation: pulseDot 1.6s infinite;
}

/* Maintenance — red/pink (attention) with subtle shake on hover */
.status-maintenance {
  background: linear-gradient(90deg,#ef4444,#f43f5e);
  color: white;
}
.status-maintenance::before{
  background: white;
  box-shadow: 0 0 0 rgba(255,255,255,0.0);
}

/* Ready/live — green */
.status-ready {
  background: linear-gradient(90deg,#22c55e,#10b981);
  color: white;
}
.status-ready::before{
  background: white;
}

/* Pulse keyframes */
@keyframes pulseDot {
  0% { box-shadow: 0 0 0 0 rgba(0,0,0,0.0); transform: scale(1); }
  50% { box-shadow: 0 0 0 6px rgba(0,0,0,0.04); transform: scale(1.12); }
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0.0); transform: scale(1); }
}

/* Use the same fadeUp animation as card content */
.grid .card-app .status-badge {
  opacity: 0;
  transform: translateY(18px);
  animation-name: fadeUp;
  animation-duration: var(--enter-dur);
  animation-timing-function: var(--enter-ease);
  animation-fill-mode: both;
}
/* Voice Logging Card - card 1 */
.grid .card-app:nth-child(1) .status-badge { animation-delay: 0.40s; }

/* Claim Tracker Card - card 2 */
.grid .card-app:nth-child(2) .status-badge { animation-delay: 0.53s; }

/* Referral Program Card - card 3 */
.grid .card-app:nth-child(3) .status-badge { animation-delay: 0.66s; }

/* Broker Competition Card - card 4 */
.grid .card-app:nth-child(4) .status-badge { animation-delay: 0.78s; }

/* RepMotion Card - card 5 */
.grid .card-app:nth-child(5) .status-badge { animation-delay: 0.90s; }

/* =========================================================
   Websites 
   ========================================================= */
:root { --fade-time: 0.22s; }

.grid.fade-out {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--fade-time) ease, transform var(--fade-time) ease;
}
.grid.fade-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--fade-time) ease, transform var(--fade-time) ease;
}

/* websites mode tweaks (optional visual difference) */
body.mode-websites .hub-panel { box-shadow: 0 18px 40px rgba(16,24,40,0.10); }