/* ===========================================================
   МЕТRO / Windows 10 Mobile inspired stylesheet
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;700;900&display=swap');

:root{
  --bg:#000000;
  --surface:#0b0b0b;
  --surface-2:#161616;
  --text:#ffffff;
  --text-dim:#9a9a9a;

  --cobalt:#2D89EF;
  --magenta:#D80073;
  --teal:#00ABA9;
  --lime:#A4C400;
  --orange:#FA6800;
  --purple:#6B69D6;
  --red:#E51400;
  --grey:#858282;

  --tile-radius:2px;
  --ease-metro:cubic-bezier(.17,.67,.27,1);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Rubik','Segoe UI',sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}

/* ---------- Preloader ---------- */
#preloader{
  position:fixed;inset:0;background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  z-index:999;transition:opacity .5s var(--ease-metro), visibility .5s;
}
#preloader.hidden{opacity:0;visibility:hidden;pointer-events:none;}
.dots{display:flex;gap:10px;}
.dots span{
  width:14px;height:14px;background:var(--cobalt);
  animation:dotPulse 1.2s infinite ease-in-out;
}
.dots span:nth-child(2){background:var(--magenta);animation-delay:.15s;}
.dots span:nth-child(3){background:var(--teal);animation-delay:.3s;}
.dots span:nth-child(4){background:var(--lime);animation-delay:.45s;}
@keyframes dotPulse{
  0%,80%,100%{transform:scale(.4);opacity:.4;}
  40%{transform:scale(1);opacity:1;}
}

/* ---------- Pivot navigation ---------- */
.pivot-nav{
  position:fixed;top:0;left:0;right:0;
  z-index:50;
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(6px);
  border-bottom:1px solid #1a1a1a;
}
.pivot-tabs{
  display:flex;
  overflow-x:auto;
  scrollbar-width:none;
  padding:0 20px;
}
.pivot-tabs::-webkit-scrollbar{display:none;}
.tab{
  flex:0 0 auto;
  padding:18px 16px 14px;
  font-size:15px;
  font-weight:400;
  letter-spacing:1px;
  color:var(--text-dim);
  text-transform:uppercase;
  position:relative;
  transition:color .3s var(--ease-metro);
}
.tab:hover{color:var(--text);}
.tab.active{color:var(--text);font-weight:700;}
.tab.active::after{
  content:'';
  position:absolute;left:16px;right:16px;bottom:0;
  height:3px;background:var(--cobalt);
  animation:tabIn .3s var(--ease-metro);
}
@keyframes tabIn{from{transform:scaleX(0);}to{transform:scaleX(1);}}

/* ---------- Hub / Panorama ---------- */
.hub{
  scroll-snap-type:x mandatory;
  display:flex;
  overflow-x:auto;
  overflow-y:hidden;
  height:100vh;
  scrollbar-width:none;
}
.hub::-webkit-scrollbar{display:none;}
.panorama-section{
  scroll-snap-align:start;
  flex:0 0 100vw;
  height:100vh;
  padding:90px 24px 90px;
  overflow-y:auto;
  position:relative;
}

/* giant rotated background title */
.giant-title{
  position:absolute;
  top:60px;left:-6px;
  font-size:22vw;
  font-weight:900;
  letter-spacing:-4px;
  color:transparent;
  -webkit-text-stroke:1.5px #232323;
  white-space:nowrap;
  z-index:0;
  pointer-events:none;
  user-select:none;
  animation:titleDrift 18s ease-in-out infinite alternate;
}
@keyframes titleDrift{
  from{transform:translateX(0);}
  to{transform:translateX(-30px);}
}

.section-title{
  font-size:34px;
  font-weight:200;
  margin:0 0 24px;
  position:relative;
  z-index:1;
  animation:slideFadeIn .5s var(--ease-metro) both;
}

.about-content{position:relative;z-index:1;padding-top:34vh;}
.greeting{
  font-size:20px;
  line-height:1.5;
  font-weight:300;
  max-width:640px;
  color:var(--text);
  animation:slideFadeIn .6s .1s var(--ease-metro) both;
}
.name-row{
  display:flex;align-items:center;gap:14px;
  margin-top:26px;
  animation:slideFadeIn .6s .2s var(--ease-metro) both;
}
.name-row .name{
  font-size:26px;font-weight:700;letter-spacing:.5px;
}
.rating-tile{
  width:40px;height:40px;
  background:var(--red);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;
  border-radius:var(--tile-radius);
  flex:0 0 auto;
}
.age-note{
  margin-top:8px;
  font-size:12px;
  color:var(--text-dim);
  max-width:520px;
  animation:slideFadeIn .6s .3s var(--ease-metro) both;
}

.scroll-hint{
  position:absolute;bottom:40px;left:24px;
  font-size:12px;color:var(--text-dim);
  letter-spacing:2px;text-transform:uppercase;
  display:flex;align-items:center;gap:8px;
  z-index:1;
}
.scroll-hint .arrow{
  width:8px;height:8px;
  border-right:2px solid var(--text-dim);
  border-bottom:2px solid var(--text-dim);
  transform:rotate(-45deg);
  animation:arrowNudge 1.6s infinite;
}
@keyframes arrowNudge{
  0%,100%{transform:rotate(-45deg) translate(0,0);}
  50%{transform:rotate(-45deg) translate(6px,-6px);}
}

@keyframes slideFadeIn{
  from{opacity:0;transform:translateY(16px);}
  to{opacity:1;transform:translateY(0);}
}

/* ---------- Tile grid ---------- */
.tile-grid{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:6px;
  max-width:980px;
}
.tile{
  position:relative;
  border-radius:var(--tile-radius);
  overflow:hidden;
  color:#fff;
  perspective:900px;
  min-height:150px;
  cursor:pointer;
  opacity:0;
  transform:translateX(40px);
  animation:tileIn .5s var(--ease-metro) forwards;
  transition:transform .12s var(--ease-metro);
}
.tile:active{transform:scale(.94);}
.tile.wide{grid-column:span 2;}
@keyframes tileIn{
  to{opacity:1;transform:translateX(0);}
}
/* staggered entrance */
.tile-grid .tile:nth-child(1){animation-delay:.05s;}
.tile-grid .tile:nth-child(2){animation-delay:.12s;}
.tile-grid .tile:nth-child(3){animation-delay:.19s;}
.tile-grid .tile:nth-child(4){animation-delay:.26s;}
.tile-grid .tile:nth-child(5){animation-delay:.33s;}
.tile-grid .tile:nth-child(6){animation-delay:.40s;}
.tile-grid .tile:nth-child(7){animation-delay:.47s;}
.tile-grid .tile:nth-child(8){animation-delay:.54s;}

/* Flip on hover */
.tile-flip{
  position:relative;
  width:100%;height:100%;
  transform-style:preserve-3d;
  transition:transform 0.6s var(--ease-metro);
}
.tile:hover .tile-flip{
  transform:rotateY(180deg);
}

.tile-face{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  justify-content:flex-end;
  padding:12px;
  backface-visibility:hidden;
  background:inherit;
}
.tile-face.back{
  transform:rotateY(180deg);
  justify-content:center;
  background:inherit;
}
.tile-icon{
  font-size:30px;
  margin-bottom:auto;
  align-self:flex-start;
  opacity:.95;
}
.tile-title{
  font-size:15px;font-weight:600;line-height:1.25;
}
.tile-sub{
  font-size:11px;color:rgba(255,255,255,.8);
  margin-top:2px;
  word-break:break-word;
}
.tile-face.back .tile-title{font-size:13px;font-weight:400;word-break:break-word;}

/* Tile colors */
.tile-cobalt{background:var(--cobalt);}
.tile-magenta{background:var(--magenta);}
.tile-grey{background:var(--grey);}
.tile-teal{background:var(--teal);}
.tile-lime{background:var(--lime);color:#111;}
.tile-orange{background:var(--orange);}
.tile-purple{background:var(--purple);}
.tile-red{background:var(--red);}
.tile-lime .tile-sub{color:rgba(0,0,0,.6);}

/* File tiles specific */
.tile-file{
  background:var(--surface-2);
  border:1px solid #222;
}
.tile-file .tile-icon{font-size:24px;}
.tile-file .tile-title{font-weight:400;font-size:14px;}
.tile-file .tile-sub{font-size:10px;color:var(--text-dim);}
.tile-file:hover{background:var(--surface);border-color:var(--cobalt);}

/* info block */
.info-block{
  position:relative;z-index:1;
  max-width:640px;
  margin-top:22px;
  animation:slideFadeIn .5s .1s var(--ease-metro) both;
}
.info-block p{font-size:15px;line-height:1.6;color:var(--text-dim);font-weight:300;}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.chip{
  padding:8px 14px;
  border:1px solid #2a2a2a;
  font-size:13px;
  font-weight:400;
  color:var(--text);
  transition:background .2s, transform .15s var(--ease-metro);
}
.chip:hover{background:var(--surface-2);transform:translateY(-2px);}

/* File browser */
.file-browser{
  position:relative;z-index:1;
  max-width:980px;
  margin-top:20px;
}
.file-path{
  padding:12px 16px;
  background:var(--surface);
  border:1px solid #1a1a1a;
  font-size:13px;
  color:var(--text-dim);
  margin-bottom:12px;
  font-family:'Consolas','Courier New',monospace;
}
.file-path span{color:var(--cobalt);}

/* ---------- App bar ---------- */
.app-bar{
  position:fixed;bottom:0;left:0;right:0;
  height:64px;
  background:rgba(10,10,10,.92);
  backdrop-filter:blur(8px);
  border-top:1px solid #1a1a1a;
  display:flex;align-items:center;justify-content:center;
  gap:40px;
  z-index:50;
}
.app-bar button{
  background:none;border:none;color:var(--text);
  display:flex;flex-direction:column;align-items:center;gap:4px;
  font-size:10px;color:var(--text-dim);
  cursor:pointer;
  transition:color .2s, transform .15s var(--ease-metro);
}
.app-bar button:active{transform:scale(.88);}
.app-bar button:hover{color:var(--text);}
.app-bar .ellipse{
  width:6px;height:6px;border-radius:50%;
  background:var(--text-dim);
}
.bar-icon{width:20px;height:20px;display:block;}

/* ---------- Error pages ---------- */
.error-page{
  min-height:100vh;
  display:flex;flex-direction:column;
  align-items:flex-start;justify-content:center;
  padding:6vw;
  position:relative;
  overflow:hidden;
}
.error-code{
  font-size:min(38vw,320px);
  font-weight:900;
  line-height:.8;
  color:transparent;
  -webkit-text-stroke:2px var(--surface-2);
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  z-index:0;
  animation:errorPulse 6s ease-in-out infinite;
  user-select:none;
}
@keyframes errorPulse{
  0%,100%{-webkit-text-stroke-color:#1c1c1c;}
  50%{-webkit-text-stroke-color:#2b2b2b;}
}
.error-face{
  font-size:60px;margin-bottom:20px;
  animation:tileIn .6s var(--ease-metro) both, wobble 3s ease-in-out infinite 1s;
  position:relative;z-index:1;
}
@keyframes wobble{
  0%,100%{transform:rotate(0deg);}
  50%{transform:rotate(-6deg);}
}
.error-title{
  font-size:28px;font-weight:300;margin:0 0 10px;
  position:relative;z-index:1;
  animation:slideFadeIn .5s .1s var(--ease-metro) both;
}
.error-desc{
  font-size:15px;color:var(--text-dim);max-width:480px;line-height:1.6;
  position:relative;z-index:1;
  animation:slideFadeIn .5s .2s var(--ease-metro) both;
}
.error-actions{
  margin-top:28px;display:flex;gap:10px;flex-wrap:wrap;
  position:relative;z-index:1;
  animation:slideFadeIn .5s .3s var(--ease-metro) both;
}

/* Smaller buttons for error pages */
.error-page .btn-tile{
  padding:10px 18px;
  font-size:12px;
  min-height:auto;
}
.error-page .tile-grid .tile{
  min-height:100px;
}
.error-page .tile-grid{
  max-width:480px;
  margin-top:20px;
}

.btn-tile{
  padding:14px 22px;
  background:var(--cobalt);
  font-size:14px;font-weight:600;
  border-radius:var(--tile-radius);
  display:inline-block;
  transition:transform .15s var(--ease-metro), background .2s;
}
.btn-tile:hover{background:#1f6fd0;}
.btn-tile:active{transform:scale(.95);}
.btn-tile.outline{
  background:transparent;border:1px solid #2a2a2a;
}
.btn-tile.outline:hover{background:var(--surface-2);}

/* ---------- Responsive ---------- */
@media (max-width:640px){
  .giant-title{top:70px;font-size:18vw;}
  .about-content{padding-top:26vh;}
  .greeting{font-size:17px;}
  .section-title{font-size:26px;}
  .tile-grid{grid-template-columns:repeat(2,1fr);}
  .error-title{font-size:22px;}
  .error-code{font-size:min(50vw,200px);}
  .error-page .tile-grid .tile{min-height:80px;}
}

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