/* ================================================================
   Makura.exe — a small personal site from a better 2005
   frutiger aero · xp window · mobile-first · vanilla css
   all animation is transform/opacity — 60fps friendly
   ================================================================ */

:root {
  --xp-blue:       #2f6fd6;
  --xp-blue-deep:  #1e4fae;
  --xp-blue-light: #6aa7f0;
  --aero-green:    #6fc243;
  --ink:           #2b3d55;
  --ink-soft:      #5f7591;
  --glass:         rgba(255, 255, 255, 0.62);
  --glass-border:  rgba(255, 255, 255, 0.85);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  font-family: "Segoe UI", Tahoma, Verdana, system-ui, sans-serif;
  color: var(--ink);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  animation: page-in 1s ease both;
}

@keyframes page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ================================================================
   sky · sun · glare
   ================================================================ */

.sky {
  position: fixed;
  inset: 0;
  z-index: -6;
  background: linear-gradient(
    180deg,
    #3a70b8 0%,
    #5b93d4 26%,
    #85b6e4 52%,
    #b8d8ee 76%,
    #e2f0f7 100%
  );
}

.sun {
  position: fixed;
  z-index: -5;
  top: -22vmax;
  right: -16vmax;
  width: 48vmax;
  height: 48vmax;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 253, 244, 0.75) 0%,
    rgba(255, 250, 228, 0.28) 34%,
    rgba(255, 250, 228, 0) 66%
  );
  animation: sun-breathe 12s ease-in-out infinite alternate;
}

@keyframes sun-breathe {
  from { transform: scale(1);    opacity: 0.7; }
  to   { transform: scale(1.05); opacity: 0.9; }
}

/* a slow diagonal light streak sweeping the scene — lens glare */
.sun-streak {
  position: fixed;
  inset: -30%;
  z-index: -4;
  background: linear-gradient(
    115deg,
    transparent 43%,
    rgba(255, 255, 255, 0.09) 50%,
    transparent 57%
  );
  transform: translateX(-30%);
  animation: streak-sweep 22s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes streak-sweep {
  from { transform: translateX(-22%); }
  to   { transform: translateX(22%); }
}

/* ================================================================
   clouds — soft photographic haze, no cartoon puffs.
   each cloud is a stack of blurred radial-gradient ellipses.
   ================================================================ */

.clouds {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
}

.cloud {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(
    ellipse 50% 50% at 50% 58%,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(255, 255, 255, 0.55) 42%,
    rgba(255, 255, 255, 0) 72%
  );
  will-change: transform;
  animation: cloud-drift linear infinite;
}

/* a second, offset lobe gives an irregular natural silhouette */
.cloud::before {
  content: "";
  position: absolute;
  width: 72%;
  height: 86%;
  left: -24%;
  top: 16%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse 50% 50% at 50% 55%,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0.4) 45%,
    rgba(255, 255, 255, 0) 72%
  );
}

.cloud::after {
  content: "";
  position: absolute;
  width: 64%;
  height: 74%;
  right: -20%;
  top: 26%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse 50% 50% at 50% 52%,
    rgba(255, 255, 255, 0.7) 0%,
    rgba(255, 255, 255, 0.35) 45%,
    rgba(255, 255, 255, 0) 72%
  );
}

.cloud--far  { filter: blur(10px); opacity: 0.55; }
.cloud--mid  { filter: blur(7px);  opacity: 0.7; }
.cloud--near { filter: blur(5px);  opacity: 0.8; }

.c1 { width: 300px; height: 90px;  top: 13%; animation-duration: 170s; }
.c2 { width: 240px; height: 70px;  top: 30%; animation-duration: 195s; animation-delay: -90s; }
.c3 { width: 420px; height: 110px; top: 6%;  animation-duration: 135s; animation-delay: -40s; }
.c4 { width: 360px; height: 95px;  top: 38%; animation-duration: 150s; animation-delay: -110s; }
.c5 { width: 540px; height: 130px; top: 19%; animation-duration: 115s; animation-delay: -60s; }
.c6 { width: 260px; height: 75px;  top: 47%; animation-duration: 205s; animation-delay: -150s; }

@keyframes cloud-drift {
  from { transform: translateX(-40vw); }
  to   { transform: translateX(135vw); }
}

/* ================================================================
   horizon haze · hills · grain
   ================================================================ */

/* pale atmospheric band where sky meets the far hill */
.horizon-haze {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 24vh;
  height: 26vh;
  z-index: -2;
  background: linear-gradient(
    180deg,
    rgba(240, 248, 250, 0) 0%,
    rgba(240, 248, 250, 0.55) 55%,
    rgba(240, 248, 250, 0) 100%
  );
  pointer-events: none;
}

.hills {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 42vh;
  z-index: -2;
  display: block;
}

/* soft light rolling over the near hill */
.hill-shine {
  animation: hill-light 18s ease-in-out infinite alternate;
}

@keyframes hill-light {
  from { opacity: 0.1; }
  to   { opacity: 0.42; }
}

.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ================================================================
   layout
   ================================================================ */

.scene {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 18px;
  perspective: 1000px;
}

/* ================================================================
   the window
   ================================================================ */

.window {
  width: min(380px, 100%);
  border-radius: 14px;
  overflow: hidden;
  background: var(--glass);
  backdrop-filter: blur(16px) saturate(1.35);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  border: 1px solid var(--glass-border);
  box-shadow:
    0 26px 60px -16px rgba(21, 61, 112, 0.55),
    0 6px 20px rgba(21, 61, 112, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  animation: window-open 0.7s cubic-bezier(0.3, 1.35, 0.5, 1) 0.15s both;
  will-change: transform;
}

@keyframes window-open {
  from { opacity: 0; transform: scale(0.9) translateY(26px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}

/* ─── title bar ─── */

.titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 8px 8px 12px;
  background: linear-gradient(
    180deg,
    #5d9df0 0%,
    #3a77dd 46%,
    #2b62c9 52%,
    #3a77dd 100%
  );
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.titlebar-left {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.titlebar-icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: linear-gradient(180deg, #8fd06a, #4d9e33);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 1px 3px rgba(0,0,0,0.25);
  flex: none;
}

.titlebar-text {
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 2px rgba(20, 50, 110, 0.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.titlebar-controls {
  display: flex;
  gap: 5px;
  flex: none;
}

.tb-btn {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #7fb2f4, #4a82df);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 1px 2px rgba(20,50,110,0.35);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.tb-min i,
.tb-max i {
  display: block;
  background: #fff;
}

.tb-min i { width: 9px; height: 2px; margin-top: 8px; border-radius: 1px; }
.tb-max i { width: 9px; height: 8px; border: 1.6px solid #fff; border-top-width: 3px; background: transparent; border-radius: 1.5px; }

.tb-close {
  background: linear-gradient(180deg, #f39a86, #d9542f 55%, #c8461f);
  padding-bottom: 2px;
}

/* ─── window body ─── */

.window-body {
  padding: 30px 26px 28px;
  text-align: center;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.62) 0%,
    rgba(238, 248, 255, 0.55) 100%
  );
}

/* avatar */

.avatar-wrap {
  position: relative;
  display: inline-block;
}

.avatar-ring {
  position: relative;
  display: inline-block;
  padding: 5px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff 0%, #bcd9f6 100%);
  box-shadow:
    0 8px 22px -6px rgba(30, 79, 174, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 1px rgba(122, 168, 226, 0.45);
  animation: avatar-glow 5s ease-in-out infinite alternate;
}

@keyframes avatar-glow {
  from { box-shadow: 0 8px 22px -6px rgba(30, 79, 174, 0.5), inset 0 1px 0 rgba(255,255,255,0.9), 0 0 0 1px rgba(122,168,226,0.45); }
  to   { box-shadow: 0 10px 30px -6px rgba(30, 79, 174, 0.65), inset 0 1px 0 rgba(255,255,255,0.9), 0 0 14px 2px rgba(140, 195, 255, 0.55), 0 0 0 1px rgba(122,168,226,0.45); }
}

.avatar {
  display: block;
  width: 124px;
  height: 124px;
  border-radius: 50%;
  object-fit: cover;
}

/* aqua-style glass reflection across the top of the avatar */
.avatar-gloss {
  position: absolute;
  top: 7px;
  left: 12px;
  right: 12px;
  height: 52px;
  border-radius: 60px 60px 90px 90px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.65) 0%,
    rgba(255, 255, 255, 0.12) 78%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
}

/* msn-style presence chip */
.status-chip {
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 600;
  color: #3f6f2a;
  background: linear-gradient(180deg, #ffffff, #e8f6dd);
  border: 1px solid rgba(122, 186, 84, 0.55);
  border-radius: 999px;
  padding: 3px 10px;
  box-shadow: 0 2px 8px rgba(50, 90, 30, 0.25), inset 0 1px 0 #fff;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #b8f08c, #57b32c 70%);
  box-shadow: 0 0 6px rgba(110, 200, 60, 0.9);
  animation: dot-pulse 2.4s ease-in-out infinite;
}

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

/* text */

.title {
  margin-top: 24px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  animation: rise-in 0.7s ease 0.5s both;
}

.subtitle {
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
  animation: rise-in 0.7s ease 0.65s both;
}

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

/* ─── THE button — glossy aero ─── */

.cta {
  position: relative;
  display: block;
  margin: 24px auto 2px;
  max-width: 270px;
  padding: 15px 18px;
  border-radius: 12px;
  text-decoration: none;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    #8ec8f8 0%,
    #4a94e8 44%,
    #2f78d8 52%,
    #4b93e4 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow:
    0 10px 24px -6px rgba(23, 82, 165, 0.65),
    0 2px 6px rgba(23, 82, 165, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -1px 0 rgba(20, 60, 130, 0.35);
  transition:
    transform 0.22s cubic-bezier(0.34, 1.5, 0.5, 1),
    box-shadow 0.22s ease,
    filter 0.22s ease;
  animation: cta-pop 0.7s cubic-bezier(0.34, 1.6, 0.5, 1) 0.85s both;
  will-change: transform;
}

@keyframes cta-pop {
  from { opacity: 0; transform: scale(0.78); }
  62%  { opacity: 1; transform: scale(1.05); }
  to   { opacity: 1; transform: scale(1); }
}

.cta:hover,
.cta:focus-visible {
  transform: translateY(-2px) scale(1.035);
  filter: brightness(1.07) saturate(1.08);
  box-shadow:
    0 16px 34px -6px rgba(23, 82, 165, 0.8),
    0 4px 12px rgba(23, 82, 165, 0.45),
    0 0 18px rgba(120, 190, 255, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -1px 0 rgba(20, 60, 130, 0.35);
}

.cta:active {
  transform: translateY(0) scale(0.975);
  filter: brightness(0.97);
}

/* the aqua gloss cap on the upper half */
.cta-gloss {
  position: absolute;
  top: 1px;
  left: 6px;
  right: 6px;
  height: 46%;
  border-radius: 10px 10px 14px 14px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.75) 0%,
    rgba(255, 255, 255, 0.16) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* periodic shine sweep */
.cta-shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    110deg,
    transparent 32%,
    rgba(255, 255, 255, 0.5) 50%,
    transparent 68%
  );
  transform: translateX(-120%);
  animation: shine 5s ease-in-out 2.4s infinite;
  pointer-events: none;
}

@keyframes shine {
  0%        { transform: translateX(-120%); }
  34%, 100% { transform: translateX(120%); }
}

.cta-label {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(19, 63, 130, 0.7);
}

.cta-arrow {
  flex: none;
  transition: transform 0.25s ease;
}

.cta:hover .cta-arrow {
  transform: translateX(3px);
}

/* ─── status bar ─── */

.statusbar {
  display: flex;
  gap: 6px;
  padding: 6px 10px;
  font-size: 11px;
  color: #6d7f95;
  background: linear-gradient(180deg, rgba(240,247,255,0.8), rgba(214,231,247,0.75));
  border-top: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

.statusbar-cell {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(190, 210, 232, 0.7);
  white-space: nowrap;
}

.statusbar-cell--grow { flex: 1; }

.lock { flex: none; }

/* ================================================================
   desktop niceties
   ================================================================ */

@media (min-width: 640px) {
  .window { width: 400px; }
  .window-body { padding: 34px 32px 30px; }
  .avatar { width: 136px; height: 136px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}