:root{
  --bg: #0f1724;
  --panel: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  --accent: #6EE7B7;
  --muted: #93a3b8;
}
@font-face {
    font-family: Tbc_l_i;
    src: url("fonts/light_i.otf") format("opentype");
}
@font-face {
    font-family: Tbc_l;
    src: url("fonts/light.otf") format("opentype");
}

*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  font-family: 'MyCustomFont', Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: radial-gradient(farthest-corner at 10% 10%, rgba(110,231,183,0.06), transparent 40%), var(--bg);
  color: #e6eef8;
}
.container{
  display:flex;
  min-height:100vh;
  gap:40px;
  padding:48px;
  align-items:flex-start;
}

.container{ position:relative }
.left{
  flex: 0 0 80%;
  max-width:1000px;
}
.title{
  margin:0 0 24px 0;
  font-size:90px;
  line-height:0.9;
  letter-spacing: 2px;
  font-family: 'Tbc_l_i';
  font-weight: 400;
  color: white;
  text-shadow: 0 6px 30px rgba(6,20,31,0.7);
}
.small-ft{
  margin:0 0 10px 0;
  font-size:40px;
  line-height:0.9;
  letter-spacing: 2px;
  font-family: 'Tbc_l';
  font-weight: 100;
  color: white;
  text-shadow: 0 6px 30px rgba(6,20,31,0.7);
}
.subtitle{
  margin:0 0 24px 0;
  font-size:36px;
  line-height:0.9;
  letter-spacing: 2px;
  font-family: 'Tbc_l';
  font-weight: 200;
  color: white;
  text-shadow: 0 6px 30px rgba(6,20,31,0.7);
}
.countries-list{
  list-style:none;
  padding:0;
  margin:8px 0 0 0;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.countries-list a{
  display:block;
  text-decoration:none;
  color:var(--accent);
  font-size:20px;
  background: rgba(255,255,255,0.02);
  padding:12px 16px;
  border-radius:10px;
  width:fit-content;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.countries-list a:hover,
.countries-list a:focus{
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 10px 30px rgba(2,6,23,0.6);
  background: rgba(255,255,255,0.04);
}
.countries-list a:focus { outline: 3px solid rgba(110,231,183,0.18); outline-offset:4px }

.right{
  flex:1;
  position:relative;
  min-height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.floating-photos{
  position:relative;
  width:360px;
  height:520px;
}
.photo{
  position:absolute;
  border-radius:14px;
  box-shadow: 0 12px 30px rgba(2,6,23,0.6);
  object-fit:cover;
  width:260px;
  height:180px;
  will-change: transform, filter;
  transition: transform 0.9s cubic-bezier(.2,.9,.26,1), filter .6s ease;
  border: 6px solid rgba(255,255,255,0.03);
}
.p1{ top:20px; left:40px; transform: rotate(-6deg); animation: float1 6s ease-in-out infinite; width:260px; height:180px; z-index:14 }
.p2{ top:160px; left:100px; transform: rotate(8deg); animation: float2 7s ease-in-out infinite; width:240px; height:170px; z-index:12 }
.p3{ top:320px; left:30px; transform: rotate(-2deg); animation: float3 8s ease-in-out infinite; width:280px; height:190px; z-index:10 }
.p4{ top:480px; left:180px; transform: rotate(4deg); animation: float4 6.8s ease-in-out infinite; width:220px; height:150px; z-index:13 }
.p5{ top:640px; left:200px; transform: rotate(-10deg); animation: float5 7.6s ease-in-out infinite; width:200px; height:140px; z-index:9 }
.p6{ top:800px; left:160px; transform: rotate(6deg); animation: float6 9s ease-in-out infinite; width:240px; height:160px; z-index:11 }
.p7{ top:960px; left:8px; transform: rotate(-12deg); animation: float2 6.4s ease-in-out infinite; width:180px; height:120px; z-index:8 }
.p8{ top:1100px; left:12px; transform: rotate(10deg); animation: float1 7.2s ease-in-out infinite; width:240px; height:170px; z-index:7 }
.p9{ top:1280px; left:220px; transform: rotate(-4deg); animation: float3 8.4s ease-in-out infinite; width:200px; height:150px; z-index:6 }
.p10{ top:1440px; left:90px; transform: rotate(3deg); animation: float4 6.6s ease-in-out infinite; width:140px; height:100px; z-index:5 }
.p11{ top:1600px; left:6px; transform: rotate(14deg); animation: float5 7.8s ease-in-out infinite; width:160px; height:110px; z-index:4 }
.p12{ top: 1700px; left:260px; transform: rotate(-8deg); animation: float6 8.8s ease-in-out infinite; width:240px; height:170px; z-index:3 }
.p13{ top: 1920px; left:260px; transform: rotate(2deg); animation: float1 7.4s ease-in-out infinite; width:160px; height:110px; z-index:2 }
.p14{ top:2080px; left:140px; transform: rotate(-14deg); animation: float2 6.2s ease-in-out infinite; width:180px; height:120px; z-index:1 }
.p15{ top:2260px; left:320px; transform: rotate(12deg); animation: float5 9.2s ease-in-out infinite; width:220px; height:150px; z-index:0 }
.p16{ top:2400px; left:40px; transform: rotate(-6deg); animation: float1 6s ease-in-out infinite; width:260px; height:180px; z-index:14 }
.p17{ top:2620px; left:250px; transform: rotate(8deg); animation: float2 7s ease-in-out infinite; width:240px; height:170px; z-index:12 }

@keyframes float1{
  0%{ transform: translateY(0) rotate(-6deg)}
  50%{ transform: translateY(-18px) rotate(-4deg)}
  100%{ transform: translateY(0) rotate(-6deg)}
}
@keyframes float2{
  0%{ transform: translateY(0) rotate(8deg)}
  50%{ transform: translateY(-26px) rotate(6deg)}
  100%{ transform: translateY(0) rotate(8deg)}
}
@keyframes float3{
  0%{ transform: translateY(0) rotate(-2deg)}
  50%{ transform: translateY(-14px) rotate(0deg)}
  100%{ transform: translateY(0) rotate(-2deg)}
}

@keyframes float4{
  0%{ transform: translateY(0) rotate(4deg)}
  50%{ transform: translateY(-20px) rotate(6deg)}
  100%{ transform: translateY(0) rotate(4deg)}
}
@keyframes float5{
  0%{ transform: translateY(0) rotate(-10deg)}
  50%{ transform: translateY(-30px) rotate(-6deg)}
  100%{ transform: translateY(0) rotate(-10deg)}
}
@keyframes float6{
  0%{ transform: translateY(0) rotate(6deg)}
  50%{ transform: translateY(-12px) rotate(8deg)}
  100%{ transform: translateY(0) rotate(6deg)}
}

@media (max-width:900px){
  .container{flex-direction:column;padding:28px}
  .left{flex-basis:auto}
  .title{font-size:56px}
  .right{order:2}
  .floating-photos{width:100%;height:260px}
  .photo{position:relative;left:auto;top:auto;margin:8px}
}

footer{
  text-align:center;
  padding:28px 12px;
  color:var(--muted);
}


.country-preview{
  position:absolute;
  left:50%;
  
  transform:translateX(calc(-55%));
  top:50%; 
  pointer-events:none; 
  z-index:50;
  transition:opacity .12s ease, transform .12s ease;
  opacity:0;
}
.country-preview[aria-hidden="false"]{ opacity:1 }
.country-preview__panel{
  pointer-events:auto;
  width:1000px; 
  max-width:60%;
  margin:0 12px;
  border-radius:12px;
  padding:18px;
  display:flex;
  flex-direction:column; 
  gap:12px;
  align-items:flex-start;
}
.country-preview__photo{
  width:100%; 
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:10px;
  border: none;
}
.country-preview__text{ color:#e6eef8; width:100%; }
.country-preview__title{ margin:0 0 8px 0; font-size:20px }
.country-preview__summary{ margin:0; color:var(--muted); font-size:15px }

@media (max-width:900px){
  .country-preview__panel{ width:100%; max-width:100%; }
  .country-preview__photo{ display:block }
}

.subtitle-row {
  display: flex;
  align-items: center; 
  gap: 0.7rem;
  line-height: 1.35;
  white-space: nowrap;
}

.subtitle,
.subtitle-row h2 {
  margin: 0;
  font-family: 'Tbc_l', inherit;
  font-size: 36px;
  font-weight: 200;
  vertical-align: middle;
}

.subtitle-constant {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;

}

.subtitle-cycle {
  display: inline-flex;
  align-items: center;
  overflow: hidden;       
  line-height: inherit;
  min-width: 50ch;
}

.subtitle-cycle > span {
  display: inline-block;
  line-height: inherit;
}

@media (max-width: 540px) {
  .subtitle, .subtitle-row h2 { font-size: 20px; }
  .subtitle-cycle { min-width: 10ch; padding-bottom: 0; }
}