:root {
  --background: 45 100% 99%;
  --foreground: 160 40% 10%;
  --primary: 142 85% 45%;
  --secondary: 48 100% 60%;
  --muted: 45 60% 96%;
  --destructive: 6 72% 45%;
  --border: 142 40% 90%;
  --card: 0 0% 100%;
  --shadow-sm: 0 10px 24px hsla(143, 32%, 22%, 0.06);
  --shadow-md: 0 18px 48px hsla(143, 32%, 18%, 0.1);
  --shadow-lg: 0 28px 80px hsla(48, 45%, 28%, 0.15);
  --transition-fast: 180ms ease;
  --transition-smooth: 320ms cubic-bezier(0.22, 1, 0.36, 1);
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;

  /* Botanical Card Foundations */
  --card-width: clamp(240px, 88vw, 280px);
  --card-height: clamp(340px, 128vw, 380px);
  --card-width-lg: clamp(280px, 34vw, 320px);
  --card-height-lg: clamp(400px, 56vw, 440px);
  --botanical-green: 142 85% 45%;
  --botanical-earth: 25 40% 45%;
}

/* 1. Classic Garden (Default) */
[data-theme="classic"] {
  --background: 45 100% 99%;
  --foreground: 160 40% 10%;
  --primary: 142 85% 45%;
  --secondary: 48 100% 60%;
  --muted: 45 60% 96%;
  --border: 142 40% 90%;
  --card: 0 0% 100%;
}

/* 2. Midnight Harvest (Dark) */
[data-theme="midnight"] {
  --background: 145 18% 8%;
  --foreground: 42 32% 95%;
  --primary: 135 42% 60%;
  --secondary: 25 64% 65%;
  --muted: 145 14% 15%;
  --border: 143 12% 24%;
  --card: 145 16% 12%;
}

/* 3. Terracotta Sun */
[data-theme="terracotta"] {
  --background: 25 100% 99%;
  --foreground: 20 60% 10%;
  --primary: 20 80% 50%;
  --secondary: 45 100% 60%;
  --muted: 25 60% 96%;
  --border: 20 50% 90%;
  --card: 0 0% 100%;
}

/* 4. Ocean Breeze */
[data-theme="ocean"] {
  --background: 195 100% 99%;
  --foreground: 200 60% 10%;
  --primary: 185 90% 45%;
  --secondary: 165 75% 50%;
  --muted: 195 60% 96%;
  --border: 185 50% 90%;
  --card: 0 0% 100%;
}

/* 5. Forest Mist */
[data-theme="forest"] {
  --background: 160 30% 98%;
  --foreground: 160 50% 10%;
  --primary: 160 45% 32%;
  --secondary: 120 35% 45%;
  --muted: 160 20% 94%;
  --border: 160 30% 86%;
  --card: 160 40% 99%;
}

/* 6. Lavender Fields */
[data-theme="lavender"] {
  --background: 270 100% 99%;
  --foreground: 270 60% 10%;
  --primary: 270 80% 55%;
  --secondary: 320 80% 65%;
  --muted: 270 60% 96%;
  --border: 270 50% 90%;
  --card: 0 0% 100%;
}

/* 7. Golden Autumn */
[data-theme="autumn"] {
  --background: 35 100% 98%;
  --foreground: 25 60% 12%;
  --primary: 30 85% 42%;
  --secondary: 15 80% 48%;
  --muted: 35 60% 94%;
  --border: 35 50% 86%;
  --card: 35 100% 99%;
}

/* 8. Spring Bloom */
[data-theme="spring"] {
  --background: 320 100% 99%;
  --foreground: 140 60% 10%;
  --primary: 340 95% 65%;
  --secondary: 142 80% 50%;
  --muted: 320 60% 96%;
  --border: 142 50% 90%;
  --card: 0 0% 100%;
}

/* 9. Summer Solstice */
[data-theme="summer"] {
  --background: 50 100% 99%;
  --foreground: 200 60% 12%;
  --primary: 45 100% 50%;
  --secondary: 15 100% 55%;
  --muted: 50 90% 96%;
  --border: 45 60% 90%;
  --card: 0 0% 100%;
}

/* 10. Winter Frost */
[data-theme="frost"] {
  --background: 210 100% 99%;
  --foreground: 210 60% 12%;
  --primary: 210 80% 50%;
  --secondary: 180 60% 55%;
  --muted: 210 40% 96%;
  --border: 210 40% 90%;
  --card: 210 100% 99%;
}

/* 11. Desert Sand */
[data-theme="desert"] {
  --background: 40 50% 98%;
  --foreground: 30 50% 12%;
  --primary: 35 60% 42%;
  --secondary: 25 70% 48%;
  --muted: 40 40% 94%;
  --border: 40 40% 86%;
  --card: 40 60% 99%;
}

/* 12. Citrus Zest (New Bright Theme) */
[data-theme="citrus"] {
  --background: 45 100% 98%;
  --foreground: 25 80% 8%;
  --primary: 35 100% 48%;
  --secondary: 55 100% 50%;
  --muted: 45 100% 95%;
  --border: 35 80% 88%;
  --card: 0 0% 100%;
}

/* 13. Meadow Fresh (New Bright Theme) */
[data-theme="meadow"] {
  --background: 85 100% 98%;
  --foreground: 120 80% 8%;
  --primary: 100 85% 40%;
  --secondary: 75 90% 45%;
  --muted: 85 100% 95%;
  --border: 100 60% 88%;
  --card: 0 0% 100%;
}

/* 14. Rose Petal (New Bright Theme) */
[data-theme="rose"] {
  --background: 350 100% 99%;
  --foreground: 340 80% 10%;
  --primary: 345 85% 55%;
  --secondary: 10 90% 60%;
  --muted: 350 100% 96%;
  --border: 345 60% 92%;
  --card: 0 0% 100%;
}

/* 15. Sky High (New Bright Theme) */
[data-theme="sky"] {
  --background: 200 100% 99%;
  --foreground: 210 80% 10%;
  --primary: 205 95% 50%;
  --secondary: 185 90% 55%;
  --muted: 200 100% 96%;
  --border: 205 60% 92%;
  --card: 0 0% 100%;
}

.dark {
  --background: 145 18% 8%;
  --foreground: 42 32% 95%;
  --primary: 135 42% 60%;
  --secondary: 25 64% 65%;
  --muted: 145 14% 15%;
  --destructive: 6 82% 62%;
  --border: 143 12% 24%;
  --card: 145 16% 12%;
  --shadow-sm: 0 10px 24px hsla(0, 0%, 0%, 0.24);
  --shadow-md: 0 18px 48px hsla(0, 0%, 0%, 0.34);
  --shadow-lg: 0 28px 80px hsla(0, 0%, 0%, 0.42);
}

* {
  box-sizing: border-box;
}

html,
body,
#root {
  min-height: 100%;
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}

/* Ensure the app always occupies and is centered within the full viewport.
   Some sandbox/iframe hosts apply a default max-width or left alignment.
   This forces #root to be full-width and centered. */
#root {
  width: 100%;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

button,
a,
input,
select,
textarea {
  transition: all var(--transition-fast);
}

::selection {
  background: hsl(var(--primary) / 0.18);
}

/* First paint: lightweight loader displayed until React mounts */
#startup-loader {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  padding: 2rem 1.25rem;
  text-align: center;
}

#startup-loader .startup-loader__spinner {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 4px solid hsl(var(--border) / 0.65);
  border-top-color: hsl(var(--primary));
  animation: startup-spin 900ms linear infinite;
}

#startup-loader .startup-loader__text {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: hsl(var(--foreground) / 0.62);
}

@keyframes startup-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  #startup-loader .startup-loader__spinner {
    animation: none;
  }
}

/* Reduce runtime style/layout quirks for all pages */
img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

/* 0-height icons can happen when icon props are missing; keep them from collapsing layouts */
svg {
  flex-shrink: 0;
}

/* Shared label styling (Home featured + other media cards) */
.featured-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.2);
  padding: 0.25rem 0.5rem;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255,  255, 0.95);
  backdrop-filter: none;
}

/* AppImage polish: keep frames stable, add shimmer for slow networks */
.app-image[data-image-status="loading"],
.app-image[data-image-status="idle"] {
  background-image: linear-gradient(
    90deg,
    hsl(var(--muted) / 0.16),
    hsl(var(--muted) / 0.28),
    hsl(var(--muted) / 0.16)
  );
  background-size: 200% 100%;
  animation: app-image-shimmer 1400ms ease-in-out infinite;
}

[data-save-data="true"] .app-image[data-image-status="loading"],
[data-save-data="true"] .app-image[data-image-status="idle"] {
  animation: none;
  background-image: none;
}

.app-image img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

@keyframes app-image-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .app-image[data-image-status="loading"],
  .app-image[data-image-status="idle"] {
    animation: none;
  }
}

.app-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 10% 15%, hsl(var(--primary) / 0.15), transparent 35%),
    radial-gradient(circle at 85% 12%, hsl(var(--secondary) / 0.15), transparent 30%),
    radial-gradient(circle at 60% 80%, hsl(var(--primary) / 0.1), transparent 32%),
    linear-gradient(180deg, hsl(var(--background) / 0.2), hsl(var(--muted) / 0.3));
}

.page-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image 0.8s ease-in-out;
}

.page-bg::after {
  content: '';
  position: absolute;
  inset:  0;
  background: linear-gradient(to bottom, hsl(var(--background) / 0.12), hsl(var(--background) / 0.35));
  backdrop-filter: none;
}

.dark .page-bg::after {
  background: linear-gradient(to bottom, hsl(var(--background) / 0.32), hsl(var(--background) / 0.62));
  backdrop-filter: none;
}

.section-bg {
  position: relative;
  overflow: hidden;
}

.section-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--section-bg);
  background-size: cover;
  background-position: center;
  opacity: 0.75;
  z-index: -1;
  pointer-events: none;
  transition: opacity var(--transition-smooth);
}

.dark .section-bg::before {
  opacity: 0.85;
}

/* Utility class for image-heavy pages: allows the browser to skip offscreen rendering.
   Use sparingly for long wellness sections.
*/
.content-visibility-auto {
  content-visibility: auto;
  contain-intrinsic-size: 800px;
}

.hero-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(8px);
  animation: drift 11s ease-in-out infinite;
}

.hero-orb-1 {
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, hsl(var(--primary) / 0.24), transparent 66%);
  top: -34px;
  right: 18px;
}

.hero-orb-2 {
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, hsl(var(--secondary) / 0.2), transparent 68%);
  bottom: 8%;
  right: 24%;
  animation-delay: -2.5s;
}

.hero-orb-3 {
  width: 110px;
  height: 110px;
  background: radial-gradient(circle, hsl(var(--primary) / 0.18), transparent 70%);
  bottom: 10px;
  left: 8%;
  animation-delay: -4.8s;
}

.scene-panel {
  position: relative;
  overflow: hidden;
}

.scene-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.85;
  pointer-events: none;
  background-size: cover;
  background-position: center;
  transition: opacity var(--transition-smooth);
  filter: saturate(1.2) contrast(1.1);
  z-index: -1;
}

.dark .scene-panel::before {
  opacity: 0.95;
  filter: brightness(0.8) saturate(1.3) contrast(1.2);
}

.scene-panel:hover::before {
  opacity: 0.95;
}

.garden-scene::before {
  background-image: url('https://images.unsplash.com/photo-1466692476868-aef1dfb1e735?auto=format&fit=crop&q=80&w=800');
}

.pantry-scene::before {
  background-image: url('https://images.unsplash.com/photo-1584473457406-623027edfad9?auto=format&fit=crop&q=80&w=800');
}

.dish-scene::before {
  background-image: url('https://images.unsplash.com/photo-1519708227418-c8fd9a32b7a2?auto=format&fit=crop&q=80&w=800');
}

.produce-card {
  transform: translateY(0px);
}

.produce-card:hover {
  transform: translateY(-6px);
}

/* Base focus styles (global): keep focus indicators crisp (no blur/backdrop-filter)
   and ensure focus indicators stay visible even when Tailwind focus utilities are present. */
:where(
  .plant-flip,
  button,
  a,
  input,
  select,
  textarea,
  summary,
  [role="button"],
  [role="menuitem"],
  [role="tab"],
  [role="switch"]
):focus-visible {
  outline: 2px solid hsl(var(--primary) / 0.55) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.18) !important;
  filter: none !important;
  backdrop-filter: none !important;
}

@supports not selector(:focus-visible) {
  :where(
    .plant-flip,
    button,
    a,
    input,
    select,
    textarea,
    summary,
    [role="button"],
    [role="menuitem"],
    [role="tab"],
    [role="switch"]
  ):focus {
    outline: 2px solid hsl(var(--primary) / 0.55) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px hsl(var(--primary) / 0.18) !important;
    filter: none !important;
    backdrop-filter: none !important;
  }
}

.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: hsl(var(--primary) / 0.2);
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--primary) / 0.4);
  border-radius: 10px;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* 3D Flip Card Styles */
.preserve-3d {
  transform-style: preserve-3d;
}

.backface-hidden {
  backface-visibility: hidden;
}

.perspective-1000 {
  perspective: 1000px;
}

.perspective-1200 {
  perspective: 1200px;
}

.rotate-y-180 {
  transform: rotateY(180deg);
}

.card-3d-container {
  perspective: 1200px;
  width: 100%;
  height: 100%;
}

.card-3d-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

.card-3d-inner.is-flipped {
  transform: rotateY(180deg);
}

.card-3d-front, .card-3d-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  width:  100%;
  height: 100%;
}

.card-3d-back {
  transform: rotateY(180deg);
}

/* Plant Flip Card Centering Logic */
.plant-flip-wrapper {
  position: relative;
  width: 100%;
  z-index: 1;
}

.plant-flip-wrapper.is-active {
  z-index: 50;
}

.plant-flip-wrapper.is-active .plant-flip-card {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.plant-flip-wrapper.is-active .card-3d-inner {
  height: 100%;
}

/* Botanical Card Specifics */
.botanical-card-wrapper {
  width: min(100%, var(--card-width));
  height: var(--card-height);
}

@media (min-width: 1024px) {
  .botanical-card-wrapper {
    width: min(100%, var(--card-width-lg));
    height: var(--card-height-lg);
  }
}

.botanical-card {
  width: 100%;
  height: 100%;
  border-radius: 32px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.botanical-emoji-visual {
  font-size: clamp(5.5rem, 18vw, 8rem);
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.15));
  transition: transform 0.5s ease;
}

.botanical-card:hover .botanical-emoji-visual {
  transform: scale(1.1) rotate(5deg);
}

.botanical-back-content {
  overflow-y: auto;
  max-height: 100%;
  padding-right: 4px; /* Space for scrollbar */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.botanical-back-content::-webkit-scrollbar {
  width: 4px;
}

.botanical-back-content::-webkit-scrollbar-thumb {
  background: hsl(var(--primary) / 0.2);
  border-radius: 10px;
}

/* Image Contrast Fixes */
.img-contrast-overlay {
  position: relative;
}

.img-contrast-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.75) 100%);
  pointer-events: none;
  z-index: 1;
}

.img-contrast-vignette {
  position: relative;
}

.img-contrast-vignette::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, transparent 20%, rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
  z-index: 1;
}

img {
  filter: saturate(1.1) contrast(1.05) brightness(1.02);
}

[data-save-data="true"] img {
  filter: none !important;
}

.dark img {
  filter: brightness(0.85) contrast(1.15) saturate(1.1);
}

[data-save-data="true"].dark img {
  filter: none !important;
}

.text-shadow-sm {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.text-shadow-md {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.text-shadow-lg {
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.9);
}

.text-contrast {
  text-shadow: 0 1px 4px rgba(0, 0, 0,  0.4);
}

.dark .text-contrast {
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

/* Botanical Facts readability (plant cards) */
.botanical-facts {
  color: hsl(var(--foreground));
  text-shadow: 0 1px 2px rgba(0, 0,  0, 0.55);
}

.dark .botanical-facts {
  color: hsl(var(--foreground));
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.75);
}

/* Shared List Patterns */
.entity-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.botanical-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--card-width)), 1fr));
  justify-items: center;
}

@media (min-width: 1024px) {
  .botanical-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--card-width-lg)), 1fr));
    gap: 2rem;
  }
}

.entity-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.masonry-grid {
  column-count: 1;
  column-gap: 1.5rem;
}

@media (min-width: 640px) {
  .masonry-grid { column-count: 2; }
}

@media (min-width: 1024px) {
  .masonry-grid { column-count: 3; }
}

.masonry-item {
  break-inside: avoid;
  margin-bottom: 1.5rem;
}

/* Shell Transitions */
.page-transition-enter {
  opacity: 0;
  transform: translateY(10px);
}

.page-transition-enter-active {
  opacity:  1;
  transform: translateY(0);
  transition: opacity 300ms, transform 300ms;
}

.page-transition-exit {
  opacity: 1;
}

.page-transition-exit-active {
  opacity: 0;
  transition: opacity 300ms;
}

/* Route progress bar (shown during hash navigation) */
.route-progress {
  position: sticky;
  top: 0;
  z-index: 60;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, transparent, hsl(var(--primary) / 0.65), transparent);
  overflow: hidden;
}

.route-progress::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, hsl(var(--primary)), transparent);
  animation: route-progress 900ms ease-in-out infinite;
}

@keyframes route-progress {
  0% { transform: translateX(-70%); }
  100% { transform: translateX(70%); }
}

@keyframes drift {
  0%,
  100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -10px, 0) scale(1.04); }
}

/* Weather Effects */
.weather-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.rain-drop {
  position: absolute;
  background-color: rgba(255, 255, 255, 0.4);
  width: 1px;
  height: 15px;
  top: -20px;
  animation: rain-fall linear infinite;
}

@keyframes rain-fall {
  to { transform: translateY(100vh); }
}

.snow-flake {
  position: absolute;
  background-color: white;
  border-radius: 50%;
  opacity:  0.8;
  top: -10px;
  animation: snow-fall linear infinite;
}

@keyframes snow-fall {
  0% { transform: translateY(0) translateX(0); }
  25% { transform: translateY(25vh) translateX(15px); }
  50% { transform: translateY(50vh) translateX(-15px); }
  75% { transform: translateY(75vh) translateX(15px); }
  100% { transform: translateY(100vh) translateX(0); }
}

.spring-petal {
  position: absolute;
  background-color: #ff85a2; /* Brighter Cherry blossom pink */
  border-radius: 100% 0 100% 0;
  width: 10px;
  height: 10px;
  top: -15px;
  animation: petal-fall linear infinite;
}

@keyframes petal-fall {
  0% { transform: translateY(0) rotate(0deg) translateX(0); }
  25% { transform: translateY(25vh) rotate(90deg) translateX(20px); }
  50% { transform: translateY(50vh) rotate(180deg) translateX(-20px); }
  75% { transform: translateY(75vh) rotate(270deg) translateX(20px); }
  100% { transform: translateY(100vh) rotate(360deg) translateX(0); }
}

.autumn-leaf {
  position: absolute;
  background-color: #d35400; /* Burnt orange */
  border-radius: 50% 0 50% 0;
  width: 12px;
  height: 12px;
  top: -15px;
  animation: leaf-fall linear infinite;
}

@keyframes leaf-fall {
  0% { transform: translateY(0) rotate(0deg) translateX(0); }
  25% { transform: translateY(25vh) rotate(45deg) translateX(30px); }
  50% { transform: translateY(50vh) rotate(90deg) translateX(-30px); }
  75% { transform: translateY(75vh) rotate(135deg) translateX(30px); }
  100% { transform: translateY(100vh) rotate(180deg) translateX(0); }
}

.summer-heat {
  position: fixed;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255, 165, 0, 0.05), transparent);
  pointer-events: none;
  z-index: 1;
  animation: heat-shimmer 4s ease-in-out infinite;
}

@keyframes heat-shimmer {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

.sun-flare {
  position: fixed;
  top: -10%;
  right: -10%;
  width: 40vw;
  height: 40vw;
  background: radial-gradient(circle, rgba(255, 230, 150, 0.3) 0%, transparent 70%);
  filter: blur(40px);
  z-index: 1;
  pointer-events: none;
  animation: sun-pulse 8s ease-in-out infinite;
}

@keyframes sun-pulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.2); opacity: 0.7; }
}

[data-time-of-day="night"] {
  filter: brightness(0.8) contrast(1.1);
}

[data-time-of-day="night"] .page-bg::after {
  background: linear-gradient(to bottom, rgba(0, 0,  20, 0.5), rgba(0, 0, 20, 0.8));
}

[data-time-of-day="day"] {
  filter: brightness(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .hero-orb,
  .produce-card,
  .scene-panel,
  button,
  a,
  input,
  select,
  textarea {
    animation: none !important;
    transition: none !important;
  }

  .route-progress::before {
    animation: none;
  }
}

/* Fullscreen optimizations */
:fullscreen {
  background-color: hsl(var(--background));
}

:fullscreen .page-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
}

:fullscreen header {
  top: 0;
}

/* Glassmorphism Utility */
.glass-card {
  background: hsla(var(--card) / 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid hsla(var(--border) / 0.5);
}

.dark .glass-card {
  background: hsla(var(--card) / 0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

[data-save-data="true"] .glass-card {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: hsl(var(--card));
}

/* Interactive Sky Animation */
.sky-interactive {
  background-image: url('https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?auto=format&fit=crop&q=80&w=1000');
  background-size: 200% 200%;
  animation: sky-drift 30s ease-in-out infinite;
}

@keyframes sky-drift {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
}

/* Interactive Sun Styles */
.sun-interactive {
  filter: drop-shadow(0 0 15px rgba(250, 204, 21, 0.6));
  transition: all 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.group:hover .sun-interactive {
  transform: scale(1.2) rotate(15deg);
  filter: drop-shadow(0 0 35px rgba(250, 204, 21, 0.9));
}

.sun-glow-ring {
  position: absolute;
  inset: -30px;
  background: radial-gradient(circle, rgba(250, 204, 21, 0.3) 0%, transparent 70%);
  border-radius: 50%;
  animation: sun-glow-pulse 5s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes sun-glow-pulse {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.4); opacity: 0.6; }
}

.sky-portal {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

.sky-portal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%, rgba(0,0,0,0.1) 100%);
  pointer-events: none;
}

.sky-flare {
  position: absolute;
  top: -20%;
  right: -20%;
  width: 140%;
  height: 140%;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.15) 0%, transparent 60%);
  mix-blend-mode: overlay;
  pointer-events: none;
  animation: sky-flare-drift 20s linear infinite;
}

@keyframes sky-flare-drift {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}