/* ttn-gate.css -- gate-in Konstatum in bara TTN. Fisier SEPARAT, ca main.css sa ramana neatins.
   Se incarca doar pe paginile care NU sunt Konstatum. v1.0 -- 2026-07-26
   Forma: piatra sparta, materie calda, muchii innegrite, litere sapate cu aur.
   Sta IN elementul nav, inaintea meniului -> aliniat de meniu, nu de logo. */

.ttn-gate{
  position:relative;display:inline-flex;flex-direction:column;justify-content:center;
  padding:.55rem 1.1rem .58rem .95rem;text-decoration:none;overflow:hidden;color:#2A2114;
  margin-right:.6rem;
  background:
    linear-gradient(74deg,  transparent 21.2%, rgba(88,58,18,.30) 21.4%, rgba(88,58,18,.30) 21.7%, transparent 21.9%),
    linear-gradient(61deg,  transparent 47.8%, rgba(74,48,14,.22) 48.0%, rgba(74,48,14,.22) 48.2%, transparent 48.4%),
    linear-gradient(83deg,  transparent 68.4%, rgba(96,64,22,.26) 68.6%, rgba(96,64,22,.26) 69.1%, transparent 69.3%),
    linear-gradient(-18deg, transparent 33.5%, rgba(255,250,232,.48) 33.7%, rgba(255,250,232,.48) 34.1%, transparent 34.3%),
    linear-gradient(-31deg, transparent 72.1%, rgba(255,248,226,.38) 72.3%, rgba(255,248,226,.38) 72.5%, transparent 72.7%),
    linear-gradient(66deg,  transparent 87.6%, rgba(80,52,16,.20) 87.8%, rgba(80,52,16,.20) 88.0%, transparent 88.2%),
    linear-gradient(-7deg,  transparent 56.3%, rgba(102,70,26,.17) 56.5%, rgba(102,70,26,.17) 56.8%, transparent 57.0%),
    linear-gradient(48deg,  transparent 12.7%, rgba(255,250,230,.32) 12.9%, rgba(255,250,230,.32) 13.1%, transparent 13.3%),
    linear-gradient(79deg,  transparent 94.1%, rgba(70,44,12,.24) 94.3%, rgba(70,44,12,.24) 94.6%, transparent 94.8%),
    radial-gradient(120% 150% at 45% 36%, rgba(255,250,232,.92) 0%, rgba(255,250,232,0) 46%),
    radial-gradient(104% 124% at 50% 50%, rgba(26,15,3,0) 28%, rgba(26,15,3,.38) 68%, rgba(14,8,1,.88) 100%),
    linear-gradient(160deg,#F1E4C4 0%,#E7D6AE 45%,#D8C49A 100%);
  background-repeat:no-repeat;background-color:#E7D6AE;
  box-shadow:
    inset 0 0 15px rgba(20,11,2,.8),
    inset 0 0 42px rgba(38,22,5,.42),
    inset 0 1px 0 rgba(255,247,222,.45),
    3px 5px 0 rgba(0,0,0,.55),
    0 0 22px rgba(201,162,39,.16);
  clip-path:polygon(
    0 8%, 3% 2%, 9% 0, 22% 3%, 41% 0, 63% 2.5%, 82% 0, 94% 4%, 100% 1%,
    98.5% 22%, 100% 47%, 98% 71%, 100% 92%, 93% 100%, 74% 96%, 52% 100%,
    31% 97%, 14% 100%, 5% 95%, 1.5% 74%, 0 52%, 2% 30%
  );
  transform:rotate(-3.4deg) translateY(3px);transform-origin:20% 50%;
  animation:ttngate-breathe 11s ease-in-out infinite;
  transition:transform .32s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease;
}
.ttn-gate .g-name{
  font-family:"EB Garamond",Georgia,serif;font-weight:600;font-size:14.5px;line-height:1.15;
  text-transform:uppercase;letter-spacing:.2em;position:relative;z-index:2;color:#7E5F1B;
  text-shadow:0 -1px 1px rgba(52,32,8,.62), 0 1px 0 rgba(255,248,225,.75);
}
.ttn-gate .g-name::before{content:"\00B7 ";opacity:.45}
.ttn-gate .g-name::after{content:" \00B7";opacity:.45}
.ttn-gate .g-sub{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:8.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#6B4A2F;margin-top:.3rem;position:relative;z-index:2;
  text-shadow:0 1px 0 rgba(255,248,225,.55);
}
/* reflex specular pe piatra lustruita */
.ttn-gate::before{
  content:"";position:absolute;top:0;left:-60%;width:42%;height:100%;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,0) 0%,rgba(255,250,228,.66) 50%,rgba(255,255,255,0) 100%);
  animation:ttngate-sweep 8.5s ease-in-out infinite;
}
/* scanare aurie: 4 treceri complete intr-un ciclu de 26s, la intervale INEGALE
   (6.0 / 2.1 / 9.6 / 8.3s). Aur neutru: rosu/verde ar citi pass/fail. */
.ttn-gate::after{
  content:"";position:absolute;top:-10%;height:120%;width:2px;z-index:4;pointer-events:none;
  background:linear-gradient(180deg,rgba(201,162,39,0) 0%,rgba(232,196,92,.95) 18%,
    rgba(255,238,170,1) 50%,rgba(232,196,92,.95) 82%,rgba(201,162,39,0) 100%);
  box-shadow:0 0 10px rgba(232,196,92,.75), 0 0 22px rgba(201,162,39,.4);
  left:-6%;opacity:0;animation:ttngate-scan 26s linear infinite;
}
@keyframes ttngate-sweep{0%,72%{left:-60%} 92%,100%{left:130%}}
@keyframes ttngate-breathe{
  0%,100%{transform:rotate(-3.4deg) translateY(3px)}
  50%    {transform:rotate(-3.1deg) translateY(1.5px)}
}
@keyframes ttngate-scan{
  0%,6.9%{left:-6%;opacity:0}      7.0%{left:-6%;opacity:1}   11.2%{left:104%;opacity:1}
  11.3%,29.9%{left:104%;opacity:0} 30.0%{left:-6%;opacity:1}  34.2%{left:104%;opacity:1}
  34.3%,37.9%{left:104%;opacity:0} 38.0%{left:-6%;opacity:1}  42.2%{left:104%;opacity:1}
  42.3%,74.9%{left:104%;opacity:0} 75.0%{left:-6%;opacity:1}  79.2%{left:104%;opacity:1}
  79.3%,100%{left:104%;opacity:0}
}
.ttn-gate:hover{
  transform:rotate(0deg) translateY(-2px);animation-play-state:paused;
  box-shadow:
    inset 0 0 15px rgba(20,11,2,.7), inset 0 0 42px rgba(38,22,5,.35),
    inset 0 1px 0 rgba(255,247,222,.55), 4px 6px 0 rgba(0,0,0,.6), 0 0 30px rgba(201,162,39,.42);
}
@media(prefers-reduced-motion:reduce){.ttn-gate,.ttn-gate::before,.ttn-gate::after{animation:none}.ttn-gate::after{opacity:0}}
@media(max-width:900px){.ttn-gate{display:none}}