/* Os cinco recortes do SVG atravessam o mesmo espaço que ocuparão as faixas. */
.interaction-zone .topbar{left:0;right:0;top:16px;justify-content:center}
.interaction-zone .topbar .wordmark{font-size:clamp(22px,2vw,28px)}
.close-explore{display:none}
.logo-trigger{--lane-step:min(240px,calc((100vw - 20px)/5));transition:opacity .22s ease,transform .6s ease}
.logo-piece{position:absolute;inset:0;display:block;transform:translateX(0) scaleY(1);transition:transform 1.35s cubic-bezier(.2,.73,.13,1),opacity .38s ease .1s;will-change:transform,opacity}
.logo-piece img{display:block;width:100%;height:100%;filter:drop-shadow(0 0 10px rgba(242,237,228,.1))}
.logo-piece:nth-child(1) img{clip-path:inset(0 79.5% 0 0)}
.logo-piece:nth-child(2) img{clip-path:inset(0 59.5% 0 19.5%)}
.logo-piece:nth-child(3) img{clip-path:inset(0 39.5% 0 39.5%)}
.logo-piece:nth-child(4) img{clip-path:inset(0 19.5% 0 59.5%)}
.logo-piece:nth-child(5) img{clip-path:inset(0 0 0 79.5%)}
.logo-piece::after{content:"";position:absolute;top:-5%;bottom:-5%;left:calc(50% - 1px);width:2px;background:linear-gradient(transparent,var(--accent) 32%,#f2ede4 50%,var(--accent) 68%,transparent);opacity:0;transform:scaleY(.15);transition:transform 1.12s cubic-bezier(.17,.7,.15,1) .15s,opacity .35s .25s;pointer-events:none}
.is-open .logo-trigger{opacity:1;transform:none;pointer-events:none}
.is-open .logo-piece{transform:translateX(calc(var(--index) * var(--lane-step))) scaleY(1.7);opacity:0;transition:transform 1.35s cubic-bezier(.2,.73,.13,1),opacity .42s ease 1.02s}
.is-open .logo-piece::after{opacity:.65;transform:scaleY(1);transition:transform 1.12s cubic-bezier(.17,.7,.15,1) .15s,opacity .38s ease .75s}

/* O símbolo se desdobra em cinco faixas que formam a arquitetura da navegação. */
.structure{
  position:absolute;
  inset:110px 0 92px;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  border-block:1px solid rgba(236,237,234,.24);
  background:linear-gradient(180deg,rgba(20,24,32,.38),rgba(11,14,21,.66));
  opacity:0;
  transform:scaleX(.08) scaleY(.56);
  transform-origin:center;
  pointer-events:none;
  transition:transform 1.4s cubic-bezier(.2,.73,.13,1),opacity .6s ease .25s;
}
.is-open .structure{opacity:1;transform:none;pointer-events:auto;transition:transform 1.4s cubic-bezier(.2,.73,.13,1),opacity .7s ease .24s}
.structure::before,.structure::after{content:"";position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#f2ede4 15%,#f2ede4 85%,transparent);opacity:.15;pointer-events:none}
.structure::before{top:50%}.structure::after{bottom:17%}
.structure-linework{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.structure-linework path{fill:none;stroke:#e5e3da;stroke-width:1.2;opacity:.23;vector-effect:non-scaling-stroke;stroke-dasharray:1800;stroke-dashoffset:1800;transition:stroke-dashoffset 1.35s cubic-bezier(.22,.7,.2,1) .15s}
.structure-linework path:nth-child(2){opacity:.13;transition-delay:.28s}
.structure-linework path:nth-child(3){opacity:.09;transition-delay:.4s}
.structure-linework circle{fill:#f2ede4;opacity:0;transition:opacity .3s .9s}
.is-open .structure-linework path{stroke-dashoffset:0}
.is-open .structure-linework circle{opacity:.58}
.structure-lane{position:relative;z-index:1;min-width:0;min-height:0;border:0;border-left:1px solid rgba(236,237,234,.19);border-radius:0;background:transparent;color:#f2ede4;text-align:left;padding:26px 22px;overflow:hidden;opacity:0;transform:translateY(18px);transition:opacity .5s ease calc(.68s + var(--delay)),transform .65s cubic-bezier(.22,.8,.2,1) calc(.68s + var(--delay)),background .35s,box-shadow .35s}
.structure-lane:last-child{border-right:1px solid rgba(236,237,234,.19)}
.is-open .structure-lane{opacity:1;transform:none}
.structure-lane::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s;opacity:.85}
.structure-lane::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--accent) 17%,transparent),transparent 65%);opacity:0;transition:opacity .4s;pointer-events:none}
.structure-lane:hover,.structure-lane:focus-visible{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 10%,#141924),#0d1119 85%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent)}
.structure-lane:hover::before,.structure-lane:focus-visible::before{transform:scaleX(1)}
.structure-lane:hover::after,.structure-lane:focus-visible::after{opacity:1}
.lane-index,.lane-content,.lane-arrow{position:relative;z-index:2}
.lane-index{display:block;color:#c2c5c7;font:600 11px 'Space Grotesk',sans-serif;letter-spacing:.14em}
.lane-index i{font-style:normal;color:var(--accent);margin:0 3px}
.lane-content{position:absolute;left:22px;right:18px;bottom:32px;display:flex;flex-direction:column;align-items:flex-start;gap:11px;transition:transform .35s}
.lane-content small{color:var(--accent);font-size:9px;font-weight:700;letter-spacing:.15em;line-height:1.4}
.lane-content strong{font:500 clamp(23px,2.2vw,34px)/.99 'Space Grotesk',sans-serif;letter-spacing:-.075em}
.lane-content em{font-style:normal;font-size:12px;line-height:1.45;color:#a5a9ad;max-width:195px;min-height:36px}
.structure-lane:hover .lane-content,.structure-lane:focus-visible .lane-content{transform:translateY(-9px)}
.lane-arrow{position:absolute;top:21px;right:20px;color:var(--accent);font-size:20px;opacity:.68;transition:opacity .3s,transform .3s}
.structure-lane:hover .lane-arrow,.structure-lane:focus-visible .lane-arrow{opacity:1;transform:translate(3px,-3px)}
.structure-lane:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}

@media(max-width:900px){
  .interaction-zone .topbar{left:0;right:0;top:22px}
  .interaction-zone .topbar .wordmark{font-size:21px}
  .close-explore{display:block;position:absolute;right:14px;top:-3px;padding:2px 8px;color:#f2ede4}
  .close-explore span{margin:0;font-size:25px}
  .is-open .logo-piece{transform:translateY(calc(var(--index) * 106px)) scale(.7)}
  .is-open .portal{place-items:center}
  .structure{inset:118px 6px 105px;display:flex;flex-direction:column;transform:scaleX(.18) scaleY(.22)}
  .structure::before,.structure::after,.structure-linework{display:none}
  .structure-lane{flex:1;width:100%;border-left:0;border-bottom:1px solid rgba(236,237,234,.21);padding:0 16px}
  .structure-lane:last-child{border-right:0;border-bottom:0}
  .structure-lane::before{top:0;bottom:0;left:0;width:3px;height:auto;transform:scaleY(0);transform-origin:top}
  .structure-lane:hover::before,.structure-lane:focus-visible::before{transform:scaleY(1)}
  .lane-index{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:10px}
  .lane-content{left:80px;right:43px;top:50%;bottom:auto;transform:translateY(-50%)!important;gap:3px}
  .lane-content small{font-size:8px}
  .lane-content strong{font-size:clamp(23px,6vw,30px);line-height:1}
  .lane-content strong br{display:none}
  .lane-content em{display:none}
  .lane-arrow{top:50%;right:16px;transform:translateY(-50%)}
  .structure-lane:hover .lane-arrow,.structure-lane:focus-visible .lane-arrow{transform:translate(3px,calc(-50% - 3px))}
}
@media(max-height:670px) and (min-width:901px){.structure{inset:84px 0 66px}.lane-content em{display:none}.lane-content{bottom:26px}}

/* Paleta da página oficial: carvão quente, marfim, cobre e tons terrosos. */
:root{
  --brand-bg:#221e1b;
  --brand-card:#2e2822;
  --brand-border:#5c5348;
  --brand-ivory:#f2ede4;
  --brand-muted:#b4aa9a;
  --brand-copper:#c97a3d;
  --brand-copper-light:#e0975b;
  color:var(--brand-ivory);
  background:var(--brand-bg);
}
:focus-visible{outline-color:var(--brand-copper-light)}
.skip-link{background:var(--brand-ivory);color:var(--brand-bg)}
.experience{background:radial-gradient(circle at 50% 47%,#302a23 0%,var(--brand-bg) 46%,#1b1815 100%)}
.atmosphere span:nth-child(1){background:var(--brand-copper)}
.atmosphere span:nth-child(2){background:#5c5348}
.atmosphere span:nth-child(3){background:var(--brand-copper-light)}
.logo-trigger{filter:drop-shadow(0 0 28px rgba(201,122,61,.12))}
.logo-trigger::after{border-color:rgba(201,122,61,.3)}
.logo-piece img{filter:drop-shadow(0 0 10px rgba(242,237,228,.12))}
.logo-piece::after{background:linear-gradient(transparent,var(--brand-copper) 32%,var(--brand-ivory) 50%,var(--brand-copper) 68%,transparent)}
.structure{border-color:rgba(180,170,154,.34);background:linear-gradient(180deg,rgba(46,40,34,.53),rgba(27,24,21,.88))}
.structure::before,.structure::after{background:linear-gradient(90deg,transparent,var(--brand-ivory) 15%,var(--brand-ivory) 85%,transparent)}
.structure-linework path{stroke:var(--brand-muted)}
.structure-linework circle{fill:var(--brand-copper-light)}
.structure-lane{border-color:rgba(180,170,154,.28);color:var(--brand-ivory)}
.structure-lane:last-child{border-color:rgba(180,170,154,.28)}
.structure-lane:hover,.structure-lane:focus-visible{background:linear-gradient(180deg,rgba(201,122,61,.19),rgba(46,40,34,.86) 85%);box-shadow:inset 0 0 0 1px rgba(201,122,61,.48)}
.lane-index{color:var(--brand-muted)}
.lane-content small,.lane-arrow{color:var(--brand-copper-light)}
.lane-content em{color:var(--brand-muted)}
.close-explore{color:var(--brand-ivory)}
.close-explore:hover,.panel-back:hover{color:var(--brand-copper-light)}
.area-panel{background:var(--brand-bg)}
.panel-top,.panel-footer{border-color:rgba(180,170,154,.28)}
.panel-back{color:var(--brand-muted)}
.panel-description,.panel-footer{color:var(--brand-muted)}
.panel-tags span{border-color:var(--brand-border);color:var(--brand-ivory)}
.panel-visual{border-color:rgba(201,122,61,.4);background:radial-gradient(circle at 50% 40%,rgba(201,122,61,.19),var(--brand-card) 65%)}
.visual-chip{border-color:var(--brand-border);background:var(--brand-card);color:var(--brand-ivory)}
@media(max-width:900px){
  .structure-lane{border-color:rgba(180,170,154,.28)}
  .structure-lane:last-child{border-bottom:0}
}

/* Cada faixa da navegação nasce de um quinto real do símbolo e continua no DOM. */
.interaction-zone{--logo-size:clamp(210px,30vw,330px);--morph-time:1.45s;--logo-reveal:1.2s}
.logo-trigger{width:var(--logo-size);background:transparent;z-index:5;transform:none;transition:opacity .01s linear var(--logo-reveal)}
.logo-trigger img{display:block;width:100%;height:100%}
.is-open .logo-trigger{opacity:0;pointer-events:none;transform:none;transition:opacity .01s linear 0s}
.structure,.is-open .structure{
  inset:0;
  display:block;
  border:0;
  background:none;
  opacity:1;
  transform:none;
  transition:none;
}
.structure{pointer-events:none}
.is-open .structure{pointer-events:auto}
.structure::before,.structure::after{display:none}
.structure-linework{
  top:110px;
  height:calc(100% - 202px);
  opacity:0;
  transition:opacity .22s ease;
}
.is-open .structure-linework{opacity:1;transition:opacity .5s ease 1s}
.structure-lane,.is-open .structure-lane{
  position:absolute;
  z-index:1;
  top:calc(50% - var(--logo-size)/2);
  left:calc(50% - var(--logo-size)/2 + var(--slice)*var(--logo-size)/5);
  width:calc(var(--logo-size)/5);
  height:var(--logo-size);
  padding:0;
  border:1px solid transparent;
  background:transparent;
  opacity:1;
  transform:none;
  overflow:hidden;
  pointer-events:none;
  transition:top var(--morph-time) cubic-bezier(.22,.74,.16,1),
    left var(--morph-time) cubic-bezier(.22,.74,.16,1),
    width var(--morph-time) cubic-bezier(.22,.74,.16,1),
    height var(--morph-time) cubic-bezier(.22,.74,.16,1),
    background-color .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.structure-lane:last-child{border-color:transparent}
.is-open .structure-lane{
  top:110px;
  left:calc(var(--slice)*20%);
  width:20%;
  height:calc(100% - 202px);
  border-color:rgba(180,170,154,.3);
  border-right:0;
  background-color:rgba(34,30,27,.58);
  pointer-events:auto;
  transition:top var(--morph-time) cubic-bezier(.22,.74,.16,1),
    left var(--morph-time) cubic-bezier(.22,.74,.16,1),
    width var(--morph-time) cubic-bezier(.22,.74,.16,1),
    height var(--morph-time) cubic-bezier(.22,.74,.16,1),
    background-color .4s ease .85s,border-color .4s ease .85s,box-shadow .25s ease;
}
.is-open .structure-lane:last-child{border-right:1px solid rgba(180,170,154,.3)}
.is-open .structure-lane:hover,.is-open .structure-lane:focus-visible{background-color:rgba(75,49,32,.72)}
.lane-shard{position:absolute;inset:0;z-index:0;pointer-events:none;visibility:hidden;transition:visibility 0s linear var(--logo-reveal)}
.is-open .lane-shard{visibility:visible;transition-delay:0s}
.lane-shard img{
  position:absolute;
  width:var(--logo-size);
  height:var(--logo-size);
  max-width:none;
  top:0;
  left:calc(-1*var(--slice)*var(--logo-size)/5);
  display:block;
  clip-path:inset(0 calc((4 - var(--slice))*20%) 0 calc(var(--slice)*20%));
  filter:drop-shadow(0 0 18px rgba(242,237,228,.18));
  transform:none;
  opacity:1;
  transition:top var(--morph-time) cubic-bezier(.22,.74,.16,1),
    left var(--morph-time) cubic-bezier(.22,.74,.16,1),
    transform var(--morph-time) cubic-bezier(.22,.74,.16,1),
    opacity var(--morph-time) ease,filter var(--morph-time) ease;
}
.is-open .lane-shard img{
  top:calc(37% - var(--logo-size)/2);
  left:calc(50% - (var(--slice) + .5)*var(--logo-size)/5);
  transform:scale(1.1);
  filter:brightness(0) saturate(100%) invert(53%) sepia(39%) saturate(852%) hue-rotate(342deg) brightness(94%) contrast(90%);
  opacity:.32;
}
.lane-index,.lane-content,.lane-arrow{opacity:0;transition:opacity .2s ease,transform .35s ease}
.is-open .lane-index,.is-open .lane-content,.is-open .lane-arrow{opacity:1;transition:opacity .35s ease 1.08s,transform .35s ease}
.is-open .structure-lane::before{transform:scaleX(1);opacity:.38;transition-delay:1.05s}
.is-open .structure-lane:hover::before,.is-open .structure-lane:focus-visible::before{opacity:1}
@media(max-width:900px){
  .interaction-zone{--logo-size:230px}
  .structure-linework{display:none}
  .is-open .structure-lane{
    top:calc(118px + var(--slice)*(100% - 223px)/5);
    left:6px;
    width:calc(100% - 12px);
    height:calc((100% - 223px)/5);
    border:0;
    border-top:1px solid rgba(180,170,154,.3);
  }
  .is-open .structure-lane:last-child{border-right:0;border-bottom:1px solid rgba(180,170,154,.3)}
  .is-open .lane-shard img{top:calc(50% - var(--logo-size)/2);left:calc(50% - (var(--slice) + .5)*var(--logo-size)/5);transform:scale(.65);opacity:.13}
  .is-open .structure-lane::before{transform:scaleY(1)}
}