/* ========== TravelTCS animated logo ========== */
:root{
  --tcs-red:#cb1521;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-back:cubic-bezier(.34,1.56,.64,1);
  --glow:glow;
}
.tcs-logo--white{--glow:glow-white}

.tcs-logo{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:2088/378;
  user-select:none;
  -webkit-user-select:none;
}
.tcs-logo--white{ /* white version for dark backgrounds */ }

.tl-piece{
  position:absolute;
  display:block;
  pointer-events:none;
  will-change:transform,opacity;
}
.tcs-logo--white .tl-piece{filter:brightness(0) invert(1)}

/* ---- animation (only runs when JS adds .is-playing) ---- */
.tcs-logo.is-playing .g-icon{
  animation:
    icon-in 1s var(--ease-out) var(--d) backwards,
    var(--glow) .7s ease-in-out var(--g) backwards;
}
.tcs-logo.is-playing .g-tcs{
  animation:
    tcs-in .85s var(--ease-out) var(--d) backwards,
    var(--glow) .7s ease-in-out var(--g) backwards;
}
.tcs-logo.is-playing .g-tr{
  animation:
    tr-in .7s var(--ease-out) var(--d) backwards,
    var(--glow) .7s ease-in-out var(--g) backwards;
}
.tcs-logo.is-playing .g-com{
  animation:
    com-in .65s var(--ease-back) var(--d) backwards,
    var(--glow) .7s ease-in-out var(--g) backwards;
  transform-origin:50% 100%;
}
.tcs-logo.is-playing .g-reg{
  animation:fade-in .5s ease var(--d) backwards;
}

@keyframes icon-in{
  from{opacity:0;transform:translate(-16%,-16%);clip-path:inset(0 100% 100% 0)}
  to  {opacity:1;transform:none;clip-path:inset(0 0 0 0)}
}
@keyframes tcs-in{
  from{opacity:0;transform:translateX(60%) skewX(-14deg)}
  to  {opacity:1;transform:none}
}
@keyframes tr-in{
  from{opacity:0;transform:translateY(45%)}
  to  {opacity:1;transform:none}
}
@keyframes com-in{
  from{opacity:0;transform:scale(.35)}
  to  {opacity:1;transform:none}
}
@keyframes fade-in{from{opacity:0}to{opacity:1}}

/* light sweep that travels left -> right across the finished logo */
@keyframes glow{
  0%,100%{filter:brightness(1) drop-shadow(0 0 0 rgba(255,255,255,0))}
  50%    {filter:brightness(1.5) drop-shadow(0 0 6px rgba(255,255,255,.55))}
}

@keyframes glow-white{
  0%,100%{filter:brightness(0) invert(1) drop-shadow(0 0 0 rgba(255,255,255,0))}
  50%    {filter:brightness(0) invert(1) drop-shadow(0 0 10px rgba(255,255,255,.95))}
}

@media (prefers-reduced-motion:reduce){
  .tcs-logo.is-playing .tl-piece{animation:none!important}
}

/* ---- demo page layout ---- */
.hero-dark{background:radial-gradient(circle at 50% 0,#1c2433 0,#0b0f17 70%);color:#fff}
.hero-logo{max-width:640px;margin-inline:auto}
.nav-logo{width:170px}
.showcase-logo{max-width:560px;margin-inline:auto}

/* ---- piece positions (generated from the logo image) ---- */
.p-icon-1{left:40.1820%;top:6.0847%;width:12.9310%;height:49.7354%;--d:0.15s;--g:2.96s}
.p-icon-2{left:40.1820%;top:20.8995%;width:9.0996%;height:62.4339%;--d:0.29s;--g:2.94s}
.p-icon-3{left:43.2471%;top:21.4286%;width:7.8544%;height:47.6190%;--d:0.43s;--g:2.97s}
.p-tcs-1{left:50.2395%;top:42.0635%;width:10.7280%;height:41.2698%;--d:0.65s;--g:3.07s}
.p-tcs-2{left:56.4655%;top:42.0635%;width:11.3985%;height:41.2698%;--d:0.76s;--g:3.15s}
.p-tcs-3{left:63.2663%;top:42.0635%;width:10.9195%;height:41.2698%;--d:0.87s;--g:3.22s}
.p-tr-1{left:1.3889%;top:43.1217%;width:6.3218%;height:40.7407%;--d:0.95s;--g:2.45s}
.p-tr-2{left:8.2854%;top:43.1217%;width:6.5134%;height:40.7407%;--d:1.02s;--g:2.54s}
.p-tr-3{left:14.7989%;top:43.1217%;width:7.2797%;height:40.7407%;--d:1.09s;--g:2.62s}
.p-tr-4{left:21.3123%;top:43.1217%;width:6.8008%;height:40.7407%;--d:1.16s;--g:2.70s}
.p-tr-5{left:28.4004%;top:43.1217%;width:5.9387%;height:40.7407%;--d:1.23s;--g:2.78s}
.p-tr-6{left:35.2011%;top:43.1217%;width:5.3640%;height:40.7407%;--d:1.30s;--g:2.85s}
.p-com-c{left:77.4425%;top:53.1746%;width:5.4598%;height:31.2169%;--d:1.58s;--g:3.36s}
.p-com-o{left:83.3812%;top:53.1746%;width:5.6513%;height:31.2169%;--d:1.66s;--g:3.43s}
.p-com-m{left:89.6073%;top:53.1746%;width:8.3333%;height:30.6878%;--d:1.74s;--g:3.53s}
.p-dot{left:74.5690%;top:72.2222%;width:2.1073%;height:11.6402%;--d:1.50s;--g:3.31s}
.p-reg{left:73.2759%;top:30.9524%;width:1.8678%;height:10.0529%;--d:1.95s;--g:3.29s}