/* --------------CODED BY @ICECOLD.CH ON INSTAGRAM-------------------- */
:root{
  --bg:#000;
  --gold:#d4af37;
  --text:#e8d085;
  --maxw:1100px;
  --card-bg:rgba(212,175,55,0.04);
  --boxW: 600px;
  --boxH: 320px;
}

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

html,body{
  height:100%;
  overflow-x:hidden;
}

html{ 
  scrollbar-width:none;
  -ms-overflow-style:none;
}
html::-webkit-scrollbar{width:0;height:0}

body{
  display:flex;
  flex-direction:column;
  background:#000;
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  position:relative;
}

/* --------------CODED BY @ICECOLD.CH ON INSTAGRAM-------------------- */
body::before{
  content:'';
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:
    linear-gradient(125deg, 
      transparent 0%,
      rgba(212,175,55,0.03) 20%,
      transparent 40%,
      rgba(212,175,55,0.05) 60%,
      transparent 80%,
      rgba(212,175,55,0.02) 100%
    );
  background-size:200% 200%;
  z-index:-2;
  animation:gradientShift 20s ease infinite;
}

@keyframes gradientShift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

body::after{
  content:'';
  position:fixed;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
  background:repeating-linear-gradient(
    45deg,
    transparent,
    transparent 150px,
    rgba(212,175,55,0.02) 150px,
    rgba(212,175,55,0.02) 152px,
    transparent 152px,
    transparent 300px
  );
  z-index:-1;
  animation:lineMove 30s linear infinite;
}

@keyframes lineMove{
  0%{transform:translate(0, 0)}
  100%{transform:translate(100px, 100px)}
}

/* --------------CODED BY @ICECOLD.CH ON INSTAGRAM-------------------- */
.topbar{
  max-width:var(--maxw);
  margin:18px auto 20px;
  padding:0 14px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  color:var(--gold);
  font-weight:700;
  text-align:center;
  animation:slideDown 0.6s ease-out;
  flex-wrap:wrap;
}

@keyframes slideDown{
  from{opacity:0;transform:translateY(-20px)}
  to{opacity:1;transform:translateY(0)}
}

.topbar a{
  color:var(--gold);
  text-decoration:none;
  line-height:1.1;
  transition:all 0.3s ease;
  padding:8px 12px;
  border-radius:4px;
  font-size:14px;
}

.topbar a:hover{
  background:rgba(212,175,55,0.15);
  transform:translateY(-2px);
}

/* --------------CODED BY @ICECOLD.CH ON INSTAGRAM-------------------- */
.page{
  flex:1;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 14px 60px;
  width:100%;
}

h1.title{
  color:var(--gold);
  font-size:44px;
  margin:24px 0 6px;
  font-weight:800;
  letter-spacing:.03em;
  text-align:center;
  animation:fadeIn 0.8s ease-out 0.2s backwards;
}

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

h2.sub{
  margin:0 0 50px;
  font-size:20px;
  color:var(--text);
  font-weight:600;
  text-align:center;
  animation:fadeIn 0.8s ease-out 0.4s backwards;
}

/* --------------CODED BY @ICECOLD.CH ON INSTAGRAM-------------------- */
.list{
  display:grid;
  gap:80px;
  animation:fadeIn 0.8s ease-out 0.6s backwards;
}

.knife{
  position:relative;
  animation:slideUp 0.6s ease-out backwards;
}

.knife:nth-child(1){animation-delay:0.7s}
.knife:nth-child(2){animation-delay:0.8s}
.knife:nth-child(3){animation-delay:0.9s}
.knife:nth-child(4){animation-delay:1s}
.knife:nth-child(5){animation-delay:1.1s}

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

/* --------------CODED BY @ICECOLD.CH ON INSTAGRAM-------------------- */
.slider{
  width:100%;
  max-width:var(--boxW);
  margin:0 auto 24px;
  position:relative;
}

.frame{
  width:100%;
  height:auto;
  max-height:var(--boxH);
  object-fit:contain;
  background:#fff;
  display:block;
  border-radius:12px;
  cursor:pointer;
  transition:all 0.3s ease;
  box-shadow:0 4px 20px rgba(0,0,0,0.3);
}

.frame:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 32px rgba(212,175,55,0.2);
}

/* --------------CODED BY @ICECOLD.CH ON INSTAGRAM-------------------- */
.slider .arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:0;
  height:0;
  cursor:pointer;
  opacity:0.8;
  border-top:22px solid transparent;
  border-bottom:22px solid transparent;
  transition:all 0.3s ease;
  z-index:10;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.slider .arrow:hover{
  opacity:1;
  transform:translateY(-50%) scale(1.15);
}

.slider .prev{
  left:-12px;
  border-right:30px solid var(--gold);
}

.slider .next{
  right:-12px;
  border-left:30px solid var(--gold);
}

/* --------------CODED BY @ICECOLD.CH ON INSTAGRAM-------------------- */
.thumbs{
  display:flex;
  gap:12px;
  padding:8px 0;
  overflow-x:auto;
  width:100%;
  max-width:var(--boxW);
  margin:0 auto;
  scrollbar-width:none;
  justify-content:center;
}

.thumbs::-webkit-scrollbar{display:none}

.thumbs button{
  border:2px solid rgba(212,175,55,0.2);
  background:rgba(0,0,0,0.5);
  padding:3px;
  border-radius:8px;
  height:60px;
  aspect-ratio:16/10;
  cursor:pointer;
  opacity:0.5;
  transition:all 0.3s ease;
  flex-shrink:0;
  box-shadow:0 2px 8px rgba(0,0,0,0.3);
}

.thumbs button:hover{
  opacity:0.85;
  border-color:rgba(212,175,55,0.5);
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 4px 12px rgba(212,175,55,0.2);
}

.thumbs button[aria-current="true"]{
  border:2px solid var(--gold);
  opacity:1;
  box-shadow:0 4px 16px rgba(212,175,55,0.4);
  transform:translateY(-2px);
  background:rgba(0,0,0,0.7);
}

.thumbs img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:5px;
  display:block;
}

/* --------------CODED BY @ICECOLD.CH ON INSTAGRAM-------------------- */
.site-footer{
  text-align:center;
  color:var(--gold);
  padding:24px 0 32px;
  font-weight:700;
  border-top:1px solid rgba(212,175,55,0.2);
  margin-top:auto;
}

/* --------------CODED BY @ICECOLD.CH ON INSTAGRAM-------------------- */
#myBtn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 99;
  border: none;
  outline: none;
  background: rgba(0, 0, 0, 0.85);
  color: var(--gold);
  cursor: pointer;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  font-size: 28px;
  font-weight: 700;
  box-shadow: 
    inset 0 0 0 2px rgba(212, 175, 55, 0.3),
    0 4px 20px rgba(212, 175, 55, 0.4);
  transition: all 0.3s ease;
  align-items: center;
  justify-content: center;
  display: flex;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.8);
}

#myBtn.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

#myBtn:hover {
  background: rgba(0, 0, 0, 0.95);
  transform: translateY(-4px) scale(1.05);
  box-shadow: 
    inset 0 0 0 2px var(--gold),
    0 8px 32px rgba(212, 175, 55, 0.6);
}

#myBtn:hover .arrow-icon {
  color: #fff;
  transform: translate(-50%, -50%) scale(1.15);
}

#myBtn:active {
  transform: translateY(-2px) scale(1.02);
}

.arrow-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
  transition: all 0.3s ease;
  color: var(--gold);
}

.progress-circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
}

#progress-path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke 0.3s ease;
  filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.6));
}

#myBtn:hover #progress-path {
  stroke: #fff;
  stroke-width: 4;
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.8));
}

#myBtn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid var(--gold);
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
}

#myBtn:hover::before {
  animation: pulse-ring 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-ring {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.3; }
  100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

/* --------------CODED BY @ICECOLD.CH ON INSTAGRAM-------------------- */
@media(max-width:768px){
  h1.title{font-size:36px}
  h2.sub{font-size:19px; margin-bottom:40px}
  .topbar{gap:14px; padding:0 12px}
  .topbar a{padding:6px 10px; font-size:13px}
  .list{gap:70px}
  .page{padding:0 12px 50px}
  .slider .arrow{border-top:20px solid transparent;border-bottom:20px solid transparent}
  .slider .prev{left:-10px;border-right:28px solid var(--gold)}
  .slider .next{right:-10px;border-left:28px solid var(--gold)}
  .thumbs button{height:56px}
}

/* --------------CODED BY @ICECOLD.CH ON INSTAGRAM-------------------- */
@media(max-width:600px){
  :root{--boxW:100%;--boxH:280px}
  h1.title{font-size:32px; margin:20px 0 6px}
  h2.sub{font-size:18px; margin-bottom:30px}
  .topbar{gap:10px;font-size:13px;margin:14px auto 16px;padding:0 10px}
  .topbar a{padding:6px 8px;font-size:12px}
  .list{gap:60px}
  .slider{margin-bottom:20px}
  .frame{max-height:var(--boxH);border-radius:10px}
  .slider .arrow{border-top:18px solid transparent;border-bottom:18px solid transparent}
  .slider .prev{left:-8px;border-right:26px solid var(--gold)}
  .slider .next{right:-8px;border-left:26px solid var(--gold)}
  .thumbs{gap:8px;padding:6px 0}
  .thumbs button{height:48px;border-width:1.5px}
  #myBtn{width:50px;height:50px;bottom:20px;right:20px;font-size:24px}
  #progress-path{stroke-width:2.5}
  #myBtn:hover #progress-path{stroke-width:3.5}
  .page{padding:0 10px 40px}
  .site-footer{padding:20px 0 28px;font-size:14px}
  body::before{background-size:300% 300%;animation:gradientShift 15s ease infinite}
  body::after{
    background:repeating-linear-gradient(45deg,transparent,transparent 100px,rgba(212,175,55,0.02) 100px,rgba(212,175,55,0.02) 102px,transparent 102px,transparent 200px);
    animation:lineMove 20s linear infinite;
  }
}

/* --------------CODED BY @ICECOLD.CH ON INSTAGRAM-------------------- */
@media(max-width:400px){
  :root{--boxW:100%;--boxH:240px}
  h1.title{font-size:26px;margin:16px 0 4px;letter-spacing:0.02em}
  h2.sub{font-size:15px;margin-bottom:24px;line-height:1.3}
  .topbar{gap:8px;margin:10px auto 12px;padding:0 8px;font-size:11px}
  .topbar a{padding:5px 6px;font-size:10px;line-height:1.2}
  .list{gap:50px}
  .slider{margin-bottom:16px}
  .frame{max-height:var(--boxH);border-radius:8px}
  .slider .arrow{border-top:16px solid transparent;border-bottom:16px solid transparent}
  .slider .prev{left:-6px;border-right:24px solid var(--gold)}
  .slider .next{right:-6px;border-left:24px solid var(--gold)}
  .thumbs{gap:6px;padding:5px 0}
  .thumbs button{height:42px;border-width:1.5px;border-radius:6px}
  #myBtn{width:45px;height:45px;bottom:16px;right:16px;font-size:22px}
  #progress-path{stroke-width:2}
  #myBtn:hover #progress-path{stroke-width:3}
  .page{padding:0 8px 32px}
  .site-footer{padding:18px 0 24px;font-size:13px}
  body::after{
    background:repeating-linear-gradient(45deg,transparent,transparent 80px,rgba(212,175,55,0.015) 80px,rgba(212,175,55,0.015) 82px,transparent 82px,transparent 160px);
    animation:lineMove 18s linear infinite;
  }
}

/* --------------CODED BY @ICECOLD.CH ON INSTAGRAM-------------------- */
@media(max-width:320px){
  :root{--boxW:100%;--boxH:200px}
  h1.title{font-size:22px;margin:12px 0 4px}
  h2.sub{font-size:13px;margin-bottom:20px}
  .topbar{gap:6px;margin:8px auto 10px;padding:0 6px;flex-direction:column}
  .topbar a{padding:4px 8px;font-size:11px;width:100%}
  .list{gap:40px}
  .slider{margin-bottom:14px}
  .frame{max-height:var(--boxH);border-radius:6px}
  .slider .arrow{border-top:14px solid transparent;border-bottom:14px solid transparent}
  .slider .prev{left:-4px;border-right:22px solid var(--gold)}
  .slider .next{right:-4px;border-left:22px solid var(--gold)}
  .thumbs{gap:5px;padding:4px 0}
  .thumbs button{height:38px;border-width:1px;border-radius:5px}
  #myBtn{width:42px;height:42px;bottom:12px;right:12px;font-size:20px}
  #progress-path{stroke-width:2}
  #myBtn:hover #progress-path{stroke-width:2.5}
  #myBtn:hover::before{animation:none}
  .frame:hover{transform:translateY(-2px)}
  .thumbs button:hover{transform:translateY(-2px) scale(1.02)}
  .page{padding:0 6px 28px}
  .site-footer{padding:16px 0 20px;font-size:12px}
}

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

@media(max-width:400px){
  .frame{box-shadow:0 2px 12px rgba(0,0,0,0.25)}
  .frame:hover{box-shadow:0 4px 20px rgba(212,175,55,0.15)}
  .thumbs button{box-shadow:0 1px 6px rgba(0,0,0,0.25)}
  .thumbs button[aria-current="true"]{box-shadow:0 2px 12px rgba(212,175,55,0.3)}
}
/* --------------CODED BY @ICECOLD.CH ON INSTAGRAM-------------------- */