/* Targeted visual finish + performance-safe motion for the personal portfolio. */
html.performance-lite { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html.performance-lite { scroll-behavior: auto !important; } }
html.performance-lite .scene { transform: none !important; filter: none !important; opacity: 1 !important; }
html.performance-lite #mesh-bg,
html.performance-lite #particle-universe,
html.performance-lite #light-engine,
html.performance-lite #site-sonar-canvas,
html.performance-lite #cursor-glow,
html.performance-lite #fireflies,
html.performance-lite #petal-field,
html.performance-lite .sen-stage-glint { display: none !important; }
html.performance-lite .mesh-bg,
html.performance-lite .particle-universe { display: none !important; }
html.performance-lite .tree-bg,
html.performance-lite .sen-stage { animation: none !important; }
html.performance-lite .tree-bg::before,
html.performance-lite .tree-bg::after,
html.performance-lite .tree-bg-glow,
html.performance-lite .tree-bg-glow-2,
html.performance-lite .sen-stage-grid,
html.performance-lite .sen-stage-orbit,
html.performance-lite .sen-stage-portrait,
html.performance-lite .sen-stage-body,
html.performance-lite .sen-stage-noise { animation: none !important; }
html.performance-lite .sen-stage-grid,
html.performance-lite .sen-stage-orbit { display: none !important; }
/* Keep Yash's full-body hero image; only the costly gesture-video renderer is disabled. */
html.performance-lite #sen-stage .sen-stage-body { display: block !important; }
html.performance-lite #sen-stage .sen-stage-body > img:first-child { opacity: 1 !important; transition: none !important; }
html.performance-lite #sen-stage .sen-stage-gesture-source,
html.performance-lite #sen-stage .sen-stage-gesture-canvas { display: none !important; }
html.performance-lite .section.bento-card,
html.performance-lite .hero-glass,
html.performance-lite .topnav,
html.performance-lite .dock,
html.performance-lite .ai-panel,
html.performance-lite .glass-card,
html.performance-lite .yash-os-shell,
html.performance-lite .folio,
html.performance-lite .skill-card { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html.performance-lite .apple-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
html.performance-lite .apple-float,
html.performance-lite .peak-tilt,
html.performance-lite .peak-magnetic { animation: none !important; transform-style: flat !important; }

/* Year-as-chapter layout: compact overview until a visitor opens a year. */
#journey #timeline { display: grid; gap: 12px; margin: 24px 0 0; padding: 0; border: 0 !important; }
#journey .journey-year-card { overflow: hidden; border: 1px solid rgba(232,217,158,.24) !important; border-radius: 18px; background: linear-gradient(135deg, rgba(22,34,28,.93), rgba(31,42,32,.86)) !important; color: rgba(250,248,240,.94) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 14px 34px -28px rgba(0,0,0,.58); transition: border-color .18s ease, background-color .18s ease; }
#journey .journey-year-card[open] { border-color: rgba(232,217,158,.5) !important; }
#journey .journey-year-summary { background: transparent !important; color: rgba(250,248,240,.94) !important; border: 0 !important; min-height: 76px; display: grid; grid-template-columns: minmax(70px, auto) 1fr 34px; align-items: center; gap: 14px; padding: 15px 18px; cursor: pointer; list-style: none; }
#journey .journey-year-summary::-webkit-details-marker { display: none; }
#journey .journey-year-summary:focus-visible { outline: 2px solid var(--primary); outline-offset: -3px; border-radius: 16px; }
#journey .journey-year-number { color: #e8d99e !important; font: 700 clamp(1.55rem, 4vw, 2rem)/1 'IBM Plex Mono', monospace; letter-spacing: -.07em; }
#journey .journey-year-meta, #journey .journey-year-meta span { color: rgba(250,248,240,.68) !important; }
#journey .journey-year-meta { min-width: 0; display: grid; gap: 5px; color: var(--text-dim); font: 500 .69rem/1.35 'IBM Plex Mono', monospace; }
#journey .journey-year-meta strong { color: #faf8f0 !important; font: 700 .78rem/1.25 Inter, sans-serif; }
#journey .journey-year-chevron { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; color: var(--primary); font-size: 20px; transition: transform .18s ease, background-color .18s ease; }
#journey .journey-year-card[open] .journey-year-chevron { transform: rotate(45deg); background: color-mix(in srgb, var(--primary) 10%, var(--card)); }
#journey .journey-year-content { padding: 0 18px 16px; animation: journey-open .18s ease both; }
#journey .journey-milestones { margin-bottom: 12px; padding: 11px 14px; border: 1px solid rgba(255,255,255,.15) !important; border-radius: 14px; background: linear-gradient(145deg,rgba(25,37,30,.92),rgba(16,25,20,.86)) !important; }
#journey .journey-year-entry { padding: 11px 0; border-top: 1px solid var(--line); }
#journey .journey-year-entry:first-child { border-top: 0; padding-top: 0; }
#journey .journey-year-entry:last-child { padding-bottom: 0; }
#journey .journey-year-entry strong { color: #e8d99e !important; display: inline-flex; align-items: center; gap: 6px; color: var(--primary); font: 700 .65rem/1.2 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: .06em; }
#journey .journey-category-icon, #journey .journey-category-icon svg { display: inline-block; width: 15px; height: 15px; vertical-align: middle; }
#journey .journey-year-entry h4 { margin: 5px 0 3px; color: #faf8f0 !important; font: 650 .98rem/1.25 Fraunces, Georgia, serif; }
#journey .journey-year-entry p { margin: 0; color: rgba(250,248,240,.76) !important; font-size: .78rem; line-height: 1.48; }
#journey .journey-stories { display: grid; gap: 8px; }
#journey .journey-story { overflow: hidden; border: 1px solid rgba(255,255,255,.14) !important; border-radius: 14px; background: linear-gradient(145deg,rgba(27,39,32,.94),rgba(18,28,23,.88)) !important; color: rgba(250,248,240,.94) !important; }
#journey .journey-story .tl-head { width: 100%; border-radius: 13px; }
#journey .journey-story .tl-body { display: none; padding: 0 15px 14px 54px; }
#journey .journey-story.open .tl-body { display: block; animation: journey-open .18s ease both; }
#journey .journey-story .tl-body p { margin: 0 0 10px; color: rgba(250,248,240,.78) !important; line-height: 1.58; }
#journey .journey-story .tl-gallery { display: flex; flex-wrap: wrap; gap: 7px; }
#journey .journey-story .tl-gallery button { overflow: hidden; width: 74px; height: 74px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--card); cursor: zoom-in; }
#journey .journey-story .tl-gallery img { width: 100%; height: 100%; object-fit: cover; }
@keyframes journey-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Bring the experience cards back into the portfolio's tinted glass palette, not flat white. */
#experience .exp-collection { border-color: rgba(232,217,158,.25) !important; background: linear-gradient(145deg, rgba(21,34,28,.94), rgba(30,41,31,.86)) !important; box-shadow: inset 0 1px 0 var(--glass-hl-soft), 0 12px 34px -24px var(--glass-shadow) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
#experience .exp-collection:hover, #experience .exp-collection[open] { border-color: rgba(232,217,158,.5) !important; }
#experience .exp-collection-mark { color: #e8d99e !important; background: rgba(232,217,158,.12) !important; border-color: rgba(232,217,158,.24) !important; }
#experience .exp-collection-eyebrow, #experience .exp-role-org { color: #d1dba0 !important; }
#experience .exp-collection-toggle { color: #e8d99e !important; border-color: rgba(232,217,158,.32) !important; }
@media (max-width: 650px) {
  #journey .journey-year-summary { grid-template-columns: 70px minmax(0, 1fr) 30px; gap: 10px; padding: 13px; }
  #journey .journey-year-content { padding: 0 12px 12px; }
  #journey .journey-story .tl-body { padding: 0 10px 12px 12px; }
  #journey .journey-story .tl-date { max-width: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  #journey .journey-year-card, #journey .journey-year-chevron, #journey .journey-year-content,
  #journey .journey-story .tl-body, #experience .exp-collection { transition: none !important; animation: none !important; }
}


/* Gentle chapter settling: native wheel/touch distance stays user-controlled. */
@media (prefers-reduced-motion: no-preference) and (pointer: fine) {
  html {
    scroll-snap-type: y proximity;
  }
  #main-content .scene {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
  }
}

@media (max-width: 760px), (pointer: coarse) {
  html { scroll-snap-type: none !important; }
}


/* Quiet clay treatment: sculpted highlights, soft short shadows, no blur filters. */
html.performance-lite #main-content .section.bento-card {
  border-color: rgba(255,255,255,.13) !important;
  box-shadow: 0 8px 18px -12px rgba(0,0,0,.72), inset 1px 1px 0 rgba(255,255,255,.09), inset -1px -1px 0 rgba(0,0,0,.18) !important;
}
html.performance-lite #main-content .section.bento-card :is(
  .yash-os-shell,.yash-os-item,.currently-grid,.currently-card,.glass-card,
  .folio,.skill-card,.card,.pursuing-card,.contact-pill,.exp-collection,
  .journey-year-card,.journey-milestones,.journey-story
) {
  border-color: rgba(232,217,158,.17) !important;
  box-shadow: 0 7px 15px -11px rgba(0,0,0,.76), inset 1px 1px 0 rgba(255,255,255,.11), inset -1px -1px 0 rgba(0,0,0,.2) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  html.performance-lite #main-content .section.bento-card :is(
    .yash-os-item,.folio,.skill-card,.card,.contact-pill,.exp-collection,
    .journey-year-card,.journey-milestones,.journey-story
  ):hover {
    transform: translateY(-1px);
    border-color: rgba(232,217,158,.32) !important;
  }
}

/* Replace the overlaid sonar artwork with a lightweight, stationary theme gradient. */
html.scene-engine-off #tree-bg {
  background-color: #173f73 !important;
  background-image: linear-gradient(180deg, #173f73 0%, #4884b0 52%, #b5cde0 100%) !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
html.scene-engine-off[data-theme="dark"] #tree-bg {
  background-color: #061326 !important;
  background-image: linear-gradient(180deg, #061326 0%, #132b4a 55%, #081a31 100%) !important;
}
html.scene-engine-off[data-theme="evening"] #tree-bg {
  background-color: #172349 !important;
  background-image: linear-gradient(180deg, #172349 0%, #405878 55%, #172b49 100%) !important;
}
html.scene-engine-off[data-theme="morning"] #tree-bg {
  background-color: #294565 !important;
  background-image: linear-gradient(180deg, #37567a 0%, #829bb7 55%, #29415e 100%) !important;
}

/* Smoothness-first finish: keep the scenery static and leave frame time for native input. */
html.scene-engine-off .scene {
  will-change: auto !important;
}
html.scene-engine-off #tree-bg {
  animation: none !important;
  will-change: auto !important;
}
html.scene-engine-off #tree-bg::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}
html.scene-engine-off #sen-stage .sen-stage-grid,
html.scene-engine-off #sen-stage .sen-stage-orbit,
html.scene-engine-off #sen-stage .sen-stage-noise {
  display: none !important;
}
html.scene-engine-off #sen-stage::before {
  display: none !important;
}
html.scene-engine-off #sen-stage .sen-stage-web {
  display: none !important;
}
html.scene-engine-off :is(
  .tree-bg-glow,
  .tree-bg-glow-2,
  #mesh-bg,
  #particle-universe,
  #light-engine,
  .fireflies,
  .petal-field
) {
  animation: none !important;
  will-change: auto !important;
}
html.scene-engine-off #mesh-bg,
html.scene-engine-off #particle-universe,
html.scene-engine-off #light-engine,
html.scene-engine-off .fireflies,
html.scene-engine-off .petal-field {
  display: none !important;
}
html.scene-engine-off :is(
  #sen-stage .sen-sticker,
  #sen-stage .sen-stage-glint,
  #sen-stage .sen-stage-character-sticker,
  #sen-stage .sen-stage-web,
  .yash-os-icon,
  .journey-icon-drift,
  #experience .exp-circle,
  .scroll-indicator .chevron
) {
  animation: none !important;
  will-change: auto !important;
}
html.scene-engine-off .hero-glass::after,
html.scene-engine-off .glass-card::after,
html.scene-engine-off .section.bento-card::after {
  animation: none !important;
  will-change: auto !important;
}
html.scene-engine-off .tl-icon,
html.scene-engine-off #ai-orb::before,
html.scene-engine-off #ai-orb::after {
  animation: none !important;
  will-change: auto !important;
}

/* A small, compositor-only breeze keeps the static character alive without video or JavaScript. */
@keyframes yash-gentle-breeze {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  24% { translate: 0 -1.2px; rotate: -0.28deg; }
  52% { translate: 0 1.3px; rotate: 0.3deg; }
  78% { translate: 0 0.3px; rotate: -0.12deg; }
}
@keyframes yash-sticker-swing-wave {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(3deg); }
  28% { transform: translate3d(-5px, -5px, 0) rotate(-2deg); }
  58% { transform: translate3d(7px, 2px, 0) rotate(4deg); }
  82% { transform: translate3d(-2px, -3px, 0) rotate(-1deg); }
}
@keyframes yash-sticker-swing-climb {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-4deg); }
  30% { transform: translate3d(6px, -4px, 0) rotate(2deg); }
  60% { transform: translate3d(-7px, 2px, 0) rotate(-3deg); }
  84% { transform: translate3d(2px, -2px, 0) rotate(1deg); }
}
@media (prefers-reduced-motion: no-preference) {
  html.scene-engine-off #sen-stage .sen-stage-body,
  html.scene-engine-off #sen-stage .sen-stage-portrait {
    animation: yash-gentle-breeze 9s ease-in-out infinite !important;
  }
  html.scene-engine-off #sen-stage .sen-stage-character-sticker--wave {
    animation: yash-sticker-swing-wave 7.2s ease-in-out infinite !important;
    transform-origin: 50% 12%;
  }
  html.scene-engine-off #sen-stage .sen-stage-character-sticker--climb {
    animation: yash-sticker-swing-climb 8.4s ease-in-out infinite !important;
    transform-origin: 70% 12%;
  }
}
@media (prefers-reduced-motion: reduce) {
  html.scene-engine-off #sen-stage .sen-stage-body,
  html.scene-engine-off #sen-stage .sen-stage-portrait,
  html.scene-engine-off #sen-stage .sen-stage-character-sticker {
    animation: none !important;
    translate: none !important;
    rotate: none !important;
  }
}
@media (max-width: 760px), (pointer: coarse) {
  html.scene-engine-off :is(
    .hero-glass,
    .section.bento-card,
    .glass-card,
    .topnav,
    .dock,
    .ai-panel,
    .yash-os-shell,
    .journey-year-panel
  ) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}


/* Yield the stage's idle-only motion while the user is actively scrolling. */
body.portfolio-scrolling #sen-stage .sen-stage-body,
body.portfolio-scrolling #sen-stage .sen-stage-portrait,
body.portfolio-scrolling #sen-stage .sen-stage-character-sticker {
  animation-play-state: paused !important;
}

/* Keep touch devices on static idle art; scroll-driven expression cross-fades remain intact. */
@media (max-width: 760px), (pointer: coarse) {
  html.scene-engine-off #sen-stage .sen-stage-body,
  html.scene-engine-off #sen-stage .sen-stage-portrait,
  html.scene-engine-off #sen-stage .sen-stage-character-sticker {
    animation: none !important;
    translate: none !important;
    rotate: none !important;
  }
}

/* One shared, tiny tap ripple; only transform/opacity animate, and only while pressed. */
#tap-ripple {
  position: fixed;
  z-index: 2147483000;
  left: 0;
  top: 0;
  width: 88px;
  height: 88px;
  border: 1px solid rgba(232, 217, 158, .27);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 217, 158, .16) 0%, rgba(232, 217, 158, .09) 34%, rgba(232, 217, 158, 0) 72%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0) scale(.08);
  contain: layout paint style;
}
#tap-ripple.is-active {
  visibility: visible;
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
  #tap-ripple { display: none !important; }
}