/* ==========================================
   QUINN'S COOL PORTFOLIO
   ========================================== */


:root {

  --bg: #070918;

  --bg2: #11152d;

  --card:
    rgba(20, 25, 52, 0.90);

  --text: #f7f9ff;

  --muted: #adb6d5;

  --blue: #26d9ff;

  --purple: #9b5cff;

  --pink: #ff4ecd;

  --green: #6dffb2;

  --yellow: #ffe66d;

  --border:
    rgba(255, 255, 255, 0.14);

}


/* ==========================================
   RESET
   ========================================== */

* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}


html {

  scroll-behavior: smooth;

}


body {

  min-height: 100vh;

  color: var(--text);

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  line-height: 1.6;

  background:

    radial-gradient(
      circle at 10% 0%,
      rgba(155,92,255,.25),
      transparent 28%
    ),

    radial-gradient(
      circle at 90% 10%,
      rgba(38,217,255,.20),
      transparent 28%
    ),

    linear-gradient(
      135deg,
      var(--bg),
      var(--bg2)
    );

}


button,
a {

  font: inherit;

}


button {

  color: inherit;

}


/* ==========================================
   HEADER
   ========================================== */

header {

  position: sticky;

  top: 0;

  z-index: 100;

  border-bottom:
    1px solid var(--border);

  background:
    rgba(7,9,24,.92);

  backdrop-filter:
    blur(15px);

}


nav {

  width:
    min(1100px, 92%);

  min-height: 75px;

  margin: auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

}


.logo {

  color: white;

  text-decoration: none;

  font-size: 1.5rem;

  font-weight: 1000;

  letter-spacing: 4px;

  transition: .25s;

}


.logo:hover {

  color: var(--blue);

  transform:
    scale(1.08);

}


.logo span {

  color:
    var(--blue);

}


.nav-links {

  display: flex;

  gap: 8px;

}


.nav-links a {

  padding:
    9px 14px;

  border-radius: 12px;

  color:
    var(--muted);

  text-decoration: none;

  font-weight: bold;

  transition: .25s;

}


.nav-links a:hover,
.nav-links a.active {

  color: white;

  background:
    rgba(38,217,255,.12);

  transform:
    translateY(-2px);

}


/* ==========================================
   MAIN
   ========================================== */

main {

  width:
    min(1100px, 92%);

  margin: auto;

  padding:
    60px 0 90px;

}


/* ==========================================
   HERO
   ========================================== */

.hero {

  min-height:
    70vh;

  display: grid;

  grid-template-columns:
    1.3fr .7fr;

  align-items: center;

  gap: 50px;

}


.tag {

  margin-bottom:
    12px;

  color:
    var(--blue);

  font-size:
    .78rem;

  font-weight:
    900;

  letter-spacing:
    3px;

}


h1 {

  margin-bottom:
    22px;

  font-size:
    clamp(3.5rem, 9vw, 7rem);

  line-height:
    .95;

  letter-spacing:
    -4px;

}


h1 span {

  color:
    var(--blue);

  text-shadow:
    0 0 20px
    rgba(38,217,255,.35);

}


h2 {

  margin-bottom:
    10px;

}


h3 {

  margin-bottom:
    10px;

}


.intro,
.page-title > p,
.callout p,
.about-box p {

  max-width:
    750px;

  color:
    var(--muted);

  font-size:
    1.08rem;

}


/* ==========================================
   BUTTONS
   ========================================== */

.buttons {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    12px;

  margin-top:
    28px;

}


.button,
.small-button {

  border:
    0;

  border-radius:
    999px;

  padding:
    12px 20px;

  color:
    white;

  text-decoration:
    none;

  font-weight:
    900;

  cursor:
    pointer;

  transition:
    .25s;

}


.button:hover,
.small-button:hover {

  transform:
    translateY(-4px)
    scale(1.03);

}


.blue {

  background:
    linear-gradient(
      90deg,
      var(--blue),
      #788cff
    );

  color:
    #06101a;

}


.purple {

  background:
    linear-gradient(
      90deg,
      var(--purple),
      #6f7cff
    );

}


.pink {

  background:
    linear-gradient(
      90deg,
      var(--pink),
      var(--purple)
    );

}


/* ==========================================
   MESSAGE BOXES
   ========================================== */

.message {

  display:
    none;

  margin-top:
    20px;

  padding:
    15px 18px;

  border-left:
    4px solid var(--blue);

  border-radius:
    12px;

  color:
    white;

  background:
    rgba(38,217,255,.08);

}


.message.show {

  display:
    block;

  animation:
    pop .25s ease;

}


/* ==========================================
   PROFILE CARD
   ========================================== */

.profile-card {

  padding:
    32px;

  border:
    1px solid var(--border);

  border-radius:
    28px;

  text-align:
    center;

  background:
    var(--card);

  box-shadow:
    0 20px 50px
    rgba(0,0,0,.3);

  animation:
    float 4s ease-in-out infinite;

}


.avatar {

  width:
    125px;

  height:
    125px;

  margin:
    auto;

  display:
    grid;

  place-items:
    center;

  border-radius:
    35px;

  color:
    white;

  font-size:
    4rem;

  font-weight:
    1000;

  background:
    linear-gradient(
      135deg,
      var(--purple),
      var(--blue)
    );

  box-shadow:
    0 0 40px
    rgba(38,217,255,.25);

}


.avatar.big {

  width:
    150px;

  height:
    150px;

}


.profile-card > p {

  color:
    var(--muted);

}


.mini-stats {

  display:
    grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:
    8px;

  margin:
    20px 0;

}


.mini-stats div {

  padding:
    10px;

  border-radius:
    15px;

  background:
    rgba(255,255,255,.04);

}


.mini-stats strong {

  display:
    block;

  font-size:
    1.5rem;

}


.mini-stats small {

  color:
    var(--muted);

}


.small-button {

  border:
    1px solid var(--blue);

  background:
    transparent;

}


/* ==========================================
   SECTIONS
   ========================================== */

.section {

  margin-top:
    80px;

}


.section h2 {

  font-size:
    2.5rem;

}


/* ==========================================
   INFO BOXES
   ========================================== */

.info-grid {

  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:
    15px;

  margin-top:
    25px;

}


.info-box {

  padding:
    22px;

  border:
    1px solid var(--border);

  border-radius:
    20px;

  background:
    var(--card);

  transition:
    .25s;

}


.info-box:hover {

  transform:
    translateY(-5px);

  border-color:
    var(--blue);

}


.info-box strong {

  display:
    block;

  color:
    var(--blue);

  margin-bottom:
    5px;

}


.info-box span {

  color:
    var(--muted);

}


/* ==========================================
   CARDS
   ========================================== */

.cards {

  display:
    grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:
    20px;

  margin-top:
    25px;

}


.card {

  min-height:
    230px;

  padding:
    28px;

  border:
    1px solid var(--border);

  border-radius:
    24px;

  color:
    white;

  background:
    var(--card);

  text-align:
    left;

  cursor:
    pointer;

  transition:
    .25s;

}


.card:hover {

  transform:
    translateY(-9px)
    rotate(-1deg);

  border-color:
    var(--blue);

  box-shadow:
    0 0 30px
    rgba(38,217,255,.12);

}


.card.clicked,
.fun-card.clicked,
.fact.clicked {

  transform:
    scale(.96);

  border-color:
    var(--yellow);

}


.card > span:first-child {

  display:
    block;

  margin-bottom:
    18px;

  font-size:
    2.7rem;

}


.card p {

  color:
    var(--muted);

}


.card strong {

  display:
    block;

  margin-top:
    20px;

  color:
    var(--blue);

  font-size:
    .75rem;

}


/* ==========================================
   ABOUT BOX
   ========================================== */

.page-title {

  margin-bottom:
    35px;

}


.page-title h1 {

  font-size:
    clamp(3rem, 8vw, 6rem);

}


.about-box {

  padding:
    32px;

  display:
    grid;

  grid-template-columns:
    150px 1fr;

  gap:
    30px;

  border:
    1px solid var(--border);

  border-radius:
    28px;

  background:
    var(--card);

}


/* ==========================================
   BUTTON GRIDS
   ========================================== */

.button-grid,
.question-grid {

  display:
    grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:
    14px;

  margin-top:
    25px;

}


.fun-card,
.fact {

  min-height:
    100px;

  padding:
    18px;

  border:
    1px solid var(--border);

  border-radius:
    18px;

  color:
    white;

  background:
    rgba(255,255,255,.04);

  font-weight:
    900;

  cursor:
    pointer;

  transition:
    .25s;

}


.fun-card:hover,
.fact:hover {

  transform:
    translateY(-5px);

  border-color:
    var(--pink);

  background:
    rgba(255,78,205,.08);

}


/* ==========================================
   PROJECT CONSOLE
   ========================================== */

.project-info {

  margin-top:
    30px;

  padding:
    30px;

  min-height:
    150px;

  border:
    1px solid var(--border);

  border-radius:
    24px;

  background:
    var(--card);

}


.project-info.show {

  border-color:
    var(--pink);

  animation:
    pop .3s ease;

}


/* ==========================================
   CALLOUT
   ========================================== */

.callout {

  margin-top:
    70px;

  padding:
    32px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    25px;

  border:
    1px solid var(--border);

  border-radius:
    26px;

  background:
    var(--card);

}


/* ==========================================
   FOOTER
   ========================================== */

footer {

  padding:
    30px 20px;

  border-top:
    1px solid var(--border);

  color:
    var(--muted);

  text-align:
    center;

}


/* ==========================================
   ANIMATIONS
   ========================================== */

@keyframes float {

  0%,100% {

    transform:
      translateY(0);

  }

  50% {

    transform:
      translateY(-12px);

  }

}


@keyframes pop {

  from {

    opacity:
      0;

    transform:
      scale(.96);

  }

  to {

    opacity:
      1;

    transform:
      scale(1);

  }

}


/* ==========================================
   TABLET
   ========================================== */

@media (max-width: 800px) {

  .hero {

    grid-template-columns:
      1fr;

  }


  .cards {

    grid-template-columns:
      1fr 1fr;

  }


  .button-grid,
  .question-grid {

    grid-template-columns:
      1fr 1fr;

  }


  .info-grid {

    grid-template-columns:
      1fr 1fr;

  }


  .about-box {

    grid-template-columns:
      1fr;

  }


  .avatar.big {

    margin:
      auto;

  }

}


/* ==========================================
   PHONE
   ========================================== */

@media (max-width: 560px) {

  main {

    padding-top:
      35px;

  }


  nav {

    flex-direction:
      column;

    padding:
      18px 0;

    gap:
      12px;

  }


  .nav-links {

    width:
      100%;

    justify-content:
      center;

    flex-wrap:
      wrap;

  }


  h1 {

    letter-spacing:
      -2px;

  }


  .cards,
  .button-grid,
  .question-grid,
  .info-grid {

    grid-template-columns:
      1fr;

  }


  .callout {

    align-items:
      flex-start;

    flex-direction:
      column;

  }

}
/* =========================================================
   QUINN PORTFOLIO VISUAL UPGRADE
   CSS ADD-ON
   Paste at the VERY BOTTOM of style.css
   ========================================================= */


/* =========================================================
   GLOBAL SMOOTHNESS
   ========================================================= */

html {
  scroll-behavior: smooth;
}

body {
  position: relative;
  overflow-x: hidden;
}


/* =========================================================
   FUTURISTIC BACKGROUND
   ========================================================= */

#quinnBackground {
  position: fixed;
  inset: 0;
  z-index: -10;
  pointer-events: none;
  overflow: hidden;
}

.quinn-grid {
  position: absolute;
  inset: -100px;

  background-image:
    linear-gradient(
      rgba(80, 200, 255, 0.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(170, 90, 255, 0.045) 1px,
      transparent 1px
    );

  background-size: 55px 55px;

  transform: perspective(500px) rotateX(55deg);

  transform-origin: center bottom;

  opacity: 0.65;

  mask-image:
    linear-gradient(
      to bottom,
      transparent,
      black 20%,
      black 65%,
      transparent
    );

  animation:
    quinnGridMove 20s linear infinite;
}


.quinn-orb {
  position: absolute;

  width: 430px;
  height: 430px;

  border-radius: 50%;

  filter: blur(90px);

  opacity: 0.13;

  animation:
    quinnOrbFloat 14s ease-in-out infinite alternate;
}


.quinn-orb-one {
  top: -180px;
  left: -150px;

  background: #4cc9ff;
}


.quinn-orb-two {
  top: 35%;
  right: -200px;

  background: #9b5cff;

  animation-delay: -5s;
}


.quinn-orb-three {
  bottom: -220px;
  left: 35%;

  background: #ff4fc3;

  animation-delay: -9s;
}


/* =========================================================
   MOUSE GLOW
   ========================================================= */

#quinnMouseGlow {
  position: fixed;

  width: 360px;
  height: 360px;

  left: 0;
  top: 0;

  transform:
    translate(-50%, -50%);

  border-radius: 50%;

  pointer-events: none;

  z-index: 9995;

  background:
    radial-gradient(
      circle,
      rgba(70, 210, 255, 0.12),
      rgba(150, 80, 255, 0.055) 35%,
      transparent 70%
    );

  transition:
    left 0.08s linear,
    top 0.08s linear;
}


#quinnMouseRing {
  position: fixed;

  width: 35px;
  height: 35px;

  left: 0;
  top: 0;

  margin-left: -17.5px;
  margin-top: -17.5px;

  border:
    1px solid rgba(80, 210, 255, 0.65);

  border-radius: 50%;

  pointer-events: none;

  z-index: 9998;

  box-shadow:
    0 0 15px rgba(70, 210, 255, 0.3),
    inset 0 0 12px rgba(150, 80, 255, 0.15);

  transition:
    width 0.15s ease,
    height 0.15s ease,
    margin 0.15s ease,
    border-color 0.15s ease;
}


/* =========================================================
   PARTICLE CANVAS
   ========================================================= */

#quinnParticles {
  position: fixed;

  inset: 0;

  width: 100%;
  height: 100%;

  pointer-events: none;

  z-index: -5;

  opacity: 0.65;
}


/* =========================================================
   SCROLL PROGRESS
   ========================================================= */

#quinnScrollProgress {
  position: fixed;

  top: 0;
  left: 0;

  width: 0;
  height: 4px;

  z-index: 10000;

  background:
    linear-gradient(
      90deg,
      #36d1ff,
      #9b5cff,
      #ff4fc3,
      #36d1ff
    );

  background-size: 300% 100%;

  box-shadow:
    0 0 15px rgba(54, 209, 255, 0.75);

  animation:
    quinnGradientMove 5s linear infinite;
}


/* =========================================================
   GLASS EFFECT
   ========================================================= */

header {
  transition:
    background 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease;
}


body.quinn-scrolled header {
  background:
    rgba(7, 10, 25, 0.82);

  backdrop-filter:
    blur(20px);

  -webkit-backdrop-filter:
    blur(20px);

  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.2);

  border-bottom:
    1px solid rgba(255, 255, 255, 0.08);
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.nav-links a {
  position: relative;

  transition:
    color 0.2s ease,
    transform 0.2s ease;
}


.nav-links a::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: -8px;

  width: 0;
  height: 2px;

  transform:
    translateX(-50%);

  border-radius: 10px;

  background:
    linear-gradient(
      90deg,
      #36d1ff,
      #9b5cff
    );

  box-shadow:
    0 0 10px rgba(54, 209, 255, 0.7);

  transition:
    width 0.25s ease;
}


.nav-links a:hover {
  transform:
    translateY(-2px);
}


.nav-links a:hover::after,
.nav-links a.active::after {
  width: 70%;
}


/* =========================================================
   LOGO
   ========================================================= */

.logo {
  transition:
    transform 0.25s ease,
    filter 0.25s ease;
}


.logo:hover {
  transform:
    scale(1.04);

  filter:
    drop-shadow(
      0 0 12px rgba(54, 209, 255, 0.45)
    );
}


/* =========================================================
   BUTTONS
   ========================================================= */

.button,
.small-button {
  position: relative;

  overflow: hidden;

  transition:
    transform 0.2s ease,
    box-shadow 0.25s ease,
    filter 0.25s ease;
}


.button::before,
.small-button::before {
  content: "";

  position: absolute;

  top: 0;
  left: -120%;

  width: 80%;
  height: 100%;

  transform:
    skewX(-20deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,0.22),
      transparent
    );

  transition:
    left 0.55s ease;

  pointer-events: none;
}


.button:hover::before,
.small-button:hover::before {
  left: 140%;
}


.button:hover,
.small-button:hover {
  transform:
    translateY(-4px)
    scale(1.02);

  filter:
    brightness(1.08);

  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.25),
    0 0 22px rgba(54, 209, 255, 0.15);
}


.button:active,
.small-button:active {
  transform:
    translateY(0)
    scale(0.97);
}


/* =========================================================
   PROFILE CARD
   ========================================================= */

.profile-card {
  transition:
    transform 0.25s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}


.profile-card:hover {
  box-shadow:
    0 25px 70px rgba(0, 0, 0, 0.35),
    0 0 40px rgba(54, 209, 255, 0.12);
}


.avatar {
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}


.profile-card:hover .avatar {
  transform:
    rotate(-5deg)
    scale(1.06);

  box-shadow:
    0 0 25px rgba(54, 209, 255, 0.4),
    0 0 55px rgba(155, 92, 255, 0.2);
}


/* =========================================================
   ALL CARDS
   ========================================================= */

.card,
.fun-card,
.fact,
.info-box,
.callout,
.about-box,
.project-info {
  position: relative;

  overflow: hidden;

  transition:
    transform 0.25s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}


.card::after,
.fun-card::after,
.fact::after,
.info-box::after {
  content: "";

  position: absolute;

  inset: -60%;

  pointer-events: none;

  opacity: 0;

  background:
    radial-gradient(
      circle at
      var(--shine-x, 50%)
      var(--shine-y, 50%),
      rgba(255,255,255,0.13),
      transparent 30%
    );

  transition:
    opacity 0.2s ease;
}


.card:hover::after,
.fun-card:hover::after,
.fact:hover::after,
.info-box:hover::after {
  opacity: 1;
}


.card:hover,
.fun-card:hover,
.fact:hover {
  transform:
    translateY(-7px);

  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.3),
    0 0 28px rgba(54, 209, 255, 0.1);
}


/* =========================================================
   CARD ICONS
   ========================================================= */

.card > span,
.fun-card > span {
  display: inline-block;

  transition:
    transform 0.3s ease;
}


.card:hover > span,
.fun-card:hover > span {
  transform:
    scale(1.18)
    rotate(-5deg);
}


/* =========================================================
   HERO
   ========================================================= */

.hero-text {
  animation:
    quinnHeroIn 0.8s ease both;
}


.profile-card {
  animation:
    quinnProfileIn 0.9s ease 0.1s both;
}


/* =========================================================
   HEADINGS
   ========================================================= */

h1 span,
h2 span {
  background:
    linear-gradient(
      90deg,
      #36d1ff,
      #9b5cff,
      #ff4fc3,
      #36d1ff
    );

  background-size: 250% auto;

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;

  animation:
    quinnGradientMove 6s linear infinite;
}


/* =========================================================
   MESSAGE ANIMATION
   ========================================================= */

.message.show {
  animation:
    quinnMessageIn 0.4s ease both;
}


/* =========================================================
   PROJECT CONSOLE
   ========================================================= */

.project-info {
  transition:
    opacity 0.35s ease,
    transform 0.35s ease,
    box-shadow 0.35s ease;
}


.project-info.show {
  animation:
    quinnConsoleIn 0.45s ease both;

  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.3),
    0 0 35px rgba(155, 92, 255, 0.12);
}


/* =========================================================
   QUESTIONS
   ========================================================= */

.question-answer {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}


.question-answer.show {
  box-shadow:
    0 15px 45px rgba(0, 0, 0, 0.25),
    0 0 25px rgba(155, 92, 255, 0.12);
}


/* =========================================================
   REVEAL ANIMATION
   ========================================================= */

.quinn-reveal {
  opacity: 0;

  transform:
    translateY(30px);

  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}


.quinn-reveal.quinn-visible {
  opacity: 1;

  transform:
    translateY(0);
}


/* =========================================================
   RIPPLE
   ========================================================= */

.quinn-ripple {
  position: absolute;

  width: 10px;
  height: 10px;

  border-radius: 50%;

  pointer-events: none;

  background:
    rgba(255, 255, 255, 0.25);

  transform:
    scale(0);

  animation:
    quinnRipple 0.65s ease-out forwards;
}


/* =========================================================
   CLICK SPARK
   ========================================================= */

.quinn-spark {
  position: fixed;

  width: 6px;
  height: 6px;

  margin-left: -3px;
  margin-top: -3px;

  border-radius: 50%;

  pointer-events: none;

  z-index: 10002;

  background: white;

  box-shadow:
    0 0 8px #36d1ff,
    0 0 18px #9b5cff;

  animation:
    quinnSpark 0.7s ease-out forwards;
}


/* =========================================================
   TOAST
   ========================================================= */

#quinnToast {
  position: fixed;

  left: 50%;
  bottom: 28px;

  transform:
    translate(-50%, 25px);

  opacity: 0;

  z-index: 10005;

  padding:
    12px 20px;

  border:
    1px solid rgba(255,255,255,0.15);

  border-radius: 999px;

  color: white;

  background:
    rgba(10, 14, 30, 0.82);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);

  box-shadow:
    0 15px 45px rgba(0,0,0,0.3),
    0 0 25px rgba(54,209,255,0.1);

  pointer-events: none;

  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}


#quinnToast.show {
  opacity: 1;

  transform:
    translate(-50%, 0);
}


/* =========================================================
   FLOATING FX BUTTON
   ========================================================= */

.quinn-floating-button,
.quinn-top-button {
  position: fixed;

  right: 20px;

  z-index: 10004;

  border:
    1px solid rgba(255,255,255,0.15);

  color: white;

  background:
    rgba(10,14,30,0.78);

  backdrop-filter:
    blur(15px);

  -webkit-backdrop-filter:
    blur(15px);

  cursor: pointer;

  box-shadow:
    0 10px 30px rgba(0,0,0,0.25);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.25s ease;
}


.quinn-floating-button {
  bottom: 20px;

  padding:
    9px 14px;

  border-radius: 999px;
}


.quinn-top-button {
  bottom: 68px;

  width: 42px;
  height: 42px;

  border-radius: 50%;

  font-size: 20px;

  opacity: 0;

  pointer-events: none;
}


.quinn-top-button.show {
  opacity: 1;

  pointer-events: auto;
}


.quinn-floating-button:hover,
.quinn-top-button:hover {
  transform:
    translateY(-4px)
    scale(1.05);

  box-shadow:
    0 15px 35px rgba(0,0,0,0.3),
    0 0 25px rgba(54,209,255,0.18);
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes quinnGridMove {
  from {
    transform:
      perspective(500px)
      rotateX(55deg)
      translateY(0);
  }

  to {
    transform:
      perspective(500px)
      rotateX(55deg)
      translateY(55px);
  }
}


@keyframes quinnOrbFloat {
  0% {
    transform:
      translate(0, 0)
      scale(1);
  }

  50% {
    transform:
      translate(80px, 50px)
      scale(1.1);
  }

  100% {
    transform:
      translate(-40px, 100px)
      scale(0.94);
  }
}


@keyframes quinnGradientMove {
  from {
    background-position: 0% 50%;
  }

  to {
    background-position: 300% 50%;
  }
}


@keyframes quinnHeroIn {
  from {
    opacity: 0;
    transform:
      translateY(20px);
  }

  to {
    opacity: 1;
    transform:
      translateY(0);
  }
}


@keyframes quinnProfileIn {
  from {
    opacity: 0;
    transform:
      translateX(25px)
      scale(0.97);
  }

  to {
    opacity: 1;
    transform:
      translateX(0)
      scale(1);
  }
}


@keyframes quinnMessageIn {
  from {
    opacity: 0;
    transform:
      translateY(8px)
      scale(0.98);
  }

  to {
    opacity: 1;
    transform:
      translateY(0)
      scale(1);
  }
}


@keyframes quinnConsoleIn {
  from {
    opacity: 0;
    transform:
      translateY(18px)
      scale(0.98);
  }

  to {
    opacity: 1;
    transform:
      translateY(0)
      scale(1);
  }
}


@keyframes quinnRipple {
  to {
    transform:
      scale(30);

    opacity: 0;
  }
}


@keyframes quinnSpark {
  0% {
    transform:
      translate(0, 0)
      scale(1);

    opacity: 1;
  }

  100% {
    transform:
      translate(
        var(--spark-x),
        var(--spark-y)
      )
      scale(0);

    opacity: 0;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .quinn-orb {
    width: 260px;
    height: 260px;

    filter:
      blur(65px);
  }


  #quinnMouseGlow,
  #quinnMouseRing {
    display: none;
  }


  #quinnParticles {
    opacity: 0.3;
  }


  .quinn-floating-button {
    right: 12px;
    bottom: 12px;
  }


  .quinn-top-button {
    right: 12px;
    bottom: 60px;
  }


  #quinnToast {
    bottom: 65px;

    max-width:
      calc(100vw - 30px);

    text-align: center;
  }


  .quinn-reveal {
    transform:
      translateY(18px);
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }


  .quinn-grid,
  .quinn-orb,
  #quinnScrollProgress,
  h1 span,
  h2 span {
    animation: none;
  }


  .quinn-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* =========================================================
   QUINN MOUSE GLOW + TRAIL
   ========================================================= */

#mouseGlow {
  position: fixed;

  width: 250px;
  height: 250px;

  left: 0;
  top: 0;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  pointer-events: none;

  z-index: 2147483646;

  background: radial-gradient(
    circle,
    rgba(38, 217, 255, 0.35) 0%,
    rgba(155, 92, 255, 0.20) 35%,
    rgba(255, 78, 205, 0.08) 55%,
    transparent 75%
  );

  filter: blur(8px);

  opacity: 1;
}


#mouseRing {
  position: fixed;

  width: 32px;
  height: 32px;

  left: 0;
  top: 0;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  border: 2px solid #26d9ff;

  pointer-events: none;

  z-index: 2147483647;

  box-shadow:
    0 0 10px #26d9ff,
    0 0 25px #26d9ff,
    0 0 40px #9b5cff;

  opacity: 1;
}


.mouseTrailDot {
  position: fixed;

  width: 8px;
  height: 8px;

  border-radius: 50%;

  pointer-events: none;

  z-index: 2147483645;

  background: #26d9ff;

  box-shadow:
    0 0 8px #26d9ff,
    0 0 18px #9b5cff,
    0 0 30px #ff4ecd;

  transform: translate(-50%, -50%);

  animation: mouseTrailFade 0.6s linear forwards;
}


@keyframes mouseTrailFade {

  0% {
    opacity: 1;

    transform:
      translate(-50%, -50%)
      scale(1);
  }

  100% {
    opacity: 0;

    transform:
      translate(-50%, -50%)
      scale(0);
  }

}