/* ============================================
   GAURAV'S CLOCK — Base Reset & Layout
   Always loaded. Device-agnostic foundation.
   ============================================ */

/* Reset */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* Custom Properties */
:root {
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  --font-display: 'Space Grotesk', var(--font-sans);
  --font-marathi: 'Noto Sans Devanagari', var(--font-sans);

  --clock-size: clamp(3rem, 8vw + 1rem, 10rem);
  --clock-size-seconds: clamp(2rem, 5vw + 0.5rem, 6.5rem);
  --panel-gap: clamp(0.5rem, 1.5vw, 1rem);
  --border-radius: clamp(12px, 2vw, 24px);
  --border-radius-sm: clamp(8px, 1.5vw, 16px);

  --glass-blur: 20px;
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 600ms;
}

/* Base */
html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  background: var(--bg-primary);
  color: var(--text-primary);
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--duration-slow) var(--ease-smooth),
              color var(--duration-slow) var(--ease-smooth);
}

::selection { background: var(--accent-soft); color: var(--text-primary); }

/* App — viewport-locked flex column, centered content */
.app {
  height: 100vh;
  height: 100dvh;
  width: 100%;
  display: flex; flex-direction: column; align-items: center;
  position: relative; z-index: 1; overflow-y: auto; overflow-x: hidden;
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-smooth);
}

.app--visible { opacity: 1; }


.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }

.bg__aurora {
  position: absolute; inset: -50%;
  background: conic-gradient(from 180deg at 50% 50%, var(--aurora-1) 0deg, transparent 60deg, var(--aurora-2) 120deg, transparent 180deg, var(--aurora-1) 240deg, transparent 300deg, var(--aurora-2) 360deg);
  animation: aurora-rotate 30s linear infinite; opacity: 0.8; filter: blur(80px); will-change: transform;
}
@keyframes aurora-rotate { to { transform: rotate(360deg); } }

.bg__mesh {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 50% at 20% 40%, var(--blob-1) 0%, transparent 70%), radial-gradient(ellipse 60% 40% at 80% 60%, var(--blob-2) 0%, transparent 70%), radial-gradient(ellipse 70% 60% at 50% 80%, var(--blob-3) 0%, transparent 70%);
  animation: mesh-shift 20s ease-in-out infinite alternate; will-change: transform;
}
@keyframes mesh-shift { 0% { transform: scale(1) translate(0,0); } 50% { transform: scale(1.05) translate(2%,-1%); } 100% { transform: scale(0.98) translate(-1%,2%); } }

.bg__blob { position: absolute; border-radius: 50%; filter: blur(80px); will-change: transform; animation: blob-float 25s ease-in-out infinite alternate; }
.bg__blob--1 { width: min(400px,40vw); height: min(400px,40vw); background: var(--blob-1); top:-10%; left:-5%; animation-duration:22s; }
.bg__blob--2 { width: min(350px,35vw); height: min(350px,35vw); background: var(--blob-2); top:30%; right:-10%; animation-delay:-5s; animation-duration:28s; }
.bg__blob--3 { width: min(300px,30vw); height: min(300px,30vw); background: var(--blob-3); bottom:-5%; left:20%; animation-delay:-10s; animation-duration:25s; }
@keyframes blob-float { 0%{transform:translate(0,0) scale(1);} 50%{transform:translate(5%,-8%) scale(1.1);} 100%{transform:translate(-3%,5%) scale(0.95);} }

.bg__noise { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='512' height='512' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E"); background-repeat: repeat; opacity: 0.04; mix-blend-mode: overlay; }
.bg__vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.4) 100%); }
.bg__particles { position: absolute; inset: 0; }

/* Cursor Glow */
.cursor-glow { position: fixed; width: min(400px,30vw); height: min(400px,30vw); border-radius: 50%; background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%); pointer-events: none; z-index: 1; opacity: 0; transform: translate(-50%,-50%); transition: opacity 0.4s var(--ease-smooth); filter: blur(60px); will-change: transform, opacity; mix-blend-mode: screen; }
.cursor-glow--visible { opacity: 0.15; }

/* Ripple */
.ripple-container { position: fixed; inset: 0; z-index: 9998; pointer-events: none; overflow: hidden; }
.ripple { position: absolute; border-radius: 50%; background: var(--accent-glow); transform: scale(0); animation: ripple-effect 0.6s var(--ease-out) forwards; pointer-events: none; }
@keyframes ripple-effect { to { transform: scale(4); opacity: 0; } }

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .bg__aurora, .bg__mesh, .bg__blob, .cursor-glow { animation: none !important; opacity: 0.5; }
}
.animations-off *, .animations-off *::before, .animations-off *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 100ms !important; }
.animations-off .bg__aurora, .animations-off .bg__mesh, .animations-off .bg__blob, .animations-off .cursor-glow, .animations-off .bg__particles { display: none !important; }

/* Scrollbar (for theme drawer only) */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--text-tertiary); border-radius: 2px; }
* { scrollbar-width: thin; scrollbar-color: var(--text-tertiary) transparent; }

/* Print */
@media print {
  .bg, .cursor-glow, .topbar__actions, .theme-drawer, .ripple-container, .footer { display: none !important; }
  .app { background: white; color: black; }
}

/* Dim Mode */
.dim-mode .app { background: #000; }
.dim-mode .bg { opacity: 0; }
.dim-mode .clock-section { opacity: 0.35; transition: opacity 1s var(--ease-smooth); }
.dim-mode .topbar, .dim-mode .panels, .dim-mode .footer {
  opacity: 0.35;
  transition: opacity 1s var(--ease-smooth);
}

/* Safe area */
@supports (padding: env(safe-area-inset-top)) {
  .app {
    padding-top: max(var(--app-pt, 0.5rem), env(safe-area-inset-top));
    padding-left: max(var(--app-px, 0.75rem), env(safe-area-inset-left));
    padding-right: max(var(--app-px, 0.75rem), env(safe-area-inset-right));
    padding-bottom: max(0.25rem, env(safe-area-inset-bottom));
  }
}