/* ============================================================
   Amina Shehzadi — SEO Expert portfolio
   Design language: light "Vision-OS" glass + deep 3D tilt cards
   (as per reference index (11).html — Tailwind carries utilities;
   this file carries the custom 3D/brand layer only)
   ============================================================ */

/* ---------- Custom animated "i" dot logo (Amina) ---------- */
.logo-mark {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.75rem;
  background: linear-gradient(to top right, #4f46e5, #06b6d4);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 800;
  margin-right: 0.65rem;
  box-shadow: 0 0.5rem 1rem rgba(79, 70, 229, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.logo:hover .logo-mark { transform: rotate(12deg) scale(1.1); box-shadow: 0 0.75rem 1.5rem rgba(79, 70, 229, 0.4); }

.i-stem-wrapper {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  line-height: 1;
  margin: 0 1px;
}
/* The 3D levitating orb above the dotless ı */
.i-dot-3d {
  position: absolute;
  top: -0.22em;
  width: 0.34em;
  height: 0.34em;
  border-radius: 9999px;
  background: radial-gradient(circle at 30% 30%, #22d3ee, #4f46e5 65%, #9333ea);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.65), inset 0 2px 4px rgba(255, 255, 255, 0.8);
  animation: iDotBounce3D 2.4s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
  transform-style: preserve-3d;
}
.i-dot-3d::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 9999px;
  border: 2px solid #06b6d4;
  opacity: 0;
  animation: iDotPulseRing 2.4s ease-out infinite;
}
.i-dot-shadow {
  position: absolute;
  top: 0.14em;
  width: 0.24em;
  height: 0.06em;
  border-radius: 50%;
  background: rgba(79, 70, 229, 0.35);
  filter: blur(1px);
  animation: iDotShadowScale 2.4s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
@keyframes iDotBounce3D {
  0%, 100% { transform: translateY(0) scale(1) rotateZ(0deg); }
  40% { transform: translateY(-0.24em) scale(1.18) rotateZ(180deg); background: radial-gradient(circle at 30% 30%, #38bdf8, #6366f1 60%, #ec4899); }
  60% { transform: translateY(-0.2em) scale(1.12) rotateZ(240deg); }
}
@keyframes iDotPulseRing {
  0%, 25% { transform: scale(0.6); opacity: 0; }
  45% { opacity: 0.85; }
  100% { transform: scale(2.4); opacity: 0; }
}
@keyframes iDotShadowScale {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  45% { transform: scale(0.45); opacity: 0.15; }
}

/* ---------- Fixed 3D background layers ---------- */
#bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}
.perspective-grid {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(99, 102, 241, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(6, 182, 212, 0.06) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: perspective(900px) rotateX(62deg) translateY(-100px) translateZ(-200px);
  transform-origin: center top;
  pointer-events: none;
  z-index: 0;
}

/* ---------- Vision-OS light glass nav ---------- */
.glass-nav-light {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 30px -10px rgba(79, 70, 229, 0.08);
}

/* ---------- Extreme 3D tilt glass cards ---------- */
.scene-3d-wrap { perspective: 1400px; }
.card-3d-light {
  position: relative;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.62) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow:
    0 20px 50px -15px rgba(15, 23, 42, 0.08),
    0 0 0 1px rgba(99, 102, 241, 0.08),
    inset 0 2px 4px rgba(255, 255, 255, 0.9);
  transform-style: preserve-3d;
  transition: transform 0.16s cubic-bezier(0.03, 0.98, 0.52, 0.99), box-shadow 0.3s ease, border-color 0.3s ease;
  will-change: transform;
}
.card-3d-light:hover {
  border-color: rgba(99, 102, 241, 0.45);
  box-shadow:
    var(--shadow-x, 0px) var(--shadow-y, 35px) 70px -15px rgba(79, 70, 229, 0.25),
    0 0 25px rgba(6, 182, 212, 0.15),
    inset 0 2px 6px rgba(255, 255, 255, 1);
}
.card-3d-light::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    550px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(99, 102, 241, 0.14),
    rgba(6, 182, 212, 0.08) 30%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.card-3d-light:hover::before { opacity: 1; }

.z-pop-xl { transform: translateZ(70px); }
.z-pop-lg { transform: translateZ(50px); }
.z-pop-md { transform: translateZ(32px); }
.z-pop-sm { transform: translateZ(18px); }

/* ---------- 3D exploding isometric stack (hero) ---------- */
.iso-stack-container { perspective: 1600px; }
.iso-stack {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(16deg) rotateY(-22deg) rotateZ(4deg);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.iso-stack-container:hover .iso-stack {
  transform: rotateX(22deg) rotateY(-28deg) rotateZ(6deg) scale3d(1.03, 1.03, 1.03);
}
.iso-layer-top, .iso-layer-mid, .iso-layer-bot {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.iso-layer-top { transform: translateZ(55px); }
.iso-layer-mid { transform: translateZ(25px); }
.iso-layer-bot { transform: translateZ(-10px); }
.iso-stack-container:hover .iso-layer-top { transform: translateZ(95px) translateY(-10px); }
.iso-stack-container:hover .iso-layer-mid { transform: translateZ(45px); }
.iso-stack-container:hover .iso-layer-bot { transform: translateZ(-25px) translateY(10px); }

@keyframes floatSlow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(2deg); }
}
.animate-float { animation: floatSlow 5s ease-in-out infinite; }

.gradient-text-vivid {
  background: linear-gradient(135deg, #4f46e5 0%, #0891b2 50%, #9333ea 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Scroll progress ---------- */
#scrollProgress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  z-index: 80;
  background: linear-gradient(90deg, #4f46e5, #06b6d4, #9333ea);
  pointer-events: none;
}

/* ---------- Back to top ---------- */
#toTop {
  position: fixed;
  bottom: 1.4rem;
  left: 1.4rem;
  width: 46px;
  height: 46px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #4f46e5, #06b6d4);
  color: #fff;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  display: none;
  box-shadow: 0 10px 24px rgba(79, 70, 229, 0.4);
  z-index: 60;
  transition: transform 0.2s ease;
}
#toTop.show { display: block; }
#toTop:hover { transform: translateY(-3px); }

/* ---------- Instant checkup (light glass, JS uses these classes) ---------- */
.mini-audit { display: flex; gap: 0.75rem; max-width: 660px; margin: 2.2rem auto 0; }
.mini-audit input {
  flex: 1;
  min-width: 0;
  background: #fff;
  border: 2px solid #e2e8f0;
  border-radius: 1rem;
  padding: 0.9rem 1.2rem;
  color: #0f172a;
  font-size: 1rem;
  outline: none;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.mini-audit input:focus { border-color: #4f46e5; box-shadow: 0 6px 20px rgba(79, 70, 229, 0.15); }
#maResults { max-width: 860px; margin: 2.2rem auto 0; }
.ma-msg { text-align: center; color: #475569; display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-weight: 500; }
.ma-msg b { color: #4f46e5; }
.ma-msg .live-pulse { width: 10px; height: 10px; border-radius: 9999px; background: linear-gradient(90deg, #4f46e5, #06b6d4); animation: pulseDot 1.4s ease infinite; }
@keyframes pulseDot { 50% { opacity: 0.35; } }

.ma-panel {
  background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(255,255,255,0.7));
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 1.5rem;
  padding: 2rem;
  box-shadow: 0 20px 50px -15px rgba(15, 23, 42, 0.1);
  text-align: left;
}
.ma-panel h3 { font-weight: 700; color: #0f172a; }
.ma-panel-warn { border-color: rgba(245, 158, 11, 0.4); }
.ma-head { display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; }
.ma-ring {
  width: 150px;
  height: 150px;
  border-radius: 9999px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  position: relative;
}
.ma-ring-in {
  width: 116px;
  height: 116px;
  border-radius: 9999px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 2px 6px rgba(255,255,255,1), 0 8px 24px rgba(99, 102, 241, 0.15);
}
.ma-ring-in b { font-size: 2.2rem; line-height: 1; color: #0f172a; font-weight: 800; }
.ma-ring-in small { font-size: 0.62rem; letter-spacing: 1px; margin-top: 4px; font-weight: 700; }
.ma-head-right { flex: 1; min-width: 260px; }
.ma-head-right h3 { margin-bottom: 0.9rem; font-size: 1.15rem; }
.ma-bar-row { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.55rem; }
.ma-blbl { width: 46%; font-size: 0.82rem; color: #475569; font-weight: 500; }
.ma-bar { flex: 1; height: 10px; border-radius: 99px; background: #e2e8f0; overflow: hidden; }
.ma-fill { display: block; height: 100%; border-radius: 99px; }
.ma-bval { font-size: 0.8rem; width: 44px; text-align: right; color: #0f172a; font-weight: 700; }

.ma-sub { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; color: #4f46e5; margin: 1.6rem 0 0.8rem; }
.ma-sub.ok { color: #059669; }
.ma-issue {
  display: flex;
  gap: 0.8rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #e2e8f0;
  border-radius: 0.9rem;
  margin-bottom: 0.5rem;
}
.sev-dot { width: 9px; height: 9px; border-radius: 9999px; flex-shrink: 0; margin-top: 7px; }
.sev-dot.crit { background: #ef4444; }
.sev-dot.warn { background: #f59e0b; }
.sev-dot.info { background: #38bdf8; }
.ma-issue strong { display: block; font-size: 0.95rem; font-weight: 700; color: #0f172a; }
.ma-issue small { color: #64748b; font-size: 0.82rem; }
.ma-actions { display: flex; gap: 0.8rem; margin-top: 1.6rem; flex-wrap: wrap; }
.ma-fineprint { display: block; margin-top: 1.2rem; color: #64748b; font-size: 0.74rem; }

/* ---------- Amina AI chat widget (light glass) ---------- */
#aiChatFab {
  position: fixed;
  bottom: 1.4rem;
  right: 1.4rem;
  width: 60px;
  height: 60px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #4f46e5, #06b6d4);
  color: #fff;
  border: none;
  cursor: pointer;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 30px rgba(79, 70, 229, 0.4);
  animation: fPulse 2.6s ease-in-out infinite;
  transition: transform 0.2s ease;
}
#aiChatFab:hover { transform: scale(1.08); }
#aiChatFab.active { animation: none; }
#aiChatFab .ai-fab-label { font-size: 0.55rem; font-weight: 800; letter-spacing: 0.06em; position: absolute; bottom: 9px; }
@keyframes fPulse {
  0%, 100% { box-shadow: 0 12px 30px rgba(79, 70, 229, 0.4), 0 0 0 0 rgba(79, 70, 229, 0.45); }
  50% { box-shadow: 0 12px 30px rgba(79, 70, 229, 0.4), 0 0 0 14px rgba(79, 70, 229, 0); }
}
#aiChatPanel {
  position: fixed;
  bottom: 5.7rem;
  right: 1.4rem;
  width: 380px;
  max-width: calc(100vw - 2rem);
  height: 540px;
  max-height: calc(100vh - 8rem);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 1.25rem;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.25);
  z-index: 71;
  display: none;
  flex-direction: column;
  overflow: hidden;
}
#aiChatPanel.open { display: flex; }
.ai-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.1rem;
  background: linear-gradient(135deg, rgba(79,70,229,0.1), rgba(6,182,212,0.1)), rgba(255,255,255,0.9);
  border-bottom: 1px solid #e2e8f0;
}
.ai-header strong { display: block; font-size: 1.02rem; color: #0f172a; font-weight: 800; }
.ai-header strong::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  margin-right: 8px;
  box-shadow: 0 0 8px #10b981;
}
.ai-header span { font-size: 0.78rem; color: #64748b; }
#aiChatClose { background: none; border: none; color: #64748b; font-size: 1.6rem; cursor: pointer; line-height: 1; padding: 0 0.2rem; }
#aiChatClose:hover { color: #0f172a; }
.ai-messages { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.ai-msg { max-width: 85%; padding: 0.6rem 0.85rem; border-radius: 0.9rem; font-size: 0.9rem; line-height: 1.45; }
.ai-msg.bot { background: #eef2ff; color: #1e293b; align-self: flex-start; border-bottom-left-radius: 4px; border: 1px solid #e0e7ff; }
.ai-msg.user { background: linear-gradient(135deg, #4f46e5, #06b6d4); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; font-weight: 600; }
.ai-msg.bot a { color: #4f46e5; text-decoration: underline; }
.ai-msg.typing { display: flex; gap: 5px; align-items: center; padding: 0.85rem 1rem; }
.ai-msg.typing span { width: 7px; height: 7px; border-radius: 50%; background: #4f46e5; animation: aiBlink 1.2s infinite; }
.ai-msg.typing span:nth-child(2) { animation-delay: 0.2s; }
.ai-msg.typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes aiBlink { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }
.ai-chips { display: flex; gap: 0.45rem; padding: 0.55rem 1rem; flex-wrap: wrap; border-top: 1px solid #e2e8f0; }
.ai-chip { background: #fff; border: 1px solid #c7d2fe; color: #4f46e5; border-radius: 9999px; padding: 0.32rem 0.8rem; font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: all 0.15s ease; }
.ai-chip:hover { background: #4f46e5; color: #fff; border-color: #4f46e5; }
.ai-input { display: flex; gap: 0.5rem; padding: 0.7rem 1rem 0.9rem; border-top: 1px solid #e2e8f0; }
.ai-input input { flex: 1; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 0.7rem; padding: 0.6rem 0.8rem; color: #0f172a; font-size: 0.9rem; outline: none; }
.ai-input input:focus { border-color: #4f46e5; }
.ai-input button { background: linear-gradient(135deg, #4f46e5, #06b6d4); border: none; border-radius: 0.7rem; width: 44px; color: #fff; font-size: 1.1rem; cursor: pointer; }

/* ---------- Form feedback note ---------- */
.form-note { display: block; margin-top: 0.8rem; font-size: 0.88rem; font-weight: 600; }
.form-note.ok { color: #059669; }
.form-note.err { color: #dc2626; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  #aiChatFab { animation: none; }
  .ai-msg.typing span { animation: none; opacity: 0.6; }
  .animate-float { animation: none; }
  .i-dot-3d, .i-dot-3d::after, .i-dot-shadow { animation: none; }
  .iso-stack, .iso-layer-top, .iso-layer-mid, .iso-layer-bot { transition: none; }
  .perspective-grid { transform: none; }
}

/* ---------- Responsive helpers ---------- */
@media (max-width: 640px) {
  .mini-audit { flex-direction: column; }
  .mini-audit .btn-x { width: 100%; }
  .ma-head { gap: 1.2rem; justify-content: center; text-align: center; }
  .ma-head-right { text-align: left; }
  .ma-ring { width: 120px; height: 120px; }
  .ma-ring-in { width: 92px; height: 92px; }
  .ma-ring-in b { font-size: 1.7rem; }
  .ma-blbl { width: 40%; font-size: 0.72rem; }
  .ma-actions .btn-x { width: 100%; justify-content: center; }
  .iso-stack-container { perspective: 1000px; }
  .iso-stack { transform: rotateX(8deg) rotateY(-10deg) rotateZ(2deg); }
}