:root { 
  --bg:#e4e4e4; --ink:#111; --ink-rgb: 17, 17, 17; --revealH:1.1em; --stagger:90ms; --handoff-dx:0px;
  
  /* ChatGPT section variables */
  --ref-w: 815px;
  --ref-h: 192px;
  --pill-w: 700px;
  --pill-h: 35px;
  --gap: 32px;
  --gpt-bg: #4b4b4b;
  --gpt-input: #303030;    /* Light blue! */
  --gpt-text: #EDEDED;
  --gpt-muted: #B3B3B3;
  --gpt-border: #3A3A3A;
}

html,body{height:100%; overflow-x:hidden}

/* Hide scrollbar but keep scrolling - comprehensive cross-browser solution */
.hide-scrollbar,
html,
body {
  overflow: auto;               /* Keep scroll functionality */
  -ms-overflow-style: none;     /* IE/old Edge */
  scrollbar-width: none;        /* Firefox */
}
.hide-scrollbar::-webkit-scrollbar,
html::-webkit-scrollbar,
body::-webkit-scrollbar { 
  display: none;                /* Chrome/Edge/Safari */
}

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  /* No transitions - instant color response for maximum smoothness */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Ensure instant color changes */
  transition: none;
}

/* Full-page blending overlay that smoothly inverts the scene */
#invert-veil{
  position:fixed; inset:0; background:#000; pointer-events:none;
  opacity:0; transition:opacity .6s ease; z-index:9999; display:none;
}

/* Dark theme toggled by scroll only */
body.theme-dark{ --bg:#111; --ink:#ffffff; --ink-rgb: 255, 255, 255 }

/* Ensure synchronized color changes for main elements */
.intro, .brand, .location-text, .content-section {
  transition: none !important;
}

/* INTRO starts as a fixed overlay; becomes a normal section on handoff */
.intro{
  position:fixed; inset:0; z-index:10; background:var(--bg);
  display:grid; place-items:center; cursor:pointer; width:100vw;
  /* Remove transition to make color change instant and synchronized */
}

/* Release intro overlay so scroll reaches page */
.intro.done { 
  pointer-events: none !important; 
  touch-action: auto !important; 
  position: relative !important;
  z-index: 0 !important;
}
.intro-content{ display:flex; flex-direction:column; align-items:center; gap:6px; }

.start-hint{
  font-weight:600; font-size:clamp(9px,1vw,11px); text-transform:uppercase; line-height:1;
  letter-spacing:-0.2em; opacity:.9; transition:opacity .2s ease, transform .2s ease
}
.intro.started .start-hint{opacity:0; transform:translateY(4px)}

.location-text{
  position:fixed; top:40px; left:40px; z-index:11;
  font-weight:500; font-size:clamp(8px,1.2vw,10px); 
  opacity:0; transform:translateY(10px);
  transition:opacity .6s ease, transform .6s ease; /* Remove color transition for instant sync */
  background:transparent !important; background-color:transparent !important;
  color: var(--ink);
}
.intro.started .location-text{
  animation:fadeInLocation .6s ease .2s forwards;
}

@keyframes fadeInLocation{
  from{opacity:0; transform:translateY(10px)}
  to{opacity:1; transform:translateY(0)}
}

/* Removed keyframes - using transition instead for more reliable behavior */

/* clarq letters animate; we keep the SAME node and compensate any subpixel delta via --handoff-dx */
.brand{
  position:fixed; top:50%; left:50%;
  transform: translate(-50%, -50%) translateX(var(--handoff-dx));
  font-size:clamp(64px,20vw,26vw); line-height:1.1; font-weight:600; letter-spacing:-0.12em;
  pointer-events:none; will-change:transform; width:100vw; text-align:center;
  border:none; outline:none; box-shadow:none; background:transparent;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  backface-visibility: hidden; transform-style: preserve-3d;
  color: var(--ink); /* Explicit color to ensure synchronization */
}
.brand-clip{display:block; overflow:hidden; height:0; white-space:nowrap; width:100vw; text-align:center; border:none; outline:none; box-shadow:none; background:transparent; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; backface-visibility: hidden;}
.ch{display:inline-block; transform:translateY(100%); will-change:transform; border:none; outline:none; box-shadow:none; background:transparent; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; backface-visibility: hidden;}

@keyframes rise{from{transform:translateY(100%)} to{transform:translateY(0)}}
@keyframes clipOpen{from{height:0} to{height:var(--revealH)}}
.intro.started .ch{animation:rise 800ms cubic-bezier(.2,.7,.2,1) forwards; animation-delay:calc(var(--i)*var(--stagger))}
.intro.started .brand-clip{animation:clipOpen 900ms cubic-bezier(.2,.7,.2,1) forwards}

/* Ultimate smoothness page content */
.content-section{
  min-height:150vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:8rem 2rem 35vh 2rem; background:var(--bg);
  /* Ultimate mobile performance */
  touch-action: pan-y;
  transform: translateZ(0);
  will-change: background-color, color;
  /* No transitions - instant color response */
  /* Ultimate GPU optimization */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  contain: layout style paint;
  /* Ultimate smoothness */
  -webkit-transform: translateZ(0);
  perspective: 1000px;
}
.tagline{text-align:center}
.tagline .line{font-weight:600; font-size:clamp(30px,10vw,100px); line-height:1.1; margin:0; background:transparent !important}

@media (prefers-reduced-motion:reduce){
  .intro.started .ch{animation:none; transform:translateY(0)}
  .intro.started .brand-clip{animation:none; height:var(--revealH)}
}

/* Mobile-specific instant response optimizations */
@media (max-width: 768px) {
  /* NO transitions - instant color changes for maximum smoothness */
  html, body, #__next, main, header, footer, section, article, aside, div {
    /* Instant color response for ultimate smoothness */
  }
  
  body {
    /* Instant color response for ultimate smoothness */
  }
  
  *, *::before, *::after {
    /* Instant color response for ultimate smoothness */
  }
  
  input, button, textarea, select {
    /* Instant color response for ultimate smoothness */
  }
  
  .content-section {
    /* Ultimate smoothness for entire scroll range */
    min-height: 120vh;
    padding: 6rem 1.5rem 30vh 1.5rem;
  }
}

/* Instant color response - maximum smoothness */
html, body, #__next, main, header, footer, section, article, aside, div{
  background-color: var(--bg) !important;
  color: var(--ink) !important;
  /* No transitions - instant color changes for maximum smoothness */
}

/* Instant text color inheritance */
*, *::before, *::after {
  color: inherit;
  background-color: transparent !important;
  /* No transitions - instant color response */
}

/* Instant form elements */
input, button, textarea, select {
  background-color: transparent !important;
  color: inherit !important;
  /* No transitions - instant color response */
}

/* Ultimate mobile performance optimization */
html, body { 
  overflow-y: auto !important; 
  overflow-x: hidden !important;
  height: auto !important;
  min-height: 100vh !important;
  -webkit-overflow-scrolling: touch !important;
  /* Ultimate mobile scroll behavior */
  overscroll-behavior: none !important;
  touch-action: pan-y !important;
  /* Ultimate GPU acceleration */
  transform: translateZ(0);
  will-change: background-color, color;
  backface-visibility: hidden;
  perspective: 1000px;
  /* Ultimate mobile touch optimizations */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  /* Ultimate mobile performance */
  contain: layout style paint;
  scroll-behavior: auto;
  /* Ultimate mobile-specific optimizations */
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000px;
  /* Ultimate mobile rendering */
  image-rendering: optimizeSpeed;
  image-rendering: -webkit-optimize-contrast;
  /* Ultimate smoothness optimizations */
  -webkit-font-smoothing: subpixel-antialiased;
  font-smooth: always;
  text-rendering: optimizeSpeed;
}

/* ChatGPT section styling */
#chatgpt-section {
  width: var(--ref-w) !important;
  height: var(--ref-h) !important;
  background: var(--gpt-bg);
  color: var(--gpt-text);
  text-align: center;
  margin: 35rem auto 0 auto !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  font-family: 'Noto Sans', 'Inter', 'IBM Plex Sans', 'DM Sans', 'Arimo', 'Jost', 'Outfit', 'Mozilla Text', 'Playfair Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  
  /* Responsive scaling while maintaining exact proportions */
  transform-origin: center top;
  --scale-factor: min(1, calc(100vw / var(--ref-w)));
  transform: scale(var(--scale-factor));
}

/* Optional inner wrapper for more predictable scaling/centering on mobile */
#chatgpt-section .chatgpt-inner{
  width: var(--ref-w);
  height: var(--ref-h);
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (max-width: 815px) {
  /* Fix mobile scrolling - prevent horizontal scroll interference */
  html, body {
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    /* Enable hardware acceleration for smooth scrolling */
    transform: translateZ(0);
    will-change: scroll-position;
  }
  
  /* Optimize animations for mobile */
  * {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  /* Smaller and closer to the corner on mobile */
  .location-text{
    top:25px !important;
    left:25px !important;
    font-size:clamp(10px, 2.8vw, 12px) !important;
  }

  #chatgpt-section {
    /* Fluid container; parent padding handles side gutters */
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 26rem auto 0 auto !important; /* raise slightly to help centering */
    padding: 0 !important;
    position: static;
    left: auto;
    transform: none !important;
    /* Match desktop heading-to-pill spacing (can tweak) */
    --gap: 12px;
    --pill-h: 34px;
    --pill-w: 100%;
  }

  #chatgpt-section .chatgpt-inner{
    width: 100%;
    height: auto;
    transform: none !important;
  }

  /* Keep internal measurements at reference size; visual size comes from scale */
  #chatgpt-section .prompt-row { 
    width: min(120%, 800px) !important; 
    margin: var(--gap) 0 0 0; 
    padding: 6px 12px !important; 
    gap: 8px !important; 
    height: var(--pill-h) !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }

  #chatgpt-section .prompt-input { 
    font-size: 12px !important; 
    padding: 6px !important; 
  }

  #chatgpt-section .icon-btn { padding: 4px !important; }

  #chatgpt-section .icon-btn svg { width: 14px !important; height: 14px !important; }

  #chatgpt-section .error-message,
  #chatgpt-section .response-area { 
    max-width: min(90%, 320px) !important; 
    margin: 8px auto 0 auto !important;
    text-align: center !important;
    position: relative;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
  }
  #chatgpt-section .error-message { font-size: 12px !important; }

  /* Mobile-specific response styling */
  #chatgpt-section .pulse-dot { 
    font-size: 12px !important; 
    justify-content: center !important;
  }
  
  #chatgpt-section .response-message { 
    font-size: 12px !important; 
    text-align: center !important;
  }

  /* Center heading on mobile and make larger */
  #chatgpt-section h1 { font-size: clamp(18px, 4vw, 24px) !important; text-align: center; margin: 0 0 var(--gap) 0; background: transparent !important; }

  /* Let the page end shortly after the signup sits near the middle */
  .content-section { 
    padding-bottom: 40vh !important; 
    padding-left: 0 !important; 
    padding-right: 0 !important; 
  }

  /* Use custom viewport height property for mobile address bar compensation */
  .intro {
    height: calc(var(--vh, 1vh) * 100) !important;
  }
}

#chatgpt-section h1 {
  font-size: 26px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--gpt-text);
  margin: 0 0 var(--gap) 0;
  font-family: inherit;
}

/* Prompt row - the main pill shape */
#chatgpt-section .prompt-row {
  background: var(--gpt-input) !important;    /* Add !important */
  border: 1px solid var(--gpt-border);
  border-radius: 28px;                 /* Much more curved - full pill shape */
  padding: 8px 16px;                   /* Adjust padding for contained icons */
  display: flex;
  align-items: center;
  gap: 0;  /* Remove uniform gap */
  width: var(--pill-w);
  height: var(--pill-h);
  overflow: hidden;                    /* Keep icon backgrounds clipped inside pill */
}

/* Now manually space each element */
#chatgpt-section .prompt-row .icon-btn:first-child {
  margin-left: -4px;   /* Push + icon farther to the left */
  margin-right: 2px;  /* Space after + icon */
}

/* Push microphone icon (and waveform with it) to the right edge */
#chatgpt-section .prompt-row .icon-btn:nth-child(3) {
  margin-left: auto;   /* This pushes both right-side icons to the right */
  margin-right: 8px;   /* Small space between mic and waveform */
}

/* Reduce right padding to get icons even closer to the edge */
#chatgpt-section .prompt-row {
  padding: 8px 12px 8px 16px;  /* Less padding on right side */
}

/* Reduce size of microphone and waveform icons on desktop only */
@media (min-width: 816px) {
  #chatgpt-section .prompt-row .icon-btn:nth-child(3) svg,
  #chatgpt-section .prompt-row .icon-btn:nth-child(4) svg {
    width: 18px !important;
    height: 18px !important;
  }
}

/* Input blends seamlessly into pill */
#chatgpt-section .prompt-input {
  flex: 1 1 auto;
  background: transparent;              
  color: var(--gpt-text);
  border: none;                        
  border-radius: 0;                    
  padding: 8px;                        
  outline: none !important;            /* Remove all outlines */
  caret-color: var(--gpt-text);
  font-size: 14px;
  line-height: 1.4;
  font-family: inherit;
}

/* Ensure no outline on focus either */
#chatgpt-section .prompt-input:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* AGGRESSIVE AUTOFILL REMOVAL - ALL BROWSERS */
#chatgpt-section .prompt-input:-webkit-autofill,
#chatgpt-section .prompt-input:-webkit-autofill:hover,
#chatgpt-section .prompt-input:-webkit-autofill:focus,
#chatgpt-section .prompt-input:-webkit-autofill:active,
#chatgpt-section .prompt-input:-webkit-autofill:valid,
#chatgpt-section .prompt-input:-webkit-autofill:invalid {
  -webkit-appearance: none !important;
  appearance: none !important;
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  background-color: transparent !important;
  background-image: none !important;
  background-attachment: scroll !important;
  color: var(--gpt-text) !important;
  -webkit-text-fill-color: var(--gpt-text) !important;
  caret-color: var(--gpt-text) !important;
  transition: background-color 5000s ease-in-out 0s !important;
  -webkit-transition: background-color 5000s ease-in-out 0s !important;
  filter: none !important;
}

/* Remove autofill buttons and icons */
#chatgpt-section .prompt-input::-webkit-contacts-auto-fill-button,
#chatgpt-section .prompt-input::-webkit-credentials-auto-fill-button {
  visibility: hidden !important;
  display: none !important;
  pointer-events: none !important;
  height: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  position: absolute !important;
  right: -1000px !important;
}

/* Firefox autofill removal */
#chatgpt-section .prompt-input:-moz-autofill,
#chatgpt-section .prompt-input:-moz-autofill:hover,
#chatgpt-section .prompt-input:-moz-autofill:focus {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--gpt-text) !important;
  box-shadow: none !important;
}

/* Edge/IE autofill removal */
#chatgpt-section .prompt-input:-ms-input-placeholder {
  background-color: transparent !important;
  color: var(--gpt-muted) !important;
}

/* Additional aggressive overrides */
#chatgpt-section .prompt-input {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}

/* Placeholder color */
#chatgpt-section .prompt-input::placeholder {
  color: var(--gpt-muted);
}

/* No focus state on the pill */
#chatgpt-section .prompt-row:focus-within {
  border-color: var(--gpt-border);     /* Keep original border */
  box-shadow: none;                    /* Remove focus shadow */
}

/* New icon button styling */
#chatgpt-section .icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #FFFFFF;                      /* Pure white icons */
  cursor: pointer;
  transition: opacity .15s ease;
}

#chatgpt-section .icon-btn:hover { 
  opacity: .9; 
}

#chatgpt-section .icon-btn:focus { 
  outline: none; 
}

/* SVG inherits color from parent - works with both fill and stroke */
#chatgpt-section .icon-btn svg {
  fill: currentColor !important;       /* For filled icons like yours */
  stroke: currentColor;                /* For stroked icons */
}

/* Light grey circular background for specific icons */
#chatgpt-section .icon-btn--with-bg {
  background: rgba(255, 255, 255, 0.1) !important;  /* Light grey circle */
}

#chatgpt-section .icon-btn--with-bg:hover {
  background: rgba(255, 255, 255, 0.15) !important; /* Slightly lighter on hover */
}



/* ===== EMAIL SIGNUP ANIMATIONS & STYLES ===== */

/* Error message styling */
.error-message {
  margin-top: 8px;
  padding: 8px 16px;
  color: #ff6b6b;
  font-size: 14px;
  line-height: 1.4;
  border-radius: 6px;
  background: rgba(255, 107, 107, 0.1);
  border: 1px solid rgba(255, 107, 107, 0.2);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  max-width: var(--pill-w);
}

.error-message.show {
  opacity: 1;
  transform: translateY(0);
}

/* Response area styling */
.response-area {
  margin-top: 3px;  /* More space */
  min-height: 40px;
  max-width: var(--pill-w);
  text-align: center;
}

/* Pulsating dot animation */
.pulse-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--gpt-text);
  font-size: 16px;
  line-height: 1.4;
  width: 100%;
}

.pulse-dot::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--gpt-text);
  border-radius: 50%;
  animation: pulseAnimation 1.4s ease-in-out infinite;
}

@keyframes pulseAnimation {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* Typewriter response styling */
.response-message {
  color: var(--gpt-text);
  font-size: 14px;
  line-height: 1.4;
  font-family: inherit;
}

.response-message::after {
  content: '|';
  animation: blinkCursor 1s infinite;
  margin-left: 1px;
}

.response-message.typing-complete::after {
  display: none;
}

@keyframes blinkCursor {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Submitting state */
.prompt-row[data-state="submitting"] .prompt-input {
  opacity: 0.6;
  pointer-events: none;
}

.prompt-row[data-state="submitting"] .icon-btn {
  opacity: 0.6;
  pointer-events: none;
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  * { 
    transition: none !important; 
    animation: none !important; 
  }
  
  .bg-layer { 
    transition: none !important; 
  }
  
  .pulse-dot::before {
    animation: none;
    opacity: 1;
    transform: none;
  }
  
  .response-message::after {
    animation: none;
  }
  
  .error-message {
    transition: none;
    transform: none;
  }
}

/* ===== SCROLL CUE STYLES ===== */

#scrollCueSection { 
  position: relative;
  background: transparent !important;
  /* Ensure no background on parent container */
}

/* fixed to bottom-center of the section */
#scrollCueSection #scrollCue {
  position: fixed;
  left: 50%;
  bottom: 6vh;
  z-index: 40;
  pointer-events: none;  /* becomes auto after expand */
  opacity: 0;
  transform: translateX(-50%) translateY(10px) translate3d(0, 0, 0); /* Hardware acceleration */
  transition: opacity .6s ease, transform .6s ease; /* Smooth fade transition */
  background: transparent !important;
  /* Ensure no background appears */
  will-change: transform, opacity; /* Optimize for animations */
}

/* Show on start - matches "BASED IN TORONTO" fade timing */
#scrollCueSection #scrollCue.fade-in {
  opacity: 1;
  transform: translateX(-50%) translateY(0) translate3d(0, 0, 0); /* Hardware acceleration */
  transition: opacity .6s ease .2s, transform .6s ease .2s;
  background: transparent !important;
  /* Ensure transparent during fade-in too */
}

/* Fade out when reaching signup section - MUST override fade-in */
#scrollCueSection #scrollCue.fade-out {
  opacity: 0 !important;
  transform: translateX(-50%) translateY(20px) translate3d(0, 0, 0) !important; /* Hardware acceleration */
  transition: opacity 0.8s ease, transform 0.8s ease !important;
  pointer-events: none !important;
  transition-delay: 0s !important;
}

/* Ensure fade-out always wins over other states */
#scrollCueSection #scrollCue.fade-in.fade-out,
#scrollCueSection #scrollCue.is-expanded.fade-out {
  opacity: 0 !important;
  transform: translateX(-50%) translateY(20px) translate3d(0, 0, 0) !important; /* Hardware acceleration */
  transition: opacity 0.8s ease, transform 0.8s ease !important;
  transition-delay: 0s !important;
}

/* Mouse look - uses CSS custom properties for color transitions */
#scrollCueSection .mouse {
  width: 28px;
  height: 44px;
  border: 1px solid rgba(var(--ink-rgb, 17, 17, 17), 0.7);
  border-radius: 16px;
  display: grid;
  place-items: start center;
  background: transparent !important;
  /* Aggressively remove any backgrounds */
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  transition: transform .28s ease, opacity .2s ease, border-color .35s linear;
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0); /* Force hardware acceleration */
}

#scrollCueSection .wheel {
  display: block;
  width: 1px;
  height: 12px;
  background: rgba(var(--ink-rgb, 17, 17, 17), 0.85);
  border-radius: 2px;
  margin: 8px auto 0 auto;
  animation: wheelMove 1.3s ease-out infinite;
  opacity: .95;
  transition: background-color .35s linear;
}

/* Wheel anim: top -> ~60% -> fade */
@keyframes wheelMove {
  0%   { transform: translateY(0);    opacity: .95; }
  70%  { transform: translateY(14px); opacity: .95; }
  100% { transform: translateY(14px); opacity: 0; }
}

/* Pill nav (hidden initially) */
#scrollCueSection .pillNav {
  position: absolute;
  inset: 0;
  display: none; /* Hide pill nav since no navigation links */
  align-items: center;
  justify-content: center;
  gap: 28px;
  height: 48px;
  padding: 0 22px;
  border-radius: 9999px;
  background: rgba(var(--ink-rgb, 255, 255, 255), 0.06);
  border: 1px solid rgba(var(--ink-rgb, 255, 255, 255), 0.1);
  opacity: 0;
  transform: scale(.6) translate3d(0, 0, 0); /* Force hardware acceleration */
  transition: opacity .18s ease, transform .28s ease, background-color .35s linear, border-color .35s linear;
  pointer-events: none;
  will-change: transform, opacity;
}

#scrollCueSection .pillNav a {
  font-size: 12px;
  letter-spacing: .12em;
  color: rgba(var(--ink-rgb, 255, 255, 255), 0.7);
  text-decoration: none;
  user-select: none;
  transition: color .35s linear;
}

/* Expanded state */
#scrollCueSection #scrollCue.is-expanded {
  pointer-events: auto;
}

#scrollCueSection #scrollCue.is-expanded .mouse {
  transform: scaleX(11.8) scaleY(1.1) translate3d(0, 0, 0);   /* morph illusion with hardware acceleration */
  opacity: 0;                             /* fade mouse out as pill fades in */
}

#scrollCueSection #scrollCue.is-expanded .pillNav {
  opacity: 1;
  transform: translate3d(0, 0, 0); /* Hardware accelerated reset */
}

/* Reduced motion: no animation */
@media (prefers-reduced-motion: reduce) {
  #scrollCueSection .wheel { 
    animation: none; 
  }
  #scrollCueSection .mouse,
  #scrollCueSection .pillNav { 
    transition: none; 
  }
  .intro.started #scrollCueSection #scrollCue {
    animation: none;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}