/* Reset & Base */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: #000;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

::selection { background: #ECE9E2; color: #0b0b0b; }

/* Colors */
:root {
  --paper: #ECE9E2;
  --paper-muted: #d9d5cd;
  --ink: #0b0b0b;
}

/* Animations */
@keyframes fade-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes floaty { 0%{ transform: translateY(0) rotate(0deg) } 50%{ transform: translateY(-10px) rotate(2deg) } 100%{ transform: translateY(0) rotate(0deg) } }

@keyframes loader-fade-out {
  to { opacity: 0; pointer-events: none; }
}

@keyframes logo-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes tri-fold-1 {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0; }
  20% { opacity: 1; }
  50% { transform: translateY(-40px) rotate(180deg); opacity: 0.9; }
  80% { opacity: 1; }
}

@keyframes tri-fold-2 {
  0%, 100% { transform: translateX(-60px) rotate(0deg); opacity: 0; }
  20% { opacity: 1; }
  50% { transform: translateX(0) rotate(120deg); opacity: 0.9; }
  80% { opacity: 1; }
}

@keyframes tri-fold-3 {
  0%, 100% { transform: translateX(60px) rotate(0deg); opacity: 0; }
  20% { opacity: 1; }
  50% { transform: translateX(0) rotate(-120deg); opacity: 0.9; }
  80% { opacity: 1; }
}

@keyframes tri-fold-4 {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); opacity: 0; }
  20% { opacity: 1; }
  50% { transform: translateY(40px) rotate(360deg) scale(0.8); opacity: 0.9; }
  80% { opacity: 1; }
}

/* Loading Screen */
.loader-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: linear-gradient(135deg, #0b0b0b 0%, #1a1a1a 100%);
  display: grid;
  place-items: center;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.loader-screen.hidden {
  animation: loader-fade-out 0.6s forwards;
}

.loader-content {
  text-align: center;
  position: relative;
  transform: translateY(-30px);
}

.loader-logo {
  width: 140px;
  height: 140px;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(236, 233, 226, 0.3));
  animation: logo-pulse 2s ease-in-out infinite;
  margin-bottom: 50px;
}

.loader-triangles {
  position: relative;
  width: 200px;
  height: 100px;
  margin: 0 auto 40px;
}

.loader-tri {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -20px;
  margin-top: -20px;
  width: 40px;
  height: 40px;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background: var(--paper-muted);
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
  will-change: opacity;  /* Minimalne dla GPU */
  backface-visibility: hidden;
  transform: translateZ(0);  /* Hardware accel bez lagu */
}

.loader-tri-1 {
  animation: tri-fold-1 2s ease-in-out infinite;
}

.loader-tri-2 {
  animation: tri-fold-2 2s ease-in-out infinite 0.2s;
}

.loader-tri-3 {
  animation: tri-fold-3 2s ease-in-out infinite 0.4s;
}

.loader-tri-4 {
  animation: tri-fold-4 2s ease-in-out infinite 0.6s;
}

.loader-text {
  font-size: 16px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: 24px;
  opacity: 0.9;
}

/* Pager */
.pager { position: relative; height: 100vh; width: 100%; overflow: hidden; }

.section { position: absolute; inset: 0; transition: all .7s ease-in-out; pointer-events: none; z-index: 0; }
.section.active { opacity: 1; transform: scale(1); filter: blur(0px); pointer-events: auto; z-index: 10; }
.section:not(.active) { opacity: 0; transform: scale(.96); filter: blur(8px); }

/* Video Background – section-local (disappears with section) */
.video-bg { position: absolute; inset: 0; z-index: -10; }
.video-bg video { height: 100%; width: 100%; object-fit: cover; }
.video-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.65), rgba(0,0,0,.6), rgba(0,0,0,1)); }
.video-vignette { pointer-events: none; position: absolute; inset: 0; box-shadow: inset 0 0 120px rgba(0,0,0,.8); }

/* Video Placeholder Fallback */
.video-placeholder {
  position: absolute;
  inset: 0;
  background: #000;  /* Czarny bg do czasu video */
  z-index: -9;
}

/* Origami Particles */
.tri { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); background: var(--paper-muted); opacity: .35; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); position: absolute; z-index: 0; }

/* Buttons */
.btn-a,.btn-b{
  line-height:1; display:inline-flex; align-items:center; gap:10px; padding:16px 28px;
  border:2px solid var(--paper); text-decoration:none; text-transform:uppercase; letter-spacing:2px; font-size:13px; position:relative; overflow:hidden; transition:opacity .2s ease;
}
.btn-a{ background:var(--paper); color:var(--ink); }
.btn-a::before{ content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:var(--ink); transition:left .4s; z-index:0; }
.btn-a:hover{ color:var(--paper); }
.btn-a:hover::before{ left:0; }
.btn-a span{ position:relative; z-index:1; }

.btn-b{ background:transparent; color:var(--paper); }
.btn-b::before{ content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:var(--paper); transition:left .4s; z-index:-1; }
.btn-b:hover{ color:var(--ink); }
.btn-b:hover::before{ left:0; }

/* Language Switch */
.lang-switch{ position:fixed; right:24px; top:24px; z-index:40; display:flex; align-items:center; gap:8px; }
.lang-pill{ font-size:12px; letter-spacing:1px; padding:6px 10px; border:1px solid var(--paper); color:var(--paper); background:transparent; cursor:pointer; transition:all .25s; }
.lang-pill.active{ background:var(--paper); color:var(--ink); }
.lang-pill:hover{ filter:brightness(.95); }

/* Navigation Dots */
.nav-dots{ position:fixed; right:24px; top:50%; transform:translateY(-50%); z-index:30; }
.nav-dots ul{ list-style:none; display:flex; flex-direction:column; gap:20px; }
.nav-dot{ position:relative; display:block; background:none; border:none; cursor:pointer; padding:0; }
.dot-circle{ width:12px; height:12px; border-radius:50%; border:2px solid rgba(236,233,226,.3); transition:all .5s; position:relative; }
.dot-circle.active{ border-color:var(--paper); transform:scale(1.4); }
.dot-inner{ position:absolute; inset:0; margin:auto; border-radius:50%; transition:all .5s; width:0; height:0; background:var(--paper); }
.dot-inner.active{ width:6px; height:6px; box-shadow:0 0 12px var(--paper); }
.dot-label{ position:absolute; right:32px; top:50%; transform:translateY(-50%); whitespace:nowrap; font-size:12px; letter-spacing:2px; text-transform:uppercase; opacity:0; transition:opacity .3s; pointer-events:none; color:var(--paper); }
.nav-dot:hover .dot-label{ opacity:1; }

/* Layout helpers */
.h-full{ height:100%; } .relative{ position:relative; } .z-10{ z-index:10; } .z-20{ z-index:20; }
.grid-center{ display:grid; place-items:center; } .text-center{ text-align:center; } .px-6{ padding-left:24px; padding-right:24px; }

/* Hero */
.hero-logo{ max-width:320px; width:100%; filter:drop-shadow(0 12px 36px rgba(0,0,0,.6)); margin:0 auto; }
.hero-buttons{ margin-top:32px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; }
.top-nav{ position:absolute; left:24px; top:24px; z-index:20; display:flex; align-items:center; gap:12px; }
.studio-logo{ height:36px; width:36px; object-fit:contain; transform:scale(1.05); transform-origin:left center; }
.studio-name{ font-weight:500; letter-spacing:.05em; color:var(--paper); }

/* Press */
.press-content{ max-width:768px; margin:0 auto; }
.press-title{ font-size:36px; font-weight:bold; color:var(--paper); }
.press-desc{ margin-top:16px; opacity:.9; line-height:1.6; color:var(--paper); }
.press-rights{ margin-top:20px; font-size:14px; opacity:.6; color:var(--paper); }
.press-buttons{ margin-top:32px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; }
.radial-bg{ background:radial-gradient(ellipse at top, rgba(255,255,255,.05), transparent 60%); }

/* Socials */
.socials-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px 24px 0;
}

.socials-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.socials-logo{ height:128px; width:128px; object-fit:contain; margin:0 auto; transform:scale(1.2); }
.socials-title{ margin-top:16px; font-size:30px; font-weight:bold; color:var(--paper); }
.socials-sub{ margin-top:8px; opacity:.9; color:var(--paper); }
.socials-buttons{ margin-top:24px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:16px; }

/* Footer */
.site-footer {
  padding: 16px 0;
  text-align: center;
}

.site-footer p {
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--paper);
  opacity: 0.4;
  text-transform: uppercase;
}

/* Anti-glitch for low-end devices */
@media (prefers-reduced-motion: reduce) or (max-width: 480px) {
  .loader-tri {
    animation: none !important;
    opacity: 0.5;  /* Statyczne tri bez ruchu */
  }
}

@media (min-width:768px){ 
  .hero-logo{ max-width:560px; }
  .socials-wrapper { padding: 64px 24px 0; }
}