/*
 * Navigation home V4 motion layer
 * Natural, interruptible movement: cinematic wallpaper depth, pointer light,
 * scroll choreography and tactile cards without competing with utility.
 */

html { --motion-progress: 0; overflow-x: clip; }
body { overflow-x: clip; }

/* The navigation remains useful after the hero and subtly reports page depth. */
.top-bar {
  position: fixed !important;
  transition: background-color 420ms ease, border-color 420ms ease,
    box-shadow 420ms ease, height 420ms cubic-bezier(.22,1,.36,1) !important;
}
.page-scrolled .top-bar {
  background: rgba(255,255,255,.88) !important;
  border-bottom-color: rgba(0,0,0,.06) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,.055) !important;
}
[data-theme="dark"].page-scrolled .top-bar {
  background: rgba(22,22,24,.88) !important;
  border-bottom-color: rgba(255,255,255,.09) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.28) !important;
}
.scroll-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg,#0071e3,#64d2ff);
  transform: scaleX(var(--motion-progress));
  transform-origin: left center;
  opacity: .72;
  pointer-events: none;
  will-change: transform;
}

/* A slow camera move makes the daily wallpaper feel like a living scene. */
html,
body { overflow-x: clip; }

#bing-bg {
  width: 100% !important;
  left: 0 !important;
  transform: scale(1.055) translate3d(0,0,0);
  transform-origin: 50% 48%;
  will-change: transform;
}
#orbs {
  display: block !important;
  position: absolute !important;
  inset: -12% 24px auto !important;
  z-index: 2 !important;
  width: auto !important;
  height: calc(max(720px, 100svh) * 1.2) !important;
  overflow: hidden;
  opacity: .78;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: saturate(115%);
}
#orbs::before,
#orbs::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform;
}
#orbs::before {
  width: min(48vw,680px);
  aspect-ratio: 1;
  left: 8%;
  top: 10%;
  background: radial-gradient(circle,rgba(90,200,250,.22),rgba(0,113,227,.08) 48%,transparent 72%);
  animation: ambientOrbitA 18s ease-in-out infinite alternate;
}
#orbs::after {
  width: min(42vw,620px);
  aspect-ratio: 1;
  right: 4%;
  bottom: 4%;
  background: radial-gradient(circle,rgba(255,196,120,.15),rgba(100,210,255,.06) 50%,transparent 72%);
  animation: ambientOrbitB 22s ease-in-out infinite alternate;
}
@keyframes ambientOrbitA { to { transform: translate3d(13vw,8vh,0) scale(1.12); } }
@keyframes ambientOrbitB { to { transform: translate3d(-11vw,-7vh,0) scale(.9); } }

.hero-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .13;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
.hero-inner { position: relative; z-index: 4; will-change: transform; }
.clock-time { animation: heroClockIn 1.05s cubic-bezier(.16,1,.3,1) both; }
.clock-date { animation: heroElementIn .8s .18s cubic-bezier(.16,1,.3,1) both; }
.hitokoto { animation: heroElementIn .8s .28s cubic-bezier(.16,1,.3,1) both; }
.search-wrap { position: relative; animation: heroElementIn .9s .38s cubic-bezier(.16,1,.3,1) both; }
.clock-sec { display: inline-block; animation: secondBreath 1s ease-in-out infinite; }
.clock-date::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 9px 2px 0;
  border-radius: 50%;
  background: #67e8f9;
  box-shadow: 0 0 0 5px rgba(103,232,249,.12),0 0 16px rgba(103,232,249,.65);
  animation: livePulse 2.2s ease-in-out infinite;
}
@keyframes heroClockIn { from { opacity: 0; transform: translateY(32px) scale(.94); filter: blur(12px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes heroElementIn { from { opacity: 0; transform: translateY(20px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes secondBreath { 50% { opacity: .38; } }
@keyframes livePulse { 50% { opacity: .55; transform: scale(.78); box-shadow: 0 0 0 2px rgba(103,232,249,.08),0 0 9px rgba(103,232,249,.35); } }

/* Search remains the visual action while gaining a soft, responsive aura. */
.search-wrap::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -16px 5%;
  border-radius: 30px;
  background: linear-gradient(90deg,rgba(41,151,255,.42),rgba(100,210,255,.2),rgba(255,255,255,.34),rgba(41,151,255,.42));
  background-size: 240% 100%;
  opacity: .28;
  filter: blur(26px);
  animation: searchAura 9s linear infinite;
  transition: opacity 350ms ease,transform 500ms cubic-bezier(.16,1,.3,1);
}
.search-wrap:focus-within::before { opacity: .68; transform: scale(1.035); }
.search-box {
  transition: transform 500ms cubic-bezier(.16,1,.3,1),box-shadow 500ms ease,
    background-color 350ms ease,border-color 350ms ease !important;
}
.search-box:focus-within {
  transform: translateY(-3px) scale(1.006);
  box-shadow: 0 22px 64px rgba(0,0,0,.24),0 0 0 4px rgba(100,210,255,.18) !important;
}
.search-submit { position: relative; overflow: hidden; }
.search-submit::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,transparent 22%,rgba(255,255,255,.32) 48%,transparent 72%);
  transform: translateX(-140%);
}
.search-submit:hover::before { animation: actionSweep .75s ease; }
@keyframes searchAura { to { background-position: 240% 0; } }
@keyframes actionSweep { to { transform: translateX(140%); } }

/* The content surface has a quiet blue atmosphere and sequenced reveals. */
.dashboard-stage { overflow: hidden; }
.dashboard-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(90vw,1180px);
  height: 620px;
  left: 50%;
  top: -250px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse,rgba(41,151,255,.095),transparent 68%);
  pointer-events: none;
}
.section-intro h1 {
  position: relative;
  display: inline-block;
  color: transparent !important;
  background: linear-gradient(105deg,var(--nav-ink) 3%,var(--nav-ink) 32%,#007aff 46%,#5ac8fa 56%,var(--nav-ink) 70%,var(--nav-ink) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: titleSheen 9s cubic-bezier(.65,0,.35,1) infinite;
}
.section-intro h1 span { color: inherit !important; }
.section-intro h1::after { content:""; position:absolute; left:7%; right:10%; bottom:-3px; height:2px; border-radius:99px; background:linear-gradient(90deg,transparent,#007aff 28%,#64d2ff 58%,transparent); background-size:220% 100%; filter:blur(.15px); opacity:.68; pointer-events:none; animation:titleLine 9s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes titleSheen { 0%,18% { background-position: 100% 50%; } 56%,100% { background-position: 0 50%; } }
@keyframes titleLine { 0%,18% { background-position:180% 0; transform:scaleX(.76); opacity:.35; } 55% { transform:scaleX(1); opacity:.8; } 100% { background-position:-20% 0; transform:scaleX(.82); opacity:.4; } }

.motion-ready [data-motion="reveal"] {
  opacity: 0;
  transform: translateY(42px) scale(.985);
  filter: blur(8px);
  transition: opacity 850ms cubic-bezier(.16,1,.3,1),
    transform 900ms cubic-bezier(.16,1,.3,1),filter 650ms ease;
  transition-delay: var(--motion-delay,0ms);
}
.motion-ready [data-motion="reveal"].is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

.ai-row > .card,
.shortcuts-wrap {
  position: relative;
  isolation: isolate;
  border: 1px solid color-mix(in srgb,var(--nav-line) 72%,transparent) !important;
  transition: box-shadow 650ms cubic-bezier(.16,1,.3,1),
    transform 650ms cubic-bezier(.16,1,.3,1),border-color 350ms ease !important;
}
.ai-row > .card::after,
.shortcuts-wrap::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1px;
  border-radius: inherit;
  background:
    radial-gradient(180px circle at var(--spot-x,50%) var(--spot-y,50%),rgba(198,240,255,.2),transparent 68%),
    radial-gradient(560px circle at var(--spot-x,50%) var(--spot-y,50%),rgba(41,151,255,.24),rgba(100,210,255,.09) 34%,transparent 54%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms ease;
}
.motion-ready .ai-row > .card.motion-card:hover,
.motion-ready .shortcuts-wrap.motion-card:hover {
  transform: perspective(1200px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(-5px) !important;
  border-color: rgba(41,151,255,.22) !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.04),0 28px 70px rgba(0,0,0,.11) !important;
}
.motion-card:hover::after { opacity: 1; }
[data-theme="dark"] .motion-card::after {
  background:
    radial-gradient(180px circle at var(--spot-x,50%) var(--spot-y,50%),rgba(188,235,255,.2),transparent 68%),
    radial-gradient(560px circle at var(--spot-x,50%) var(--spot-y,50%),rgba(41,151,255,.3),rgba(100,210,255,.11) 35%,transparent 56%);
}

.ai-card .shortcut { --float-delay: calc(var(--item-index,0) * -310ms); }
.ai-card .shortcut:hover .shortcut-icon { animation: iconBuoy .8s cubic-bezier(.16,1,.3,1) both; }
@keyframes iconBuoy { 35% { transform: translateY(-8px) scale(1.045) rotate(-1.5deg); } 100% { transform: translateY(-4px) scale(1.025); } }

@media (max-width: 640px) {
  #orbs { height: calc(max(680px,100svh) * 1.2) !important; opacity: .52; }
  .clock-date::before { width: 5px; height: 5px; margin-right: 7px; }
  .search-box:focus-within { transform: translateY(-2px); }
  .motion-ready [data-motion="reveal"] { transform: translateY(30px); filter: blur(5px); }
}

@media (prefers-reduced-motion: reduce) {
  #bing-bg, .hero-inner { transform: none !important; }
  #orbs::before, #orbs::after, .clock-time, .clock-date, .clock-sec, .hitokoto,
  .search-wrap, .search-wrap::before, .clock-date::before, .section-intro h1 span,
  .scroll-cue svg { animation: none !important; }
  .motion-ready [data-motion="reveal"] { opacity: 1; transform: none; filter: none; transition: none; }
  .ai-row > .card, .shortcuts-wrap, .search-box { transform: none !important; transition-duration: .001ms !important; }
  .scroll-progress { display: none; }
}

/* V5 richer motion composition — layered, calm, and GPU-friendly. */
.site-links a { position: relative; }
.site-links a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--nav-blue);
  box-shadow: 0 0 0 5px color-mix(in srgb,var(--nav-blue) 12%,transparent),0 0 14px color-mix(in srgb,var(--nav-blue) 55%,transparent);
  opacity: 0;
  transform: translate(-50%,5px) scale(.4);
  transition: opacity 320ms ease,transform 500ms cubic-bezier(.16,1,.3,1);
}
.site-links a.is-active::after { opacity: 1; transform: translate(-50%,0) scale(1); }
.top-bar .theme-toggle-knob { transition: transform 650ms cubic-bezier(.16,1,.3,1),background-color 350ms ease !important; }
[data-theme="light"] .top-bar .theme-toggle-knob { transform: rotate(18deg) scale(1) !important; }
[data-theme="dark"] .top-bar .theme-toggle-knob { transform: rotate(-18deg) scale(.94) !important; }

.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .88;
  mix-blend-mode: screen;
}
.hero-cursor-light {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 48% 47%,rgba(255,255,255,.42) 0,rgba(185,235,255,.28) 16%,transparent 34%),
    radial-gradient(circle,rgba(100,205,255,.24) 0,rgba(55,145,255,.18) 38%,rgba(82,181,255,.08) 58%,transparent 75%);
  box-shadow: 0 0 88px rgba(67,162,255,.12);
  filter: blur(7px) saturate(1.18);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  transition: opacity 320ms ease;
  will-change: transform;
}
.hero-cursor-light::after {
  content: "";
  position: absolute;
  inset: 24%;
  border-radius: inherit;
  background: radial-gradient(circle,rgba(210,244,255,.28),rgba(89,191,255,.1) 48%,transparent 72%);
  filter: blur(14px);
}
.hero-stage.pointer-active .hero-cursor-light { opacity: 1; }
.hero-inner { z-index: 5; }
.scroll-cue { z-index: 5; }

.clock { position: relative; isolation: isolate; }
.clock::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(72vw,680px);
  height: 190px;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  background: conic-gradient(from 0deg,rgba(41,151,255,.05),rgba(100,210,255,.22),rgba(255,255,255,.1),rgba(41,151,255,.05));
  filter: blur(46px);
  opacity: .54;
  transform: translate(-50%,-50%);
  animation: clockHalo 15s linear infinite;
}
@keyframes clockHalo { to { transform: translate(-50%,-50%) rotate(360deg) scale(1.07); } }
.clock-sec { animation: secondTick .48s cubic-bezier(.16,1,.3,1) both !important; transform-origin: left center; }
@keyframes secondTick { from { opacity: .1; transform: translateY(-7px) scale(.82); filter: blur(4px); } to { opacity: .62; transform: none; filter: none; } }
.quote-refresh { animation: quoteRefresh .78s cubic-bezier(.16,1,.3,1) both !important; }
@keyframes quoteRefresh { from { opacity: 0; transform: translateY(10px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

.search-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--search-angle,0deg),transparent 0 38%,rgba(100,210,255,.78) 48%,rgba(255,255,255,.72) 52%,transparent 62% 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .34;
  pointer-events: none;
  animation: searchBorderSpin 8s linear infinite;
}
@property --search-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes searchBorderSpin { to { --search-angle: 360deg; } }

.motion-card { overflow: hidden; }
.motion-card::before {
  content: "" !important;
  position: absolute !important;
  z-index: 2 !important;
  inset: -30% auto -30% -55% !important;
  width: 38% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent) !important;
  opacity: 0 !important;
  transform: skewX(-16deg) !important;
  pointer-events: none;
}
.motion-card:hover::before { animation: cardLightSweep 1.05s cubic-bezier(.16,1,.3,1); }
@keyframes cardLightSweep { 0% { left: -55%; opacity: 0; } 22% { opacity: .48; } 100% { left: 125%; opacity: 0; } }
[data-theme="dark"] .motion-card::before { background: linear-gradient(100deg,transparent,rgba(100,210,255,.12),transparent) !important; }

.countdown-box { position: relative; overflow: hidden; isolation: isolate; }
.countdown-box::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 150px;
  height: 150px;
  left: -45px;
  top: -62px;
  border-radius: 45% 55% 63% 37%;
  background: radial-gradient(circle at 65% 65%,rgba(41,151,255,.14),transparent 66%);
  animation: countdownBlob 8s ease-in-out infinite alternate;
}
#countdown-box-holiday::before { left: auto; right: -48px; top: auto; bottom: -68px; animation-delay: -3.5s; }
@keyframes countdownBlob { to { transform: translate3d(34px,24px,0) rotate(32deg) scale(1.22); border-radius: 60% 40% 38% 62%; } }
.countdown-box-num.count-complete { animation: countSettle .72s cubic-bezier(.16,1,.3,1); }
@keyframes countSettle { 35% { transform: scale(1.09); color: var(--nav-blue); } 100% { transform: none; } }

.ai-card .shortcut-icon { animation: shortcutFloat 5.6s ease-in-out infinite; animation-delay: calc(var(--item-index,0) * -430ms); }
@keyframes shortcutFloat { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(.45deg); } }
.motion-ready .motion-sequence:not(.is-visible) .shortcut,
.motion-ready .motion-sequence:not(.is-visible) .exam-item { opacity: 0; transform: translateY(16px) scale(.96); }
.motion-ready .motion-sequence.is-visible .shortcut,
.motion-ready .motion-sequence.is-visible .exam-item {
  animation: itemCascade .72s cubic-bezier(.16,1,.3,1) both;
  animation-delay: calc(var(--item-index,0) * 62ms + 120ms);
}
@keyframes itemCascade { from { opacity: 0; transform: translateY(18px) scale(.955); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.exam-item-days-num.done { display: inline-block; animation: checkBreathe 3.4s ease-in-out infinite; animation-delay: calc(var(--item-index,0) * -310ms); }
@keyframes checkBreathe { 50% { color: var(--nav-blue); transform: translateY(-2px) scale(1.08); } }

.shortcut-empty-state { position: relative; isolation: isolate; }
.shortcut-empty-state::before,
.shortcut-empty-state::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 39px;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb,var(--nav-blue) 26%,transparent);
  transform: translate(-50%,-50%);
  animation: emptyOrbit 3.6s ease-out infinite;
}
.shortcut-empty-state::after { animation-delay: -1.8s; }
@keyframes emptyOrbit { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.55); } 28% { opacity: .7; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.45); } }

@media (max-width: 640px) {
  .hero-particles { opacity: .64; }
  .hero-cursor-light { display: none; }
  .clock::before { width: 92vw; height: 150px; opacity: .4; }
  .ai-card .shortcut-icon { animation-duration: 6.8s; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-particles, .hero-cursor-light { display: none !important; }
  .clock::before, .search-box::before, .motion-card::before, .countdown-box::before,
  .ai-card .shortcut-icon, .exam-item-days-num.done, .shortcut-empty-state::before,
  .shortcut-empty-state::after { animation: none !important; }
  .motion-ready .motion-sequence .shortcut, .motion-ready .motion-sequence .exam-item {
    opacity: 1; transform: none; filter: none; animation: none !important;
  }
}