/* chichill.club — V10 | only the contact button and app icons move */
:root {
  color-scheme: dark;
  --bg: #0b0a0f;
  --text: #f5f4f8;
  --muted: #a8a3b1;
  --line: rgba(255,255,255,.115);
  --ease: cubic-bezier(.16,1,.3,1);
  --pointer-x: 50vw;
  --pointer-y: 50vh;
}
* {box-sizing: border-box}
html {min-height:100%; background:var(--bg)}
body {margin:0; min-height:100vh; overflow-x:hidden; background:var(--bg);
  color:var(--text);font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a {color:inherit;-webkit-tap-highlight-color:transparent}
::selection {background:#b9a5ff;color:#0b0a0f}
:focus-visible {outline:2px solid #c1b2ff;outline-offset:5px}
.world {position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  background:radial-gradient(ellipse at 50% -18%,rgba(122,88,189,.09),transparent 56%),var(--bg)}
.aurora {position:absolute;width:min(78vw,790px);aspect-ratio:1;border-radius:50%;filter:blur(100px);
  opacity:.15;will-change:transform}
.aurora-one {top:-42%;left:-28%;background:#6b45bd;animation:drift-one 22s ease-in-out infinite alternate}
.aurora-two {bottom:-45%;right:-27%;background:#245b78;animation:drift-two 26s ease-in-out infinite alternate}
@keyframes drift-one {to {transform:translate3d(30%,22%,0) scale(1.15)}}
@keyframes drift-two {to {transform:translate3d(-28%,-20%,0) scale(1.18)}}
.pointer-glow {position:absolute;left:0;top:0;width:460px;height:460px;border-radius:50%;
  transform:translate3d(calc(var(--pointer-x) - 230px),calc(var(--pointer-y) - 230px),0);
  background:radial-gradient(circle,rgba(174,140,245,.07),transparent 67%);opacity:0;transition:opacity .5s ease}
.pointer-active .pointer-glow {opacity:1}
.grain {position:absolute;inset:0;opacity:.045;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.83' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
/* HOME: no giant logo and no other navigation, one mail button only. */
.home-page {height:100dvh;overflow:hidden}
.home-main {min-height:100dvh;display:grid;place-items:center;padding:24px}
.contact-float {max-width:100%;animation:contact-float 9s ease-in-out infinite}
@keyframes contact-float {0%,100% {transform:translateY(0)} 45% {transform:translateY(-4px)} 75% {transform:translateY(2px)}}
.contact-hero {
  --rx:0deg;--ry:0deg;--dx:0px;--dy:0px;
  position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;
  gap:14px;padding:19px 27px;max-width:100%;min-height:72px;
  border:1px solid rgba(215,196,255,.22);border-radius:100px;
  background:linear-gradient(125deg,rgba(255,255,255,.065),rgba(255,255,255,.022));
  color:#e8e5ef;text-decoration:none;font-size:clamp(.98rem,2.8vw,1.32rem);
  letter-spacing:.025em;white-space:nowrap;
  box-shadow:0 0 23px rgba(153,120,235,.10),0 0 54px rgba(132,100,203,.06),
    inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  transform:perspective(900px) translate3d(var(--dx),var(--dy),0)
    rotateX(var(--rx)) rotateY(var(--ry));
  transition:box-shadow .45s var(--ease),background .45s var(--ease),border-color .45s var(--ease);
  will-change:transform;
}
.contact-hero::before {content:"";position:absolute;inset:-10px;border-radius:inherit;z-index:-1;
  background:radial-gradient(ellipse,rgba(155,119,250,.095),transparent 70%);pointer-events:none}
.contact-hero:hover,.contact-hero:focus-visible {
  background:linear-gradient(125deg,rgba(255,255,255,.09),rgba(255,255,255,.035));
  border-color:rgba(215,196,255,.36);
  box-shadow:0 0 31px rgba(166,132,255,.20),0 0 72px rgba(132,100,203,.10),
    inset 0 1px 0 rgba(255,255,255,.10)}
.contact-icon {font-size:1.24em;line-height:1;display:inline-flex;align-items:center;justify-content:center}
/* APPS: stationery cards; ONLY app-icon elements animate. */
.apps-main {width:min(1120px,calc(100% - 40px));margin:0 auto;
  padding:clamp(32px,5vw,60px) 0 76px}
.apps-header {display:flex;justify-content:center;align-items:center;margin:0 0 clamp(48px,7vw,85px)}
.apps-brand {display:block;height:clamp(34px,4vw,44px);width:auto;max-width:min(78vw,360px);object-fit:contain}
.apps-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.apps-grid:has(.app-card:only-child) {grid-template-columns:minmax(0,620px);justify-content:center}
.app-card {
  position:relative;isolation:isolate;display:flex;flex-direction:column;
  justify-content:space-between;gap:52px;min-height:346px;padding:clamp(24px,4vw,35px);
  border:1px solid var(--line);border-radius:30px;
  background:linear-gradient(145deg,rgba(255,255,255,.053),rgba(255,255,255,.019));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  color:var(--text);text-decoration:none;
  /* No transform, reveal, opacity, filter or hover animation on the card. */
}
.app-top {display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.icon-orbit {width:102px;height:102px;display:grid;place-items:center;position:relative;flex:0 0 auto;
  animation:icon-hover 7s ease-in-out infinite;will-change:transform}
.icon-orbit::before {content:"";position:absolute;inset:-14px;border-radius:32px;
  background:radial-gradient(circle,rgba(var(--app-accent,140,110,225),.17),transparent 73%);
  filter:blur(8px);opacity:.6;transition:opacity .45s ease;pointer-events:none}
.icon-face {--icon-rx:0deg;--icon-ry:0deg;position:relative;width:100px;height:100px;padding:9px;
  display:grid;place-items:center;border:1px solid rgba(255,255,255,.13);border-radius:28px;
  background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.028));
  box-shadow:0 15px 30px rgba(0,0,0,.19),inset 0 1px 0 rgba(255,255,255,.08);
  transform:perspective(450px) rotateX(var(--icon-rx)) rotateY(var(--icon-ry));
  transition:transform .52s var(--ease),box-shadow .45s var(--ease);will-change:transform}
.icon-image {display:block;width:100%;height:100%;object-fit:cover;border-radius:20px}
@keyframes icon-hover {0%,100% {transform:translateY(0)} 50% {transform:translateY(-6px)}}
.app-card:hover .icon-orbit::before,.app-card:focus-visible .icon-orbit::before {opacity:1}
.app-card:hover .icon-face,.app-card:focus-visible .icon-face {
  box-shadow:0 17px 36px rgba(0,0,0,.26),0 0 28px rgba(var(--app-accent,140,110,225),.14),
  inset 0 1px 0 rgba(255,255,255,.11)}
.app-open {width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line);color:#aaa5b0;font-size:1.12rem}
.app-meta {margin:0 0 11px;color:#8b8494;font-size:.73rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase}
.app-name {margin:0;font-family:Manrope,"DM Sans",sans-serif;font-size:clamp(2rem,4vw,2.8rem);
  font-weight:700;line-height:1.15;letter-spacing:-.052em;overflow-wrap:anywhere}
.app-description {max-width:530px;margin:13px 0 0;color:var(--muted);
  font-size:clamp(.95rem,1.6vw,1rem);line-height:1.65;overflow-wrap:break-word}
.noscript {color:var(--muted)}
@media (max-width:760px) {
  .apps-main {width:min(100% - 28px,1120px);padding-top:32px}
  .apps-grid,.apps-grid:has(.app-card:only-child) {grid-template-columns:minmax(0,1fr)}
  .app-card {min-height:326px;border-radius:26px;gap:44px}
  .apps-header {margin-bottom:48px}
  .contact-hero {padding:17px 21px;min-height:66px;gap:10px}
}
@media (max-width:380px) {.contact-hero {font-size:.96rem;padding:16px 17px}}
@media (hover:none),(pointer:coarse) {
  .pointer-glow {display:none}
  .contact-hero {transform:none!important}
  .icon-face {transform:none!important}
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .contact-hero,.icon-orbit,.icon-face {transform:none!important}
  .pointer-glow {display:none}
}